diff --git a/poptimal.js b/poptimal.js index 84bbae1..aefa4bc 100644 --- a/poptimal.js +++ b/poptimal.js @@ -18,7 +18,7 @@ import {ColourNamer} from './src/components/colour_namer.js'; const CELL = 10; const MAG = 2; -const WIDTH = 20; +const WIDTH = 200; const HEIGHT = WIDTH; // number of pixels which have to be visible for a colour to be // mentioned in the alt text @@ -36,10 +36,12 @@ function randomise_params() { f: random.choice(RADIUS_OPTS), r: random.float(0, 0.4), }}); + const cell = 5 + random.float() * random.float() * 55; return { background: palette[0], palette: palette_name, - patterns: patterns + patterns: patterns, + cell: cell, } } @@ -134,18 +136,21 @@ function poptimal_svg(params) { const document = window.document; const container = d3.select(document.body).append("div"); - const dm = new DotMaker(WIDTH); + const width = WIDTH / params.cell; + const height = WIDTH / params.cell; + + const dm = new DotMaker(width, height); const svg = container.append("svg") - .attr("width", WIDTH * CELL * MAG) - .attr("height", HEIGHT * CELL * MAG) - .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]); + .attr("width", WIDTH * MAG) + .attr("height", HEIGHT * MAG) + .attr("viewBox", [ 0, 0, width, height ]); const background = svg.append("rect") .attr("x", 0) .attr("y", 0) - .attr("width", WIDTH) - .attr("height", WIDTH) + .attr("width", width) + .attr("height", height) .attr("fill", params.background); diff --git a/src/components/dots.js b/src/components/dots.js index b34cd15..3b061b3 100644 --- a/src/components/dots.js +++ b/src/components/dots.js @@ -45,7 +45,6 @@ function int_range(v1, v2) { class DotMaker { constructor(width, height) { - console.log(width, height); this.width = width; this.height = height; this.wh = 0.5 * (width + height); diff --git a/src/index.md b/src/index.md index 1dd835c..16add7a 100644 --- a/src/index.md +++ b/src/index.md @@ -144,8 +144,8 @@ const dots2 = dm.dots(1 / m2, n2, false); const svg = d3.create("svg") - .attr("width", width * cell * MAG) - .attr("height", height * cell * MAG) + .attr("width", WIDTH * MAG) + .attr("height", HEIGHT * MAG) .attr("viewBox", [ 0, 0, width, height ]);