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

​

function preload() {

  font = loadFont("Gen-Shin-Gothic-Bold.ttf");

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont(font);

  const n = '云';

  const s = 800;

  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('rgba(0,95,255,0.10)');

  translate(width/2, height/2);

     drawLetterShape();

    // drawLetterVertex();

}

​

function drawLetterVertex() {

  stroke(0,100);

  noFill();

  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 + cos((frameCount + i) * 0.07) * 10;

    y = points[i].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

function drawLetterShape() {

  //stroke(0,100);

  noStroke();

  fill(255,10);

  push();

  scale(0.5);

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

  let x = 0;

  let y = 0;

  let n = points.length;

  let res = 2;

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

    x = points[i].x + tan((frameCount + i*2) * 0.01) * 0.5;

    y = points[i].y;

    push();

    translate(x, y);

    rotate((frameCount + i) * 0.005);

    ellipse(50, tan(frameCount+i) + cos(frameCount + i * 1) * 10, 50 + cos((frameCount + i *       0.01) * 0.1) * 0.5);

    pop();

  }

  pop();

}

​

​

// go to fullscreen

// copy lines below to add fullscreen toggle to

// your sketch. Notice that if you are already using

// the keyPressed function, add lines 20-22 to it.

​

function keyPressed() {

  if (key === "o" || key === "O") {

    enterFullscreen();

  }

}

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function (event) {

  event.preventDefault();

};