let font;

​

function preload() {

  font = loadFont("Migra-Extrabold.ttf");

}

​

function setup() {

  createCanvas(600, 850);

  // createCanvas(540, 540, SVG);

​

  // now lets take care of the font

  // and extract the vertex points from it

  // do check the p5js reference for textToPoints

  // to better understand this function

  points = font.textToPoints("O", 0, 0, 150, {

    sampleFactor: 0.5,

    simplifyThreshold: 0,

  });

}

​

function draw() {

  background(13, 13, 13);

​

  push();

  translate(width / 2, height / 2);

  rotate(frameCount * 0.003);

​

  drawLetterFor(points, 3);

  pop();

​

}

​

function drawLetterFor(thePoints, theScale) {

  const b = getBoundingBoxFrom(points, theScale);

​

  stroke(73, 81, 222);

  noFill();

​

  // fill(73, 81, 242);

​

  push();

  translate(-b.cx, -b.cy);

  beginShape();

​

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

    let x = thePoints[i].x * theScale;

    let y = thePoints[i].y * theScale;

    // let w = thePoints[i].y * theScale;

​

    // rotate(-90);

    // rotate(sin(frameCount*y-32));

    // ellipse(x,y/2,50+sin((frameCount+i*100))*0.50,x);

    // rotate(frameCount*0.8);

    // rect(x,y,20,(0.10)*10);

​

    rect(x, y, 20, 0 + sin((frameCount + i * 1) * 0.02) * 30);

    rect(x-200, y-220, 20, 0 + sin((frameCount + i * 1) * 0.2) * 30);

    // pop()

     rect(x+200, y+220, 20, 0 + sin((frameCount + i * 1) * 0.2) * 30);

​

  }

  endShape();

​

  pop();

}

​

///////////////////////////////////////////////////////////////

//                                                           //

// Helper Functions                                          //

//                                                           //

///////////////////////////////////////////////////////////////

​

///////////////////////////////////////////////////////////////

//

// BoundingBox

//

// calculates the boundingbox for a letter

function getBoundingBoxFrom(thePoints, theScale) {

  let x0 = 10000;

  let y0 = 10000;

  let x1 = -10000;

  let y1 = -10000;

  thePoints.forEach((el) => {

    x0 = x0 > el.x * theScale ? el.x * theScale : x0;

    y0 = y0 > el.y * theScale ? el.y * theScale : y0;

    x1 = x1 < el.x * theScale ? el.x * theScale : x1;

    y1 = y1 < el.y * theScale ? el.y * theScale : y1;

  });

  w = x1 - x0;

  h = y1 - y0;

  cx = x0 + w / 2;

  cy = y0 + h / 2;

  return { x: x0, y: y0, x0, y0, x1, y1, w, h, cx, cy };

}

​

///////////////////////////////////////////////////////////////

//

// Grid

//

// overlays the canvas with a grid (by default 10x10)

// the grid can be (de)activated with setting isShowGrid

// or using key g

function showGrid(isShow, theNumOfGridCellsPerAxis = 10) {

  if (isShow) {

    noStroke();

    fill(0, 40);

    for (let i = 0; i <= theNumOfGridCellsPerAxis; i++) {

      let x = int(map(i, 0, theNumOfGridCellsPerAxis, 0, width - 1));

      rect(x, 0, 1, height);

    }

    for (let i = 0; i <= theNumOfGridCellsPerAxis; i++) {

      let y = int(map(i, 0, theNumOfGridCellsPerAxis, 0, height - 1));

      rect(0, y, width, 1);

    }

  }

}

​

///////////////////////////////////////////////////////////////

//

// Key-input

//

// if you want to use the SVG export

// option, go to setup and enable SVG mode

// no need to make any changes below.

function keyPressed() {

  if (key === "s") {

    if (this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

  if (key === "g") {

    isShowGrid = !isShowGrid;

  }

}

​

let isShowGrid = false;

​