let circleArray = [];

let circleCounter = 0;

let maxCircles = 3000;

let circleSize = 30;

let circleFill;

let circleFillInverted;

let circleFillR = 0;

let circleFillG = 0;

let circleFillB = 0;

let elem, style;

let colorArray = [];

​

function preload() {

  font = loadFont("ModerneLL-Black.otf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  background(255);

  //setup array of circles

  for (i = 0; i < maxCircles; i++) {

    circleArray.push(random(windowWidth), random(windowHeight));

  }

​

  //get class color from CSS

  colorArray = getColorFromClass(".prova");

  circleFillR = colorArray[0];

  circleFillG = colorArray[1];

  circleFillB = colorArray[2];

​

  circleFill = [circleFillR, circleFillG, circleFillB];

  circleFillInverted = [255, 255, 255];

}

​

//increment counter with mouse wheel event to power the animation

function mouseWheel() {

  counter = (counter + 0.05) % 3;

}

​

function touchMoved() {

  counter = (counter + 0.05) % 3;

}

​

function draw() {

  //LOGIC

​

  //switch from adding or subtracting circles

  if (circleCounter >= maxCircles) {

    if (

      circleFillR == colorArray[0] &&

      circleFillG == colorArray[1] &&

      circleFillB == colorArray[2]

    ) {

      circleFillR = 255;

      circleFillG = 255;

      circleFillB = 255;

      circleFillInverted = [colorArray[0], colorArray[1], colorArray[2]];

    } else {

      circleFillR = colorArray[0];

      circleFillG = colorArray[1];

      circleFillB = colorArray[2];

      circleFillInverted = [255, 255, 255];

    }

​

    circleCounter = 0;

  }

   circleFill = [circleFillR, circleFillG, circleFillB];

​

  //increment circles

  circleCounter += 5;

​

  //map scale and distance from top of the page to the width of the window

  scaleIncrement = map(windowWidth, 300, 2200, 0.5, 3.4);

  heightIncrement = map(windowWidth, 300, 2200, 120, 800);

​

  //DRAWING

​

  //CIRCLES

  push();

  noStroke();

  fill(circleFill);

  circles();

  pop();

​

  //BASE TEXT

​

  //GROUP 01 - UP

  textLayouts(windowWidth / 2, heightIncrement, circleFill);

​

  //GROUP 02 - DOWN

  textLayouts(

    windowWidth / 2,

    heightIncrement + heightIncrement * 1.5,

    circleFill

  );

​

  //MASK

  push();

  //use the circle array as mask

  clip(circles);

​

  //OVERLAY TEXT

​

  //GROUP 01 - UP

  textLayouts(windowWidth / 2, heightIncrement, circleFillInverted);

​

  //GROUP 02 - DOWN

  textLayouts(

    windowWidth / 2,

    heightIncrement + heightIncrement * 1.5,

    circleFillInverted

  );

​

  pop();

}

​

//set the function to draw circles

function circles() {

  for (i = 0; i < circleCounter; i += 2) {

    circle(circleArray[i], circleArray[i + 1], circleSize);

  }

}

​

//draw text based on specified parameters (built-in transformations)

function drawText(string, x, y, size, rotation) {

  push();

​

  //Transform operations

  translate(x, y);

  rotate(rotation);

​

  //Styling

  textSize(size);

  textFont(font);

  textAlign(CENTER, CENTER);

​

  //text

  text(string, 0, 0);

  pop();

}

​

function textLayouts(x, y, fillColor) {

  //GROUP 02 - DOWN

  push();

​

  //transform operations

  translate(x, y);

  scale(scaleIncrement, scaleIncrement);

​

  //color

  fill(fillColor);

​

  //switch function to cycle between layouts

  switch (round(counter)) {

    case 0:

      drawText("studiomistaker.com", 0, 0, 75, Math.PI / 5);

      break;

    case 1:

      drawText("iomistaker.com", 85, -60, 75, Math.PI / 5);

      drawText("stud", -235, -170, 75, -Math.PI / 5);

      break;

    case 2:

      drawText("studi", -220, -100, 75, Math.PI / 7);

      drawText("omista", -40, -140, 75, -Math.PI / 5);

      drawText("ker.com", 200, -110, 75, Math.PI / 4);

      break;

    case 3:

      drawText("studiomis", -140, -90, 75, Math.PI / 7);

      drawText("taker.com", 150, -130, 75, -Math.PI / 5);

      break;

  }

  pop();

}

​

function getColorFromClass(classId) {

  //function to transform the rgb(0,0,0) string into an array

  const toRGBArray = (rgbStr) => rgbStr.match(/\d+/g).map(Number);

​

  //get class

  elem = document.querySelector(classId);

  style = getComputedStyle(elem);

​

  //transform string into an array

  colorArray = toRGBArray(style.color);

​

  //return an array

  return colorArray;

}

​

function windowResized() {

  circleArray = [];

  for (i = 0; i < maxCircles; i++) {

    circleArray.push(random(windowWidth), random(windowHeight));

  }

  resizeCanvas(windowWidth, windowHeight);

  background(255);

}

​