// 

// Gen-Type 2021

// 

// code template for

// https://slides.com/sojamo/generative-type-l2-2021/fullscreen

//

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

​

// also see p5js reference textToPoints

// https://p5js.org/reference/#/p5.Font/textToPoints

​

// you will need to include and load

// a ttf or otf font

​

// press s after activating the canvas

// (press mouse inside canvas) to save

// canvas to svg or png depending on the

// renderer selected.

​

let label = "sour";

let font;

​

function preload() {

  font = loadFont("NT Adventure (only personal use).otf");

}

​

function setup() {

  // if you add SVG as 3rd parameter and then

  // press s, the canvas will be saved as SVG file

  createCanvas(1080, 1080);

  // createCanvas(540, 540, SVG);

  frameRate(60)

​

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

    sampleFactor: 0.5,

    simplifyThreshold: 0,

  });

}

​

function draw() {

  background(0);

  push();

  translate(width / 2, height / 2);

  // rotate(frameCount * 0.01);

  drawLetterFor(points, 3);

  pop();

​

  showGrid(isShowGrid);

}

​

function drawLetterFor(thePoints, theScale) {

  const b = getBoundingBoxFrom(points, theScale);

​

  stroke(255,255,102);

  noFill();

  // fill(255)

​

  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;

    // vertex(x,y);

   // rect(x,y,tan((frameCount+i*20)*0.05),0+tan((frameCount+i*10)*0.05),30);

    rect(x,y,sin((frameCount+i*10)*40),0+tan((frameCount+i*10)*0.01)*40);

    // rect(x,y,20,0+sin((frameCount+i*10)*0.01)*40);

  }

  endShape(CLOSE);

​

  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;

​