Passing settings to attractors correctly, fixing Dark attractor color, scaling+centering from-image to screen

Author: jasonwebb

core/ColorPresets.js

@@ -13,7 +13,7 @@ export const Light = {
 
 export const Dark = {
   BackgroundColor: 'rgba(0,0,0,.9)',
-  AttractorColor: 'rgba(0,0,0,.5)',
+  AttractorColor: 'rgba(255,255,255,.5)',
   BranchColor: 'rgba(255,255,255,1)',
   TipColor: 'rgba(0,255,255,1)',
   AttractionZoneColor: 'rgba(255,255,255,.002)',

experiments/basic/js/entry.js

@@ -39,6 +39,10 @@ let setupNetwork = () => {
   let waveAttractors = getWaveOfAttractors(ctx);
 
   network.attractors = gridAttractors;
+  
+  for(let attractor of network.attractors) {
+    attractor.settings = network.settings;
+  }
 
   // Add a set of random root nodes throughout scene
   for(let i=0; i<10; i++) {

experiments/bounds/js/entry.js

@@ -152,6 +152,10 @@ let resetNetwork = () => {
     let gridAttractors = getGridOfAttractors(150, 150, ctx, 10, network.bounds);
 
     network.attractors = gridAttractors;
+  
+    for(let attractor of network.attractors) {
+      attractor.settings = network.settings;
+    }
   }
 
   // Create the network with initial conditions

experiments/from-images/js/AttractorPatterns.js

@@ -7841,4 +7841,27 @@ export let GreekStatue = [
   [1651.9592, 560.744],
   [1650.6536, 555.5017],
   [1647.8226, 559.41113]
-];
+];
+
+export function calculateExtents(coordArray) {
+  let minX = Infinity, maxX = -Infinity;
+  let minY = Infinity, maxY = -Infinity;
+  
+  for(let coords of coordArray) {
+    minX = Math.min(minX, coords[0]);
+    maxX = Math.max(maxX, coords[0]);
+    minY = Math.min(minY, coords[1]);
+    maxY = Math.max(maxY, coords[1]);
+  }
+  
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+
+export let GreekStatueExtents = calculateExtents(GreekStatue);

experiments/from-images/js/entry.js

@@ -6,7 +6,7 @@ import Path from '../../../core/Path';
 import { random } from '../../../core/Utilities';
 import { setupKeyListeners } from '../../../core/KeyboardInteractions';
 import Settings from './Settings';
-import { GreekStatue } from './AttractorPatterns';
+import { GreekStatue, GreekStatueExtents } from './AttractorPatterns';
 
 let canvas, ctx;
 let network;
@@ -44,20 +44,34 @@ let resetNetwork = () => {
   let addAttractors = () => {
     let attractors = [];
 
+    // Scale the coordinates to fit within the window
+    const scale = Math.min(
+      window.innerWidth / GreekStatueExtents.width,
+      window.innerHeight / GreekStatueExtents.height
+    ) * 0.8; // 0.8 to leave some margin
+
+    // Center the pattern in the middle of the window
+    const offsetX = (window.innerWidth - (GreekStatueExtents.width * scale)) / 2;
+    const offsetY = (window.innerHeight - (GreekStatueExtents.height * scale)) / 2;
+
     for(let coords of GreekStatue) {
+      const x = (coords[0] - GreekStatueExtents.minX) * scale + offsetX;
+      const y = (coords[1] - GreekStatueExtents.minY) * scale + offsetY;
+      
       attractors.push(
         new Attractor(
-          new Vec2(
-            coords[0]*1.1 - 750,
-            coords[1]*1.1 - 90
-          ),
+          new Vec2(x, y),
           ctx,
           Settings
         )
       );
     }
 
     network.attractors = attractors;
+  
+    for(let attractor of network.attractors) {
+      attractor.settings = network.settings;
+    }
   }
 
   // Create the network with initial conditions
@@ -66,7 +80,7 @@ let resetNetwork = () => {
       new Node(
         null,
         new Vec2(
-          window.innerWidth/2 - 440,
+          window.innerWidth/2 - 190,
           window.innerHeight/2 + 100
         ),
         false,

experiments/marginal-growth/js/entry.js

@@ -224,6 +224,10 @@ let resetNetwork = () => {
   let generateAttractorsOnPath = () => {
     // network.attractors = createEvenlySpacedAttractors();
     network.attractors = createSubdividedAttractors();
+  
+    for(let attractor of network.attractors) {
+      attractor.settings = network.settings;
+    }
   }
 
     let createEvenlySpacedAttractors = () => {

experiments/obstacles/js/entry.js

@@ -180,6 +180,10 @@ let resetNetwork = () => {
     let gridAttractors = getGridOfAttractors(200, 200, ctx, 10, network.bounds, network.obstacles);
 
     network.attractors = gridAttractors;
+  
+    for(let attractor of network.attractors) {
+      attractor.settings = network.settings;
+    }
   }
 
   // Create the network with initial conditions

experiments/painting/js/entry.js

@@ -123,16 +123,18 @@ document.addEventListener('mousedown', (e) => {
         let radius = random(-attractorRadius, attractorRadius);
         let angle = random(360);
 
-        network.attractors.push(
-          new Attractor(
-            new Vec2(
-              e.clientX + Math.floor(radius * Math.cos(angle)),
-              e.clientY + Math.floor(radius * Math.sin(angle))
-            ),
-            ctx,
-            Settings
-          )
-        );
+        const newAttractor = new Attractor(
+          new Vec2(
+            e.clientX + Math.floor(radius * Math.cos(angle)),
+            e.clientY + Math.floor(radius * Math.sin(angle))
+          ),
+          ctx,
+          Settings
+        )
+
+        newAttractor.settings = network.settings;
+
+        network.attractors.push(newAttractor);
       }
 
       break;
@@ -173,16 +175,18 @@ document.addEventListener('mousemove', (e) => {
       let radius = random(-attractorRadius, attractorRadius);
       let angle = random(360);
 
-      network.attractors.push(
-        new Attractor(
-          new Vec2(
-            e.clientX + Math.floor(radius * Math.cos(angle)),
-            e.clientY + Math.floor(radius * Math.sin(angle))
-          ),
-          ctx,
-          Settings
-        )
-      );
+      const newAttractor = new Attractor(
+        new Vec2(
+          e.clientX + Math.floor(radius * Math.cos(angle)),
+          e.clientY + Math.floor(radius * Math.sin(angle))
+        ),
+        ctx,
+        Settings
+      )
+
+      newAttractor.settings = network.settings;
+
+      network.attractors.push(newAttractor);
     }
   }