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

Adjust the size of cells and dots #33

Merged
bombinans merged 7 commits from feature-size into main 2025-04-06 07:14:04 +00:00
Conversation 0 Commits 7 Files Changed 2 +20 -8
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7b05658a7f - Show all commits

1
src/components/dots.js
View File

@ -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;

27
src/index.md
View File

@ -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)
;