// 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 label   = "Letter-B-ryantan";

​

let vertLine;

let mainColour;

​

​

​

function setup() {

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

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

  createCanvas(600, 850);

  // createCanvas(540, 540, SVG);

​

​

​

​

}

​

function draw() {

  mainColour = color('#111');

  colourOne = color('#461E52');

  colourTwo = color('#DD517F');

  colourThree = color('#50C9CE');

  colourFour = color('#F5D7E3');

  background(colourOne);

​

  vertLine = 60;

  noFill();

  noStroke();

  push();

  translate(50,380);

  drawB(vertLine, colourFour);

  pop();

  // Mid Circle

  push();

  translate(width/2, height/2);

  fill(colourTwo);

  ellipse(0,0,250);

  rotate((6*PI)/ 2);

  translate(-240, 0);

  drawB(vertLine, colourFour);

  pop();

  // Top Left Circle

  push();

  fill(colourThree);

  translate(50,50);

  ellipse (0,0, 40);

  pop();

  // Bot Right Circle

  push();

  fill(colourThree);

  translate(width,height);

  translate(-50,-50);

  ellipse(0,0,40);

  pop();

​

  // Left Circle

  push();

  fill(colourThree);

  translate(width/2, height/2);

  translate(-110,-170);

  ellipse(0,0, 40);

  pop();

  // Right Circle

  push();

  fill(colourThree);

  translate(width/2, height/2);

  translate(110,170);

  ellipse(0,0, 40);

  pop();

  // Left Med Circle

  push();

  fill(colourTwo);

  translate(width/2, height/2);

  translate(-180, -275);

  ellipse(0,0,100);

  pop();

​

  // Right Med Circle

  push();

  fill(colourTwo);

  translate(width/2, height/2);

  translate(180, 275);

  ellipse(0,0,100);

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

    }

  }

}

​

​

function drawB (lineX, colouring){

  stroke(colouring);

  strokeWeight(5);

  line(0,0,60,0);

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

    line(lineX,0, lineX, 350);

    lineX -= 10;

  }

  noFill();

  beginShape();

  vertex(60,0);

  vertex(60,5);

  bezierVertex(60,74, 60, 100, 60, 92, 210, 80); // V1-V2

  bezierVertex(60, 92, 70 , 245, 175, 245 , 160, 220); // V2-V3

  //bezierVertex(175, 245, 175, 247.2427, 176.3389, 248.3816, 176.0288, 247.7746); // V3-V4

  bezierVertex(210, 240, 240, 350, 152.2297, 350, 184.2568, 349.9612); // V4-V5

  vertex(110, 350);

  endShape();

}

​