Automated Animations Part 3: Sin() Cos() Math Art

//video link: https://vimeo.com/452392614

​

let angle = 0.0;    //starting angle of Sin waves

let offset = 150;   //center of movement space

let scalar = 125;  //distance covered by ellipses 

let speed = 0.05; //speed of animation

​

function setup (){

  createCanvas (600,600);

}

​

function draw(){

background (255);

line (width/2,0,width/2,height);

line (0,height/2,width,height/2);

​

  //red ////////////////////////

  //sin wave angles on Y axis (up and down)

  fill(255,0,0);

  let y1 = offset + sin(angle) * scalar;

  let y2 = offset + sin(angle + 0.3) * scalar;

  let y3 = offset + sin(angle + 0.6) * scalar;

  let y4 = offset + sin(angle + 0.9) * scalar;

  let y5 = offset + sin(angle + 1.2) * scalar;

  ellipse  (50,y1,50,50);

  ellipse (100,y2,50,50);

  ellipse (150,y3,50,50);

  ellipse (200,y4,50,50);

  ellipse (250,y5,50,50);

  ////////////////////////

  //blue ////////////////////////

  //sin wave angles on X axis (side to side)

  fill(0,0,255);

  let x1 = offset + sin(angle) * scalar;

  let x2 = offset + sin(angle + 0.3) * scalar;

  let x3 = offset + sin(angle + 0.6) * scalar;

  let x4 = offset + sin(angle + 0.9) * scalar;

  let x5 = offset + sin(angle + 1.2) * scalar;

  ellipse (x1,350,50,50);

  ellipse (x2,400,50,50);

  ellipse (x3,450,50,50);

  ellipse (x4,500,50,50);

  ellipse (x5,550, 50,50);

  //green 

  //sin wave angles on X AND Y axis

  fill(0,255,0);

  //x is moved right by 300

  ellipse (x1+300,y1,50,50);

  ellipse (x2+300,y2,50,50);

  ellipse (x3+300,y3,50,50);

  ellipse (x4+300,y4,50,50);

  ellipse (x5+300,y5,50,50);

  ////////////////////////

  //yellow ////////////////////////

  //sin wave angles used to control size 

  fill (255,255,0,50);

  ellipse (450,450,x1,y1);

  ellipse (450,450,x2,y2);

  ellipse (450,450,x3,y3);

  ellipse (450,450,x4,y4);

  ellipse (450,450,x5,y5);

  //asignment operator for all

  angle = angle + speed;

}