let font;

​

function preload() {

  font = loadFont('assets/BebasNeueBold.ttf');

}

​

function setup() {

  createCanvas(windowWidth,windowHeight, WEBGL);

  noStroke();

  pixelDensity(.3);

​

  slider = createSlider(0, 255, 0);

  slider.position(10, 10);

  slider.size(windowWidth/3);

  frameRate(15);

}

​

function draw() {

  background(80, 15, 255);

  noStroke();

  colorMode(HSB);

  let g = slider.value();

​

  /* beginClip();

  push();

  rotateX(frameCount * 0.9);

  rotateY(frameCount * 0.4);

  scale(g/10);

  torus(56, 46);

  pop();

  endClip();

  beginShape(TRIANGLE_FAN);

  fill(185, 17, 220);

  vertex(-width/3, -height/3);

  vertex(width/3, -height/3);

  fill(380, g/75, 200);

  vertex(-width/3, height/3);

  vertex(width/3, height/3);

  endShape(); */

  //the big rings

  beginClip();

  push();

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.04);

  scale(180);

  torus(g, .25);

  pop();

  endClip();

  beginShape(QUAD_STRIP);

  fill(90, 20, 250);

  vertex(-width/1, -height/1);

  vertex(width/1, -height/1);

  fill(80, 10, 250);

  vertex(-width/1, height/1);

  vertex(width/1, height/1);

  endShape();

  beginClip();

  push();

  rotateX(frameCount * 0.02);

  rotateY(frameCount * 0.03);

  scale(180);

  torus(g/.75, .5);

  pop();

  endClip();

  beginShape(QUAD_STRIP);

  fill(90, 25, 250);

  vertex(-width/1, -height/1);

  vertex(width/1, -height/1);

  fill(70, 8, 250);

  vertex(-width/1, height/1);

  vertex(width/1, height/1);

  endShape();

  //

​

  //

​

  beginClip();

  push();

  rotateX(frameCount * 0.09);

  rotateY(frameCount * 0.08);

  scale(g/55);

  torus(25, 10);

  pop();

  endClip();

​

  beginShape(QUAD_STRIP);

  fill(240, 275, 190);

  vertex(-width/2, -height/2);

  vertex(width/2, -height/2);

  fill(180, 140, 100);

  vertex(-width/2, height/2);

  vertex(width/2, height/2);

  endShape();

  beginClip();

  push();

  rotateX(frameCount * 0.04);

  rotateY(frameCount * 0.07);

  scale(g/50);

  torus(100, 15);

  pop();

  endClip();

​

  beginShape(QUAD_STRIP);

  fill(320, 165, 155);

  vertex(-width/2, -height/2);

  vertex(width/2, -height/2);

  fill(40, 140, 220);

  vertex(-width/2, height/2);

  vertex(width/2, height/2);

  endShape();

  beginClip();

  push();

  rotateX(frameCount * 0.03);

  rotateY(frameCount * 0.01);

  scale(g/100);

  torus(130, 22);

  pop();

  endClip();

​

  beginShape(QUAD_STRIP);

  fill(g, 255, 98);

  vertex(-width/2, -height/2);

  vertex(width/2, -height/2);

  fill(180, 27, 220);

  vertex(-width/2, height/2);

  vertex(width/2, height/2);

  endShape();

​

  //last text on green toursu

  textFont(font);

  textAlign(CENTER,CENTER);

  textSize(g*.8);

  rotateX(map(mouseX,0,width,0,TWO_PI));

  rotateY(map(mouseY,0,height,0,TWO_PI));

  rotateZ(map(frameCount,0,600,0,TWO_PI))

  //fill('#8C53D5');

  push();

  for(let i=0; i<100; i++) {

    fill(map(i,200,180,10,25),80,215);

    translate(0,0,.5);

    text("FIND ME",5,5);

  }

  pop();

}