var COLOR_UPDATE_SPEED = 12.0;
createCanvas(windowWidth, windowHeight);
for (var i = 0; i < NUM_BALLS; ++i) {
balls[i].targetColor = color(random(255), random(255), random(255));
var allDisappeared = true;
for (var i = 0 ; i < balls.length; ++i) {
var x1 = userBall.x - userBall.diameter;
var x2 = userBall.x + userBall.diameter;
var y1 = userBall.y - userBall.diameter;
var y2 = userBall.y + userBall.diameter;
if (x1 < balls[i].x && x2 > balls[i].x
&& y1 < balls[i].y && y2 > balls[i].y) {
userBall.setDiameter(userBall.diameter + balls[i].diameter);
userBall.addColor(balls[i].color);
print("all disappeared");
function mouseClicked() {
userBall.setPos(mouseX, mouseY);
userBall.setDiameter(userBall.diameter + 5);
function touchStarted() {
userBall.setPos(mouseX, mouseY);
userBall.setDiameter(userBall.diameter + 5);
} else if (key === 'b') {
userBall.addColor(color(0,255,10));
this.diameter = random(20, 35);
this.color = color(155,55,25, 100);
this.targetDiameter = this.diameter;
this.targetSpeed = this.speed;
this.targetColor = this.color;
this.setPos = function(xpos, ypos) {
this.setDiameter = function(diameter) {
this.targetDiameter = diameter;
this.addColor = function(color) {
this.targetColor = color;
this.update = function() {
this.x += (this.targetX - this.x) / UPDATE_SPEED;
this.y += (this.targetY - this.y) / UPDATE_SPEED;
this.diameter += (this.targetDiameter - this.diameter) / UPDATE_SPEED;
var r = red(this.color) + (red(this.targetColor) - red(this.color)) / COLOR_UPDATE_SPEED;
var g = green(this.color) + (green(this.targetColor) - green(this.color)) / COLOR_UPDATE_SPEED;
var b = blue(this.color) + (blue(this.targetColor) - blue(this.color)) / COLOR_UPDATE_SPEED;
this.color = color(r,g,b,100);
this.x += random(-this.speed, this.speed);
this.y += random(-this.speed, this.speed);
this.display = function() {
ellipse(this.x, this.y, this.diameter, this.diameter);
this.disappear = function () {