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

​

let label = "Letter-G-joeann";

​

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(600, 850);

}

​

function draw() {

  strokeCap(SQUARE);

  angleMode(DEGREES);

  background(36,36,36);

  let from = color(255,0,24);

  let to = color( 90,0,255);

  let from2 = color(184,20,34);

  let to2 = color(64,11,161);

  let n = 5;

​

  //Middle G

    push ();

  translate(width/2,height/2);

  push();

  rotate(frameCount);

  translate(-width/2,-height/2);

  //8 arcs

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

    push();

    noFill();

    strokeWeight(8);

    let t = map(i, 0.0, n, 0.0, 1.0);

    let c = lerpColor(from, to, t);

    stroke(c);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 230, 325);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 47 - i * 2, 150);

    line(370 + i * 20, 450, 370 + i * 20, 507 + i * 11);

    pop();

​

    //left arc

    push();

    stroke(0);

    noFill();

    strokeWeight(100);

    stroke(c);

    arc(width / 2, height / 2, 300, 300, 150, 230);

​

    strokeWeight(81.5);

    stroke(36,36,36);

    arc(width / 2, height / 2, 300, 300, 154, 226);

    pop();

​

    stroke(0);

​

    //normal horizontal line

    push();

    stroke(0);

    noFill();

    stroke(c);

    strokeWeight(70);

    line(320, 450, 455, 450);

    stroke(36,36,36);

    strokeWeight(50);

    line(330, 450, 455, 450);

    pop();

  }  

  pop();

  pop();

​

//top left G

    push ();

  translate(0,height/6);

  push();

  rotate(frameCount);

  translate(-width/2,-height/2);

  //8 arcs

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

    push();

    noFill();

    strokeWeight(8);

    let t = map(i, 0.0, n, 0.0, 1.0);

    let c = lerpColor(from2, to2, t);

    stroke(c);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 230, 325);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 47 - i * 2, 150);

    line(370 + i * 20, 450, 370 + i * 20, 507 + i * 11);

    pop();

​

    //left arc

    push();

    stroke(0);

    noFill();

    strokeWeight(100);

    stroke(c);

    arc(width / 2, height / 2, 300, 300, 150, 230);

​

    strokeWeight(81.5);

    stroke(36,36,36);

    arc(width / 2, height / 2, 300, 300, 154, 226);

    pop();

​

    stroke(0);

​

    //normal horizontal line

    push();

    stroke(0);

    noFill();

    stroke(c);

    strokeWeight(70);

    line(320, 450, 455, 450);

    stroke(36,36,36);

    strokeWeight(50);

    line(330, 450, 455, 450);

    pop();

  }  

  pop();

  pop();

​

//top right G

    push ();

  translate(600,height/6);

  push();

  rotate(frameCount);

  translate(-width/2,-height/2);

  //8 arcs

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

    push();

    noFill();

    strokeWeight(8);

    let t = map(i, 0.0, n, 0.0, 1.0);

    let c = lerpColor(from2, to2, t);

    stroke(c);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 230, 325);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 47 - i * 2, 150);

    line(370 + i * 20, 450, 370 + i * 20, 507 + i * 11);

    pop();

​

    //left arc

    push();

    stroke(0);

    noFill();

    strokeWeight(100);

    stroke(c);

    arc(width / 2, height / 2, 300, 300, 150, 230);

​

    strokeWeight(81.5);

    stroke(36,36,36);

    arc(width / 2, height / 2, 300, 300, 154, 226);

    pop();

​

    stroke(0);

​

    //normal horizontal line

    push();

    stroke(0);

    noFill();

    stroke(c);

    strokeWeight(70);

    line(320, 450, 455, 450);

    stroke(36,36,36);

    strokeWeight(50);

    line(330, 450, 455, 450);

    pop();

  }  

  pop();

  pop();

​

  //bottom left G

    push ();

  translate(20,730);

  push();

  rotate(frameCount);

  translate(-width/2,-height/2);

  //8 arcs

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

    push();

    noFill();

    strokeWeight(8);

    let t = map(i, 0.0, n, 0.0, 1.0);

    let c = lerpColor(from2, to2, t);

    stroke(c);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 230, 325);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 47 - i * 2, 150);

    line(370 + i * 20, 450, 370 + i * 20, 507 + i * 11);

    pop();

​

    //left arc

    push();

    stroke(0);

    noFill();

    strokeWeight(100);

    stroke(c);

    arc(width / 2, height / 2, 300, 300, 150, 230);

​

    strokeWeight(81.5);

    stroke(36,36,36);

    arc(width / 2, height / 2, 300, 300, 154, 226);

    pop();

​

    stroke(0);

​

    //normal horizontal line

    push();

    stroke(0);

    noFill();

    stroke(c);

    strokeWeight(70);

    line(320, 450, 455, 450);

    stroke(36,36,36);

    strokeWeight(50);

    line(330, 450, 455, 450);

    pop();

  }  

  pop();

  pop();

//bottom right G

    push ();

  translate(width,730);

  push();

  rotate(frameCount);

  translate(-width/2,-height/2);

  //8 arcs

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

    push();

    noFill();

    strokeWeight(8);

    let t = map(i, 0.0, n, 0.0, 1.0);

    let c = lerpColor(from2, to2, t);

    stroke(c);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 230, 325);

    arc(width / 2, height / 2, 210 + i * 45, 210 + i * 45, 47 - i * 2, 150);

    line(370 + i * 20, 450, 370 + i * 20, 507 + i * 11);

    pop();

​

    //left arc

    push();

    stroke(0);

    noFill();

    strokeWeight(100);

    stroke(c);

    arc(width / 2, height / 2, 300, 300, 150, 230);

​

    strokeWeight(81.5);

    stroke(36,36,36);

    arc(width / 2, height / 2, 300, 300, 154, 226);

    pop();

​

    stroke(0);

​

    //normal horizontal line

    push();

    stroke(0);

    noFill();

    stroke(c);

    strokeWeight(70);

    line(320, 450, 455, 450);

    stroke(36,36,36);

    strokeWeight(50);

    line(330, 450, 455, 450);

    pop();

  }  

  pop();

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

    }

  }

}

​