blog/source/_posts/作品/p5js/hello.md

title	categories	keywords	tags	date
hello p5.js	作品 p5js			2022-09-18 16:45:10

let tx = 0, ty = 0, tr = 0, tg = 0, tb = 0;
let sx, sy, sr, sg, sb;
let x1, y1, x2, y2, r, g, b;
let p5Canvas

function setup() {
    p5Canvas = createCanvas();
    p5Canvas.parent(p5Container)
    windowResized()

    background(0);

    sx = random(100000000);
    sy = random(100000000);
    sr = random(100000000);
    sg = random(100000000);
    sb = random(100000000);

    noiseSeed(sx);
    x1 = map(noise(tx), 0, 1, 0, width);
    noiseSeed(sy);
    y1 = map(noise(ty), 0, 1, 0, height);

}

function draw() {
    let dt = deltaTime / 1000;
    tx += dt, ty += dt, tr += dt, tg += dt, tb += dt;
    noiseSeed(sx);
    x2 = map(noise(tx), 0, 1, 0, width);
    noiseSeed(sy);
    y2 = map(noise(ty), 0, 1, 0, height);
    noiseSeed(sr);
    r = map(noise(tr), 0, 1, 0, 255);
    noiseSeed(sg);
    g = map(noise(tg), 0, 1, 0, 255);
    noiseSeed(sb);
    b = map(noise(tb), 0, 1, 0, 255);
    stroke(color(r, g, b));
    strokeWeight(8);
    line(x1, y1, x1 = x2, y1 = y2);
    background(0, 16);
}

function windowResized() {
    const width = p5Container.offsetWidth;
    const height = Math.round(9 * width / 16);
    resizeCanvas(width, height);
}