p5での描画を、 p5.pixels を直接触るように変更する

README.md

@@ -7,9 +7,6 @@
 
 ## pages 
 
-> [!warning]
-> `lenia with p5.js` page is heavily loaded. 
-
 - with canvas API
   - https://hirokiyoshida837.github.io/Lenia-js/lenia/canvas
 - with p5.js

src/app/lenia/p5/page.tsx

@@ -2,25 +2,21 @@
 
 import {NextPage} from 'next';
 import p5Types from 'p5'
-import {useRef} from "react";
 import {Sketch} from "@p5-wrapper/react";
 import Enumerable from "linq";
 import {initialFieldLenia, initialKernel} from "@/lib/gol/lenia/constants";
 import {LeniaCalculatorByFFT} from "@/lib/gol/lenia/logic";
 import {SketchContainer} from "@/components/sketch-container";
 
-const size = 128;
-const gridSize = 8;
+const size = 256;
+const gridSize = 4;
 
 const canvasSize = {
   // 1マス 8px x 64マス
   x: gridSize * size,
   y: gridSize * size,
 };
 
-const rectWidth = canvasSize.x / size;
-const rectHeight = canvasSize.y / size;
-
 const Page: NextPage = () => {
 
   const sketch: Sketch = (p5: p5Types) => {
@@ -35,24 +31,35 @@ const Page: NextPage = () => {
       }
     }
 
+    for (let i = 0; i < initialFieldLenia.length; i++) {
+      for (let j = 0; j < initialFieldLenia[i].length; j++) {
+        field[j + 20][i + 30] = initialFieldLenia[i][j];
+      }
+    }
+
+    for (let i = 0; i < initialFieldLenia.length; i++) {
+      for (let j = 0; j < initialFieldLenia[i].length; j++) {
+        field[j + 40][i + 80] = initialFieldLenia[i][j];
+      }
+    }
+
+
     const kernel27x27 = initialKernel
 
     const leniaCalculator = new LeniaCalculatorByFFT(kernel27x27, 0.15, 0.0191, size);
-    // const leniaCalculator = new LeniaCalculator(kernel27x27, 0.15, 0.0185, 64);
 
     let loopCount = 0;
 
     p5.setup = () => {
       // https://himco.jp/2020/04/12/p5-js%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96/#FPS_%EF%BC%91%E7%A7%92%E5%BD%93%E3%81%9F%E3%82%8A%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E6%95%B0
       p5.disableFriendlyErrors = true; // FESを無効化
       p5.createCanvas(canvasSize.x, canvasSize.y)
-      p5.frameRate(30)
-      // p5.rectMode("center")
-      p5.colorMode('hsb', 100);
+
+      // p5.noLoop()
+      p5.pixelDensity(1)
     }
 
     p5.draw = () => {
-      p5.scale(gridSize)
       // console.log(p5.frameRate())
 
       drawCanvas(p5, field)
@@ -68,19 +75,41 @@ const Page: NextPage = () => {
 
 }
 
+/**
+ *
+ * @param p5
+ * @param field
+ */
 const drawCanvas = (p5: p5Types, field: number[][]) => {
 
   p5.background(0);
 
-  for (let i = 0; i < field.length; i++) {
-    for (let j = 0; j < field[i].length; j++) {
+  p5.loadPixels();
+
+  // 渡されたfieldを描画する
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+
+      const v = Math.floor(field[x][y] * 255);
+
+      // グリッド内を同じ色で塗りつぶし
+      for (let py = 0; py < gridSize; py++) {
+        for (let px = 0; px < gridSize; px++) {
+
+          const fx = (x * gridSize) + px;
+          const fy = (y * gridSize) + py;
+
+          const fpos = ((fx % canvasSize.x) + (fy * canvasSize.y)) * 4;
+
+          // R, G, B, A
+          [p5.pixels[fpos], p5.pixels[fpos + 1], p5.pixels[fpos + 2], p5.pixels[fpos + 3]] = [v, v, v, 255]
+        }
+      }
 
-      const v = field[i][j];
-      const v1 = (v * 75 + 60) % 100;
-      p5.stroke(v1, 100, 80)
-      p5.point(j, i)
     }
   }
+
+  p5.updatePixels();
 }