//click for sound!

//press F for fullscreem

​

let label = "wind";

let points;

let bounds;

let font;

let mic;

​

function preload() {

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

    sound = loadSound("chinese vibes.mp3");

}

​

​

function setup() {

  createCanvas(850, 850);

  textFont(font);

  mic = new p5.AudioIn();

  mic.start();

​

  const n = '風';

  const s = 400;

  points = font.textToPoints(n, 0, 0, s, {

    sampleFactor: 0.9,

    simplifyThreshold: 0.0

  });

  bounds = font.textBounds(n, 0, 0, s);

  console.log(bounds)

}

​

function draw() {

  background(240,248,255,2);

  scale(2)

  translate(250,250);

  //drawLetterShape();

    // drawLetterVertex();

   // Capture the audio amplitude

  let vol = mic.getLevel();

​

  // Use the audio amplitude to modify your animation

  let animationSpeed = map(vol, 0, 1, 1, 80); // Increased range

 // Adjust the range as needed

​

  // Modify your animation with the audio amplitude

  drawLetterShape(animationSpeed);

  // drawLetterVertex(animationSpeed);

}

​

function drawLetterVertex() {

noStrokes (); 

  push();

  translate(-bounds.w/2, bounds.h/2);

  beginShape();

  let x = 0;

  let y = 0;

  let n = points.length;

  let angle = TWO_PI / (n);

  for (let i = 0; i < n; i += 1) {

    x = points[i].x + sin((frameCount + i) * 0.001) * 0.01;

    y = points[i].y;

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

function drawLetterShape(animationSpeed) {

  //stroke(frameCount*20);

  noStroke(); 

  fill(0,2);

  push();

  translate(-bounds.w/4, bounds.h/2);

  let x = 0;

  let y = 0;

  let n = points.length;

  let res = 2;

  for (let i = 0; i < n; i += res) {

    x = points[i].x + tan((frameCount + i) * 0.01 ) * 6 * animationSpeed ;

    y = points[i].y + sin((frameCount + i) * 0.01) * 4 * animationSpeed ;

    push();

    translate(x, y);

    rotate((frameCount + i) * 0.01 + animationSpeed);

    ellipse(10, 0, 20, 3);

    pop();

  }

  pop();

}

​

function mousePressed() {

  // Play the sound when the mouse is pressed

  sound.play();}

let isShowGrid = false;

​

// enter fullscreen

​

function keyPressed() {

  if (key === "s") {

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

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

    if (key === 'f' || key === 'F') {

    enterFullscreen();

  }

}

​

​

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

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

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​