Rearranged things

02/src/index.md

@@ -1,4 +1,10 @@
-# Genuary02
+# Genuary26 - 2
+
+Prompt: [Twelve principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation)
+
+[Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) jazzed up with some d3 transitions.
+
+[Mike Lynch](https://etc.mikelynch.org/)
 
 ```js
 
@@ -9,10 +15,24 @@ const CELL = 10;
 const CELLW = 80;
 const CELLH = 60;
 const GEN_TIME = 1000;
-const INIT_PROB =  0.5
+const INIT_PROB =  0.5;
+
+const restart = { restart: false };
 
 ```
 
+```js
+const trigger = view(Inputs.button("Restart"));
+```
+
+
+```js
+trigger;
+restart["restart"] = true;
+```
+
+
+
 ```js
 
 
@@ -26,7 +46,7 @@ function neighbours(i, j, id) {
 }
 
 
-const test_g = (async function* () {
+const show_grid = (async function* () {
     const grid = [];
 
     for( let j = 0; j < CELLH; j++ ) {
@@ -41,6 +61,10 @@ const test_g = (async function* () {
 
     let i = 0;
     while ( true ) {
+        if( restart["restart"] ) {
+            grid.forEach((c) => c.live = Math.random() > INIT_PROB);
+            restart["restart"] = false
+        }
         yield grid.filter((d) => d.live);
         i++;
         const ngrid = [];
@@ -56,19 +80,17 @@ const test_g = (async function* () {
             grid[id].live = ngrid[id];
         }
         await new Promise((resolve) => setTimeout(resolve, GEN_TIME));
-    }
+   }
 })();
 
 
 
-
 ```
 
 
 ```js
 // Set up the svg canvas 
 
-
 const svg = d3.create("svg")
   .attr("width", WIDTH)
   .attr("height", HEIGHT)
@@ -88,7 +110,7 @@ const bg_g = svg.append("g")
   .attr("id", "background");
 
 bg_g.selectAll("rect")
-  .data( [ { bg: "yellow" } ] )
+  .data( [ { bg: "white" } ] )
   .join("rect")
   .attr("x", 0)
   .attr("y", 0)
@@ -98,19 +120,37 @@ bg_g.selectAll("rect")
 ;
 
 const cells_g = svg.append("g")
-  .attr("id", "cells")
+  .attr("id", "cells");
-  .attr("clip-path", "url(#clipRect)");
+//  .attr("clip-path", "url(#clipRect)");
-
-cells_g.selectAll("circle")
-  .data(test_g)
-  .join("circle")
-  .attr("cx", (d) => d.x)
-  .attr("cy", (d) => d.y)
-  .attr("r", (d) => d.live ? CELL * 0.4 : 0)
-  .attr("fill", "blue");
 
 display(svg.node());
 
+const ease = d3.easeElastic.period(0.4).amplitude(3);
+```
+
+```js
+
+cells_g.selectAll("circle")
+    .data(show_grid, d => d.id)
+    .join(
+        enter => enter.append("circle")
+           .attr("cx", (d) => d.x)
+            .attr("cy", (d) => d.y)
+            .attr("fill", "green")
+              .transition()
+              .ease(ease)
+            .duration(1000)
+           .attr("r", (d) => 10),
+        update => update.attr("fill", "blue"),
+        exit => exit
+            .transition()
+            .duration(2000)
+            .attr("r", 0)
+            .attr("cy", (d) => d.y + 400)
+            .remove()
+        );
+
+
 
 ```