Mid-Semester Exercise

Link to code: https://editor.p5js.org/kh1785/sketches/6ADFot4NQ

Live sketch:

For the mid-semester project, I’ve decided to further develop the week 3 assignment, a p5 sketch simulating a helium-filled balloon.

In the beginning, there are 36 balloons (6 * 6) appear on the screen. Each balloon is an object of the balloon class with an independent moving pattern. The x position, y position, color, and force are used as constructors of the balloon class as shown below.

constructor(x, y, c, force) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.r = 65;
    this.c = c;
    this.force = force;
  }
 

The color of each ballon will be selected randomly from the colors array.

for (var i = interval; i < width - interval; i += 90) {
    for (var j = interval; j < height - interval; j += 90) {
      Balloon = new Balloons(i, j, random(colors), 0);
      balloons.push(Balloon);
    }
  }
 

At first, the force applied to the balloon is 0. The balloon must be clicked before rising with the applied helium force. When all the balloons fly away to the top, the hidden word is revealed.

// colors array
// ["LightSalmon", "Crimson", "Coral", "OrangeRed", "DarkOrange", "OliveDrab", "ForestGreen", "Lime", "LightSeaGreen", "Teal", "Cyan", "DeepSkyBlue", "Gold", "Yellow", "Violet", "Fuchsia", "DarkViolet", "Navy"]

function mousePressed() {
  for (var i = 0; i < balloons.length; i++) {
    if (balloons[i].contains(mouseX, mouseY)) {
      balloons[i].force = helium;
    }
  }
}
  

The word will also be chosen randomly from the wordlist array. Those words are just random words that I came up with without any personal connection.

// wordList array
// ["nature of code", "370 jay street", "the joy of cooking", "Appalachian Mountains", "hello stranger"]

var result = word.toUpperCase().split("");
var wlen = result.length;
for (var k = 0; k < result.length; k++) {
  fill(150);
  textSize(32);
  if (k < 6) {
    text(result[k], 60 + k * 90, 85 * 3);
  } else if (k >= 6) {
    text(result[k], 60 + k % 6 * 90, 87 * (Math.floor(k / 6) + 3));
  }
}
    

For the next step, I might consider the way to process collision between the objects. For now, nothing really happens when the objects collide each other; I’m actually satisfied with its minimal look but I definitely think that will be an exciting new challenge.