88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||
|
|
<link rel="stylesheet" href="/css/style.css" />
|
||
|
|
<title>音乐可视化</title>
|
||
|
|
<script src="/lib/p5/p5.min.js"></script>
|
||
|
|
<script src="/lib/p5/addons/p5.sound.min.js"></script>
|
||
|
|
<script src="/lib/utils.js"></script>
|
||
|
|
<script>
|
||
|
|
let fft;
|
||
|
|
let spectrum = [];
|
||
|
|
let waveform = [];
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
let canvas = createCanvas(400, 400);
|
||
|
|
canvas.mouseClicked(togglePlay);
|
||
|
|
angleMode(DEGREES);
|
||
|
|
colorMode(HSB);
|
||
|
|
fft = new p5.FFT();
|
||
|
|
sound.amp(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function preload() {
|
||
|
|
sound = loadSound("/assets/Aloha Heja He - Achim Reichel.mp3");
|
||
|
|
// sound = loadSound("/assets/Pornophonique - Sad Robot.mp3");
|
||
|
|
}
|
||
|
|
|
||
|
|
function togglePlay() {
|
||
|
|
if (sound.isPlaying()) {
|
||
|
|
sound.pause();
|
||
|
|
} else {
|
||
|
|
sound.loop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
background(0, 0.5);
|
||
|
|
// drawGrid(255);
|
||
|
|
|
||
|
|
if (sound.isPlaying()) spectrum = fft.analyze();
|
||
|
|
spectrum = spectrum.splice(0, 640);
|
||
|
|
|
||
|
|
push();
|
||
|
|
translate(width / 2, height / 2);
|
||
|
|
beginShape();
|
||
|
|
for (let i = 0; i < spectrum.length; i++) {
|
||
|
|
let a = map(i, 0, spectrum.length, 0, 360);
|
||
|
|
let h = map(spectrum[i], 0, 255, 0, 255);
|
||
|
|
// push();
|
||
|
|
let θ = (a + frameCount) % 360;
|
||
|
|
// let θ = a;
|
||
|
|
// rotate(θ);
|
||
|
|
stroke(frameCount % 255, 255, 255, 0.5);
|
||
|
|
strokeWeight(1);
|
||
|
|
fill(frameCount % 255, 255, 255);
|
||
|
|
// line(0, 0, cos(θ) * (h * 1.1), -sin(θ) * (h * 1.1));
|
||
|
|
vertex(cos(θ) * h, -sin(θ) * h);
|
||
|
|
// strokeWeight(h / 5);
|
||
|
|
// point(cos(θ) * (h * 1.1), -sin(θ) * (h * 1.1));
|
||
|
|
// pop();
|
||
|
|
}
|
||
|
|
endShape(CLOSE);
|
||
|
|
pop();
|
||
|
|
|
||
|
|
// if (sound.isPlaying()) waveform = fft.waveform();
|
||
|
|
// noFill();
|
||
|
|
// beginShape();
|
||
|
|
// stroke(frameCount % 255, 255, 255);
|
||
|
|
// for (let i = 0; i < waveform.length; i++) {
|
||
|
|
// let x = map(i, 0, waveform.length, 0, width);
|
||
|
|
// let y = map(waveform[i], -1, 1, 0, height);
|
||
|
|
// vertex(x, y);
|
||
|
|
// }
|
||
|
|
// endShape();
|
||
|
|
|
||
|
|
textInfo("音乐可视化", "2023/01/01");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main></main>
|
||
|
|
</body>
|
||
|
|
</html>
|