Week #4- Text display

Your concept:

My project is an interactive genie lamp simulation where bubbles of smoke rise from the spout when the user holds the “R” key. As the bubbles grow, they form a speech bubble that displays a random percentage between 1-100%. This percentage acts as a playful response from the genie lamp, making the interaction fun and unpredictable. The bubbles disappear after a few seconds, allowing for continuous engagement

Code highlight:

I thought this part would be easy, just make bubbles appear when “R” is pressed. But at first, they wouldn’t stop generating, and itd fill the whole screen. The diagonal movement also felt off, no matter how I adjusted the values.

After some trial and error, I fixed it by limiting the bubbles and refining the movement formula. It was frustrating at first, but seeing the end result made it worth the effort:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function draw() {
background(190, 195, 255);
drawGenieBottle();
// starts generating when r key is pressed
if (keyIsPressed && key === "r" && !generating) {
generating = true; // starts generation process
}
//generate bubbles if within limit
if (generating && bubbles.length < maxBubbles) {
let x = width / 1.35 + bubbles.length * 5; // slight diagonal movement
let y = height - 100 - bubbles.length * 15;
bubbles.push({ x, y, size: 10 + bubbles.length * 3 });
}
function draw() { background(190, 195, 255); drawGenieBottle(); // starts generating when r key is pressed if (keyIsPressed && key === "r" && !generating) { generating = true; // starts generation process } //generate bubbles if within limit if (generating && bubbles.length < maxBubbles) { let x = width / 1.35 + bubbles.length * 5; // slight diagonal movement let y = height - 100 - bubbles.length * 15; bubbles.push({ x, y, size: 10 + bubbles.length * 3 }); }
function draw() {
  background(190, 195, 255);
  drawGenieBottle();

  // starts generating when r key is pressed
  if (keyIsPressed && key === "r" && !generating) {
    generating = true; // starts generation process
  }

  //generate bubbles if within limit
  if (generating && bubbles.length < maxBubbles) {
    let x = width / 1.35 + bubbles.length * 5; // slight diagonal movement
    let y = height - 100 - bubbles.length * 15;
    bubbles.push({ x, y, size: 10 + bubbles.length * 3 });
  }

 

Press “R” key:

Reflection and future improvement:

Overall, I am happy with how my project turned out, especially the animation of the bubbles and the random percentage display. However, I think it could be improved by adding glowing effects, sound, and different animations based on the percentage shown. Adding more visuals and variety would make the experience even more engaging.

Leave a Reply