63 lines
2.1 KiB
HTML
63 lines
2.1 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="/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(255);
|
|
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>
|