// file. (see sketch files).

// 

// for this example we use Krona One by by Yvonne Schüttler

// https://fonts.google.com/specimen/Krona+One

// 

// check the Sketch Files and the additional file

// KronaOne-Regular.ttf

//

// Note that this will work for the default renderer,

// however this does not work as expected with WEBGL and 

// Tthe following notification will be posted in the console:

// 

// You must load and set a font before drawing text. 

// See `loadFont` and `textFont` for more details. 

//

// see the following WEBGL type example.

// https://editor.p5js.org/sojamo/sketches/mvEZEFfB6

​

let points;

let bounds;

let font;

let label = "Exercise_3_Letterform_8"

​

function preload() {

  song = loadSound('654731__sergequadrado__fantasy.wav');

  font = loadFont("AllertaStencil-Regular.ttf");

}

​

​

function setup() {

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

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

  createCanvas(540, 540, SVG);

  // createCanvas(540, 540, SVG);

  textFont(font);

  const n = '8';

  const s = 500;

  points = font.textToPoints(n, 0, 0, s, {

    sampleFactor: 1,

    simplifyThreshold: 0.0

  });

  bounds = font.textBounds(n, 0, 0, s);

  console.log(bounds)

}

​

function draw() {

  background(255);

  translate(width/2.3, height/2);

  drawLetterShape();

    // drawLetterVertex();

}

​

function drawLetterVertex() {

  stroke(0,255);

  noFill(0);

  push();

  translate(-bounds.w/2, bounds.h/2);

  beginShape();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = TWO_PI / (n);

  for (let i = 0; i < n; i += 1) {

    x = points[i].x + sin((frameCount+i) * 0.05) * 20;

    y = points[i].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

function drawLetterShape() {

  stroke(0,100);

  fill(255,255,255);

  push();

  translate(-bounds.w/2, bounds.h/2);

  let x = 0;

  let y = 0;

  let n = points.length;

  let res = 10;

  for (let i = 0; i < n; i += res) {

    x = points[i].x + sin((frameCount/100) * 0.1)/10;

    y = points[i].y

    push();

    fill(255-i,255,255);

    translate(x, y);

    rotate((frameCount*i/2) * 0.0003);

    ellipse(10, 5, 10, 40);

    pop();

  }

  pop();

}

​

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

// 

// 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;

  }

}

​

function mousePressed() {

  if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    song.stop();

    background(255, 0, 0);

  } else {

    song.play();

    background(0, 255, 0);

  }

}