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

``` js
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);
}
```

<!-- more -->

<div id="p5Container"></div>

<script src="//zhao/js/p5.min.js", defer></script>
<script src="//zhao/js/p5.sound.min.js", defer></script>
<script>
    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);
    }
</script>