Assignment 3: Dynamic Blend

(Click on screen)

For this assignment, I wanted to create a simple yet appealing and interactive artwork. When the user clicks on the canvas, a few balls of random color appear. These balls move independently, colliding and combining with other balls to form a new ball with the additive color of the two original balls, gradually filling the canvas with a visually striking pattern. I wanted to experiment with the Additive color theory and show how simple colors can create unexpected results.

I created a BouncingBall Class so that each ball is an object with the same properties. The part of the code I am most proud of is initializing the speed and direction for the ball using random and the ternary operator.

constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.radius = 20;
    //vaying speed and direction
    this.speedX = random(2, 4) * (random() > 0.5 ? 1 : -1); //50% chance of true and false; If the result is true, assigns 1, otherwise, assigns -1
    this.speedY = random(2, 4) * (random() > 0.5 ? 1 : -1);
  }

Initially, only one ball was formed using each click, but to make it more interesting, I decided to create balls around the click location in a triangular formation. I used polar coordinates for this, similar to my previous assignment.

function mouseClicked() {
  let randomColor = color(random(255), random(255), random(255));
  //creating multiple balls around location
  let formationRadius = 60; //distance from click
  for (let angle = 0; angle < 360; angle += 120) { //3 balls at equal angles
    //polar coordinates for position
    let x = mouseX + cos(radians(angle)) * formationRadius; 
    let y = mouseY + sin(radians(angle)) * formationRadius;
    let backgroundBall = new BouncingBall(x, y, randomColor);
    ball_array.push(backgroundBall);
  }
}

The only technical challenge I initially faced was making sure the two balls that collide create a new ball with their combined color and that the original balls disappear. The other challenge was to make it look aesthetically pleasing. This is why I decided to add the blurred trails for the balls.

 

I also wanted to highlight that final result was inspired from my initial idea: red and blue balls combine to make a growing purple ball.

(click on screen)
This idea was inspired by the same anime character in my portrait from the first assignment.

Overall, I am satisfied with my final output. It might not be as unique as I wanted it to be since it was also inspired by previous assignments we did in class. However, it looks visually pleasing and was fun to make. I would like to improve the artwork by creating a pattern in the background using the combined colors.