✅ Fix CI

matyo91 · Oct 15, 2024 · 3524260 · 3524260
1 parent 2d4f375
commit 3524260
Show file tree

Hide file tree

Showing 172 changed files with 1,059 additions and 241 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,12 @@ Flow as a container for PHP-ETL, for more details, please visit: [https://php-et
 bin/console app:php-etl
 ```
 
+### Wave Function Collapse
+
+Inspired by
+- https://github.com/CodingTrain/Wave-Function-Collapse
+- https://github.com/FeatheredSnek/phpwfc
+
 ## License
 
 Live Flow is released under the MIT License.
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/0.png b/assets/images/wave-function-collapse/circuit-coding-train/0.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/1.png b/assets/images/wave-function-collapse/circuit-coding-train/1.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/10.png b/assets/images/wave-function-collapse/circuit-coding-train/10.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/11.png b/assets/images/wave-function-collapse/circuit-coding-train/11.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/12.png b/assets/images/wave-function-collapse/circuit-coding-train/12.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/2.png b/assets/images/wave-function-collapse/circuit-coding-train/2.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/3.png b/assets/images/wave-function-collapse/circuit-coding-train/3.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/4.png b/assets/images/wave-function-collapse/circuit-coding-train/4.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/5.png b/assets/images/wave-function-collapse/circuit-coding-train/5.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/6.png b/assets/images/wave-function-collapse/circuit-coding-train/6.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/7.png b/assets/images/wave-function-collapse/circuit-coding-train/7.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/8.png b/assets/images/wave-function-collapse/circuit-coding-train/8.png
diff --git a/assets/images/wave-function-collapse/circuit-coding-train/9.png b/assets/images/wave-function-collapse/circuit-coding-train/9.png
diff --git a/assets/images/wave-function-collapse/circuit/0.png b/assets/images/wave-function-collapse/circuit/0.png
diff --git a/assets/images/wave-function-collapse/circuit/1.png b/assets/images/wave-function-collapse/circuit/1.png
diff --git a/assets/images/wave-function-collapse/circuit/10.png b/assets/images/wave-function-collapse/circuit/10.png
diff --git a/assets/images/wave-function-collapse/circuit/11.png b/assets/images/wave-function-collapse/circuit/11.png
diff --git a/assets/images/wave-function-collapse/circuit/12.png b/assets/images/wave-function-collapse/circuit/12.png
diff --git a/assets/images/wave-function-collapse/circuit/2.png b/assets/images/wave-function-collapse/circuit/2.png
diff --git a/assets/images/wave-function-collapse/circuit/3.png b/assets/images/wave-function-collapse/circuit/3.png
diff --git a/assets/images/wave-function-collapse/circuit/4.png b/assets/images/wave-function-collapse/circuit/4.png
diff --git a/assets/images/wave-function-collapse/circuit/5.png b/assets/images/wave-function-collapse/circuit/5.png
diff --git a/assets/images/wave-function-collapse/circuit/6.png b/assets/images/wave-function-collapse/circuit/6.png
diff --git a/assets/images/wave-function-collapse/circuit/7.png b/assets/images/wave-function-collapse/circuit/7.png
diff --git a/assets/images/wave-function-collapse/circuit/8.png b/assets/images/wave-function-collapse/circuit/8.png
diff --git a/assets/images/wave-function-collapse/circuit/9.png b/assets/images/wave-function-collapse/circuit/9.png
diff --git a/assets/images/wave-function-collapse/demo-tracks/blank.png b/assets/images/wave-function-collapse/demo-tracks/blank.png
diff --git a/assets/images/wave-function-collapse/demo-tracks/down.png b/assets/images/wave-function-collapse/demo-tracks/down.png
diff --git a/assets/images/wave-function-collapse/demo-tracks/left.png b/assets/images/wave-function-collapse/demo-tracks/left.png
diff --git a/assets/images/wave-function-collapse/demo-tracks/right.png b/assets/images/wave-function-collapse/demo-tracks/right.png
diff --git a/assets/images/wave-function-collapse/demo-tracks/up.png b/assets/images/wave-function-collapse/demo-tracks/up.png
diff --git a/assets/images/wave-function-collapse/demo/blank.png b/assets/images/wave-function-collapse/demo/blank.png
diff --git a/assets/images/wave-function-collapse/demo/down.png b/assets/images/wave-function-collapse/demo/down.png
diff --git a/assets/images/wave-function-collapse/demo/left.png b/assets/images/wave-function-collapse/demo/left.png
diff --git a/assets/images/wave-function-collapse/demo/right.png b/assets/images/wave-function-collapse/demo/right.png
diff --git a/assets/images/wave-function-collapse/demo/up.png b/assets/images/wave-function-collapse/demo/up.png
diff --git a/assets/images/wave-function-collapse/floor/001.png b/assets/images/wave-function-collapse/floor/001.png
diff --git a/assets/images/wave-function-collapse/floor/002.png b/assets/images/wave-function-collapse/floor/002.png
diff --git a/assets/images/wave-function-collapse/floor/003.png b/assets/images/wave-function-collapse/floor/003.png
diff --git a/assets/images/wave-function-collapse/floor/004.png b/assets/images/wave-function-collapse/floor/004.png
diff --git a/assets/images/wave-function-collapse/floor/005.png b/assets/images/wave-function-collapse/floor/005.png
diff --git a/assets/images/wave-function-collapse/floor/006.png b/assets/images/wave-function-collapse/floor/006.png
diff --git a/assets/images/wave-function-collapse/floor/007.png b/assets/images/wave-function-collapse/floor/007.png
diff --git a/assets/images/wave-function-collapse/floor/008.png b/assets/images/wave-function-collapse/floor/008.png
diff --git a/assets/images/wave-function-collapse/floor/009.png b/assets/images/wave-function-collapse/floor/009.png
diff --git a/assets/images/wave-function-collapse/floor/010.png b/assets/images/wave-function-collapse/floor/010.png
diff --git a/assets/images/wave-function-collapse/floor/011.png b/assets/images/wave-function-collapse/floor/011.png
diff --git a/assets/images/wave-function-collapse/floor/012.png b/assets/images/wave-function-collapse/floor/012.png
diff --git a/assets/images/wave-function-collapse/floor/013.png b/assets/images/wave-function-collapse/floor/013.png
diff --git a/assets/images/wave-function-collapse/floor/014.png b/assets/images/wave-function-collapse/floor/014.png
diff --git a/assets/images/wave-function-collapse/floor/015.png b/assets/images/wave-function-collapse/floor/015.png
diff --git a/assets/images/wave-function-collapse/floor/016.png b/assets/images/wave-function-collapse/floor/016.png
diff --git a/assets/images/wave-function-collapse/floor/017.png b/assets/images/wave-function-collapse/floor/017.png
diff --git a/assets/images/wave-function-collapse/mountains/blank.png b/assets/images/wave-function-collapse/mountains/blank.png
diff --git a/assets/images/wave-function-collapse/mountains/down.png b/assets/images/wave-function-collapse/mountains/down.png
diff --git a/assets/images/wave-function-collapse/mountains/left.png b/assets/images/wave-function-collapse/mountains/left.png
diff --git a/assets/images/wave-function-collapse/mountains/right.png b/assets/images/wave-function-collapse/mountains/right.png
diff --git a/assets/images/wave-function-collapse/mountains/up.png b/assets/images/wave-function-collapse/mountains/up.png
diff --git a/assets/images/wave-function-collapse/pipes/blank.png b/assets/images/wave-function-collapse/pipes/blank.png
diff --git a/assets/images/wave-function-collapse/pipes/down.png b/assets/images/wave-function-collapse/pipes/down.png
diff --git a/assets/images/wave-function-collapse/pipes/left.png b/assets/images/wave-function-collapse/pipes/left.png
diff --git a/assets/images/wave-function-collapse/pipes/right.png b/assets/images/wave-function-collapse/pipes/right.png
diff --git a/assets/images/wave-function-collapse/pipes/up.png b/assets/images/wave-function-collapse/pipes/up.png
diff --git a/assets/images/wave-function-collapse/polka/blank.png b/assets/images/wave-function-collapse/polka/blank.png
diff --git a/assets/images/wave-function-collapse/polka/down.png b/assets/images/wave-function-collapse/polka/down.png
diff --git a/assets/images/wave-function-collapse/polka/left.png b/assets/images/wave-function-collapse/polka/left.png
diff --git a/assets/images/wave-function-collapse/polka/right.png b/assets/images/wave-function-collapse/polka/right.png
diff --git a/assets/images/wave-function-collapse/polka/up.png b/assets/images/wave-function-collapse/polka/up.png
diff --git a/assets/images/wave-function-collapse/rail/tile0.png b/assets/images/wave-function-collapse/rail/tile0.png
diff --git a/assets/images/wave-function-collapse/rail/tile1.png b/assets/images/wave-function-collapse/rail/tile1.png
diff --git a/assets/images/wave-function-collapse/rail/tile2.png b/assets/images/wave-function-collapse/rail/tile2.png
diff --git a/assets/images/wave-function-collapse/rail/tile3.png b/assets/images/wave-function-collapse/rail/tile3.png
diff --git a/assets/images/wave-function-collapse/rail/tile4.png b/assets/images/wave-function-collapse/rail/tile4.png
diff --git a/assets/images/wave-function-collapse/rail/tile5.png b/assets/images/wave-function-collapse/rail/tile5.png
diff --git a/assets/images/wave-function-collapse/rail/tile6.png b/assets/images/wave-function-collapse/rail/tile6.png
diff --git a/assets/images/wave-function-collapse/roads/blank.png b/assets/images/wave-function-collapse/roads/blank.png
diff --git a/assets/images/wave-function-collapse/roads/down.png b/assets/images/wave-function-collapse/roads/down.png
diff --git a/assets/images/wave-function-collapse/roads/left.png b/assets/images/wave-function-collapse/roads/left.png
diff --git a/assets/images/wave-function-collapse/roads/right.png b/assets/images/wave-function-collapse/roads/right.png
diff --git a/assets/images/wave-function-collapse/roads/up.png b/assets/images/wave-function-collapse/roads/up.png
diff --git a/assets/images/wave-function-collapse/space/floor-base.png b/assets/images/wave-function-collapse/space/floor-base.png
diff --git a/assets/images/wave-function-collapse/space/floor-crack-a.png b/assets/images/wave-function-collapse/space/floor-crack-a.png
diff --git a/assets/images/wave-function-collapse/space/floor-crack-b.png b/assets/images/wave-function-collapse/space/floor-crack-b.png
diff --git a/assets/images/wave-function-collapse/space/floor-hatch-round.png b/assets/images/wave-function-collapse/space/floor-hatch-round.png
diff --git a/assets/images/wave-function-collapse/space/floor-hatch-square.png b/assets/images/wave-function-collapse/space/floor-hatch-square.png
diff --git a/assets/images/wave-function-collapse/space/floor-tank.png b/assets/images/wave-function-collapse/space/floor-tank.png
diff --git a/assets/images/wave-function-collapse/space/floor-terminal.png b/assets/images/wave-function-collapse/space/floor-terminal.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-hor.png b/assets/images/wave-function-collapse/space/fuelpipe-hor.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-n-e.png b/assets/images/wave-function-collapse/space/fuelpipe-n-e.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-n-w.png b/assets/images/wave-function-collapse/space/fuelpipe-n-w.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-s-e.png b/assets/images/wave-function-collapse/space/fuelpipe-s-e.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-s-w.png b/assets/images/wave-function-collapse/space/fuelpipe-s-w.png
diff --git a/assets/images/wave-function-collapse/space/fuelpipe-vert.png b/assets/images/wave-function-collapse/space/fuelpipe-vert.png
diff --git a/assets/images/wave-function-collapse/space/pipe-hor-alt-wires.png b/assets/images/wave-function-collapse/space/pipe-hor-alt-wires.png
diff --git a/assets/images/wave-function-collapse/space/pipe-hor-alt.png b/assets/images/wave-function-collapse/space/pipe-hor-alt.png
diff --git a/assets/images/wave-function-collapse/space/pipe-hor-wires.png b/assets/images/wave-function-collapse/space/pipe-hor-wires.png
diff --git a/assets/images/wave-function-collapse/space/pipe-hor.png b/assets/images/wave-function-collapse/space/pipe-hor.png
diff --git a/assets/images/wave-function-collapse/space/pipe-n-e.png b/assets/images/wave-function-collapse/space/pipe-n-e.png
diff --git a/assets/images/wave-function-collapse/space/pipe-n-w.png b/assets/images/wave-function-collapse/space/pipe-n-w.png
diff --git a/assets/images/wave-function-collapse/space/pipe-s-e.png b/assets/images/wave-function-collapse/space/pipe-s-e.png
diff --git a/assets/images/wave-function-collapse/space/pipe-s-w.png b/assets/images/wave-function-collapse/space/pipe-s-w.png
diff --git a/assets/images/wave-function-collapse/space/pipe-vert-wires.png b/assets/images/wave-function-collapse/space/pipe-vert-wires.png
diff --git a/assets/images/wave-function-collapse/space/pipe-vert.png b/assets/images/wave-function-collapse/space/pipe-vert.png
diff --git a/assets/images/wave-function-collapse/space/server-wires-e.png b/assets/images/wave-function-collapse/space/server-wires-e.png
diff --git a/assets/images/wave-function-collapse/space/server-wires-n.png b/assets/images/wave-function-collapse/space/server-wires-n.png
diff --git a/assets/images/wave-function-collapse/space/server-wires-s.png b/assets/images/wave-function-collapse/space/server-wires-s.png
diff --git a/assets/images/wave-function-collapse/space/server-wires-w.png b/assets/images/wave-function-collapse/space/server-wires-w.png
diff --git a/assets/images/wave-function-collapse/space/space-base.png b/assets/images/wave-function-collapse/space/space-base.png
diff --git a/assets/images/wave-function-collapse/space/space-stars-a.png b/assets/images/wave-function-collapse/space/space-stars-a.png
diff --git a/assets/images/wave-function-collapse/space/space-stars-b.png b/assets/images/wave-function-collapse/space/space-stars-b.png
diff --git a/assets/images/wave-function-collapse/space/space-stars-c.png b/assets/images/wave-function-collapse/space/space-stars-c.png
diff --git a/assets/images/wave-function-collapse/space/train-vert-e.png b/assets/images/wave-function-collapse/space/train-vert-e.png
diff --git a/assets/images/wave-function-collapse/space/train-vert-w-alt.png b/assets/images/wave-function-collapse/space/train-vert-w-alt.png
diff --git a/assets/images/wave-function-collapse/space/train-vert-w.png b/assets/images/wave-function-collapse/space/train-vert-w.png
diff --git a/assets/images/wave-function-collapse/space/vent-pipe-e.png b/assets/images/wave-function-collapse/space/vent-pipe-e.png
diff --git a/assets/images/wave-function-collapse/space/vent-pipe-n.png b/assets/images/wave-function-collapse/space/vent-pipe-n.png
diff --git a/assets/images/wave-function-collapse/space/vent-pipe-s.png b/assets/images/wave-function-collapse/space/vent-pipe-s.png
diff --git a/assets/images/wave-function-collapse/space/vent-pipe-w.png b/assets/images/wave-function-collapse/space/vent-pipe-w.png
diff --git a/assets/images/wave-function-collapse/space/wall-fuelpipe-e.png b/assets/images/wave-function-collapse/space/wall-fuelpipe-e.png
diff --git a/assets/images/wave-function-collapse/space/wall-fuelpipe-n.png b/assets/images/wave-function-collapse/space/wall-fuelpipe-n.png
diff --git a/assets/images/wave-function-collapse/space/wall-fuelpipe-s.png b/assets/images/wave-function-collapse/space/wall-fuelpipe-s.png
diff --git a/assets/images/wave-function-collapse/space/wall-fuelpipe-w.png b/assets/images/wave-function-collapse/space/wall-fuelpipe-w.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-doodad-s-a.png b/assets/images/wave-function-collapse/space/wall-hor-doodad-s-a.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-doodad-s-b.png b/assets/images/wave-function-collapse/space/wall-hor-doodad-s-b.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-outside-n.png b/assets/images/wave-function-collapse/space/wall-hor-outside-n.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-outside-s.png b/assets/images/wave-function-collapse/space/wall-hor-outside-s.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-wires-n.png b/assets/images/wave-function-collapse/space/wall-hor-wires-n.png
diff --git a/assets/images/wave-function-collapse/space/wall-hor-wires-s.png b/assets/images/wave-function-collapse/space/wall-hor-wires-s.png
diff --git a/assets/images/wave-function-collapse/space/wall-inner-corner-ne.png b/assets/images/wave-function-collapse/space/wall-inner-corner-ne.png
diff --git a/assets/images/wave-function-collapse/space/wall-inner-corner-nw.png b/assets/images/wave-function-collapse/space/wall-inner-corner-nw.png
diff --git a/assets/images/wave-function-collapse/space/wall-inner-corner-se.png b/assets/images/wave-function-collapse/space/wall-inner-corner-se.png
diff --git a/assets/images/wave-function-collapse/space/wall-inner-corner-sw.png b/assets/images/wave-function-collapse/space/wall-inner-corner-sw.png
diff --git a/assets/images/wave-function-collapse/space/wall-outer-corner-ne.png b/assets/images/wave-function-collapse/space/wall-outer-corner-ne.png
diff --git a/assets/images/wave-function-collapse/space/wall-outer-corner-nw.png b/assets/images/wave-function-collapse/space/wall-outer-corner-nw.png
diff --git a/assets/images/wave-function-collapse/space/wall-outer-corner-se.png b/assets/images/wave-function-collapse/space/wall-outer-corner-se.png
diff --git a/assets/images/wave-function-collapse/space/wall-outer-corner-sw.png b/assets/images/wave-function-collapse/space/wall-outer-corner-sw.png
diff --git a/assets/images/wave-function-collapse/space/wall-pipe-e.png b/assets/images/wave-function-collapse/space/wall-pipe-e.png
diff --git a/assets/images/wave-function-collapse/space/wall-pipe-n.png b/assets/images/wave-function-collapse/space/wall-pipe-n.png
diff --git a/assets/images/wave-function-collapse/space/wall-pipe-s.png b/assets/images/wave-function-collapse/space/wall-pipe-s.png
diff --git a/assets/images/wave-function-collapse/space/wall-pipe-w.png b/assets/images/wave-function-collapse/space/wall-pipe-w.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-doodad-e.png b/assets/images/wave-function-collapse/space/wall-vert-doodad-e.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-doodad-w.png b/assets/images/wave-function-collapse/space/wall-vert-doodad-w.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-outside-e.png b/assets/images/wave-function-collapse/space/wall-vert-outside-e.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-outside-w.png b/assets/images/wave-function-collapse/space/wall-vert-outside-w.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-wires-e.png b/assets/images/wave-function-collapse/space/wall-vert-wires-e.png
diff --git a/assets/images/wave-function-collapse/space/wall-vert-wires-w.png b/assets/images/wave-function-collapse/space/wall-vert-wires-w.png
diff --git a/assets/images/wave-function-collapse/space/wires-straight-a.png b/assets/images/wave-function-collapse/space/wires-straight-a.png
diff --git a/assets/images/wave-function-collapse/space/wires-straight-b.png b/assets/images/wave-function-collapse/space/wires-straight-b.png
diff --git a/assets/images/wave-function-collapse/space/wires-turn-a.png b/assets/images/wave-function-collapse/space/wires-turn-a.png
diff --git a/assets/images/wave-function-collapse/space/wires-turn-b.png b/assets/images/wave-function-collapse/space/wires-turn-b.png
diff --git a/assets/images/wave-function-collapse/track-generator/index.html b/assets/images/wave-function-collapse/track-generator/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/assets/images/wave-function-collapse/track-generator/sketch.js b/assets/images/wave-function-collapse/track-generator/sketch.js
@@ -0,0 +1,306 @@
+// This sketches uses local storage to save the color choices and train track tiles.  
+// https://www.youtube.com/watch?v=QvoTSl60Y88
+// The idea for storing the tiles in local storage is based on the the Local Storage tutorial by Dan Shiffman
+// https://www.youtube.com/watch?v=_SRS8b4LcZ8
+// The train track tiles are generated using sdfs.  See the frag file for more information.
+
+new p5(sa => {
+
+  // a shader variable
+  let shader0;
+
+  // Declare variables
+  let radio1;
+
+  let button0;
+  let c0;
+  let graphics0;
+
+  sa.preload = () => {
+      // load the the shader
+      shader0 = sa.loadShader('train.vert', 'train.frag');
+  }
+
+  sa.setup = () => {
+      sa.pixelDensity(1);
+      sa.noStroke();
+
+      let divA = sa.createDiv();
+      divA.position(20, 750);
+      divA.style('max-width', '100px');
+      divA.style('align-content', 'center');
+
+      c0 = sa.createCanvas(100, 100, sa.WEBGL);
+      c0.parent(divA);
+      sa.pixelDensity(1);
+      // shaders require WEBGL mode to work
+      graphics0 = sa.createGraphics(100, 100, sa.WEBGL);
+
+      button0 = sa.createButton('SAVE TILE A');
+      button0.parent(divA);
+      button0.mousePressed(sa.saveTile0);
+
+      r1Slider = sa.createSlider(0, 255, 0);
+      g1Slider = sa.createSlider(0, 255, 0);
+      b1Slider = sa.createSlider(0, 255, 0);
+      r2Slider = sa.createSlider(0, 255, 89);
+      g2Slider = sa.createSlider(0, 255, 89);
+      b2Slider = sa.createSlider(0, 255, 89);
+      r3Slider = sa.createSlider(0, 255, 255);
+      g3Slider = sa.createSlider(0, 255, 255);
+      b3Slider = sa.createSlider(0, 255, 255);
+
+      let colors = sa.getItem("colors");
+      if (colors !== null) {
+          r1Slider.value(colors.r1);
+          g1Slider.value(colors.g1);
+          b1Slider.value(colors.b1);
+          r2Slider.value(colors.r2);
+          g2Slider.value(colors.g2);
+          b2Slider.value(colors.b2);
+          r3Slider.value(colors.r3);
+          g3Slider.value(colors.g3);
+          b3Slider.value(colors.b3);
+      }
+      r1Slider.changed(sa.storeColors);
+      g1Slider.changed(sa.storeColors);
+      b1Slider.changed(sa.storeColors);
+      r2Slider.changed(sa.storeColors);
+      g2Slider.changed(sa.storeColors);
+      b2Slider.changed(sa.storeColors);
+      r3Slider.changed(sa.storeColors);
+      g3Slider.changed(sa.storeColors);
+      b3Slider.changed(sa.storeColors);
+
+      // Organize the layout
+      let div1 = sa.createDiv();
+      div1.style('font-size', '16px');
+      div1.position(10, 440);
+      colAlabel = sa.createP('BACKGROUND COLOR');
+      colAlabel.parent(div1);
+      colAlabel.style("color", "#fff");
+      r1Slider.parent(div1);
+      g1Slider.parent(div1);
+      b1Slider.parent(div1);   
+
+      let div2 = sa.createDiv();
+      div2.style('font-size', '16px');
+      div2.position(10, 520);
+      colBlabel = sa.createP('CIRCLE COLOR');
+      colBlabel.parent(div2);
+      colBlabel.style("color", "#fff");
+      r2Slider.parent(div2);
+      g2Slider.parent(div2);
+      b2Slider.parent(div2); 
+
+      let div3 = sa.createDiv();
+      div3.style('font-size', '16px');
+      div3.position(10, 595);
+      colClabel = sa.createP('TRACK COLOR');
+      colClabel.parent(div3);
+      colClabel.style("color", "#fff");
+      r3Slider.parent(div3);
+      g3Slider.parent(div3);
+      b3Slider.parent(div3);           
+  }
+
+  sa.draw = () => {
+      let r1 = r1Slider.value();
+      let g1 = g1Slider.value();
+      let b1 = b1Slider.value();
+      let r2 = r2Slider.value();
+      let g2 = g2Slider.value();
+      let b2 = b2Slider.value();
+      let r3 = r3Slider.value();
+      let g3 = g3Slider.value();
+      let b3 = b3Slider.value();
+      shader0.setUniform('u_resolution', [sa.width, sa.height]);
+      shader0.setUniform('colorAr', r1);
+      shader0.setUniform('colorAg', g1);
+      shader0.setUniform('colorAb', b1);
+      shader0.setUniform('colorBr', r2);
+      shader0.setUniform('colorBg', g2);
+      shader0.setUniform('colorBb', b2);
+      shader0.setUniform('colorCr', r3);
+      shader0.setUniform('colorCg', g3);
+      shader0.setUniform('colorCb', b3);
+      shader0.setUniform('tileChoice', 0.0);
+      sa.shader(shader0);
+      sa.rect(0, 0, sa.width, sa.height);
+  }
+
+  sa.storeColors = () => {
+      let colors = {
+          r1: r1Slider.value(),
+          g1: g1Slider.value(),
+          b1: b1Slider.value(),
+          r2: r2Slider.value(),
+          g2: g2Slider.value(),
+          b2: b2Slider.value(),
+          r3: r3Slider.value(),
+          g3: g3Slider.value(),
+          b3: b3Slider.value(),
+      }
+
+      sa.storeItem("colors", colors);
+  }
+
+  sa.saveTile0 = () => {
+      //sa.saveCanvas(c0, "0.png");
+      sa.storeItem("img0", c0.elt.toDataURL());
+  }
+
+});
+
+new p5(sb => {
+  // a shader variable
+  let shader1;
+  let button1;
+  let c2;
+  let graphics2;
+
+  sb.preload = () => {
+      // load the the shader
+      shader1 = sb.loadShader('train.vert', 'train.frag');
+  }
+
+  sb.setup = () => {
+      sb.pixelDensity(1);
+      sb.noStroke();
+      // shaders require WEBGL mode to work
+
+      let divB = sb.createDiv();
+      divB.position(125, 750);
+      divB.style('max-width', '100px');
+      c1 = sb.createCanvas(100, 100, sb.WEBGL);
+      c1.parent(divB);
+      sb.pixelDensity(1);
+      graphics2 = sb.createGraphics(100, 100, sb.WEBGL);
+
+      button1 = sb.createButton('SAVE TILE B');
+      button1.mousePressed(sb.saveTile1);
+      button1.parent(divB);
+
+      let colors = sb.getItem("colors");
+      if (colors !== null) {
+          r1Slider.value(colors.r1);
+          g1Slider.value(colors.g1);
+          b1Slider.value(colors.b1);
+          r2Slider.value(colors.r2);
+          g2Slider.value(colors.g2);
+          b2Slider.value(colors.b2);
+          r3Slider.value(colors.r3);
+          g3Slider.value(colors.g3);
+          b3Slider.value(colors.b3);
+      }  
+  }
+
+  sb.draw = () => {
+      let r1 = r1Slider.value();
+      let g1 = g1Slider.value();
+      let b1 = b1Slider.value();
+      let r2 = r2Slider.value();
+      let g2 = g2Slider.value();
+      let b2 = b2Slider.value(); 
+      let r3 = r3Slider.value();
+      let g3 = g3Slider.value();
+      let b3 = b3Slider.value(); 
+      shader1.setUniform('u_resolution', [sb.width, sb.height]);
+      shader1.setUniform('colorAr', r1);
+      shader1.setUniform('colorAg', g1);
+      shader1.setUniform('colorAb', b1);
+      shader1.setUniform('colorBr', r2);
+      shader1.setUniform('colorBg', g2);
+      shader1.setUniform('colorBb', b2);
+      shader1.setUniform('colorCr', r3);
+      shader1.setUniform('colorCg', g3);
+      shader1.setUniform('colorCb', b3);
+      shader1.setUniform('tileChoice', 1.0);
+      sb.shader(shader1);
+      sb.rect(0, 0, sb.width, sb.height)
+  }
+
+  sb.saveTile1 = () => {
+      //sb.saveCanvas(c1, "0.png");
+      sb.storeItem("img0", c1.elt.toDataURL());
+  }
+});
+
+
+
+new p5(sc => {
+  // a shader variable
+  let shader2;
+  let button2;
+  let c2;
+  let graphics3;
+
+  sc.preload = () => {
+      // load the the shader
+      shader2 = sc.loadShader('train.vert', 'train.frag');
+  }
+
+  sc.setup = () => {
+      sc.pixelDensity(1);
+      sc.noStroke();
+      // shaders require WEBGL mode to work
+
+      let divC = sc.createDiv();
+      divC.position(230, 750);
+      divC.style('max-width', '100px');
+      c2 = sc.createCanvas(100, 100, sc.WEBGL);
+      c2.parent(divC);
+      sc.pixelDensity(1);
+      graphics3 = sc.createGraphics(100, 100, sc.WEBGL);
+
+      button2 = sc.createButton('SAVE TILE C');
+      button2.mousePressed(sc.saveTile2);
+      button2.parent(divC);
+
+      let colors = sc.getItem("colors");
+      if (colors !== null) {
+          r1Slider.value(colors.r1);
+          g1Slider.value(colors.g1);
+          b1Slider.value(colors.b1);
+          r2Slider.value(colors.r2);
+          g2Slider.value(colors.g2);
+          b2Slider.value(colors.b2);
+          r3Slider.value(colors.r3);
+          g3Slider.value(colors.g3);
+          b3Slider.value(colors.b3);
+      }
+
+  }
+
+  sc.draw = () => {
+      let r1 = r1Slider.value();
+      let g1 = g1Slider.value();
+      let b1 = b1Slider.value();
+      let r2 = r2Slider.value();
+      let g2 = g2Slider.value();
+      let b2 = b2Slider.value();
+      let r3 = r3Slider.value();
+      let g3 = g3Slider.value();
+      let b3 = b3Slider.value();
+      shader2.setUniform('u_resolution', [sc.width, sc.height]);
+      shader2.setUniform('colorAr', r1);
+      shader2.setUniform('colorAg', g1);
+      shader2.setUniform('colorAb', b1);
+      shader2.setUniform('colorBr', r2);
+      shader2.setUniform('colorBg', g2);
+      shader2.setUniform('colorBb', b2);
+      shader2.setUniform('colorCr', r3);
+      shader2.setUniform('colorCg', g3);
+      shader2.setUniform('colorCb', b3);
+      shader2.setUniform('tileChoice', 2.0);
+      sc.shader(shader2);
+      sc.rect(0, 0, sc.width, sc.height)
+  }
+
+  sc.saveTile2 = () => {
+      //sc.saveCanvas(c2, "1.png");
+      sc.storeItem("img1", c2.elt.toDataURL());
+  }
+
+});
+