Week 10 Assignment

Concept:

While brainstorming, I randomly thought of glow-in-the-dark flubber bouncy balls that I used to play with, which look like this (link):

With the different physics elements we learned in class through Matter.js, I wanted to create these bouncy balls that were changing colors once they collided, as well as applying and changing forces on them so that they will float/bounce against each other when prompted by a certain action.

Process/Highlight:

Initially, I made the background dark and made the balls rather size in size with big spacing between them by setting the following values:

// Add some circles in a square configuration from the center
const numRows = 7;
const numCols = 7;
const circleSize = 20;
const spacing = 1;

  // Draw the circles
  fill(0, 150, 255);
  for (let circle of circles) {
    push();
    translate(circle.position.x, circle.position.y);

    if (circle.colorChanging) {
      fill(random(255), random(255), random(255));
      circle.colorChanging = false; // reset the flag
    }

    ellipse(0, 0, circle.circleRadius * 2); // this is the code i modified to adjust the circle size
    pop();
  }
}

At this point, my sketch looked something like this:

However, while playing around with the values for these code snippets, I accidentally produced a sketch that I was much more pleased with, which I achieved by increasing the size of the circles themselves while decreasing the spacing between them. I also increased the number of circles significantly, and I was pretty happy with the result because it gave an illusion that the “background” is not really a background but is actually composed of multiple circles that eventually crash to the ground; and in the process of them hitting each other, they shine in different colors, which reminded me of the spangles.

There are two elements that I’m particularly proud of, which are:

• The addition of force via click of a mouse, which was done in this code:

function mousePressed() {
  // Apply a random force to each circle when the mouse is pressed
  for (let circle of circles) {
    let force = Matter.Vector.create(random(-0.05, 0.05), random(-0.1, 0));
    Matter.Body.applyForce(circle, circle.position, force);
  }
}

• The result of collisions being that the circles will change colors, which can be shown below:

// Collision event handler function
function handleCollision(event) {
  let pairs = event.pairs;

  for (let i = 0; i < pairs.length; i++) {
    let pair = pairs[i];

    // Change color on collision
    if (pair.bodyA.label === "Circle" && pair.bodyB.label === "Circle") {
      pair.bodyA.colorChanging = true;
      pair.bodyB.colorChanging = true;
    }
  }
}

Final Sketch:

(Try clicking the canvas to apply additional force to the circles!)

Reflection:

I had so much fun exploring with Matter.js because it opened up many ways for me to try applying force, gravity, etc. compared to the methods that we’ve already learned so far in the class. Next time, I’d like to experiment with making a game where a specific circle tries to go through an obstacle course with different forces being applied to it!