let points = [];

let r = 10; let angle = 0;

let rmore = 50;

​

​

function preload() {

  font = loadFont("Fonts/PPNeueMachina-InktrapRegular.otf")

}

​

function setup() {

  createCanvas(windowHeight, windowWidth, WEBGL);

  //textAlign(CENTER);

  points = font.textToPoints("BLEND", 0 , 10, 100, {

    sampleFactor:0.1,

    //simplifyThreshold:0.001

  });

  angleMode(DEGREES);

}

​

​

​

​

​

function draw() {

  background(55,47,53);

  //for the rotation

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

    //Blend first instance

    {

     ellipse(points[i].x + r*sin(angle + i*5), points[i].y, 4,4);

     fill(200,100,100);

    stroke("white")

      noStroke();

    }

    //blend second instance bigger

    {

    ellipse(points[i].x + + rmore*sin(angle + i*2) , points[i].y, 4,4);

    fill(241,160,208);

    //stroke("black")

    noStroke();

    }

  }

  //frequency of the animation

  angle += 5;

}