let valOne;

let valTwo;

let valThree;

​

function preload() {

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

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  fill(255);

  stroke(255);

  strokeWeight(2);

  let lines = 'PATTERNS'; 

  points = font.textToPoints(lines, 20, height/2, width/5, {

    sampleFactor: 0.2,

    // simplifyThreshold: 0.1

  });

}

​

function draw() {

  // background(20,20);

  clearBG(20);

  valOne = mouseX;

  let x = map(valOne, 0, width, -400, 400);

  valTwo = mouseY;

  let y = map(valTwo, 0, height, 800, -800);

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

    let pt = points[i];

    if (i % 3 == 0){

      stroke(255,70,50);

      ellipse(pt.x + y*x*0.5*sin(0.02*frameCount + pt.y+y), pt.y + x*sin(0.02*frameCount + pt.x), 1);

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

      stroke(50,255,100);

      ellipse(pt.x + y*0.2*sin(0.02*frameCount + pt.y), x+pt.y, 1);

    } else {

      stroke(120,120,255);

      ellipse(pt.x + x*sin(0.02*frameCount + pt.y), x+pt.y, 1);

    }

​

  }

​

}

​

​

function clearBG(val){

    loadPixels();

​

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

      pixels[i + 3] -= val;

    }

    updatePixels();

  }