Lachlan's avatar@lachlanjc/eduCourses
Creative Computing

CC Week 9 Project

(Tap/click a bunch to use!)

This week I made a bizarre balloon simulator. Tap/click to release new “balloons,” which will rise up into the distance, bouncing against the walls until they fling themselves into oblivion.

I used Classes in JavaScript for each Balloon object, so they can each keep track of their coordinates (x & y), two-dimensional speed (dx & dy), size, & fill color. The collection lives in an array a user’s click appends to. Whenever they accidentally clump together, they shrink (see isNear & its usage inside draw). When they bounce off the walls, they speed up in the opposite direction, leading to their eventually-infinite speeds that can no longer be drawn.

const balloons = []
function setup() {
createCanvas(window.innerWidth, window.innerHeight)
noStroke()
balloons.push(new Balloon())
}
const newBalloon = () => balloons.push(new Balloon(mouseX, mouseY))
function mouseClicked() {
newBalloon()
}
function touchStarted() {
newBalloon()
}
function draw() {
background(245)
balloons.forEach((balloon, i) => {
balloon.move()
balloon.display()
balloons.forEach((otherBalloon, ii) => {
if (balloon.isNear(otherBalloon)) {
balloon.size = balloon.size * 0.995
}
})
})
}
class Balloon {
constructor(x, y) {
this.x = x
this.y = y
this.dx = random(-1, 2)
this.dy = random(-2, 1)
this.size = random(width / 16, width / 2)
this.fill = random(['gold', 'lime', 'cornflowerblue', 'papayawhip'])
}
isNear(obj) {
const distance = dist(this.x, this.y, obj.x, obj.y)
return distance < this.size / 2
}
move() {
this.x = this.x + this.dx
if (this.x >= width || this.x <= 0) {
this.dx = this.dx * -1.5
}
this.y = this.y + this.dy
if (this.y >= height || this.y <= 0) {
this.dy = this.dy * -1.5
}
}
display() {
fill(this.fill)
ellipse(this.x, this.y, this.size, this.size)
}
}

Edit on P5