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

update

Browse Source
This commit is contained in:
赵鑫 2022-12-17 19:31:24 +08:00
parent aebb2742dd
commit 9ccf81abc2
7 changed files with 297 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
10000.测试用.html → 10.单摆.html
View File

@ -5,25 +5,25 @@
<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>
<title>单摆</title>
<script src="/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script>
<script src="/lib/pendulum.js"></script>
<script>
let h;
let 单摆;
function setup() {
createCanvas(600, 400);
background(200);
drawGrid(32);
noLoop();
h = height;
for (let x = 0; x < width; x += 10) {
rect(x, height, 10, -h);
h = lerp(h, 0, 0.1);
}
单摆 = new SimplePendulum(width / 2, 50);
}
function draw() {}
function draw() {
background(0);
drawGrid(32);
单摆.draw();
单摆.update();
textInfo("单摆", "2022-12-14");
}
</script>
</head>

150
11.风扇.html Normal file
View File

@ -0,0 +1,150 @@
<!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="/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script>
<script>
const FPS = 60;
let angle = 0;
let speed = 0;
let speeds = [0, 200, 400, 600];
let gear = 0;
let acceleration = 0.01;
let anglePerFrame = 6 / FPS;
function setup() {
createCanvas(300, 500);
angleMode(DEGREES);
frameRate(FPS);
}
function drawBlade(x, y, r) {
push();
// translate(x, y);
rotate(angle);
strokeWeight(1);
stroke("rgba(128,128,255,0.8)");
fill("rgba(128,128,255,0.8)");
beginShape();
for (let θ = 0; θ < 180; θ++) {
let d = r * sin(θ * 3);
vertex(cos(θ) * d, -sin(θ) * d);
}
endShape(CLOSE);
speed = lerp(speed, speeds[gear], acceleration);
angle += anglePerFrame * (speed * random(0.95, 1.05));
pop();
}
function draw() {
background(255);
drawGrid(32, 0);
let hx = width / 2;
let hy = 100;
push();
translate(hx, hy);
strokeWeight(1);
stroke(0);
fill(128);
rect(-5, 0, 10, 250);
rect(-50, 250, 100, 10, 5, 5, 0, 0);
rect(-15, 65, 30, 75, 10);
fill(64);
circle(0, 0, 40);
drawBlade(width / 2, 100, 50);
fill(255);
stroke(0, 128);
circle(0, 80, 10);
circle(0, 95, 10);
circle(0, 110, 10);
circle(0, 125, 10);
if (mouseIsPressed) {
let mx = mouseX - hx;
let my = mouseY - hy;
let mv = createVector(mx, my);
let b0 = createVector(0, 80);
let b1 = createVector(0, 95);
let b2 = createVector(0, 110);
let b3 = createVector(0, 125);
if (mv.dist(b0) <= 5) gear = 0;
else if (mv.dist(b1) <= 5) gear = 1;
else if (mv.dist(b2) <= 5) gear = 2;
else if (mv.dist(b3) <= 5) gear = 3;
}
fill(0);
noStroke();
textAlign(CENTER, CENTER);
textSize(8);
text("0", 0, 80);
text("1", 0, 95);
text("2", 0, 110);
text("3", 0, 125);
pop();
push();
translate(hx, hy);
stroke(0, 128);
strokeWeight(1);
noFill();
for (let a = 0; a < 360; a += 6) {
let x = cos(a) * 55;
let y = -sin(a) * 55;
line(0, 0, x, y);
}
stroke(0);
strokeWeight(2);
circle(0, 0, 110);
strokeWeight(1);
circle(0, 0, 55);
stroke(0, 128);
fill(128);
circle(0, 0, 30);
noStroke();
fill(255);
textAlign(CENTER, CENTER);
textSize(4);
text("HAIYANG", 0, 0);
pop();
textInfo(
`风扇 转速: ${speed.toFixed(2)}`,
"2022-12-17",
"赵海洋爸爸",
0
);
// let o = createVector(0, 0);
// let v = createVector(100, -100);
// let θ = createVector(1, 0).angleBetween(v);
// let r = v.mag();
// let x = cos(θ) * r;
// let y = sin(θ) * r;
// translate(width / 2, height / 2);
// stroke(255);
// strokeWeight(4);
// point(0, 0);
// point(x, y);
}
function keyPressed() {
if (key >= 0 && key <= 3) gear = key;
}
</script>
</head>
<body>
<main></main>
</body>
</html>

7
6.引力模拟.html
View File

@ -11,7 +11,7 @@
<script src="/lib/utils.js"></script>
<script>
const planets = [];
const plantsNumber = 10;
const plantsNumber = 50;
let sun;
function setup() {
@ -22,7 +22,10 @@
frameRate(60);
sun = createVector(width / 2, height / 2);
for (let i = 0; i < plantsNumber; i++) {
const planet = new Planet(random(width), random(height));
const planet = new Planet(
random(-200, 200) + width / 2,
random(-200, 200) + height / 2
);
planet.vel = p5.Vector.random2D();
planets.push(planet);
}

62
9.圆周与正弦波.html Normal file
View File

@ -0,0 +1,62 @@
<!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="/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script>
<script>
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0);
drawGrid(32);
noFill();
strokeWeight(2);
stroke("lightgreen");
const amp = 120;
beginShape();
for (let x = 200; x < width; x++) {
let p = (x + frameCount - 201) % 400;
let a = map(p, 0, 400, 0, PI * 4);
let y = map(sin(a), -1, 1, -amp / 2, amp / 2);
vertex(x, height / 2 - y);
}
endShape();
const p = (frameCount - 1) % 400;
const a = map(p, 0, 400, 0, PI * 4);
const o = createVector(75, height / 2);
const x = cos(a) * (amp / 2);
const y = sin(a) * (amp / 2);
const i = o.copy().add(x, -y);
const t = createVector(200, i.y);
stroke("pink");
circle(o.x, o.y, amp);
strokeWeight(1);
stroke("lightblue");
line(o.x, o.y, i.x, i.y);
line(i.x, i.y, t.x, t.y);
strokeWeight(5);
stroke("yellow");
point(o.x, o.y);
point(i.x, i.y);
point(t.x, t.y);
textInfo(
"圆周与正弦波 x = cos(a) * r, y = sin(a) * r ",
"2022-12-14"
);
}
</script>
</head>
<body>
<main></main>
</body>
</html>

28
TEST.html Normal file
View File

@ -0,0 +1,28 @@
<!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="/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script>
<script>
function setup() {
createCanvas(300, 500);
background(255);
noLoop();
}
function mousePressed() {
circle(mouseX, mouseY, 20);
}
</script>
</head>
<body>
<main></main>
</body>
</html>

37
lib/pendulum.js Normal file
View File

@ -0,0 +1,37 @@
class SimplePendulum extends p5.Vector {
constructor(x, y) {
super(x, y);
this.角度 = 0;
this.角速度 = 0;
this.摆长 = 100;
this.重锤 = createVector(this.x, this.y + this.摆长);
}
update(damping = 0) {
if (mouseIsPressed) {
this.重锤 = createVector(mouseX, mouseY);
this.摆长 = this.dist(this.重锤);
this.角速度 = 0;
const 向下矢量 = createVector(0, 1);
this.角度 = p5.Vector.sub(this.重锤, this).angleBetween(向下矢量);
} else {
// 未考虑时间精确性及重力加速度
this.角速度 -= sin(this.角度) / this.摆长; // -sin(Θ)g/L
this.角速度 = lerp(this.角速度, 0, damping); // 模拟阻尼
this.角度 += this.角速度;
this.重锤.x = this.x + this.摆长 * sin(this.角度);
this.重锤.y = this.y + this.摆长 * cos(this.角度);
}
}
draw() {
push();
fill(128);
stroke(255);
strokeWeight(1);
line(this.x, this.y, this.重锤.x, this.重锤.y);
circle(this.重锤.x, this.重锤.y, 20);
circle(this.x, this.y, 4);
pop();
}
}

8
lib/utils.js
View File

@ -9,21 +9,21 @@ function playdemos(list, delay = 10) {
list[n]();
}
function drawGrid(fade = 64) {
function drawGrid(fade = 64, color = 255) {
push();
colorMode(RGB);
stroke(200, fade);
stroke(color, fade);
strokeWeight(1);
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
for (let y = 0; y < height; y += 10) line(0, y, width, y);
pop();
}
function textInfo(title, date, name = "赵海洋爸爸") {
function textInfo(title, date, name = "赵海洋爸爸", color = 255) {
push();
colorMode(RGB);
fill(color);
noStroke();
fill(200);
text(`作品：${title}`, 30, height - 70);
text(`作者：${name}`, 30, height - 50);
text(`日期：${date}`, 30, height - 30);