// Sketch Edited By KaiSiang Sin

​

// see the following WEBGL type example.

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

​

// for more details about how to handle fonts and text,

// do check the reference under Typography

// https://p5js.org/reference/

​

let font;

​

let label = "your-label-here";

​

function preload() {

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

}

​

function setup() {

  createCanvas(540, 540);

  textFont(font);

}

​

function draw() {

  const dim = Math.min(width, height);

​

  const time = millis() / 5000;

​

  const duration = 1;

​

  const playhead = (time / duration) % 2;

​

  const start = [width * 0.30, height / 2];

​

  const end = [width * 0.5, height];

​

  let t0 = sin(playhead * PI);

​

  t0 = t0 * 0.9 + 0.9;

​

  const x = lerp(start[0], end[0], t0);

  const y = lerp(start[1], end[1], t0);

   const z = lerp(start[0], end[1], t0);

  background(0, 50);

​

//  fill(255);

  push();

    textSize(x*2);

    textAlign(LEFT);

   // stroke(0);

   // strokeWeight(0.4);

  //  noFill();

  fill(225)

  stroke(0)

  strokeWeight(5)

    text("k", 2 * 2, 200 * 1, 2);

​

    push();

    textSize(z);

    push();

  fill(225)

  stroke(0)

    translate(250, 0*z*0.02);

    text("a", 2 * 2, 200);

   scale(y, 1); 

    pop();

    pop();

    push();

​

    textSize(y);

    push();

  fill(225)

    translate(0,0);

    text("r",2* 2*2, 400);

    pop();

    pop();

    push();

    textSize(z);

​

    push();

  fill(225)

    translate(150, y/2);

    text("m",x* 0.01*0.1, 200 * 1);

    pop();

   push();

  fill(225)

  scale(1.2)

    translate(110,200);

    text("a",z* 0.2*0.01, 200 * 1);

    pop();

​

    push()

  noStroke()

  textSize(10);       // textSize sets the size of the text 

    textAlign(RIGHT);    // textAlign aligns the text to the LEFT, CENTER or RIGHT

  textLeading(20);    // textLeading adjusts the spacing between lines.

  let txt = "you reap what you sow."

  text(txt, 260,510,  width/2, height/2);

  pop()

}

​

​

function keyPressed() {

  if (key === "s") {

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

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

}

​