Assignment 4 – Beauty of Harmonic Motion

In this assignment, I wanted to see the power of sine waves in creating smooth and soothing effects. Therefore, I have built up my assignment on something we had experimented in class.

There are two waves in this sketch. One wave has a longer period of 2π, and another has a shorter period of π/2. I wanted to experiment a different approach on how the waves could be shown like they’re moving. Therefore, I added an offset variable that increments by 0.8 on every frame. In the draw function this offset is used to translate the positions.

Now, when the y position of the vertex (or ellipse in this sketch) gets updated, it feels like the waves are moving.

Then I tried adding traces of the waves using alpha  value in the background() function:

background('rgba(13, 39, 54, 0.025)')

This would keep adding faded layers of dark greenish background so it appears like the waves are leaving traces.

Here’s the code used to build the sketch:

let offset = 0;

function setup() {
  createCanvas(600, 600);
  background(0);
}

function yVal(x, period, phase, amplitude) {
  return sin((TWO_PI * x) / period + phase) * amplitude;
}

function draw() {
  background("rgba(13, 39, 54, 0.025)");

  translate(width / 2 - offset, height / 2);
  offset += 0.8;

  for (let i = -width / 2 + offset; i <= width / 2 + offset; i += 10) {
    let x = map(i, -width / 2, width / 2, -PI, PI);

    stroke(0, 255, 255, 0.1);
    strokeWeight(10);
    ellipse(i, -yVal(x, TWO_PI, 0, height / 6), 4);

    strokeWeight(1);
    ellipse(i, yVal(x, PI / 2, 0, height / 3), 3);
  }
}

Future Considerations

I would love to add more waves and lines to show a few parts of the waves connected to each other. Also, I would like to create more complex wave patterns by introducing reversed sine waves with varying periods,  and amplitudes.