perlin noise field and interactivity

jimothy001 · Nov 30, 2022 · ad761a0 · ad761a0
1 parent c3ae107
commit ad761a0
Show file tree

Hide file tree

Showing 5 changed files with 589 additions and 201 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,16 +2,21 @@
 <html lang = "en">
     <head>
         <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="style/style.css"/>
+        <!-- <script src="js/p5.js"></script> -->
         <script src="js/p5.min.js"></script>
         <!-- <script src="js/example.js"></script> -->
+        <script src="js/global.js"></script>
+        <script src="js/cell.js"></script>
         <script src="js/main.js"></script>
         <title>Gray Scott Plus!</title>
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
-        <h1>Gray Scott Plus!</h1>
+
         <main>
 
         </main>
+        <!-- <h1>Gray Scott Plus!</h1> -->
     </body>
 </html>
diff --git a/public/js/cell.js b/public/js/cell.js
@@ -0,0 +1,87 @@
+//cell class
+class Cell {
+    constructor(x, y, a, b, noiseX, noiseY, noiseScalar)
+    {
+        this.x = x;
+        this.y = y;
+
+
+        this.setAB = (a, b) =>
+        {
+            this.a = constrain(a, 0, 1);
+            this.b = constrain(b, 0, 1);
+        }
+        this.setAB(a, b);
+
+        this.zeroWeights = () =>
+        {
+            this.weightLftUp = weightDiagonal;
+            this.weightCtrUp = weightOrtho;
+            this.weightRgtUp = weightDiagonal;
+            this.weightLftCr = weightOrtho;
+            this.weightCtrCr = weightReset;
+            this.weightRgtCr = weightOrtho;
+            this.weightLftDn = weightDiagonal;
+            this.weightCtrDn = weightOrtho;
+            this.weightRgtDn = weightDiagonal;
+        }
+        this.zeroWeights();
+
+        //calculate individual bias weight
+        this.calcBiasIndiv = (dir, biasX, biasY, baseWeight, scalar) => 
+        {
+            const sumX = dir.x + biasX;
+            const sumY = dir.y + biasY;
+
+            return sqrt((sumX * sumX) + (sumY * sumY)) * baseWeight * scalar;
+        }
+
+        //calculate new bias weights
+        this.calcWeights = (biasX, biasY, scalar) => 
+        {
+            let total = 0;
+            total += this.weightLftUp = weightDiagonal + this.calcBiasIndiv(dirLftUp, biasX, biasY, weightDiagonal, scalar);
+            total += this.weightCtrUp = weightOrtho + this.calcBiasIndiv(dirCtrUp, biasX, biasY, weightOrtho, scalar);
+            total += this.weightRgtUp = weightDiagonal + this.calcBiasIndiv(dirRgtUp, biasX, biasY, weightDiagonal, scalar);
+            total += this.weightLftCr = weightOrtho + this.calcBiasIndiv(dirLftCr, biasX, biasY, weightOrtho, scalar);
+            //total += weightCtrCr = weightReset;
+            total += this.weightRgtCr = weightOrtho + this.calcBiasIndiv(dirRgtCr, biasX, biasY, weightOrtho, scalar);
+            total += this.weightLftDn = weightDiagonal + this.calcBiasIndiv(dirLftDn, biasX, biasY, weightDiagonal, scalar);
+            total += this.weightCtrDn = weightOrtho + this.calcBiasIndiv(dirCtrDn, biasX, biasY, weightOrtho, scalar);
+            total += this.weightRgtDn = weightDiagonal + this.calcBiasIndiv(dirRgtDn, biasX, biasY, weightDiagonal, scalar);
+
+            this.weightLftUp /= total;
+            this.weightCtrUp /= total;
+            this.weightRgtUp /= total;
+            this.weightLftCr /= total;
+
+            this.weightRgtCr /= total;
+            this.weightLftDn /= total;
+            this.weightCtrDn /= total;
+            this.weightRgtDn /= total;
+
+            //console.log(weightLftUp);
+        }
+
+        this.setWeights = (noiseX, noiseY, scalar) => 
+        {
+            this.noiseX = noiseX;
+            this.noiseY = noiseY;
+
+            //set bias as unitized noise values
+            const mag = sqrt((noiseX * noiseX) + (noiseY * noiseY));
+            const biasX = noiseX / mag;
+            const biasY = noiseY / mag;
+
+            this.calcWeights(biasX, biasY, scalar);
+        }
+        this.setWeights(noiseX, noiseY, noiseScalar);
+
+        this.setWeightScalar = (scalar) =>
+        {
+            this.setWeights(this.noiseX, this.noiseY, scalar);
+        }
+
+        return this;
+    } 
+}
diff --git a/public/js/global.js b/public/js/global.js
@@ -0,0 +1,57 @@
+const uiWidth = 256; //width of the ui bar
+const w = 512; //totalWidth - uiWidth; //grid width. TODO: make this resolution adjustable and interpolate while drawing
+const totalWidth = w + uiWidth;//innerWidth; //total width of the p5 canvas. TODO: make this responsive to resizing 
+const h = 512; //grid height. TODO: make this resolution scalable and interpolate while drawing
+const vecStep = 8;
+
+//let gridNoise = []; //grid current state noise
+let gridNow = []; //grid current state
+let gridNext = []; //grid future state
+let gridVec = []; //grid vector state
+
+const weightReset = -1; //reset weight for cell self
+const weightOrtho = 0.2; //base weight for cell ortho neighbors
+const weightDiagonal = 0.05; //base weight for cell diagonal neighbors
+const deltaA = 1.0; //base speed for A
+const deltaB = 0.5; //base speed for B
+let feedRate = 0.029; //0.025; //0.0w55;
+let killRate = 0.057; //0.06; //0.062; 
+let timeScalar = 1.0; //speed dampener
+let paintRangeScalar = 0.1; //paint brush radius
+let noiseScalar = 0.005;
+let vecScalar = 0.03;
+
+feedKillPresets = {
+    "mazes": {feed: 0.029, kill: 0.057},
+    "solitions": {feed: 0.03, kill: 0.062},
+    "pulsating solitions": {feed: 0.025, kill: 0.062},
+    "worms": {feed: 0.078, kill: 0.061},
+    "holes": {feed: 0.039, kill: 0.058},
+    "chaos": {feed: 0.026, kill: 0.051},
+    "chaos and holes (by clem)": {feed: 0.034, kill: 0.056},
+    "moving spots": {feed: 0.014, kill: 0.054},
+    "spots and loops": {feed: 0.018, kill: 0.051},
+    "waves": {feed: 0.014, kill: 0.045},
+    "the u-skate world": {feed: 0.062, kill: 0.06093}
+};
+
+let dirLftUp = null; //left up vector
+let dirCtrUp = null; //center up vector
+let dirRgtUp = null; //right up vector
+let dirLftCr = null; //left center vector
+let dirCtrCr = null; //center vector (0, 0)
+let dirRgtCr = null; //right center vector
+let dirLftDn = null; //left down vector
+let dirCtrDn = null; //center down vector
+let dirRgtDn = null; //right down vector
+
+//let biasVec = null; //bias vector
+let weightLftUp = weightDiagonal; //left up result weight
+let weightCtrUp = weightOrtho; //center up result weight
+let weightRgtUp = weightDiagonal; //right up result weight
+let weightLftCr = weightOrtho; //left center result weight
+let weightCtrCr = weightReset; //center reset weight (-1)
+let weightRgtCr = weightOrtho; //right center result weight
+let weightLftDn = weightDiagonal; //left down result weight
+let weightCtrDn = weightOrtho; //center down result weight
+let weightRgtDn = weightDiagonal; //right down result weight