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 13:35:50 +08:00
parent 61af34d7f1
commit 8dadb7e121
4 changed files with 183 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
15.向日葵.html Normal file
View File

@ -0,0 +1,73 @@
<!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 n = 0, // 旋转角度
h = 0,
m = null, // 点的数量
c = null, // 点的大小
o = null,
p = null,
ma = null;
function setup() {
createCanvas(innerWidth, innerHeight);
angleMode(DEGREES);
colorMode(HSB);
noStroke();
m = createSlider(1, 5000, 500, 1);
m.position(10, 10);
c = createSlider(5, 25, 15, 0.01);
c.position(180, 10);
o = createSlider(-20, 20, 0, 0.01);
o.position(350, 10);
p = createSlider(-20, 20, 0, 0.01);
p.position(520, 10);
ma = createSlider(0, 360, 137.5, 0.01);
ma.position(690, 10);
}
function draw() {
background(0, 0.05);
push();
translate(width / 2, height / 2);
rotate(n);
for (let i = 0; i < m.value(); i++) {
let a = ma.value() * i,
r = c.value() * sqrt(i);
let x = r * cos(a),
y = r * sin(a);
let hu = map(sin(h + i), -1, 1, 0, 255);
fill(hu, 100, 100, 0.5);
circle(x, y, c.value());
}
pop();
n = (n + o.value()) % 360000;
h = (h - p.value()) % 360000;
fill(0, 0, 255, 1);
text(m.value(), 10, 60);
text(c.value().toFixed(2), 180, 60);
text(o.value().toFixed(2), 350, 60);
text(p.value().toFixed(2), 520, 60);
text(ma.value().toFixed(2), 690, 60);
textInfo("向日葵", "2023/01/01");
}
</script>
</head>
<body>
<main></main>
</body>
</html>

68
16.我的画笔.html Normal file
View File

@ -0,0 +1,68 @@
<!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>
// 避免右键菜单
window.oncontextmenu = function (e) {
e.preventDefault();
};
let 画笔颜色 = "#333333";
const 颜色仓库 = [
"#333333", // 0 黑
"#FF0000", // 1 红
"#FF8000", // 2 橙
"#FFFF00", // 3 黄
"#00FF00", // 4 绿
"#00FFFF", // 5 青
"#0000FF", // 6 蓝
"#FF00FF", // 7 紫
];
const 画布颜色 = "#FFEECC";
const 橡皮粗细 = 20;
const 画笔粗细 = 5;
function setup() {
createCanvas(innerWidth, innerHeight);
background(画布颜色);
}
// 不同鼠标按键对应不同的功能
function mousePressed() {
if (mouseButton == "left") {
stroke(画笔颜色);
strokeWeight(画笔粗细);
} else if (mouseButton == "right") {
stroke(画布颜色);
strokeWeight(橡皮粗细);
} else if (mouseButton == "center") {
background(画布颜色);
}
}
function mouseDragged() {
line(pmouseX, pmouseY, mouseX, mouseY);
}
// 数字键更换画笔颜色
function keyPressed() {
const n = int(key);
if (0 <= n && n < 颜色仓库.length) {
画笔颜色 = 颜色仓库[n];
}
}
</script>
</head>
<body>
<main></main>
</body>
</html>

94
TEST.html
View File

@ -5,78 +5,62 @@
<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 n = 0,
let spectrum = []; h = 0,
let waveform = []; m = null,
c = null,
o = null,
p = null,
ma = null;
function setup() { function setup() {
let canvas = createCanvas(400, 400); createCanvas(innerWidth, innerHeight);
canvas.mouseClicked(togglePlay);
angleMode(DEGREES); angleMode(DEGREES);
colorMode(HSB); colorMode(HSB);
fft = new p5.FFT(); noStroke();
sound.amp(1); m = createSlider(1, 5000, 500, 1);
} m.position(10, 10);
c = createSlider(5, 25, 15, 0.01);
function preload() { c.position(180, 10);
sound = loadSound("/assets/Aloha Heja He - Achim Reichel.mp3"); o = createSlider(-20, 20, 0, 0.01);
// sound = loadSound("/assets/Pornophonique - Sad Robot.mp3"); o.position(350, 10);
} p = createSlider(-20, 20, 0, 0.01);
p.position(520, 10);
function togglePlay() { ma = createSlider(0, 360, 137.5, 0.01);
if (sound.isPlaying()) { ma.position(690, 10);
sound.pause();
} else {
sound.loop();
}
} }
function draw() { function draw() {
background(0, 0.5); background(0, 0, 0, 0.05);
// drawGrid(255);
if (sound.isPlaying()) spectrum = fft.analyze();
spectrum = spectrum.splice(0, 640);
push(); push();
translate(width / 2, height / 2); translate(width / 2, height / 2);
beginShape(); rotate(n);
for (let i = 0; i < spectrum.length; i++) { for (let i = 0; i < m.value(); i++) {
let a = map(i, 0, spectrum.length, 0, 360); let a = ma.value() * i,
let h = map(spectrum[i], 0, 255, 0, 255); r = c.value() * sqrt(i);
// push(); let x = r * cos(a),
let θ = (a + frameCount) % 360; y = r * sin(a);
// let θ = a; let hu = map(sin(h + i), -1, 1, 0, 255);
// rotate(θ); fill(hu, 100, 100, 0.5);
stroke(frameCount % 255, 255, 255, 0.5); ellipse(x, y, c.value());
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(); pop();
// if (sound.isPlaying()) waveform = fft.waveform(); fill(0, 0, 255, 1);
// noFill(); text(m.value(), 10, 60);
// beginShape(); text(c.value().toFixed(2), 180, 60);
// stroke(frameCount % 255, 255, 255); text(o.value().toFixed(2), 350, 60);
// for (let i = 0; i < waveform.length; i++) { text(p.value().toFixed(2), 520, 60);
// let x = map(i, 0, waveform.length, 0, width); text(ma.value().toFixed(2), 690, 60);
// let y = map(waveform[i], -1, 1, 0, height); n = (n + o.value()) % 360000;
// vertex(x, y); h = (h - p.value()) % 360000;
// } textInfo("向日葵", "2023/01/01");
// endShape();
textInfo("音乐可视化", "2023/01/01");
} }
</script> </script>
</head> </head>

5
css/style.css
View File

@ -1,12 +1,13 @@
* { * {
padding: 0;
margin: 0; margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: gray; background-color: gray;
} }
body { body {
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
} }