88 lines
2.8 KiB
HTML
88 lines
2.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 x,
|
||
|
|
y,
|
||
|
|
time = 0,
|
||
|
|
size = 10,
|
||
|
|
path = [];
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
createCanvas(600, 600);
|
||
|
|
noiseDetail(2, 0.5);
|
||
|
|
angleMode(DEGREES);
|
||
|
|
colorMode(HSB);
|
||
|
|
cursor(CROSS);
|
||
|
|
frameRate(60);
|
||
|
|
x = width / 2;
|
||
|
|
y = height / 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
一维柏林噪声();
|
||
|
|
// 二维柏林噪声();
|
||
|
|
}
|
||
|
|
|
||
|
|
function 二维柏林噪声() {
|
||
|
|
background(0);
|
||
|
|
drawGrid(32);
|
||
|
|
noStroke();
|
||
|
|
time += deltaTime / 1000;
|
||
|
|
for (let j = 0; j < height; j += size) {
|
||
|
|
for (let i = 0; i < width; i += size) {
|
||
|
|
const r = map(
|
||
|
|
noise(i / 100 + time, j / 100),
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
0,
|
||
|
|
10
|
||
|
|
);
|
||
|
|
circle(i, j, r);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
textInfo("二维柏林噪声", "2022/12/12");
|
||
|
|
}
|
||
|
|
|
||
|
|
function 一维柏林噪声() {
|
||
|
|
background(0);
|
||
|
|
drawGrid(32);
|
||
|
|
time += deltaTime / 1000;
|
||
|
|
y = map(noise(time), 0, 1, 0, width);
|
||
|
|
h = map(y, 0, height, 0, 255);
|
||
|
|
path.push(h);
|
||
|
|
path = path.slice(-height);
|
||
|
|
push();
|
||
|
|
noFill();
|
||
|
|
stroke(255);
|
||
|
|
strokeWeight(2);
|
||
|
|
beginShape();
|
||
|
|
path.forEach((h, i) => vertex(i, h));
|
||
|
|
endShape();
|
||
|
|
strokeWeight(8);
|
||
|
|
path.forEach((h, i) => {
|
||
|
|
stroke(h, 255, 255, 1);
|
||
|
|
point(i, height / 2);
|
||
|
|
});
|
||
|
|
noStroke();
|
||
|
|
fill(h, 255, 255, 1);
|
||
|
|
circle(x, y, 16);
|
||
|
|
pop();
|
||
|
|
textInfo("一维柏林噪声", "2022/12/12");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main></main>
|
||
|
|
</body>
|
||
|
|
</html>
|