2022-12-13 13:26:05 +00:00
|
|
|
<!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>
|
2022-12-30 10:50:06 +00:00
|
|
|
<script src="/lib/p5/p5.min.js"></script>
|
|
|
|
|
<script src="/lib/p5/addons/p5.sound.min.js"></script>
|
2022-12-13 13:26:05 +00:00
|
|
|
<script src="/lib/utils.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
let x,
|
|
|
|
|
y,
|
|
|
|
|
time = 0,
|
2022-12-13 17:09:46 +00:00
|
|
|
粒子贴图,
|
2022-12-13 13:26:05 +00:00
|
|
|
path = [];
|
|
|
|
|
|
|
|
|
|
function setup() {
|
|
|
|
|
createCanvas(600, 600);
|
|
|
|
|
noiseDetail(2, 0.5);
|
|
|
|
|
angleMode(DEGREES);
|
2022-12-13 17:09:46 +00:00
|
|
|
imageMode(CENTER);
|
2022-12-13 13:26:05 +00:00
|
|
|
colorMode(HSB);
|
|
|
|
|
cursor(CROSS);
|
|
|
|
|
frameRate(60);
|
|
|
|
|
x = width / 2;
|
|
|
|
|
y = height / 2;
|
2022-12-13 17:09:46 +00:00
|
|
|
粒子贴图 = loadImage("/img/transparencyfade.png");
|
2022-12-13 13:26:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function draw() {
|
2022-12-13 17:09:46 +00:00
|
|
|
time += deltaTime / 2000;
|
2022-12-13 13:26:05 +00:00
|
|
|
background(0);
|
2022-12-13 17:09:46 +00:00
|
|
|
二维柏林噪声();
|
|
|
|
|
一维柏林噪声();
|
2022-12-14 03:35:37 +00:00
|
|
|
textInfo("柏林噪声", "2022/12/12");
|
2022-12-13 13:26:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function 一维柏林噪声() {
|
2022-12-13 17:09:46 +00:00
|
|
|
y = map(noise(time), 0, 1, 0, height);
|
|
|
|
|
path.push(y);
|
|
|
|
|
path = path.slice(-width);
|
2022-12-13 13:26:05 +00:00
|
|
|
push();
|
2022-12-13 17:09:46 +00:00
|
|
|
strokeWeight(4);
|
2022-12-14 03:35:37 +00:00
|
|
|
for (let i = 0; i < path.length - 1; i++) {
|
|
|
|
|
let h = map(path[i], 0, height, 0, 255);
|
2022-12-13 13:26:05 +00:00
|
|
|
stroke(h, 255, 255, 1);
|
2022-12-13 17:09:46 +00:00
|
|
|
fill(h, 255, 255, 1);
|
2022-12-14 03:35:37 +00:00
|
|
|
line(i, path[i], i + 1, path[i + 1]);
|
|
|
|
|
}
|
2022-12-13 17:09:46 +00:00
|
|
|
circle(width, y, 8);
|
2022-12-13 13:26:05 +00:00
|
|
|
pop();
|
2022-12-13 17:09:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function 二维柏林噪声() {
|
2022-12-14 03:35:37 +00:00
|
|
|
for (let y = 0; y < height; y += 10) {
|
|
|
|
|
for (let x = 0; x < width; x += 10) {
|
|
|
|
|
const v = noise(x / 100 + time, y / 100);
|
2022-12-13 17:09:46 +00:00
|
|
|
const d = map(v, 0, 1, 0, 10) * 1.5;
|
2022-12-14 03:35:37 +00:00
|
|
|
image(粒子贴图, x, y, d, d);
|
2022-12-13 17:09:46 +00:00
|
|
|
}
|
|
|
|
|
}
|
2022-12-13 13:26:05 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<main></main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
