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

​

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(255, 15);

  noStroke();

  fill(0);

  translate(150, 80);

  shape();

}

​

function shape() {

  rectMode(CENTER);

  //background

  push();

  translate(50, 40);

  fill(frameCount%50,frameCount%70,100+frameCount%100);

  scale(sin(frameCount*0.01));

  rotate(frameCount*0.1);

  rect(0, 0, 20, 140);

  pop();

  push();

  translate(450, 100);

  fill(100+frameCount%100,frameCount%70,frameCount%100);

  scale(sin(frameCount*0.017));

  rotate(-frameCount*0.1);

  rect(0, 0, 20, 70);

  pop();

​

  push();

  translate(305, 600);

  scale(sin(frameCount*0.013));

  fill(100+frameCount%100,100+frameCount%70,frameCount%100);

  rotate(frameCount*0.1);

  rect(0, 0, 20, 200);

  pop();

  push();

  translate(105, 700);

  scale(sin(frameCount*0.015));

  fill(frameCount%100,50+frameCount%70,100+frameCount%100);

  rotate(-frameCount*0.1);

  rect(0, 0, 20, 120);

  pop();

​

  //foreground

  push();

  translate(100, 460);

  rotate(PI * 0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(110, 390);

  rotate(PI * 1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(140, 390);

  rotate(PI * 1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(150, 320);

  rotate(PI * 0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(160, 250);

  rotate(PI * 1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(190, 250);

  rotate(PI * 1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(250, 180);

  rotate(PI * 0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(250, 150);

  rotate(PI * 0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(310, 250);

  rotate(PI * -1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(340, 250);

  rotate(PI * -1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(350, 320);

  rotate(PI * -0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(390, 390);

  rotate(PI * -1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(360, 390);

  rotate(PI * -1 * cos(frameCount * 0.01));

  rect(0, 0, 20, 100);

  pop();

​

  push();

  translate(400, 460);

  rotate(PI * -0.5 * cos(frameCount * 0.01));

  rect(0, 0, 20, 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");

    }

  }

}

​