83 lines
1.9 KiB
JavaScript
83 lines
1.9 KiB
JavaScript
let x,
|
|
y,
|
|
time = 0,
|
|
size = 10,
|
|
path = [];
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
angleMode(DEGREES);
|
|
pixelDensity(1);
|
|
colorMode(HSB);
|
|
cursor(CROSS);
|
|
frameRate(60);
|
|
x = width / 2;
|
|
y = height / 2;
|
|
noiseDetail(2, 0.5);
|
|
}
|
|
|
|
function draw() {
|
|
一维柏林噪声();
|
|
// 二维柏林噪声();
|
|
}
|
|
|
|
function 二维柏林噪声() {
|
|
background(0);
|
|
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);
|
|
}
|
|
}
|
|
drawGrid();
|
|
textInfo("二维柏林噪声", "2022/12/12");
|
|
}
|
|
|
|
function 一维柏林噪声() {
|
|
background(0);
|
|
drawGrid();
|
|
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");
|
|
}
|
|
|
|
function drawGrid() {
|
|
push();
|
|
stroke(0, 0, 255, 0.1);
|
|
strokeWeight(1);
|
|
for (let x = 0; x < width; x += 10) line(x, 0, x, height);
|
|
for (let y = 0; y < height; y += 10) line(0, y, width, y);
|
|
pop();
|
|
}
|
|
|
|
function textInfo(title, date, name = "赵海洋爸爸") {
|
|
push();
|
|
noStroke();
|
|
fill(255);
|
|
text(`作品：${title}`, 30, height - 70);
|
|
text(`作者：${name}`, 30, height - 50);
|
|
text(`日期：${date}`, 30, height - 30);
|
|
pop();
|
|
}
|