Back
Seeking Graphic Forms Through Frequencies
let osc, fft; var wave; let myFont; var button; var slider; var playing = false let txt, txtSize, txtOptions; let inp; function preload() { myFont = loadFont('data/fonts/Lausanne/Lausanne-300.otf') } function setup() { createCanvas(windowWidth, windowHeight); osc = new p5.TriOsc(); // set frequency and type osc.amp(0.5); fft = new p5.FFT(); osc.start(); // slider = createSlider(1, 1200, 440); // slider.position(100, 100) inp = createInput('A'); inp.position(100, 150); inp.input(updateInput); txt = 'A'; txtSize = 600; txtOptions = { //amounts of points using sampleFactor: .15, simplifyThreshold: 0 } genType() } function genType() { pts = myFont.textToPoints(txt, 0, 0, txtSize, txtOptions) bounds = myFont.textBounds(txt, 0, 0, txtSize, txtOptions); } function updateInput() { txt = inp.value(); genType() } function draw() { background(0,255); let waveform = fft.waveform(); // analyze the waveform //beginShape(); //strokeWeight(5); //for (let i = 0; i < waveform.length; i++) { // let x = map(i, 0, waveform.length, 0, width); // let y = map(waveform[i], -1, 1, height, 0); // vertex(x, y); //} //endShape(); push(); translate(width / 2, height / 2-200); translate(-bounds.w / 2, bounds.h / 2) beginShape(); // stroke(255) // noStroke() blendMode(DIFFERENCE) fill(255) strokeWeight(2); for(let i = 0; i < pts.length; i++) { let aWave = waveform[ceil(map(i, 0, pts.length, 0, waveform.length))] let aFFT = fft[ceil(map(i, 0, pts.length, 0, fft.length))] let x = map(i, 0, pts.length - 1, 0, width); vertex(pts[i].x, pts[i].y * ((aWave * TWO_PI))); vertex(pts[i].x, pts[i].y * (sin(aWave * TWO_PI))); vertex(pts[i].x, pts[i].y * (cos(aWave * TWO_PI))); } endShape(); pop(); // change oscillator frequency based on mouseX let freq = map(mouseX, 0, width, 40, 880); osc.freq(freq); let amp = map(mouseY, 0, height, 1, 0.01); osc.amp(amp); }
//TYPE REACTING ON SOUND WAVE / SINUS, TRIANGLE, SQUARE, TOOTHSAW //THESIS WORKSHOP DAY //CC ALAIN BRUSCH var wave; let myFont; var button; var slider; var playing = false let txt, txtSize, txtOptions; let inp; function preload() { myFont = loadFont('data/fonts/AkzidenzGrotesk-LightExtended.otf') // <-- YOUR LOCAL .OTF – FONTFILE } function setup() { createCanvas(windowWidth, windowHeight); background(0) wave = new p5.Oscillator(); slider = createSlider(1, 1200, 440); slider.position(100, 100) wave.setType('sine'); //change between 'sine' or 'triagle' or 'toothsaw' or 'square' wave.start(); wave.freq(440); wave.amp(0); inp = createInput('A'); inp.position(100, 150); inp.input(updateInput); txt = 'A'; txtSize = 200; txtOptions = { //amounts of points using sampleFactor: .15, simplifyThreshold: 0 } genType() button = createButton('play/pause'); button.mousePressed(toggle); button.position(250, 100) setupAudio(); } function genType() { pts = myFont.textToPoints(txt, 0, 0, txtSize, txtOptions) bounds = myFont.textBounds(txt, 0, 0, txtSize, txtOptions); } function updateInput() { txt = inp.value(); genType() } function draw() { /* audio vars: amp, ampEase, fft, waveform */ updateAudio(); wave.freq(slider.value()); clear() stroke(255); noFill(); /* waveform */ beginShape(); for(let i = 0; i < waveform.length; i++) { let freq = waveform[i] * height / 4; // (-1, 1); let x = map(i, 0, waveform.length, 0, width); curveVertex(x, height / 2 + freq); } endShape(); push(); translate(width / 2, height / 2); translate(-bounds.w / 2, bounds.h / 2) beginShape(QUAD_STRIP); noFill(); stroke(255); // fill(255) strokeWeight(1); for(let i = 0; i < pts.length; i++) { let aWave = waveform[ceil(map(i, 0, pts.length, 0, waveform.length))] let aFFT = fft[ceil(map(i, 0, pts.length, 0, fft.length))] let x = map(i, 0, pts.length - 1, 0, width); vertex(pts[i].x, pts[i].y * ((aWave * 10))); } endShape(); pop(); print(slider.value()) } function toggle() { if(!playing) { wave.amp(0.5, 1); playing = true; } else { wave.amp(0, 1); playing = false; } } /* AUDIO INIT */ let mic, fftRaw, fft = [], waveform = [], amp = 0.0, ampStereo = { l: 0.0, r: 0.0 }, ampEase = 0.0, numBins = 512, bands = 12; function setupAudio() { userStartAudio(); mic = new p5.AudioIn(); mic.start(); fftRaw = new p5.FFT(0.75, numBins); fftRaw.setInput(mic); } function updateAudio() { fftRaw.analyze(); amp = mic.getLevel() * 1000; // average mixed amplitude ampStereo.l = mic.amplitude.getLevel(0) * 500; // average left amplitude ampStereo.r = mic.amplitude.getLevel(1) * 500; // average right amplitude ampEase = ease(amp, ampEase, 0.075); // smooth 'amp' waveform = fftRaw.waveform(); // array (-1, 1) fft = fftRaw.logAverages(fftRaw.getOctaveBands(bands)); // array (0, 255) }