From 7b05658a7f1f68c5626439f2caefca9c261e7f69 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 6 Apr 2025 09:54:17 +1000 Subject: [PATCH 1/7] Added height control, rearranged things so that the pattern isn't randomised every time the dimensions change --- src/components/dots.js | 1 + src/index.md | 27 +++++++++++++++++++-------- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/dots.js b/src/components/dots.js index 5372353..fc17a9a 100644 --- a/src/components/dots.js +++ b/src/components/dots.js @@ -45,6 +45,7 @@ function int_range(v1, v2) { class DotMaker { constructor(width) { + console.log(width); this.width = width; this.cx = 0.5 * width; this.cy = 0.5 * width; diff --git a/src/index.md b/src/index.md index bc112ba..0dfe2ea 100644 --- a/src/index.md +++ b/src/index.md @@ -29,7 +29,16 @@ const MAG = 2; const WIDTH = 20; const HEIGHT = WIDTH; -const dm = new DotMaker(WIDTH); +const cell = view(Inputs.range([1,20], {value: 10, step:1, label: "Cell size"})); +const mag = view(Inputs.range([1,5], {value: 2, step:1, label: "Magnificaton"})); +const width = view(Inputs.range([1,40], {value: 20, step:1, label: "Width"})); +const height = view(Inputs.range([1,40], {value: 20, step:1, label: "Height"})); + + +``` + + +```js const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()}); const bg = view(bg_input); @@ -118,6 +127,8 @@ if( palette_fn ) { ```js +const dm = new DotMaker(width, height); + const dots1 = dm.dots(1 / m1, n1, false); const dots2 = dm.dots(1 / m2, n2, false); @@ -129,9 +140,9 @@ const dots2 = dm.dots(1 / m2, n2, false); const svg = d3.create("svg") - .attr("width", WIDTH * CELL * MAG) - .attr("height", HEIGHT * CELL * MAG) - .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]); + .attr("width", width * cell * mag) + .attr("height", height * cell * mag) + .attr("viewBox", [ 0, 0, width, height ]); svg.append("clipPath") @@ -139,8 +150,8 @@ svg.append("clipPath") .append("rect") .attr("x", 0) .attr("y", 0) - .attr("width", WIDTH) - .attr("height", HEIGHT); + .attr("width", width) + .attr("height", height); // re transitions: they should only run when updating the palette and @@ -160,8 +171,8 @@ bg_g.selectAll("rect") .join("rect") .attr("x", 0) .attr("y", 0) - .attr("width", WIDTH) - .attr("height", WIDTH) + .attr("width", width) + .attr("height", height) .attr("fill", (d) => d.bg) ; From 844e847eabaab5a2520728ab4966ac6a193965b8 Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 6 Apr 2025 12:43:17 +1000 Subject: [PATCH 2/7] Grids are working properly with varying aspect ratios --- src/components/dots.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/dots.js b/src/components/dots.js index fc17a9a..6966370 100644 --- a/src/components/dots.js +++ b/src/components/dots.js @@ -44,11 +44,13 @@ function int_range(v1, v2) { } class DotMaker { - constructor(width) { - console.log(width); + constructor(width, height) { + console.log(width, height); this.width = width; + this.height = height; + this.wh = 0.5 * (width + height); this.cx = 0.5 * width; - this.cy = 0.5 * width; + this.cy = 0.5 * height; } dots(m, n, clip) { @@ -56,13 +58,13 @@ class DotMaker { return []; } const ps = []; - const is = int_range(-this.width, this.width / m) + const is = int_range(-this.width, this.height / m) is.map((i) => { const js = int_range(m * i + (m - n) * this.width, m * i) js.map((j) => { const x = (j - m * i) / (m - n); const y = m * (x + i); - if( !clip || (x > 0 && y > 0 && x < this.width && y < this.width) ) { + if( !clip || (x > 0 && y > 0 && x < this.width && y < this.height) ) { ps.push({i:i, j:j, x:x, y:y}); } }); @@ -79,21 +81,21 @@ class DotMaker { case "left": return maxr * (this.width - d.x) / this.width; case "down": - return maxr * d.y / this.width; + return maxr * d.y / this.height; case "up": - return maxr * (this.width - d.y) / this.width; + return maxr * (this.height - d.y) / this.height; case "right-up": - return 0.5 * maxr * (d.x + this.width - d.y) / this.width; + return 0.5 * maxr * (d.x + this.height - d.y) / this.wh; case "left-up": - return 0.5 * maxr * (this.width - d.x + this.width - d.y) / this.width; + return 0.5 * maxr * (this.width - d.x + this.height - d.y) / this.wh; case "right-down": - return 0.5 * maxr * (d.x + d.y) / this.width; + return 0.5 * maxr * (d.x + d.y) / this.wh; case "left-down": - return 0.5 * maxr * (this.width - d.x + d.y) / this.width; + return 0.5 * maxr * (this.width - d.x + d.y) / this.wh; case "out": - return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.width; + return 2 * maxr * distance((d.x - this.cx), (d.y - this.cy)) / this.wh; case "in": - return 2 * maxr * (0.5 * this.width - distance((d.x - this.cx), (d.y - this.cy))) / this.width; + return 2 * maxr * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh; // case "hyper-out": // return 2 * maxr * Math.abs(d.x - this.cx) (d.y - this.cy)) / this.width; From ce4771a79f3eed0a848af3c7a25007c65c9b3c8f Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 6 Apr 2025 12:43:34 +1000 Subject: [PATCH 3/7] Bumped version v1.1.2 -> 1.2.0 and improved styling --- src/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/index.md b/src/index.md index 0dfe2ea..e058b36 100644 --- a/src/index.md +++ b/src/index.md @@ -8,11 +8,11 @@ toc: false colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/) -

v1.1.2 | by mike lynch | @mikelynch@aus.social | source

+

v1.2.0 | by mike lynch | @mikelynch@aus.social | source

-
+
-
+
```js @@ -122,7 +122,7 @@ if( palette_fn ) { ```
-
+
```js @@ -233,6 +233,7 @@ display(download(() => { ``` (PNGs made with resvg-wasm in-browser) +