bombinans
/
poptimal
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

Refactored the dots and radius functions into a DotMaker class

rc-1.0.0
Mike Lynch 2025-01-06 10:24:05 +11:00
parent a23e12af40
commit 22b02db4d4
2 changed files with 73 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/dots.js
View File

@ -1,22 +1,64 @@
// calculate tiles
export function make_dots(m, n, cell, max) {
if( m - n === 0 ) {
return [];
const RADIUS_OPTS = [
"const",
"right",
"left",
"up",
"down",
// "RU",
// "RD",
// "LU",
// "LD",
// "circle"
];
class DotMaker {
constructor(width) {
this.width = width;
}
const ps = [];
const imin = -max;
const imax = max / m;
for( let i = imin; i <= imax; i++ ) {
const jmin = m * i + (m - n) * max;
const jmax = m * i;
for( let j = jmin; j <= jmax; j++ ) {
const x = (j - m * i) / (m - n);
const y = m * (x + i);
ps.push({i:i, j:j, x:x, y:y});
dots(m, n) {
if( m - n === 0 ) {
return [];
}
const ps = [];
const imin = -this.width;
const imax = this.width / m;
for( let i = imin; i <= imax; i++ ) {
const jmin = m * i + (m - n) * this.width;
const jmax = m * i;
for( let j = jmin; j <= jmax; j++ ) {
const x = (j - m * i) / (m - n);
const y = m * (x + i);
if( x > 0 && y > 0 && x < this.width && y < this.width ) {
ps.push({i:i, j:j, x:x, y:y});
}
}
}
return ps;
}
radius(d, func, maxr) {
switch (func) {
case "const":
return maxr;
case "right":
return maxr * d.x / this.width;
case "left":
return maxr * (this.width - d.x) / this.width;
case "down":
return maxr * d.y / this.width;
case "up":
return maxr * (this.width - d.y) / this.width;
default:
return maxr;
}
}
return ps;
}
export { RADIUS_OPTS, DotMaker };

85
src/index.md
View File

@ -10,18 +10,22 @@ toc: false
```js
import {make_dots, dot_func} from './components/dots.js'
import {RADIUS_OPTS, DotMaker} from './components/dots.js'
const CELL = 10;
const MAG = 2;
const WIDTH = 20;
const HEIGHT = 20;
const HEIGHT = WIDTH;
const dm = new DotMaker(WIDTH);
const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()}))
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(["constant", "right", "left", "up", "down"], {value: "constant"}));
const f1 = view(Inputs.radio(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
@ -38,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(["constant", "right", "left", "up", "down"], {value: "constant"}));
const f2 = view(Inputs.radio(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));
```
@ -49,25 +53,9 @@ const f2 = view(Inputs.radio(["constant", "right", "left", "up", "down"], {value
```js
const dots1 = make_dots(1 / m1, n1, CELL, WIDTH)
const dots2 = v2 ? make_dots(1 / m2, n2, CELL, WIDTH) : []
const dots1 = dm.dots(1 / m1, n1)
const dots2 = v2 ? dm.dots(1 / m2, n2) : []
function radius_func(d, func, maxr) {
switch (func) {
case "constant":
return maxr;
case "right":
return maxr * d.x / WIDTH;
case "left":
return maxr * (WIDTH - d.x) / WIDTH;
case "up":
return maxr * d.y / WIDTH;
case "down":
return maxr * (WIDTH - d.y) / WIDTH;
default:
return maxr;
}
}
```
@ -75,16 +63,15 @@ function radius_func(d, func, maxr) {
const svg = d3.create("svg")
.attr("width", WIDTH * CELL * 2)
.attr("height", HEIGHT * CELL * 2)
.attr("viewBox", [ 0, 0, WIDTH, HEIGHT ])
.attr("style", "max-width: 100%; height: auto;");
.attr("width", WIDTH * CELL * MAG)
.attr("height", HEIGHT * CELL * MAG)
.attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
const background = svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", WIDTH * 20)
.attr("height", WIDTH * 20)
.attr("width", WIDTH)
.attr("height", WIDTH)
.attr("fill", bg);
const dots_g1 = svg.append("g")
@ -93,7 +80,7 @@ const dots_g1 = svg.append("g")
dots_g1.selectAll("circle")
.data(dots1)
.join("circle")
.attr("r", (d) => radius_func(d, f1, r1))
.attr("r", (d) => dm.radius(d, f1, r1))
.attr("fill", fg1)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
@ -104,7 +91,7 @@ const dots_g2 = svg.append("g")
dots_g2.selectAll("circle")
.data(dots2)
.join("circle")
.attr("r", (d) => radius_func(d, f2, r2))
.attr("r", (d) => dm.radius(d, f2, r2))
.attr("fill", fg2)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
@ -121,43 +108,5 @@ display(svg.node());
<style>
.hero {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--sans-serif);
margin: 4rem 0 8rem;
text-wrap: balance;
text-align: center;
}
.hero h1 {
margin: 1rem 0;
padding: 1rem 0;
max-width: none;
font-size: 14vw;
font-weight: 900;
line-height: 1;
background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero h2 {
margin: 0;
max-width: 34em;
font-size: 20px;
font-style: initial;
font-weight: 500;
line-height: 1.5;
color: var(--theme-foreground-muted);
}
@media (min-width: 640px) {
.hero h1 {
font-size: 90px;
}
}
</style>