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

​

​

// press s after activating the canvas 

// (press mouse inside canvas) to save 

// canvas to svg or png depending on the 

// renderer selected.

​

​

// Define variables

let modVarStem;

let modVarCurve;

​

let label   = "Letter-A-ryantan";

​

// Generating a Grid

let showGrid = false;

let Num_grid = 9; // set number of horizontal and vertical grids 

​

function setup() {

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

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

  createCanvas(540, 540);

  // createCanvas(540, 540, SVG);

  textFont("Inconsolata");

  textSize(8);

​

​

}

​

function draw() {

  background(255,255,255);

  noFill();

  if (showGrid) {    //press any key to hide grid, make sure to click on canvas first

    grid(Num_grid, Num_grid, width / Num_grid); 

  }

  //creating the stem

  modVarStem = mouseX * 0.1;

  modVarCurve = mouseX *0.05;

  translate(150,80);

  /*

  push();

  fill(color('black'));

  strokeWeight(modVar);

  rect(0,0,5, 400);

  pop();*/

  beginShape(QUADS);

  fill(0,0,0);

  vertex(0 -modVarStem, 0); //V1 - Expands Left

  vertex(10 + modVarStem, 0); //V2 - Expands Right

  vertex(10 + modVarStem, 400); //V3 - Expands Right

  vertex(0 - modVarStem, 400); //V4 - Expands Left

​

  endShape();

  push();

  beginShape();

  translate(modVarStem,0);

  fill(0,0,0);

​

  vertex(0, 10);

  vertex(0, 0);

  //Expands Top

  bezierVertex(0, 0, 58.5019, -1.6982, 105.9371, 20.2159, 102.508, 18.715); //Outer Arc V1/V2 

  bezierVertex(105.9371, 20.2159, 212.8545, 67.0142, 205.8898, 297.7025, 155.0664, 206.5255 ); // Outer Arc V2/V3

  bezierVertex(205.8898, 297.7025, 205, 380, 290, 400, 280, 373.5608); // Outer Arc V3/V4

  vertex(290, 400);

  vertex(290, 400);

  //Expands Bot

  bezierVertex(170+modVarCurve, 400, 200, 400, 30+modVarCurve, 310, 250, 360); // Inner Arc V5/V6 

  bezierVertex(180+modVarCurve, 310, 190, 120, 40+modVarCurve, 52.0787, 200, 300); // Inner Arc V6/V7 

  bezierVertex(40+modVarCurve, 52.0787,105, 20, 0, 10, 69.9711, 20); 

  /*Original Curve Part

  //Expands Bot

  bezierVertex(293, 400, 200, 400, 193.184, 309.5841, 250, 360); // Inner Arc V5/V6 

  bezierVertex(193.184, 309.5841, 190, 120, 122.8782, 52.0787, 200, 100); // Inner Arc V6/V7 

  bezierVertex(122.8782, 52.0787,105, 20, 0, 10, 69.9711, 20); 

  */

​

  endShape();

  pop();

​

}

​

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

    }

  }

  else{

    showGrid = !showGrid;

  }

}

​

​

function grid(numX, numY, gridSize) {

  noFill(); // set grid without fill

​

  for (let i = 0; i < numX; i++) {

    for (let j = 0; j < numY; j++) {

      stroke(0); // stroke color of grid lines

​

      rect(i * gridSize, j * gridSize, gridSize, gridSize);

      text(

        "x:" + i * gridSize + ", " + "y:" + j * gridSize,

        i * gridSize + 10,

        j * gridSize + 10

      );

​

      push();

      // line(i * gridSize, j * gridSize, i * gridSize + 10, j * gridSize + 10);

      pop();

    }

  }

}

​

​