let size = 100;

let points = [];

let angle = 0;

let xoff = 0; let yoff = 0;

​

function preload() {

  font = loadFont('fonts/Roboto-Regular.ttf');

}

​

function setup() {

  createCanvas(800, 600);

  strokeWeight(3);

  points = font.textToPoints('Hello World!', 0, 0, size, { 

    sampleFactor:  0.1,

    simplifyThreshold: 0

  });

  // print(points);

  // angleMode(DEGREES);

}

​

function draw() {

  // background(1, 50, 32);

  background(240);

  stroke(0);

  fill(0);

  /*

  0. Points

  1. Drawing circles with connecting lines

  2. Oscillation 

  3. Random 

  4. Perlin Noise

  */

  // Number 1

  translate(120, 100);

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

    ellipse(points[i].x, points[i].y, 5, 5);

    // point(points[i].x, points[i].y);

  }

  // Number 2

  translate(0, 100);

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

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

  }

  angle += 0.1;

  // Number 3

  translate(0, 100);

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

    line(points[i].x, points[i].y, points[i].x + random(-15, 15), points[i].y + random(-15, 15));

    // ellipse(points[i].x + random(-5, 5), points[i].y + random(-5, 5), 3, 3);

  }

  // Number 4

  translate(0, 100);

  xoff = 0;

  let distance;

  noFill();

  beginShape();

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

    distance = dist(points[i].x, points[i].y, mouseX, mouseY); 

    if (distance < 60) {

      vertex(points[i].x + map(noise(xoff, yoff), 0, 1, -10, 10), points[i].y + map(noise(xoff), 0, 1, -10, 10));

    xoff += 0.1;

    } else {

      vertex(points[i].x, points[i].y);

    }

  }

  endShape();

  // Number 5  

  translate(0, 100);

  xoff = 0;

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

    ellipse(points[i].x + map(noise(xoff), 0, 1, -10, 10), points[i].y + map(noise(xoff, yoff), 0, 1, -10, 10), 10, 10);

    xoff += 0.5;

    yoff += 0.0001;

  }

}