Week 4 – Assignment

My goal was to use p5.js to build a dynamic visualisation of Simple Harmonic Motion (SHM), inspired by Memo Akten. Vibrant circles oscillate vertically in the sketch, adding to its visual attractiveness with a trace effect. The intention was to play with colour and motion while capturing the essence of oscillation’s beauty.

//Assignment 4 - SP
let numCircles = 15;
let circles = [];
let amplitude = 50; // maximum displacement
let frequency = 0.08; // speed of the motion

function setup() {
  createCanvas(400, 400);
  background(0); //
  for (let i = 0; i < numCircles; i++) {
    circles.push({
      x: width / 2 + (i - numCircles / 2) * 30,
      angle: random(TWO_PI),
      color: color(random(255), random(255), random(255)),
    });
  }
}

function draw() {
  fill(0, 20); // semi-transparent black
  rect(0, 0, width, height);

  for (let circle of circles) {
    // calculate y position using sine function
    let y = height / 2 + amplitude * sin(circle.angle);

    fill(circle.color);
    noStroke();
    ellipse(circle.x, y, 30, 30);

    // increment the angle to create motion
    circle.angle += frequency;
  }
}

Highlighted Code:

One part I’m particularly proud of is the fading background, which enhances the trace effect. The use of fill(0, 50) allows for gradual fading and creates a more immersive experience as the circles move.

Reflection:

This project taught me a lot about using p5.js for visualizations. I encountered challenges with managing the transparency and ensuring the circles maintained their vibrancy against the fading background.

For future iterations, I’d like to:

• Experiment with varying the amplitude and frequency based on user input.
• Add interactivity, such as changing colors or shapes when the mouse hovers over the circles.
• Explore other wave patterns beyond simple harmonic motion.