Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
sound2.filter((x) => {
return x > -1;
})
console.log(
sound2.filter((x) => {
return x > -1;
})
)
maxAmplitude = Math.max(...sound)
scale = window.devicePixelRatio
p5((sketch) => {
let system;
sketch.setup = function () {
sketch.createCanvas(width, 600);
// system = new ParticleSystem(
// sketch,
// sketch.createVector(sketch.width / 2, 50)
// );
};
sketch.draw = function () {
sketch.background("#FFFFFF");
// sketch.orbitControl();
// sketch.shininess(20);
// sketch.ambientLight(40);
// sketch.specularColor(255, 0, 0);
// sketch.pointLight(255, 0, 0, 0, -50, 50);
// sketch.specularColor(0, 0, 255);
// sketch.pointLight(255, 0, 0, 0, 50, 50);
// sketch.specularMaterial(255);
// //sketch.directionalLight(250, 250, 250, 200, -250, -1);
// //sketch.normalMaterial();
// background(205, 102, 94);
// sketch.rotateX(40);
let from = sketch.color(218, 165, 0);
let to = sketch.color(72, 61, 139);
// // sketch.rotateY(sketch.frameCount * 0.01);
//sketch.noStroke();
sketch.stroke(0);
// sketch.translate(0, 0, -400);
const totalLength = sound.length;
for (var j = totalLength; j >= 0; j -= 3) {
sketch.rectMode(sketch.CENTER);
let ampl = sketch.map(sound[j], 0, maxAmplitude, 0, sketch.height / 2);
let interA = sketch.lerpColor(from, to, j / totalLength);
sketch.fill(interA);
sketch.rect(
sketch.map(j, 0, totalLength, 50, sketch.width - 50),
sketch.height / 2,
10,
ampl,
5,
5
);
// sketch.push();
// sketch.translate(0, 0, j * 10);
// sketch.torus(40, 5, 14, 10);
// sketch.pop();
}
// for (var j = 0; j < totalLength; j += 3) {
// sketch.line(
// j,
// sketch.height / 2 +
// sketch.map(sound[j], 0, maxAmplitude, 0, sketch.height / 3),
// j,
// sketch.height / 2 -
// sketch.map(sound[j], 0, maxAmplitude, 0, sketch.height / 3)
// );
// }
//sketch.line(0, 0, 200, 200);
// system.addParticle();
//system.run();
};
})
import {p5, ParticleSystem} from "@tmcw/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.
