// 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   = "f";

​

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() {

 background(0);

  strokeWeight(10);

  fill(255);

    //BACKGROUND

  noStroke();

   push();

   fill(0);

ellipse(width,height,2000);

  pop();

  push();

  fill(255,0,0);

ellipse(width,height,800);

  pop();

  push();

  for(let x=0; x<height; x=x+200){

     noFill();

  strokeWeight(3);

  stroke(255,0,0);

  arc(width,height,x+frameCount*15,x+frameCount*15,PI,PI+HALF_PI);}

  pop();

  if (frameCount>120){

    frameCount=0;

  }

  push();

  scale(0.6);

  translate(30,-10);

  //F

  beginShape();

  vertex(500,300);

  vertex(400,300);

  vertex(400,400);

  vertex(600,400);

  vertex(500,500);

  vertex(400,500);

  vertex(400,800);

  vertex(300,800);

  vertex(300,500);

  vertex(200,500);

  vertex(300,400);

  vertex(300,300);

  vertex(400,200);

  vertex(600,200);

  endShape();

  //CURVE

  beginShape();

curveVertex(600,300);

curveVertex(600,200);

curveVertex(500,300);

curveVertex(600,600);

 endShape();

​

  //CIRCLE

  push();

ellipse(600,300,120);

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

    }

  }

}