141 lines
4.5 KiB
HTML
141 lines
4.5 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>
|
|
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; θ < 360; θ += 3) {
|
|
let d = r * sin(θ * 2);
|
|
vertex(cos(θ) * d, -sin(θ) * d);
|
|
}
|
|
endShape(CLOSE);
|
|
speed = lerp(speed, speeds[gear], acceleration);
|
|
angle =
|
|
(angle + anglePerFrame * (speed * random(0.99, 1.01))) %
|
|
360;
|
|
pop();
|
|
}
|
|
|
|
function draw() {
|
|
background(255);
|
|
drawGrid(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);
|
|
fill("rgba(128,128,255,0.8)");
|
|
circle(0, 80 + 15 * gear, 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();
|
|
|
|
text(`每分钟 ${speed.toFixed(0)} 转`, 200, 45);
|
|
line(200, 50, 280, 50);
|
|
line(200, 50, 190, 60);
|
|
textInfo(`风扇`, "2022-12-17", "赵海洋爸爸", 0);
|
|
}
|
|
|
|
function keyPressed() {
|
|
if (key >= 0 && key <= 3) gear = key;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|