let w = 600;

let h = 600;

let num = w/gap;

let period = 2; // length of two whole periods = width of the canvas

let phase = 0; // starting x-offset

let phase_shift = 0.01; // phase shifting speed

// let amp = 100;

​

let joints = [];

​

​

​

function setup() {

  createCanvas(w, h);

  // frameRate(600);

  background(0);

  noFill();

  strokeWeight(2);

  stroke(255);

  for (let x = gap; x < w; x += gap) {

    let this_period = abs(w-x)/500;

    let total_angle = this_period * 2 * PI;

    let this_angle = map(x, 0, w, 0, total_angle);

    joints.push(new Joint(x, 0, this_angle, log(w/2-abs(w/2-x))*20));

  }

}

​

​

​

function draw() {

  background(0,10);

  translate(0, h/2);

  beginShape();

  for (let i = 0; i < joints.length; i ++) {

    let joint = joints[i];

    joint.update();

    joint.display();

  }

  endShape();

}

​

​

class Joint {

  constructor(x, y, angle, amp) {

    this.x = x;

    this.y = y;

    this.angle = angle;

    this.r = gap*0.7;

    this.phase = phase; // set a phase for each class object

    this.amp = amp;

  }

  update() {

    this.y = this.amp * sin(this.angle + this.phase);

    this.phase += phase_shift;

  }

  display() {  

    vertex(this.x, this.y);

  }

}