ICM – Week 2 Assignment

For this week I was tasked with animating a scenario where elements acted automatically and were interactive. I knew I wanted to animate a poppable balloon, however, my initial approach (which I, unfortunately, scrapped before I could document) left me more confused than inspired. After an insightful help session with my professor, I was put on the right track, and was able to animate the following work. Partly my issue stemmed from not knowing the material well enough, though I would say a larger issue I ran into was conceptualizing how best to plan and approach my design in individual steps.

Below is the code I wrote to generate my project.

let balloonColor;
let balloonPositionX;
let balloonPositionY;
let s = 'POP lol';
    
function setup() {
  createCanvas(400, 600);
  balloonColor = random(255)
  balloonPositionX = 200
  balloonPositionY = 400
}

function draw() {
  background(220);

  fill(balloonColor);
  ellipse(balloonPositionX, balloonPositionY, 100, 140);
  push();
  noFill();
  bezier(balloonPositionX, balloonPositionY + 70, balloonPositionX + 20, balloonPositionY + 100, balloonPositionX - 20, balloonPositionY + 150, balloonPositionX, balloonPositionY + 200);
  pop();
  fill(0);
  ellipse(mouseX, mouseY, 5, 5);
  line(mouseX, mouseY, mouseX + 20, mouseY - 10);
  balloonPositionX = balloonPositionX + random (-1,1);
  balloonPositionY = balloonPositionY - 4;
  if (balloonPositionY === 0) {
    balloonPositionY = 600;
    balloonColor = random(255);
  }
  if (mouseIsPressed) {
    text(s, balloonPositionX - 20, balloonPositionY, 80, 80)
    balloonPositionY = 400;
    balloonColor = random(255);
  }
}

Moving forward with this project, I’d like to be able to have the balloons generate in multi-color (non-monochrome). Furthermore, I would like to add a pop counter, and have multiple balloons generate, to turn this small project into a full game.