gitpush

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

@@ -1,115 +0,0 @@
----
-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>

source/_posts/作品/p5js/柏林噪声1D.md

@@ -0,0 +1,80 @@
+---
+title: 柏林噪声1D
+categories:
+    - 作品
+    - p5js
+keywords: [noise]
+tags: []
+date: 2022-09-18 16:45:10
+---
+
+<style>
+    pre,
+    code {
+        font-family: 'Fira Code', 'Ubuntu Mono', monospace;
+    }
+</style>
+
+``` js
+let offset = 0
+let ratio = 0.01
+let speed = 0.01
+function setup() {
+    createCanvas().parent(p5Container)
+    windowResized()
+    noiseDetail(2, 0.5)
+    strokeWeight(2)
+    stroke('blue')
+    noFill()
+}
+function draw() {
+    background(200)
+    beginShape()
+    for (let x = 0; x < width; x++) {
+        const y = noise(offset + x * ratio) * height
+        vertex(x, y)
+    }
+    endShape()
+    offset += speed
+}
+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"></script>
+<script src="//zhao/js/p5.sound.min.js"></script>
+<script>
+    let offset = 0
+    let ratio = 0.01
+    let speed = 0.01
+    function setup() {
+        createCanvas().parent(p5Container)
+        windowResized()
+        noiseDetail(2, 0.5)
+        strokeWeight(2)
+        stroke('blue')
+        noFill()
+    }
+    function draw() {
+        background(200)
+        beginShape()
+        for (let x = 0; x < width; x++) {
+            const y = noise(offset + x * ratio) * height
+            vertex(x, y)
+        }
+        endShape()
+        offset += speed
+    }
+    function windowResized() {
+        const width = p5Container.offsetWidth;
+        const height = Math.round(9 * width / 16);
+        resizeCanvas(width, height);
+    }
+</script>