let y = 0; // for cos

let z = 0; // for tan

​

let rate = 0.01; 

let rate2 = 0.05;

let rate3 = 0.02;

​

​

// setup function

function setup() {

  createCanvas(600, 600);

  background(0);

  noStroke();

  //setupGif(30);   // 30 [fps] is how fast the gif will play back

}

​

// draw function. Loops until program is terminated

function draw() {

  //beginGif();

  fill(0,10);

  rect(0,0,width, height);

  // sin, cos, tan lines

  freq = frameCount * 0.02;

​

  let sinVal = map(sin(freq), -1, 1, -800, 800);

  let cosVal = map(cos(freq), -1, 1, -300, 300);

  let tanVal = map(tan(freq), -1, 1, -300, 300);

  fill(255);

​

  //let amp = 100;

  //x = x+1

  x = frameCount; // moves one step each frame

  ellipse(x, height/2+sinVal, 300, 10);

  // changing the stroke of the sin/cos/tan lines mapped to tan values

  colors = map(tanVal,-1, 1, 0, 255);

  stroke(colors);

  strokeWeight(3);

  ellipse(x, height/2+cosVal, 20, 10);

  ellipse(x, height/2+tanVal, 50, 10);

  // Perlin's noise circles

  let p = noise(y) * width; // for middle circles

  let q = noise(z) * width; // for top circles

  let n = noise(x) * width; // for bottom circles

​

  noStroke();

  fill(255);

  // Perlin's noise

  // middle circles

  ellipse(p, height/4, random(70,100), random(70,80));

  x += rate*(-3,3);

    // bottom circles

  ellipse(q, height/2, random(40,60), random(40,60));

  z += rate3*(-5,5);

  // bottom circles

  ellipse(n, height/1.3, random(150,170), random(150,170));

  y += rate2;

  //"randomly" blinking circles layer (Doesn't look great so not included in final sketch)

  //fill(random(100));

  //ellipse(n, random(100, 500), random(150,200), random(30,40));

​

​

  //endGif(300);    // this stops recording after 300 times through draw

}

​