let sclX = 0.8;

let sclY = 0.8;

let sclTX = 0.04;

let sclTY = 0.02;

let sclDX = 6;

let sclDY = 6;

​

​

let lines = [

  "  ALL  WE",

  " SEE  ARE",

  "PATTERNS"

];

​

let points = [];

​

function preload() {

  font = loadFont("SimplerPro_Alte-SemiBold.otf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // background(0);

  noFill();

  stroke(255);

  strokeWeight(1);

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

    let pointsTemp = font.textToPoints(lines[i], width/12, (height/3)+(width/5)*i, width/6, {

    sampleFactor: 0.15,

  });

    points = points.concat(pointsTemp);

  }

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

    points[i].dX = 0;

    points[i].dY = 0;

  }

}

​

​

​

function draw() {

  clearBG(20);

  // background(20,20);

  let radius = 1.5;

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

    let pt = points[i];

    if (i % 2 == 0){

      stroke(255,70,30);

      ellipse((sclX*sin(sclTX*i*frameCount+pt.y)+pt.x+pt.dX),  (sclY*sin(sclTY*i*frameCount+pt.x)+pt.y+pt.dY),radius);

    } else if (i % 3 == 0){

      stroke(30,255,80);

      ellipse((sclX*sin(sclTX*i*frameCount+pt.y)+pt.x+pt.dX),  (sclY*sin(sclTY*i*frameCount+pt.x)+pt.y+pt.dY),radius);

    } else if (i % 5) {

      stroke(80,120,255);

      ellipse((sclX*sin(sclTX*i*frameCount+pt.y)+pt.x+pt.dX),  (sclY*sin(sclTY*i*frameCount+pt.x)+pt.y+pt.dY),radius);

    }

    pt.dX = sclDX*sin(0.2*frameCount+pt.y);

    pt.dY = sclDY*sin(0.2*frameCount+pt.x);

  }

}

​

function mouseClicked(){

 clear();

}

​

​

function clearBG(val){

    loadPixels();

​

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

      pixels[i + 3] -= val;

    }

    updatePixels();

​

  }