// 

// Gen-Type 2022

// 

//

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

​

​

// 

// to use this sound reactive code, copy 

// the (code inside) soundin.js file 

// to your own sketch.

​

​

// also see p5js reference textToPoints

// https://p5js.org/reference/#/p5.Font/textToPoints

​

// you will need to include and load

// a ttf or otf font

​

// press s after activating the canvas

// (press mouse inside canvas) to save

// canvas to svg or png depending on the

// renderer selected.

​

let label = "Water";

let font;

let sound;

​

function preload() {

  font = loadFont("Lato-Black.ttf");

  sound = loadSound('Ripples low and high.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // sound.play();

  initSound(0.4);

  // Generate text points with randomized positions

  points = generateRandomTextPoints("w", 300);

}

​

function draw() {

  background(230, 6);

  push();

  translate(width / 2, height / 2);

  drawLetterFor(points, 2);

  pop();

}

​

function drawLetterFor(thePoints, theScale) {

  const b = getBoundingBoxFrom(points, theScale);

​

  stroke(0, 10);

  fill(0, 1);

​

  push();

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

  let frequencyValues = readFrequencies();

  beginShape();

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

    let x = thePoints[i].x * theScale + cos((frameCount + i) * 0.01) * 10;

    let y = thePoints[i].y * theScale + cos((frameCount + i) * 0.01) * 100;

​

    let len = frequencyValues.length;

    let frequencyAtIndex = frequencyValues[i % len];

    let frequencyAmplified = frequencyAtIndex * 200;

    let w = 3 + frequencyAmplified;

    let maxOffset = 2;

//     is it possible to map the low frequency on the saturations of the color?

  // let vol = sound.play();

  // Map audio amplitude to color changes

//   let r = map(vol, 0, 1, 0, 255); // Red component

//   let g = map(vol, 0, 1, 0, 255); // Green component

//   let b = map(vol, 0, 1, 0, 255); // Blue component

​

  // Modify the stroke and fill colors based on the audio input

  // stroke(r, g, b);

  // fill(0, 255); // Use a constant alpha value of 255 (fully opaque)

​

    circle(x + tan(frameCount * i * 0.1) * maxOffset , y + cos((frameCount + i * 1) * 0.1) * 2, w + cos((frameCount + i * 0.01) * 0.01) * 10);

  }

  endShape();

​

  pop();

}

​

function generateRandomTextPoints(text, size) {

  let textPoints = font.textToPoints(text, 0, 0, size, {

    sampleFactor: 1,

    simplifyThreshold: 0,

  });

  // Add random offset to each point

  for (let point of textPoints) {

    point.x += random(-1, 1);

    point.y += random(-10, 10);

  }

  return textPoints;

}

​

​

​

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

// 

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

​

​

​

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

}

​

​

​

​

​