zhao/p5js
zhao/p5js
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
赵鑫 2023-01-03 10:31:44 +08:00
parent bb05ef29d9
commit 61af34d7f1
4 changed files with 148 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
14.音乐可视化.html Normal file
View File

@ -0,0 +1,87 @@
<!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>

81
TEST.html
View File

@ -5,37 +5,78 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>测试</title> <title>音乐可视化</title>
<script src="/lib/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/lib/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
let fft;
let spectrum = [];
let waveform = [];
function setup() { function setup() {
createCanvas(400, 400); let canvas = createCanvas(400, 400);
canvas.mouseClicked(togglePlay);
angleMode(DEGREES); angleMode(DEGREES);
background(255); colorMode(HSB);
drawGrid(0); fft = new p5.FFT();
noLoop(); sound.amp(1);
}
// translate(200, 200); function preload() {
sound = loadSound("/assets/Aloha Heja He - Achim Reichel.mp3");
// sound = loadSound("/assets/Pornophonique - Sad Robot.mp3");
}
// rectMode(CENTER); function togglePlay() {
// rect(0, 0, 200, 200); if (sound.isPlaying()) {
// rect(0, 0, 160, 160); sound.pause();
} else {
sound.loop();
}
}
// for (let i = 0; i < 12; i++) { 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();
// rotate(90); textInfo("音乐可视化", "2023/01/01");
// line(0, 0, 0, -400);
let v1 = createVector(80, 80);
let v2 = createVector(160, 80);
let v3 = v2.copy().sub(v1);
drawVector(v1, "red");
drawVector(v2, "green");
translate(v1.x, v1.y);
drawVector(v3, "blue");
} }
</script> </script>
</head> </head>

BIN
assets/Aloha Heja He - Achim Reichel.mp3 Normal file
View File

Binary file not shown.

BIN
assets/Pornophonique - Sad Robot.mp3 Normal file
View File

Binary file not shown.