73 lines
2.4 KiB
HTML
73 lines
2.4 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,
|
|
粒子贴图,
|
|
path = [];
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
noiseDetail(2, 0.5);
|
|
angleMode(DEGREES);
|
|
imageMode(CENTER);
|
|
colorMode(HSB);
|
|
cursor(CROSS);
|
|
frameRate(60);
|
|
x = width / 2;
|
|
y = height / 2;
|
|
粒子贴图 = loadImage("/img/transparencyfade.png");
|
|
}
|
|
|
|
function draw() {
|
|
time += deltaTime / 2000;
|
|
background(0);
|
|
二维柏林噪声();
|
|
一维柏林噪声();
|
|
}
|
|
|
|
function 一维柏林噪声() {
|
|
y = map(noise(time), 0, 1, 0, height);
|
|
path.push(y);
|
|
path = path.slice(-width);
|
|
push();
|
|
strokeWeight(4);
|
|
path.forEach((y, i) => {
|
|
let h = map(y, 0, height, 0, 255);
|
|
stroke(h, 255, 255, 1);
|
|
fill(h, 255, 255, 1);
|
|
line(i, y, i + 1, path[i + 1]);
|
|
});
|
|
circle(width, y, 8);
|
|
pop();
|
|
textInfo("柏林噪声", "2022/12/12");
|
|
}
|
|
|
|
function 二维柏林噪声() {
|
|
noStroke();
|
|
for (let j = 0; j < height; j += 10) {
|
|
for (let i = 0; i < width; i += 10) {
|
|
const v = noise(i / 100 + time, j / 100);
|
|
const d = map(v, 0, 1, 0, 10) * 1.5;
|
|
image(粒子贴图, i, j, d, d);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|