Noise2D update

An update to the Noise2D example

Author: takyano

src/data/examples/en/08_Math/15_Noise2D.js

@@ -12,31 +12,41 @@ function setup() {
   createCanvas(640, 360);
 }
 
+function drawNoise(x, y, w, h) {
+  for (let yp = y; yp < y + h; yp++) {
+    let yindex = yp * width;
+    for (let xp = x; xp < x + w; xp++) {
+      let noiseVal =
+        noise((mouseX + xp) * noiseScale, (mouseY + yp) * noiseScale) * 255;
+
+      let xindex = xp;
+      let index = 4 * (yindex + xindex);
+      pixels[index] = noiseVal;
+      pixels[index + 1] = noiseVal;
+      pixels[index + 2] = noiseVal;
+      pixels[index + 3] = 255;
+    }
+  }
+}
+
 function draw() {
   background(0);
+
+  loadPixels();
+
   // Draw the left half of image
-  for (let y = 0; y < height - 30; y++) {
-    for (let x = 0; x < width / 2; x++) {
-      // noiseDetail of the pixels octave count and falloff value
-      noiseDetail(2, 0.2);
-      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
-      stroke(noiseVal * 255);
-      point(x, y);
-    }
-  }
+  noiseDetail(2, 0.2);
+  drawNoise(0, 0, width / 2, height - 30);
+
   // Draw the right half of image
-  for (let y = 0; y < height - 30; y++) {
-    for (let x = width / 2; x < width; x++) {
-      // noiseDetail of the pixels octave count and falloff value
-      noiseDetail(5, 0.5);
-      noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);
-      stroke(noiseVal * 255);
-      point(x, y);
-    }
-  }
+  noiseDetail(5, 0.5);
+  drawNoise(width / 2, 0, width / 2, height - 30);
+
+  updatePixels();
+
   //Show the details of two partitions
   textSize(18);
   fill(255, 255, 255);
-  text('Noise2D with 2 octaves and 0.2 falloff', 10, 350);
-  text('Noise2D with 5 octaves and 0.5 falloff', 330, 350);
+  text("Noise2D with 2 octaves and 0.2 falloff", 10, 350);
+  text("Noise2D with 5 octaves and 0.5 falloff", 330, 350);
 }