poptimal/poptimal.js

import {  Resvg } from "@resvg/resvg-js";

import { promises } from "fs";

import jsdom from "jsdom";
import * as d3 from "d3";

const { JSDOM } = jsdom;


const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";

const window = new JSDOM().window;

const document = window.document;


import {RADIUS_OPTS, DotMaker} from './src/components/dots.js';
import {PALETTES} from './src/components/palettes.js';

const CELL = 10;
const MAG = 2;
const WIDTH = 20;
const HEIGHT = WIDTH;

function poptimal_svg() {
	const container = d3.select(document.body).append("div");

	const dm = new DotMaker(WIDTH);

	const m1 = 2;
	const m2 = 3;
	const n1 = 4;
	const n2 = 5;
	const bg = "#ffffff";
	const fg1 = "#ff0000";
	const fg2 = "#000000";
	const f1 = "in";
	const f2 = "noise";
	const r1 = 0.5;
	const r2 = 0.19;

	const dots1 = dm.dots(1 / m1, n1);
	const dots2 = dm.dots(1 / m2, n2);


	const svg = container.append("svg")
	  .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)
	  .attr("height", WIDTH)
	  .attr("fill", bg);

	const dots_g1 = svg.append("g")
	  .attr("id", "dots1");

	dots_g1.selectAll("circle")
	  .data(dots1)
	  .join("circle")
	  .attr("r", (d) => dm.radius(d, f1, r1))
	  .attr("fill", fg1)
	  .attr("cx", (d) => d.x)
	  .attr("cy", (d) => d.y);

	const dots_g2 = svg.append("g")
	  .attr("id", "dots2");

	dots_g2.selectAll("circle")
	  .data(dots2)
	  .join("circle")
	  .attr("r", (d) => dm.radius(d, f2, r2))
	  .attr("fill", fg2)
	  .attr("cx", (d) => d.x)
	  .attr("cy", (d) => d.y);
  
	const node = svg.node();

  	node.setAttributeNS(xmlns, "xmlns", svgns);
  	node.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
  	const serializer = new window.XMLSerializer;
  	return serializer.serializeToString(node);

}

async function main() {
	const svg = poptimal_svg();
	const opts = {
    	background: 'rgba(255, 255, 255, 1.0)',
    	fitTo: {
      		mode: 'width',
      		value: 1200,
    	},
    };
  	const resvg = new Resvg(svg, opts)
 	const pngData = resvg.render()
  	const pngBuffer = pngData.asPng()

  	console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`)
  	console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`)

  	await promises.writeFile('test.png', pngBuffer);
}



main();