// press s after activating the canvas

// (press mouse inside canvas) to save

// canvas to svg or png depending on the

// renderer selected.

​

let label = "pop - sound reactive";

let font;

let pointPOP;

​

​

​

function preload() {

  font = loadFont("PlayfairDisplay-VariableFont_wght.ttf");

}

​

function setup() {

  createCanvas(540, 540);

​

  initSound(0.8);

​

  pointsPOP = font.textToPoints(

    "POP",

    width / 2.1 - height / 4,

    height * 0.6,

    height / 3.25,

    {

      sampleFactor: 0.5,

      simplifyThreshold: 0.0,

    }

  );

}

​

​

function draw() {

  background(100, 100, 200);

  push();

  noFill();

  stroke(255);

  strokeWeight(1);

  strokeJoin(ROUND);

  drawLetterFor(pointsPOP, 1.0);

  translate(50,250);

  pop();

  noFill();

  stroke(255);

  ellipse(100,40,50,50);

  ellipse(600,70,300,300);

  ellipse(300,100,200,200);

  ellipse(150,40,150,150);

  ellipse(200,250,200,200);

  ellipse(40,100,100,100);

  ellipse(300,400,80,80);

  ellipse(50,400,200,200);

  ellipse(350,350,300,300);

  ellipse(400,40,150,150);

  ellipse(500,450,250,250);

  ellipse(240,550,350,350);

  ellipse(500,600,150,150);

}

​

function drawLetterFor(thePoints, theScale) {

    // total frequencies available

    frequencyValues = readFrequencies();

    let len = frequencyValues.length; 

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

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

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

    let frequencyAtIndex = frequencyValues[i % len];

    let frequencyAmplified = frequencyAtIndex * 400;

    let w = 40 + frequencyAmplified;

    let speed = 0.01;

    let amp = 40;

    let mx = sin((frameCount + i * 10) * speed) * amp;

    ellipse(x,

            y,

            w, 

            w);

  }

​

}

​

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

//

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

​