Partial fix for flashing

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG.md
 
+## v1.1.1
+
+Made the flashing transitions a bit better, but it still needs more work
+
 ## v1.1.0
 
 Added SVG and PNG downloads

src/components/controls.js

@@ -110,6 +110,12 @@ class DotControls {
 		this.f.dispatchEvent(new Event("input"));
 	}
 
+	null_grid() {
+		// set to zero to stop flashing when randomising all
+		this.r.value = 0;
+		this.r.dispatchEvent(new Event("input"));		
+	}
+
 	random_colours() {
 		this.set_colour(random_colour());
 	}

src/index.md

@@ -6,7 +6,7 @@ toc: false
 
 <h1>poptimal</h1>
 
-<p>v1.1.0 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
+<p>v1.1.1 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
 
 <div class="grid grid-cols-2">
 
@@ -57,8 +57,6 @@ const randomise_palette = view(Inputs.button("Random", {label:"palette"}));
 const randomise_all = view(Inputs.button("Random", {label:"all"}));
 
 
-
-
 ```
 
 ```js
@@ -81,11 +79,13 @@ ctrl2.random_grid();
 
 ```js
 randomise_all;
-ctrl1.random_grid();
-ctrl2.random_grid();
 const rpalette = random.choice(Array.from(PALETTES.keys()));
+ctrl1.null_grid();
+ctrl2.null_grid();
 palette_input.value = PALETTES.get(rpalette);
 palette_input.dispatchEvent(new Event("input"));
+ctrl1.random_grid();
+ctrl2.random_grid();
 
 ```
 
@@ -122,6 +122,7 @@ const dots2 = dm.dots(1 / m2, n2);
 ```
   
 ```js
+// Set up the svg canvas 
 
 
 const svg = d3.create("svg")
@@ -129,12 +130,29 @@ const svg = d3.create("svg")
   .attr("height", HEIGHT * CELL * MAG)
   .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
 
-const background = svg.append("rect")
+
+// re transitions: they should only run when updating the palette and
+// grid, not via the sliders
+
+// see https://www.d3indepth.com/transitions/ and use enter / exit etc
+
+// note 
+
+// do background as a select so that transitions work
+
+const bg_g = svg.append("g")
+  .attr("id", "background");
+
+bg_g.selectAll("rect")
+  .data( [ { bg: bg } ] )
+  .join("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", WIDTH)
   .attr("height", WIDTH)
-  .attr("fill", bg);
+  .attr("fill", (d) => d.bg)
+;
+
 
 const dots_g1 = svg.append("g")
   .attr("id", "dots1");
@@ -142,10 +160,9 @@ const dots_g1 = svg.append("g")
 dots_g1.selectAll("circle")
   .data(dots1)
   .join("circle")
-  .attr("r", (d) => dm.radius(d, f1, r1))
-  .attr("fill", fg1)
   .attr("cx", (d) => d.x)
-  .attr("cy", (d) => d.y);
+  .attr("cy", (d) => d.y)
+  .attr("fill", fg1);
 
 const dots_g2 = svg.append("g")
   .attr("id", "dots2");
@@ -153,17 +170,22 @@ const dots_g2 = svg.append("g")
 dots_g2.selectAll("circle")
   .data(dots2)
   .join("circle")
-  .attr("r", (d) => dm.radius(d, f2, r2))
-  .attr("fill", fg2)
   .attr("cx", (d) => d.x)
-  .attr("cy", (d) => d.y);
+  .attr("cy", (d) => d.y)
-
+  .attr("fill", fg2);
-
 
 display(svg.node());
 
 ```
 
+```js
+  // separate code block for when I understand transitions better
+  
+  dots_g1.selectAll("circle").attr("r", (d) => dm.radius(d, f1, r1));
+  dots_g2.selectAll("circle").attr("r", (d) => dm.radius(d, f2, r2));
+
+```
+
 ```js
 
 display(download(() => {
@@ -186,8 +208,6 @@ display(download(() => {
 ```
 (PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
 
-
-
 </div>
 
 <style>