p5js/5.醉汉模拟.html
2022-12-13 21:26:05 +08:00

60 lines
1.8 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>
let walker;
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
cursor(CROSS);
frameRate(60);
stroke(255, 32);
walker = new Walker(width / 2, height / 2);
background(0);
drawGrid(32);
}
function draw() {
// background(255);
strokeWeight(1);
strokeWeight(4);
for (let i = 0; i < 10; i++) {
walker.move();
walker.show();
}
textInfo("醉汉模拟", "2022-12-10");
}
class Walker {
constructor(x, y) {
this.pos = createVector(x, y);
this.count = 0;
}
move() {
let step = p5.Vector.random2D().mult(2);
this.pos.add(step);
if (this.count++ > 10000) {
this.pos = createVector(width / 2, height / 2);
this.count = 0;
}
}
show() {
point(this.pos.x, this.pos.y);
}
}
</script>
</head>
<body>
<main></main>
</body>
</html>