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();
}