Sketch – Week 10

Concept

For this week’s assignment, I want to use the Air Friction code from matter.js. In the code, there are three shares that move down at different rates, simulating how different air friction affects different objects. From here, I wanted to create beach ball objects in different sizes, with the biggest beach ball falling at the slowest rate due to it’s larger surface area creating increased air friction, and with the same logic, the smallest ball falling the fastest.

Link to the matter.js code: https://brm.io/matter-js/demo/#airFriction

Code Snippet

function spawnBeachBalls() {
  let ballSizes = [20, 30, 40];
  let airFrictions = [0.001, 0.02, 0.05];

  for (let i = 0; i < ballSizes.length; i++) {
    let ball = Bodies.circle(random(50, width - 50), -30, ballSizes[i], { frictionAir: airFrictions[i] });
    beachBalls.push(ball);
    Composite.add(engine.world, ball);
  }

Embedded Sketch

Reflections

Visually, I like how my code turned out. However, I wanted the beach balls to interact with the person (the mouse) differently. When the person touches the beach ball, the beach ball should float upwards with the same velocity it is moving downwards. I tried to reverse the velocity in the code, but it did not work. As I am working with matter.js, I will have to spend more time figuring out how to get the beach balls to behave the way I want.