// 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 I - hell's gate";

​

function setup() {

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

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

  createCanvas(800 , 800);

  // createCanvas(540, 540, SVG);

}

​

function draw() {

  background(frameCount*0.3%60,0,0,15);

  noStroke();

  fill(0);

  translate(-20,height/2);

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

    translate(i+45,0);

  shape();

  }

  scale(50);

  stroke(0,0,0,10);

  shape();

}

​

function shape() {

  rectMode(CENTER);

  push();

  noFill();

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

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

  stroke(255,i*20,0,frameCount*15%100);

  rect(0,-i*2,30 - frameCount%50+i,150);

  }

  // 

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

  // for (let i = 0; i < 15; i++) {

  //   stroke(255,i*20,0,frameCount*15%100+i);

  // rect(0,0 - i*3,30 - frameCount%50+i,150);

  // }

​

​

}

​

​

​

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

    }

  }

}