​

let label = "your-label-here";

let font;

// let m;

​

function preload() {

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

   sound = loadSound("whispering-sounds.mp3");

}

​

function mousePressed() {

​

    let fs = fullscreen();

    fullscreen(!fs);

  }

​

​

function setup() {

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

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

  createCanvas(windowWidth, windowHeight, WEBGL);

  // createCanvas(540, 540, SVG);

  sound.play();

  initSound(0.08);

  // now lets take care of the font

  // and extract the vertex points from it

  // do check the p5js reference for textToPoints

  // to better understand this function

  points = font.textToPoints("whisper", 0, -20, 100, {

    sampleFactor: 0.5,

    simplifyThreshold: 0,

  });

}

​

function draw() {

  background(0);

  push();

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

  // rotate(sin*(frameCount * 0.01));

  drawLetterFor(points, 2);

  pop();

}

​

function drawLetterFor(thePoints, theScale) {

  const m = getBoundingBoxFrom(points, theScale);

​

  // stroke(0, 100);

  // noFill();

  fill(sin(frameCount*45),9)

​

  push();

  translate(-m.cx, m.cy);

​

  // readFrequencies will return an 

  // array of frequencies

  let frequencyValues = readFrequencies();

  beginShape();

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

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

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

    // read amplitude the value of a frequency by index 

    // from the frequencyValues array

    let len = frequencyValues.length; // total frequencies available

    let frequencyAtIndex = frequencyValues[i%len]; 

    let frequencyAmplified = frequencyAtIndex*100;

    let w = 20+frequencyAmplified;

    // vertex(x,y + cos*frequencyAmplified*10);

    // ellipse(x, y , w);

    stroke(165, 37, 0.2);

      // translate(p5.Vector.fromAngle(millis() / 1000, 40));

  // rotateX(0.0003);

  // rotateY(sin*(frameCount*0.00001));

  ellipse(x,y+120,0.0050+sin((frameCount+i*100))*0.00050,w);

    ellipse(x,y-w/2,50+sin((frameCount+i/0.010))*0.40,w);

    ellipse(x,y+250,50+sin((frameCount+i/0.010))*0.40,w);

    // rotateX(cos(frameCount+w)*0.000100);

    rotateX(cos(frameCount+w)*0.00001);

    // translate(20, 2*w);

    // sphere(10,2,32);

    // rotateX(sin*frameCount*0.00031);

    // ellipse(56, 46, 55, sin*frameCount*55);

  }

  endShape();

​

  pop();

}

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function(event) {

  event.preventDefault();

}

​

// functions

function keyPressed() {

  if (key === "s") {

    if(this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

  if(key === "g") {

    isShowGrid = !isShowGrid;

  }

}

​

​

​

​

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

// 

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

​