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