Week 3: Make a Wish <3

I love Disney animated films, and one of my most favorite movies to date is Tangled. As someone who has the lantern festival at the top of her bucket list (hopefully I will get to cross it out someday), I wanted to recreate the festival + the scene from the movie in my artwork. Since these lanterns are used to make wishes, I wanted my sketch to give its users the ability to “send in” their wishes as well. Thus, there are 2 kinds of interactive elements in this sketch. First, users can click anywhere on the screen, and a new lantern will be generated there. I made these lanterns glow a little brighter than the ones that are generated randomly; it’s a subtle but important difference, I think. Second, there’s a text box where users can type in their wish, and when they press “Enter”, their wish appears on the canvas and floats up and fades away with the lanterns. I really like that part!

There were a couple of new things I learnt through this artwork. First was how to make a gradient background in p5js. I searched online and found this code, which I used as is, just by changing the colors as per my needs. The trick is to use the lerpColor() function which blends two colors to find a third color between them. Second was how to add a text box to take user input and then insert that text in the canvas. For this, I used the createInput() function. I couldn’t really find an aesthetically pleasing position within the canvas to place the text box, so I placed it right below the canvas.

This sketch took a lot of time for 2 reasons. I started by first making just a sketch of a lantern and the little glow orb around it, and after I got the look I wanted, I had to look at the coordinates and do the math so that I could generalize it for the Lantern class. I’m pretty bad with ratios, so this was definitely a challenge. I also ran into the problem of the glow becoming opaque, since the opacity level added up every time the draw() function was called, so the transparency would immediately go away. This was solved by generating the background again under the draw() function. The second reason was the castle. I had to figure out the coordinates for every single rectangle and triangle involved. In the initial idea, the hill on each side of the main castle had a different design, but in the interest of time, I took the design I made first on the left side and flipped it for the right side of the hill using what we learnt in Wednesday’s class. But I am still quite happy with how the silhouette turned out.

I’m particularly proud of the organization of the lantern code:

// spawn a new lantern
if (random(1) < 0.09) {
  // min size = 7 and max size = 15
  let size = random(7, 15);
  // don't want lanterns touching the edges
  let x = random(width * 0.1, width * 0.9); 
  // start at 2/3 the height of the canvas
  let y = height * 0.67;     
  // min lantern speed = 0.3 and max lantern speed = 1.5
  let speed = random(0.3, 1.5);
  // add lantern object to the array of lanterns
  lanterns.push(new Lantern(x, y, size, speed, 30));
}

for (let i = lanterns.length - 1; i >= 0; i--) {
  let lantern = lanterns[i];
  // Move the lantern upwards
  lantern.update();
  // Draw lantern
  lantern.draw();

  // If the lantern has floated off the top of the screen,
  // remove it from the array so it no longer gets updated/drawn
  if (lantern.isOffScreen()) {
    lanterns.splice(i, 1);
  }
}

Making a class for each Lantern object and an array to store the currently visible lanterns made the above part of the code very modular, organized, and easy to understand.

For future improvements, instead of keeping the text separately floating with the lanterns, I would want to transform the text into a lantern as it floats upwards, and make the lantern store the message so that if the user clicks on it while it’s floating it displays the wish stored in it. I would also want to spend more time on the silhouette and make the two sides of the hill different.