colors

MaxBittker · Oct 22, 2020 · ad54772 · ad54772
1 parent fb275b3
commit ad54772
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 24 deletions.
diff --git a/crate/src/species.rs b/crate/src/species.rs
@@ -502,7 +502,7 @@ pub fn build_rule() -> [Rule; 6] {
                     },
                 },
                 Clause {
-                    probability: 1,
+                    probability: 2,
                     symmetry: SymmetryMode::Quad,
                     selector: Selector {
                         grid: [

diff --git a/index.html b/index.html
@@ -53,6 +53,26 @@
       <canvas id="sand-canvas" class="ultima"></canvas>
     </div>
 
+    <div class="window" id="quote">
+      <div class="title-bar">
+        <div class="title-bar-text">
+          Achemi Online
+        </div>
+
+        <div class="title-bar-controls">
+          <button aria-label="Minimize"></button>
+          <button aria-label="Maximize"></button>
+          <button aria-label="Close"></button>
+        </div>
+      </div>
+      <div class="window-body">
+        <p>
+          "This world was, and is, and shall be, ever-living Fire, in measures
+          being kindled and in measure going out" - Heraclitus
+        </p>
+      </div>
+    </div>
+
     <!-- <img class="tch" src="assets/bookflip.gif" /> -->
     <!-- <img class="tch" style="bottom:0;" src="assets/pentagramanimation.gif" /> -->
     <!-- <img class="tch" style="right:0; bottom:0;" src="assets/torch2.gif" /> -->

diff --git a/js/glsl/sand.glsl b/js/glsl/sand.glsl
@@ -34,6 +34,7 @@ void main() {
   vec2 sampleCoord = textCoord + (noise_2d / (resolution / 2.));
 
   vec4 data = texture2D(dataTexture, textCoord);
+  vec4 last = texture2D(backBuffer, vec2(textCoord.x, 1.0 - textCoord.y));
 
   int type = int((data.r * 255.) + 0.1);
   float energy = data.g;
@@ -67,16 +68,17 @@ void main() {
   } else if (type == 3) { // water
     hue = 0.78;
     saturation = 0.6;
-    lightness = 0.8 + energy * 0.25 + noise * 0.1;
-    a = 0.7;
+    lightness = 0.5 + energy * 0.25 + noise * 0.1;
+    a = 0.9;
     if (isSnapshot) {
       a = 1.0;
     }
   } else if (type == 4) { // Zoop
-    hue = 0.1 + (noise * -0.1);
+    hue = 0.05 + (noise * -0.1);
 
-    saturation = 0.7;
-    lightness += 0.2;
+    saturation = 0.6;
+    lightness *= 0.6;
+    lightness += 0.5;
     //  * (noise + 0.5);
     if (isSnapshot) {
       hue += -0.1;
@@ -93,6 +95,12 @@ void main() {
   saturation = min(saturation, 1.0);
   lightness = min(lightness, 1.0);
   color = hsv2rgb(vec3(hue, saturation, lightness));
+  // a = 1.0;
+  // if (last.a > 0.7) {
+  //   color.rgb = last.rgb;
+  //   a = last.a * 0.95;
+  // }
+  // color.rgb = max(color.rgb, last.rgb * 0.97);
 
   gl_FragColor = vec4(color, a);
 }
diff --git a/js/render.js b/js/render.js
@@ -23,7 +23,7 @@ let startWebGL = ({ canvas, universe, isSnapshot = false, gl }) => {
       attributes: { preserveDrawingBuffer: isSnapshot }
     });
   }
-  // const lastFrame = regl.texture();
+  const lastFrame = regl.texture();
   const width = universe.width();
   const height = universe.height();
   let cell_pointer = universe.cells();
@@ -61,8 +61,8 @@ let startWebGL = ({ canvas, universe, isSnapshot = false, gl }) => {
         viewportHeight
       ],
       dpi: 4,
-      isSnapshot
-      // backBuffer: lastFrame
+      isSnapshot,
+      backBuffer: lastFrame
     },
 
     vert: vsh,
@@ -83,6 +83,9 @@ let startWebGL = ({ canvas, universe, isSnapshot = false, gl }) => {
     draw: () => {
       regl.poll();
       drawSand();
+      // lastFrame({
+      //   copy: true
+      // });
     }
   };
 };

diff --git a/js/styles.css b/js/styles.css
@@ -12,7 +12,7 @@
     inset 2px 2px var(--button-shadow);
 }
 div {
-  background: url("assets/paper.png");
+  background: url("assets/paper.png") !important;
   background-size: 100px 100px;
 }
 .ultima {
@@ -231,11 +231,7 @@ button.selected {
   /* flex-wrap: wrap; */
   zoom: 1.5;
 }
-@media only screen and (max-width: 600px) {
-  .hud-body {
-    /* zoom: 1; */
-  }
-}
+
 #hud-buttons {
   display: flex;
   flex-wrap: wrap;
@@ -244,7 +240,7 @@ button.selected {
   margin: 2px;
   height: 30px;
   width: 30px;
-  min-width: 30px;
+  min-width: 0px;
   font-size: 18px;
   line-height: 25px;
   padding: 0;
@@ -269,11 +265,6 @@ button.selected {
   opacity: 0;
 }
 
-@media only screen and (max-width: 600px) {
-  #welcome {
-    zoom: 1.25;
-  }
-}
 #controls {
   display: flex;
 }
@@ -310,7 +301,7 @@ button.selected {
   line-height: 0px;
 }
 .window {
-  background-color: var(--menu);
+  background-color: var(--menu) !important;
   /* background: url("assets/ultima_tile.png"); */
 }
 .title-bar {
@@ -395,7 +386,7 @@ text {
   left: 0;
   right: 0;
   height: 30px;
-  background-color: var(--active-menu);
+  background-color: var(--active-menu) !important;
   border: 2px outset var(--active-menu);
 
   font-size: 20px;
@@ -423,7 +414,7 @@ text {
   left: 0;
   z-index: 1;
   width: 80px;
-  background-color: var(--menu);
+  background-color: var(--menu) !important;
   height: 27px;
   margin: 1px;
   box-sizing: border-box;
@@ -448,3 +439,16 @@ text {
   color: var(--window-frame);
   border: 3px inset var(--menu);
 }
+#quote {
+  display: none;
+  position: absolute;
+  z-index: 3;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  /* background: url("assets/paper.png"); */
+  /* background-size: 100px 100px; */
+}
+#quote p {
+  font-size: 40px;
+}