• KJ Ha

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);

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++) {
  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.

Recent Posts

See All

Nature of Code: 6th Assignment

Link to code: https://editor.p5js.org/kh1785/sketches/tT1Cj0ZRp9 For this week's assignment, I've created a sketch inspired by one of the video examples, the Game of Life. A lot was taken directly fro

Nature of Code: 5th Assignment

Code: https://editor.p5js.org/kh1785/sketches/_YHzwobV8 For this week's assignment, I've created a simple game using autonomous agents. The rules of the game are simple. At first, five lives are given

© 2020 Kyungjoo Ha. All Rights Reserved