Factored the radius function out of DotMaker - this is so that the
web version can update other parameters like cell size without making the grids reset and flicker
This commit is contained in:
Mike Lynch
parent
14bee6cf6e
commit
07713bcff7
@ -12,7 +12,7 @@ const xmlns = "http://www.w3.org/2000/xmlns/";
|
||||
const xlinkns = "http://www.w3.org/1999/xlink";
|
||||
const svgns = "http://www.w3.org/2000/svg";
|
||||
|
||||
import {RADIUS_OPTS, RADIUS_DESC, DotMaker} from './src/components/dots.js';
|
||||
import {RADIUS_OPTS, RADIUS_DESC, radius_func, DotMaker} from './src/components/dots.js';
|
||||
import {PALETTES} from './src/components/palettes.js';
|
||||
import {ColourNamer} from './src/components/colour_namer.js';
|
||||
|
||||
@ -156,14 +156,14 @@ function poptimal_svg(params) {
|
||||
|
||||
params.patterns.map((p) => {
|
||||
const dots = dm.dots(1 / p.m, p.n, false);
|
||||
const rfunc = dm.radius(p.f);
|
||||
const rfunc = radius_func(p.f);
|
||||
const dots_g = svg.append("g")
|
||||
.attr("id", `dots${p.i}`);
|
||||
|
||||
dots_g.selectAll("circle")
|
||||
.data(dots)
|
||||
.join("circle")
|
||||
.attr("r", (d) => rfunc(d, p.r))
|
||||
.attr("r", (d) => rfunc(d, p.r, width, height))
|
||||
.attr("fill", p.colour)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
@ -81,47 +81,48 @@ class DotMaker {
|
||||
});
|
||||
return ps;
|
||||
}
|
||||
|
||||
radius(func) {
|
||||
switch (func) {
|
||||
case "const":
|
||||
return (d, r) => r;
|
||||
case "right":
|
||||
return (d, r) => r * d.x / this.width;
|
||||
case "left":
|
||||
return (d, r) => r * (this.width - d.x) / this.width;
|
||||
case "down":
|
||||
return (d, r) => r * d.y / this.height;
|
||||
case "up":
|
||||
return (d, r) => r * (this.height - d.y) / this.height;
|
||||
case "right-up":
|
||||
return (d, r) => 0.5 * r * (d.x + this.height - d.y) / this.wh;
|
||||
case "left-up":
|
||||
return (d, r) => 0.5 * r * (this.width - d.x + this.height - d.y) / this.wh;
|
||||
case "right-down":
|
||||
return (d, r) => 0.5 * r * (d.x + d.y) / this.wh;
|
||||
case "left-down":
|
||||
return (d, r) => 0.5 * r * (this.width - d.x + d.y) / this.wh;
|
||||
case "circle-out":
|
||||
return (d, r) => 2 * r * distance((d.x - this.cx), (d.y - this.cy)) / this.wh;
|
||||
case "circle-in":
|
||||
return (d, r) => 2 * r * (0.5 * this.wh - distance((d.x - this.cx), (d.y - this.cy))) / this.wh;
|
||||
case "hyper-in":
|
||||
return (d, r) => r * (1 - Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh);
|
||||
case "hyper-out":
|
||||
return (d, r) => r * Math.abs((d.x - this.cx) * (d.y - this.cy)) / this.wh;
|
||||
case "noise":
|
||||
return (d, r) => r * Math.random();
|
||||
case "grid":
|
||||
const xk = Math.PI * (2 * randint(1, 10) - 1) / this.width;
|
||||
const yk = Math.PI * (2 * randint(1, 10) - 1) / this.height;
|
||||
return (d, r) => r * (0.5 + 0.5 * (Math.sin(xk * d.x) + Math.sin(yk * d.y)));
|
||||
default:
|
||||
return (d, r) => r;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { RADIUS_OPTS, RADIUS_DESC, DotMaker };
|
||||
|
||||
function radius_func(func) {
|
||||
switch (func) {
|
||||
case "const":
|
||||
return (d, r, w, h) => r;
|
||||
case "right":
|
||||
return (d, r, w, h) => r * d.x / w;
|
||||
case "left":
|
||||
return (d, r, w, h) => r * (w - d.x) / w;
|
||||
case "down":
|
||||
return (d, r, w, h) => r * d.y / h;
|
||||
case "up":
|
||||
return (d, r, w, h) => r * (h - d.y) / h;
|
||||
case "right-up":
|
||||
return (d, r, w, h) => r * (d.x + h - d.y) / (w + h);
|
||||
case "left-up":
|
||||
return (d, r, w, h) => r * (w - d.x + h - d.y) / (w + h);
|
||||
case "right-down":
|
||||
return (d, r, w, h) => r * (d.x + d.y) / (w + h);
|
||||
case "left-down":
|
||||
return (d, r, w, h) => r * (w - d.x + d.y) / (w + h);
|
||||
case "circle-out":
|
||||
return (d, r, w, h) => 4 * r * distance((d.x - w / 2), (d.y - h / 2)) / (w + h);
|
||||
case "circle-in":
|
||||
return (d, r, w, h) => 4 * r * (0.5 * (w + h) - distance((d.x - w / 2), (d.y - h / 2))) / (w + h);
|
||||
case "hyper-in":
|
||||
return (d, r, w, h) => 2 * r * (1 - Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h));
|
||||
case "hyper-out":
|
||||
return (d, r, w, h) => 2 * r * Math.abs((d.x - w / 2) * (d.y - h / 2)) / (w + h);
|
||||
case "noise":
|
||||
return (d, r, w, h) => r * Math.random();
|
||||
case "grid":
|
||||
const xk = Math.PI * (2 * randint(1, 10) - 1);
|
||||
const yk = Math.PI * (2 * randint(1, 10) - 1);
|
||||
return (d, r, w, h) => r * (0.5 + 0.5 * (Math.sin(xk * d.x / w) + Math.sin(yk * d.y / h)));
|
||||
default:
|
||||
return (d, r, w, h) => r;
|
||||
}
|
||||
}
|
||||
|
||||
export { RADIUS_OPTS, RADIUS_DESC, DotMaker, radius_func };
|
||||
|
||||
|
||||
|
||||
12
src/index.md
12
src/index.md
@ -8,7 +8,7 @@ toc: false
|
||||
|
||||
colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/)
|
||||
|
||||
<p>v1.2.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>
|
||||
<p>v1.2.2 | 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> | <a href="https://mikelynch.org/2025/Mar/09/poptimal/">about</a></p>
|
||||
|
||||
<div class="grid grid-cols-3">
|
||||
|
||||
@ -16,7 +16,7 @@ colourful generative patterns using [d3](https://d3js.org/) and [Observable Fram
|
||||
|
||||
```js
|
||||
|
||||
import {RADIUS_OPTS, DotMaker} from './components/dots.js';
|
||||
import {RADIUS_OPTS, DotMaker, radius_func} from './components/dots.js';
|
||||
import {DotControls} from './components/controls.js';
|
||||
import {PALETTES} from './components/palettes.js';
|
||||
import {download, download_as_svg, download_as_png} from './components/download.js';
|
||||
@ -141,8 +141,8 @@ const dots2 = dm.dots(1 / m2, n2, false);
|
||||
|
||||
```js
|
||||
|
||||
const rfunc1 = dm.radius(f1);
|
||||
const rfunc2 = dm.radius(f2);
|
||||
const rfunc1 = radius_func(f1);
|
||||
const rfunc2 = radius_func(f2);
|
||||
|
||||
```
|
||||
|
||||
@ -217,8 +217,8 @@ display(svg.node());
|
||||
```js
|
||||
// separate code block for when I understand transitions better
|
||||
|
||||
dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1));
|
||||
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2));
|
||||
dots_g1.selectAll("circle").attr("r", (d) => rfunc1(d, r1, width, height));
|
||||
dots_g2.selectAll("circle").attr("r", (d) => rfunc2(d, r2, width, height));
|
||||
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user