pSound = require("p5").then(async (p5) => {
await require("p5@0.9.0/lib/addons/p5.sound.min.js");
return p5;
})
p5((s) => {
let mic;
s.setup = function () {
s.createCanvas(width, height);
// see https://p5js.org/reference/#/p5.AudioIn
mic = new pSound.AudioIn();
mic.start();
};
s.draw = function () {
s.background(0);
// get current microphone level
let micLevel = mic.getLevel(); // between 0 and 1
// The min and max of micLevel is 0 - 1.
// if we use map we can change the scale
// map(value, min, max, newMin, newMax)
let diameter = s.map(micLevel, 0, 1, 100, 500);
s.noStroke();
s.circle(width / 2, height / 2, diameter);
};
})
p5((s) => {
let mic;
s.setup = function () {
s.createCanvas(width, height);
// see https://p5js.org/reference/#/p5.AudioIn
mic = new pSound.AudioIn();
mic.start();
};
s.draw = function () {
s.background(255, 0.1);
let volume = mic.getLevel();
let threshold = 0.001;
if (volume > threshold) {
// change the HUE based on the volume
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
let hue = s.map(volume, 0, 1, 0, 360);
let newScale = s.map(volume, 0, 1, 1, width);
s.noStroke();
s.fill(hue, 100, 50);
s.rect(newScale, s.random(0, height), newScale, newScale/2);
}
};
})
p5((s) => {
let mic;
let fft;
s.setup = function () {
s.createCanvas(width, height);
// see https://p5js.org/reference/#/p5.AudioIn
mic = new pSound.AudioIn();
mic.start();
fft = new pSound.FFT();
fft.setInput(mic);
};
s.draw = function () {
s.background(255);
let spectrum = fft.analyze();
s.noStroke();
s.fill("blue");
for (let i = 0; i < spectrum.length; i++) {
let x = s.map(i, 0, spectrum.length, 0, width);
let h = -height + s.map(spectrum[i], 0, 255, height, 0);
s.rect(x, height, width / spectrum.length, h);
}
};
})
p5((s) => {
let mic;
let fft;
s.setup = function () {
s.createCanvas(width, height);
mic = new pSound.AudioIn();
mic.start();
fft = new pSound.FFT();
fft.setInput(mic);
};
s.draw = function () {
let amount = 100;
s.background(255);
s.stroke("blue")
let spectrum = fft.analyze();
for (let n = 0; n < height; n += height / amount) {
s.beginShape();
s.curveVertex(0, n);
for (let i = 0; i < width; i += width / amount) {
let index = s.floor((i / width) * spectrum.length);
let amp = spectrum[index];
// Adjust the y-coordinate based on the amplitude (amp) from the spectrum
let d = s.dist(i, n, width / 2, n);
let y = n - s.map(amp, 0, 255, 0, width / 2 - d);
s.curveVertex(i, y);
}
s.curveVertex(width, n);
s.curveVertex(width, n);
s.endShape();
}
};
})
p5((s) => {
let image;
let mic;
let fft;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noSmooth();
mic = new pSound.AudioIn();
mic.start();
fft = new pSound.FFT();
fft.setInput(mic);
};
s.draw = function () {
image.loadPixels();
let spectrum = fft.analyze();
let threshold = 50;
for (let index = 0; index < 10000; index++) {
let x = s.floor(s.random(0, image.width));
let y = s.floor(
s.map(spectrum[x % spectrum.length], 0, 255, 0, image.height - 1)
);
let color1 = image.get(x, y);
let color2 = image.get(x, y + 1);
let brightness1 = s.brightness(color1);
let brightness2 = s.brightness(color2);
if (brightness1 > brightness2) {
image.set(x, y, color2);
image.set(x, y + 1, color1);
}
}
image.updatePixels();
s.image(image, 0, 0);
};
})
height = 400
import {p5} from "@thometnanni/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
