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

Radial gradients

rc-1.0.0
Mike Lynch 2025-01-06 10:59:58 +11:00
parent 37711ee0e3
commit 4c292031b5
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/dots.js
View File

@ -10,14 +10,19 @@ const RADIUS_OPTS = [
"RD", "RD",
"LU", "LU",
"LD", "LD",
// "circle" "in",
"out",
]; ];
function distance(dx, dy) {
return Math.sqrt(dx ** 2 + dy ** 2);
}
class DotMaker { class DotMaker {
constructor(width) { constructor(width) {
this.width = width; this.width = width;
this.cx = 0.5 * width;
this.cy = 0.5 * width;
} }
dots(m, n) { dots(m, n) {
@ -61,6 +66,10 @@ class DotMaker {
return 0.5 * maxr * (d.x + d.y) / this.width; return 0.5 * maxr * (d.x + d.y) / this.width;
case "LD": case "LD":
return 0.5 * maxr * (this.width - d.x + d.y) / this.width; 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: default:
return maxr; return maxr;
} }

4
src/index.md
View File

@ -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 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 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 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})); 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 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 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 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]}));
``` ```