gitpush

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

@@ -0,0 +1,103 @@
+---
+title: 柏林噪声2D
+categories:
+  - 作品
+  - p5js
+keywords: [noise]
+tags: []
+date: 2022-09-18 22:53:03
+---
+
+``` js
+let offestX = 0
+let speedX = 0.05
+let offsetY = 0
+let speedY = 0
+let noiseScale = 0.05
+let fps = 0
+function setup() {
+    createCanvas().parent(p5Container)
+    windowResized()
+    noiseDetail(4, 0.5)
+    pixelDensity(1)
+    frameRate(30)
+    noStroke()
+}
+function draw() {
+    loadPixels()
+    for (let y = 0; y < height; y++) {
+        const noiseY = offsetY + y * noiseScale
+        for (let x = 0; x < width; x++) {
+            const noiseX = offestX + x * noiseScale
+            const noise2D = noise(noiseX, noiseY)
+            const noiseV = map(noise2D, 0, 1, 0, 255)
+            const index = (x + width * y) * 4
+            pixels[index + 0] = noiseV
+            pixels[index + 1] = noiseV
+            pixels[index + 2] = noiseV
+            pixels[index + 3] = 255
+        }
+    }
+    updatePixels()
+    offestX += speedX
+    offsetY += speedY
+}
+function keyPressed() {
+    isLooping() ? noLoop() : loop()
+}
+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 offestX = 0
+let speedX = 0.05
+let offsetY = 0
+let speedY = 0
+let noiseScale = 0.05
+let fps = 0
+function setup() {
+    createCanvas().parent(p5Container)
+    windowResized()
+    noiseDetail(4, 0.5)
+    pixelDensity(1)
+    frameRate(30)
+    noStroke()
+}
+function draw() {
+    loadPixels()
+    for (let y = 0; y < height; y++) {
+        const noiseY = offsetY + y * noiseScale
+        for (let x = 0; x < width; x++) {
+            const noiseX = offestX + x * noiseScale
+            const noise2D = noise(noiseX, noiseY)
+            const noiseV = map(noise2D, 0, 1, 0, 255)
+            const index = (x + width * y) * 4
+            pixels[index + 0] = noiseV
+            pixels[index + 1] = noiseV
+            pixels[index + 2] = noiseV
+            pixels[index + 3] = 255
+        }
+    }
+    updatePixels()
+    offestX += speedX
+    offsetY += speedY
+}
+function keyPressed() {
+    isLooping() ? noLoop() : loop()
+}
+function windowResized() {
+    const width = p5Container.offsetWidth;
+    const height = Math.round(9 * width / 16);
+    resizeCanvas(width, height);
+}
+</script>