///////////////////////////////////////////////////////////////

// 

// Gen-Type 2021

// 

// code template for

// https://slides.com/sojamo/generative-type-l2-2021/fullscreen

//

​

let label = "Kels_Session 2_Challenge1";

let font;

​

​

function preload() {

  font = loadFont("KronaOne-Regular.ttf");

  song = loadSound('246154__lerwickdj__16-ca-pads.mp3');

}

​

function setup() {

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

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

  createCanvas(1080 , 1080, SVG);

  // createCanvas(540, 540, SVG);

  points = font.textToPoints('22', 0, 0, 150, {

    sampleFactor: 0.8,

    simplifyThreshold: 0

  });

}

​

function draw() {

  background(0,0,0);

  push();

  translate(width/6, height/1.6);

  // rotateX(tan(frameCount * 0.06));

  drawLetterFor(points, 3);

  pop();

  showGrid(isShowGrid);

}

​

function drawLetterFor(thePoints, theScale) {

  stroke(0,random(255),random(255));

  noFill();

  push();

  beginShape();

  for (let i = 0; i < thePoints.length; i += 1) {

    let x = thePoints[i].x * theScale;

    let y = thePoints[i].y * theScale;

    // vertex(x,y);

    ellipse(x,y,0,30+tan((frameCount+i)*0.01)*5);

    // ellipse(x,y, 0.1, 2);

    // ellipse(x,y,20,20+sin((frameCount+i)*0.01)*100);

  }

  endShape();

  pop();

}

​

​

///////////////////////////////////////////////////////////////

//                                                           //

// Helper Functions                                          // 

//                                                           //

///////////////////////////////////////////////////////////////

​

///////////////////////////////////////////////////////////////

// 

// Grid

// 

// overlays the canvas with a grid (by default 10x10)

// the grid can be (de)activated with setting isShowGrid

// or using key g

function showGrid(isShow, theNumOfGridCellsPerAxis = 10) {

  if(isShow) {

    noStroke();

    fill(0,40);

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

      let x = int(map(i,0,theNumOfGridCellsPerAxis,0,width-1));

      rect(x,0,1,height);

    }

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

      let y = int(map(i,0,theNumOfGridCellsPerAxis,0,height-1));

      rect(0,y,width,1);

    }

  }

}

​

///////////////////////////////////////////////////////////////

// 

// Key-input

// 

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

    }

  }

  if(key === "g") {

    isShowGrid = !isShowGrid;

  }

}

​

let isShowGrid = false;

​

​

function mousePressed() {

  if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    song.stop();

    background(255, 0, 0);

  } else {

    song.play();

    background(0, 255, 0);

  }

}