From 4c292031b5d33093d6ad524241d3a946140dcc9c Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Mon, 6 Jan 2025 10:59:58 +1100
Subject: [PATCH] Radial gradients

---
 src/components/dots.js | 13 +++++++++++--
 src/index.md           |  4 ++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/dots.js b/src/components/dots.js
index d121099..9b04999 100644
--- a/src/components/dots.js
+++ b/src/components/dots.js
@@ -10,14 +10,19 @@ const RADIUS_OPTS = [
 	"RD",
 	"LU",
 	"LD",
-	// "circle"
+	"in",
+	"out",
 ];
 
-
+function distance(dx, dy) {
+	return Math.sqrt(dx ** 2 + dy ** 2);
+}
 
 class DotMaker {
 	constructor(width) {
 		this.width = width;
+		this.cx = 0.5 * width;
+		this.cy = 0.5 * width;
 	}
 
 	dots(m, n) {
@@ -61,6 +66,10 @@ class DotMaker {
 	      		return 0.5 * maxr * (d.x + d.y) / this.width;
 	      	case "LD":
 	      		return 0.5 * maxr * (this.width - d.x + d.y) / this.width;
+	      	case "out":
+	      		return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width;
+	      	case "in":
+	      		return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width;
 	    	default:
 	      		return maxr;
 	  }
diff --git a/src/index.md b/src/index.md
index f652102..f472dd5 100644
--- a/src/index.md
+++ b/src/index.md
@@ -25,7 +25,7 @@ const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}
 const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
 const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"}));
 const r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"}));
-const f1 = view(Inputs.radio(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
+const f1 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
 
 
 const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
@@ -42,7 +42,7 @@ const fg2 = view(Inputs.color({
 const m2 = view(Inputs.range([1, 5], {value: 1, step: 1, label:"m2", disabled: !v2}));
 const n2 = view(Inputs.range([1, 5], {value: 3, step: 1, label:"n2", disabled: !v2}));
 const r2 = view(Inputs.range([0, 0.5], {value: 0.2, step: 0.01, label: "radius"}));
-const f2 = view(Inputs.radio(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
+const f2 = view(Inputs.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
 
 
 ```