Concept:

Inspired by Einstein’s cradle and the vintage clock’s pendulum, I’ve tried to create a collision system using Matter.js. It involves randomly generated pendula that collide with each other as they fall down. The user has the ability to move the pendula up and down, left and right, to create more collisions using mouse drag.

View post on imgur.com

View post on imgur.com

 

Sketch:

Code Walkthrough:

Repo: https://editor.p5js.org/bdr/sketches/vq6UC-qLu

Mouse constraints: Create a mouse constraint for the user to interact with each pendulum up and down, left and right.

// add mouse interaction
    let mouse = Mouse.create(canvas.elt)
    mouseConstraint = MouseConstraint.create(engine,{
      mouse: mouse
    })
    // add the mouse constraint to the world
    World.add(engine.world,mouseConstraint)
    // add the engine
    Matter.Runner.run(engine)

 

newPendulum() function: Generate a new pendulum body with a random position, create a constraint to suspend the pendulum from a fixed point at the top, and add the pendulum body and its constraint to the world.

function newpendulum() {
    let { Bodies, World, Constraint } = Matter
    let pendulum;
    // create new pendulum
    pendulum = Bodies.circle(random(width),random(height/5)-height/5, 40)
    pendulum.color = "#f9cca5"
    pendulums.push(pendulum)
    pendulum.s = 40
    // add line constraint
    let constraint = Constraint.create({
        pointA: { x: width/2, y: 52 },
        bodyB: pendulum,
        length: random(height/2,height*3/4),
        stiffness: 0.1,
    })
    // push to the world
    constraints.push(constraint)
    World.add(engine.world,[pendulum,constraint])
}

draw(): Generate a new pendulum every 20 frames, up to a maximum of 20 pendulums.

// new pendulum every 20 frames, up to a max of 20
if(frameCount % 20==0 && pendulums.length < 20){
     newpendulum(frameCount)
}

Possible Improvements:

• Add sound to the collisions to make it more realistic
• Implement a 3D sphere instead of a 2D circle

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!

Inspiration

In the realm of creative coding, chaos often leads to awe-inspiring discoveries. Inspired by the unpredictable beauty of chaotic systems, we embarked on a journey to explore and visualize chaos using the p5.js library, particularly its physics engine. This endeavor aimed not only to unravel the mysteries of chaos but also to appreciate its inherent allure in creative expression.

Challenge

These script tags import p5.js and its addon libraries from the CDN, allowing the code to access functions and utilities provided by these libraries to create interactive visual elements and simulate physics behaviors.

Inspiration

The allure of motion and interaction in coding has always captivated creative minds. Inspired by the elegance of pursuing entities within a simulated environment, I embarked on a journey to create a scenario where two ships engage in a chase, using the p5.js library to bring this dynamic scenario to life.

Description

In my canvas, I introduce two protagonists: the main ship and the chasing ship. The main ship, stationed at the center, exudes confidence with its robust speed capabilities. On the other hand, the chasing ship, eager and agile, strives to emulate the movements of the main ship.

The code orchestrates this chase by employing principles of physics and steering behaviors. The main ship moves freely while the chasing ship dynamically adjusts its course to follow the main ship’s trajectory. It utilizes the update() method, considering the position of the main ship, and then employs acceleration and steering vectors to mimic its movements.

Challenges

The core challenge was harmonizing the pursuit behavior of the chasing ship. Calculating the optimal steering force to smoothly follow the main ship without overshooting or lagging required precision and fine-tuning. Managing the ship’s speed and acceleration while ensuring a balanced chase added complexity to the code.

Additionally, synchronizing the rotation of the ships to simulate their heading accurately while maintaining a sleek and responsive visual representation demanded meticulous handling of angles and shapes.

The idea of comparing AI to “alien” is mindblowing. With the development of AI, it is no longer seen as a tool, but rather a creature that is better than humans in some aspects and even taking over humans’ self-given role as the center of evolution. A quote I really liked from the lecture is “AI has hacked the operating system of human intelligence.” In front of AI, we are more doubtful than ever about the most acknowledged “truth” that we have been believing for centuries. For example, what is the meaning of “think”? What is the meaning of “being creative”? I used to believe that even if AI can take over a lot of jobs, the one thing that it can’t replace should be creativity. However, the lecture and the performance of AIs today make us doubt: What is creativity anyway? Even humans themselves are not fully conscious of being creative. So, it is possible that AI is actually redefining the world from a very low-level perspective.

Jellyfish

Link: https://editor.p5js.org/Xiaozao/sketches/XI0c1CLwj

The physics and constraint properties of the matter.js library give us a lot of opportunities to construct an environment with unique properties such as gravity, air friction, force field, and complicated linked objects. Therefore, I wanted to create a jellyfish with flexible tentacles consisting of many nodes linked with constraints, and this jellyfish is floating in a nearly zero-gravity environment.

However, due to limited time, this is still a work in progress and I think it really has a lot of space to improve.

Coding:

The first challenge is how to create a tentacle that is a chain of nodes. I referred to the coding train’s tutorial to create a series of nodes and added a constraint between each pair of them.

for (let i = 0; i < 40; i += 1) {
      let r = 1;
      let new_node = new Circle(200+n+n*i, i, r);
      circles.push(new_node);

      if (i != 0) {
        let constraint_options = {
          bodyA: circles[circles.length - 1].body,
          bodyB: circles[circles.length - 2].body,
          length: 2 + r,
          stiffness: 0.1-i/400,
        };
        

        let constraint = Constraint.create(constraint_options);
        Composite.add(world, constraint);
      }
    }
    
    
    
  }

However, the nodes are moving too vibrantly and they are just bouncing back and forth on the whole canvas. I figured out several ways to slow them down:

/* methods to reduce crazy movements:
1. add r to constraint length, otherwise, the constraint will intend to shrink and cause too vibrant movement
2. decrease stiffness of the constraint
3. decrease gravity scale
4. increase the air friction*/

The second challenge is to connect the leading nodes of all the tentacles to a mutual point: the jellyfish’s head. I used a revolute constraint whose position is updated every frame to be mouse position. However, I don’t know how to “update”, so I could only create a new constraint every frame. I will figure this out in the future!

let base_options = {
    bodyA: circles[0].body,
    pointB: { x:mouseX+n, y:mouseY },
    length: 0,
    stiffness: 0.1,
  };
  base_constraint = Constraint.create(base_options);
  Composite.add(world, base_constraint);
    
  tentacles.push(circles);

At last, I set the gravity scale to zero.

Future improvements:

The first thing is to organize the code, I should create a Tentacle class to better organize the system of objects. Also, I can incorporate the steering force we learned earlier into the movement of the jellyfish head to create a more organic feeling.

INSPIRATION & CONCEPT

Matter matter, it all around us. What comes to my mind when I think of matter? My childhood games! Ever made those lego towers or stacked building blocks only to knock them off? Or played that pyramid game at the children’s fair where you throw a ball at a stacked pyramid of paper cups? Those were a few of my favourite games and and this assignment is inspired by that. As I was going through matter.js, I was feeling playful and I have tried to capture that in this assignment.

IMPLEMENTATION

I employed the matter.js library to make building blocks – the colorful boxes. They randomly fall at the start on a static platform to kind of mirror the platform in the pyramid game. There is a pendulum that I provided to simulate the action of throwing a ball – only you swing this! The idea is for users to build their own building blocks and destroy them using the swinging ball in this playful simulation (see video below). All the blocks and and the ball is controlled by the user using the mouse.

I added a floor and a right wall so that the blocks do not all spill off screen. The left and above wall are deliberately not there so the the pendulum has room to swing.

Without the boundaries sketch version:

FINAL SKETCH

Link to full code: https://editor.p5js.org/shreyagoel81601/sketches/KnOeUyDwg

FURTHER DEVELOPMENT

Matter.js is an amazing library and has a lot of potential. For this project in particular, it would be nice to experiment with different density of medium instead of the default one and see how the blocks and the ball interact then. If lets say I set the density to be that of glycerine 1.3 g/cc, then I might be harder for the blocks to even sit on each other. I could also go ahead try out different shapes. I deliberately kept squares here because of the building block ideas, but I could try stars, triangles and stuff too.

Concept:

I wanted to utilize this assignment for an exploration of physics principles, particularly focusing on forces and collision events inside a dynamic particle system. I started from the example 6.10: Collision Events by Daniel Shiffman, and added new elements and events.

The sketch:

Technical Implementation:

The sketch is implemented using the p5.js and Matter.js libraries. The p5.js library is responsible for the creation of the canvas, particle rendering, and overall animation loop, while Matter.js handles the physics engine, collision detection, and force application. The particles are randomly added to the system, and each of them undergoes a color change upon its first collision. Once the number of particles is divisible by 60,  explosive force is applied to randomly selected particles giving a more dynamic feel to the sketch by initiating a small explosion. Additionally, a boundary is added to the bottom, and the number of particles is constantly being updated by removing the particles that are pushed outside of the canvas.

Code:

The most interesting part of the code was the handleCollisions(events) function. It is triggered by collision events in the Matter.js physics engine. It iterates through the pairs of bodies involved in the collisions, extracting the corresponding particle instances associated with each body. This function handles color-changing behavior for both particles upon their initial collision. Additionally, it applies forces to each particle based on their velocities, amplifying the collision event.

// handling collisions between particles
function handleCollisions(event) {
  for (let pair of event.pairs) {
    let bodyA = pair.bodyA;
    let bodyB = pair.bodyB;

    let particleA = bodyA.plugin.particle;
    let particleB = bodyB.plugin.particle;

    if (particleA instanceof Particle && particleB instanceof Particle) {
      // changing colors upon first collision 
      particleA.change();
      particleB.change();

      // Applying a force when particles collide
      let forceMagnitude = 0.005;
      let forceA = Vector.mult(
        Vector.normalise(particleA.body.velocity),
        forceMagnitude
      );
      let forceB = Vector.mult(
        Vector.normalise(particleB.body.velocity),
        forceMagnitude
      );

      particleA.applyForce(forceA);
      particleB.applyForce(forceB);
    }
  }
}

Future Improvements:

For future improvements, it would be interesting to explore different shapes and how the collision events and forces would act on them. I like that the sketch is dynamic and develops over time, although perhaps there could be a more clear story behind it.

AI is rapidly changing the world around us, and many people are worried that it will lead to widespread job losses. I believe that AI is more likely to automate routine tasks and create new opportunities than it is to replace humans entirely, i.e. AI could create jobs in areas such as data science, machine learning, and LLM development.

Although Prof. Neil Leach compared these advancements to a second Copernicus moment, AI is still in progress and is far from reaching human intelligence or superintelligence given that its capabilities are limited. It still struggles with tasks that require common sense, and its problem-solving skills are not enough.

On the artistic side, it is unlikely that AI will completely replace architects in the foreseeable future. It could certainly help automate tasks such as 3D modeling, but it still lacks the creativity, and will certainly struggle to understand the needs of clients, interpret complex regulations, and design structures that are both aesthetically pleasing and functionally sound.

This project is more of an exploration on what we can do using Matter.js Physics library. My inspiration comes from the popular game “Angry Birds” where you need to slingshot a bird so that it destroys blocks placed on the other end of the screen.

I wanted to see if we could re-create the physics using Matter.js and have found that it’s pretty convenient and easy.

Here’s my sketch:

On mouse click, it ejects a bird (circle) to the right in a projectile motion and lets it hit the cubes. The cubes fade away when the bird hits the cube. After multiple hits, it eventually gets removed from the world.

Here’s how the mouseClick event is captured:

function mouseClicked() {
  // reset bird position and apply force
  Body.setPosition(bird, { x: mouseX, y: mouseY });
  Body.setVelocity(bird, { x: 0, y: 0 }); // reset velocity
  let force = createVector(0.06, -0.04);
  Body.applyForce(bird, bird.position, force);
}

Horizontal and vertical forces are applied to the bird to create the projectile motion. Matter.js handles the rest.

Here’s how the collision event is captured:

// collision event
Events.on(engine, "collisionStart", function (event) {
  let pairs = event.pairs;
  pairs.forEach(function (pair) {
    if (
      (pair.bodyA === bird && cubes.find((c) => c.body === pair.bodyB)) ||
      (pair.bodyB === bird && cubes.find((c) => c.body === pair.bodyA))
    ) {
      // Reduce opacity of the cube on collision
      let cube = cubes.find(
        (c) => c.body === pair.bodyA || c.body === pair.bodyB
      );
      if (cube) {
        cube.opacity = Math.max(0, cube.opacity - 100);
      }
    }
  });
});