let label = "Letter S Poster";

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("S", 0, 0, 150, {

    sampleFactor: 0.5,

    simplifyThreshold: 0,

  });

}

​

function draw() {

  background( 13, 13, 13);

  push();

  translate(width / 2, height / 2);

  // rotate(frameCount * 0.01);

  drawLetterFor(points, 3.5);

  pop();

​

  showGrid(isShowGrid);

}

​

function drawLetterFor(thePoints, theScale) {

  const b = getBoundingBoxFrom(points, theScale);

​

  stroke(11, 168);

  // noFill();

   fill(191, 168);

  // noStroke();

  push();

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

  // (un)comment line below to show/hide bounding-box

  // rect(b.x,b.y,b.w,b.h);

​

  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, -sin((frameCount+y*100)), 20);

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

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

    rect(x-200,y-220,20,0+cos((frameCount+y*1)*0.0020)*10);

    rect(x,y,20,0+sin((frameCount+y*1)*0.220)*10);

    rect(x+200,y+220,20,0+cos((frameCount+y*1)*0.0020)*10);

  }

  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;

​