Replies: 1 comment · 2 replies
-
|
@jenkin thank you for the feedback and idea, interesting.
Although it looses most of its real time editing advantage, it still make sense in your case. It would then look like a js function call where you pass the config params and list of seeds and get as result the SVG string. As fallback and workaround, you can also consider if passing seeds to the clients instead of SVGs is manageable, unless you need some post processing on the the SVGs, you could just render them on the client. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the reply! :) I made an attempt to use For now I managed to run the webpage on headless chrome using puppeteer, I just made a small change to support seeds loading from Here is a working snippet. import * as puppeteer from 'puppeteer';
const config: Record<string, any> = {
"seeds_config": { "is_debug": false, "debug_id": 0, "nb_seeds": props.fingerprint.seeds.length, "max_seeds": 200, "area": { "width": props.fingerprint.window.width, "height": props.fingerprint.window.height }, "nb_samples": 10, "walls_dist": true, "path_debug": false, "map_vs_dist": 10, "map_vs_dist_max": 30, "map_power": 1, "map_power_range": { "min": 0.1, "max": 3, "step": 0.1 } },
"shape_config": { "cells_action": "in_cells", "seeds_action": "avoid_path", "debug": false, "view_shape": true, "view_map": true },
"diag_config": { "cell_debug": 0, "use_filters": false, "disp_scale": 10, "disp_scale_max": 50, "turb_freq": 0.05, "turb_freq_max": 0.2, "turb_freq_step": 0.002 },
"voronoi_config": { "version": "76", "cell_debug": 0, "min_edge": 6, "is_color": false, "width": props.fingerprint.window.width, "height": props.fingerprint.window.height, "cells_shape": "cubic", "cells_space": 2, "use_unit": false, "unit_ratio": 3.7795, "unit_ratio_default": 3.7795, "view_svg": { "cells": true, "edges": false, "seeds": false, "shape": true }, "mouse_action": "move", "export_ratio": 1, "export_svg": { "cells": true, "edges": false, "seeds": false, "shape": true } },
"seeds_data": props.fingerprint
};
const browser = await puppeteer.launch({
headless: true,
slowMo: 50,
});
const page = await browser.newPage();
await page.evaluateOnNewDocument(config => {
localStorage.clear();
for (const key in config) {
localStorage.setItem(key, JSON.stringify(config[key]));
}
}, config);
await page.goto("http://localhost:8081/");
await page.waitForSelector("#main_svg");
const svgHandle = await page.$("#main_svg");
const svg = await page.evaluate(svg => svg?.outerHTML ?? '<svg></svg>', svgHandle);
await page.close();
await browser.close();It would be interesting to decouple generation functionalities from web gui and release a npm package, but I think you need to heavily refactor your code. |
Beta Was this translation helpful? Give feedback.
-
|
I absolutely agree with regard to decoupling algo from UI, but as you know how the browser evolved, this is sometimes not an easy task. Especially in cases like Although I did some hard math algo's implementations, that one is tricky because its geometrical complexity is unbound and it's easy with a brute force, so not suited for js, that's where the browser API comes to the rescue. Decoupling it totally might require some wasm acceleration or something probably. But I checked its usage and it's used by In the meanwhile, puppeteer to the rescue 😊 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
This project offers some unique nice features in voronoi generation, but if I'm not wrong it's only for browser environment.
@wassfila Have you any hints to generate server side SVGs in a NodeJS environment? Maybe using jsdom?
My use case requires the generation of hundreds of SVG in bulk starting from computed seeds using a static site generator.
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions