// 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   = "your-label-here";

​

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

}

​

function draw() {

  let v0 = map(sin(frameCount*0.060),-1,1,10,20);

  let v1 = map(sin(frameCount*0.020),-1,1,320,460);

  let v2 = map(sin(frameCount*0.020),-1,1,430,460);

  background('#cdff00');

  noStroke();

  fill(0);

    for (let rectY = 0; rectY <= 540; rectY += 20) {

  let c = color('#151618');

  fill(c);

  rect(rectY, 0, v0, 540);

    }

   c = color('#cdff00');

fill(c);

  push();

  translate(80,40);

  rect(0,0,120,v2);

  pop();

  for (let rectY = 200; rectY <= 350; rectY += 20) {

  rect(80, rectY, 290, v0);

    }

  push();

  translate(380,40);

  rect(0,0,80,v2);

  pop();

  push();

  translate(340,40);

  rect(0,0,30,v1);

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

    }

  }

}