​

// You can find the whole tutorial here 

// https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/

//

// Code Reinterprated By KaiSiang Sin

​

//click for sound!

//press F for fullscreem

​

​

var buffer;

var tileWidth = 30;

var tileHeight = 20;

let label = "BurnAndDream";

​

function preload() {

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

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

}

function setup() {

  createCanvas(850, 850);

​

  buffer = createGraphics(850,850);

​

  buffer.background(0,6);

  buffer.textAlign(CENTER,CENTER);

    buffer.fill(255,140,0);

  buffer.textSize(width*0.7);

   buffer.textFont(font);

  buffer.text('焚',600,300);

    buffer.fill(255,140,0);

     buffer.rect(225,(sin((frameCount *10) * 0.01) * 200),20,2);

  initSound(0.9);

}

​

function draw() {

  background(0,20);

  translate(-100,20)

   let frequencyValues = readFrequencies();

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

    let frequencyAtIndex = frequencyValues[20 % len];

    let frequencyAmplified = frequencyAtIndex * 200;

    let w = 20 + frequencyAmplified;

​

  for(var y=0; y<height; y+=tileHeight){

    for(var x=0; x<width; x+=tileWidth){

      var off = frameCount * 0.1 + (x + y) * 0.01;

      var sx = parseInt(x+w + cos(off)*w);

      var sy = y+w;

      copy(buffer,sx,sy,tileWidth,tileHeight,x,y,tileWidth,tileHeight);

      //edit the tile tile with to other value

      noFill();

      // rect(x,y,tileWidth,tileHeight);

    }

  }

}

function readFrequencies(theRes=10) {

  let fftResolution = theRes;// take every nth frequency

  let fftValues = analyzeAudioInput(fftResolution)

  return fftValues;

}

​

function readSoundLevel(theMin = 0.5, theMax = 0.9) {

  let spectrum = fft.analyze();

  const nyquist = 22050;

​

  // get the centroid

  let spectralCentroid = fft.getCentroid();

​

  // the mean_freq_index calculation is for the display.

  let mean_freq_index = spectralCentroid / (nyquist / spectrum.length);

  let centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, 1);

  // extract preferred centroid bands

  let vmin = theMin;

  let vmax = theMax;

  let v0 = map(max(vmin, min(centroidplot, vmax)), vmin, vmax, 0, 1);

​

  // returns centroid

  return v0;

}

​

​

// call function initSound in setup()

// to setup mic input and fft analysis.

function initSound(theSmoothing=1) {

  // make the microphone available

  mic = new p5.AudioIn();

  mic.start();

  // create a new FFT analyzer with

  // the microphone as input.

  fft = new p5.FFT(theSmoothing);

  fft.setInput(mic);

  // have a look at the documentation at

  // https://p5js.org/reference/#/p5.FFT

  // for a more comprehensive overview of

  // methods to analyse sound with p5js.

}

​

// call function analyzeAudioInput in dra()

// to continuously read audio in and apply 

// the fft. this function will return an 

// array ofthe fft-analysis results.

function analyzeAudioInput(theSteps=10) {

  // fft returns an array of values

  // between 0 and 255, however we are 

  // normalising these values below. 

  let spectrum = fft.analyze(); 

  let fftValues = [];

  let steps = theSteps;

  let start = 0;

  let end = spectrum.length;

  for (let i = start; i < end; i = i + steps) {

    // we could do some calculations here if needed

    // we can reduce the resolution of values by 

    // increasing the value for variable steps 

    // eg. from 4 to 10 which will only add every 

    // 10th spectrum-value to array value (in case 

    // we want to work with a lower resolution 

    // of numbers)

    fftValues.push(map(spectrum[i],0,255,0,1));

  }

  return fftValues;

}

​

​

​

​

​

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

// 

// BoundingBox

// 

// calculates the boundingbox for a letter

function getBoundingBoxFrom(thePoints, theScale) {

  let x0 = 10000;

  let y0 = 10000;

  let x1 = -10000;

  let y1 = -10000;

  thePoints.forEach((el) => {

    x0 = x0 > el.x * theScale ? el.x * theScale : x0;

    y0 = y0 > el.y * theScale ? el.y * theScale : y0;

    x1 = x1 < el.x * theScale ? el.x * theScale : x1;

    y1 = y1 < el.y * theScale ? el.y * theScale : y1;

  });

  w = x1 - x0;

  h = y1 - y0;

  cx = x0 + w / 2;

  cy = y0 + h / 2;

  return { x: x0, y: y0, x0, y0, x1, y1, w, h, cx, cy };

}

​

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

// 

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

    }

  }

}

​

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

}

​

function mousePressed() {

  // Play the sound when the mouse is pressed

  sound.play();

}