websvg / voronoi Goto Github PK

View Code? Open in Web Editor NEW

168.0 6.0 25.0 15.55 MB

Parametric Voronoi generator with real time editing and SVG export

Home Page: https://voronoi-editor.web.app

HTML 1.85% JavaScript 98.15%

bootstrap client-side css-grid geometric-algorithms sampling-methods static-site svg vanilla-js voronoi svg-filters

voronoi's People

Contributors

Stargazers

Watchers

voronoi's Issues

SVG path shaped area import error

Discussed in #30

^{Originally posted by Josseflos February 7, 2023}
Hi there,

I am trying to import a SVG file in the Voronoi web editor (Chrome), but keep receiving the same error: "only supported import of SVG with a single path on the top level". I am using Inkscape to create a SVG and am making sure that the file is a single path on the top layer, but even when plucking simples shapes from the internet, the error comes up. Does anyone know what could go wrong, or could anyone share a file that works, so I can compare it with other files?

Thanks in advance!

Jos

seeds file should control the window size

loading seeds does not care about the window size
window size might be part of seeds coordinates

Originally posted by @wassfila in #3 (comment)

Circle function is cut off at the bottom

Thank you for this awesome tool.
The bottom of the circle tool is cut off :/ This happens on both websites. Also gets into svg export. Tried different browsers. Issue persists.

only supported import of SVG with a single path on the top level

I just discover this repo, this is very interesting but... I'd like to help by describing some issues and solutions I had wile testing.

Drag 'n drop

SVG

I have tested with a simple circle or square with a specific size, default layer, nothing fancy from inkscape 1.0 but I received this error: only supported import of SVG with a single path on the top level

It worked when I saved the file as Optimized SVG, "inkscape svg" and "plain svg" does not
Not sure what options are important but It worked with:

then I don't understand well the units because I don't get the result I'm looking for.
I'm working in mm, so here is the square I'm testing with:

it's a 85/85mm page with a 80/80mm square centered.

The result is:

So I understand that the size in the page is maybe in pixels or without unit. That's fine, I just need to adjust accordingly.

But I'm not sure how it work then.
Why there is no seeds on top and left sides?

wrong half edges orientation on resize

only happens when resizing the window, never when generating fresh seeds

feature requests: mouseover preview for the 'add' function, undo/redo

Discussed in #21

^{Originally posted by raminrahni June 14, 2022}
Thank you so much for creating and sharing this wonderful tool! It's incredibly useful. Are there any plans to implement a preview feature for the 'add' function? It would be super helpful to know where the cell is going to be cut before clicking, especially in the absence of an undo function (another feature that would be extremely useful). Thanks!

Add offset from shape edges

My goal is to get any shape with holes and generate a Voronoi diagram inside it. With the app I generated a mesh then modified it in Illustrator to get this result:

Then I imported the DXF to Fusion:

It would be nice to add such features that generate such DXF

Color does not export

The Cell Color does not export. i am not sure if i am missing something, or if this is a legitimate issue. I think the later.
I have tried in 2 different Firefox based browsers and 1 chrome based.

Thanks

Random color assignment - code fragment

First, let me say that this project is awesome! Thanks for creating such an incredible tool for voronoi diagram creation.

Now then... the readme states that random color assignment is a goal. I might have time to look at the source and submit a pull request, but until then, I have a fairly easy way for end users to achieve it.

create your voronoi diagram using the online voronoi editor
export your diagram to SVG
open the SVG in a new browser tab (I testested in Chrome, but should work in Firefox)
open the developer tools (default hotkey is <ctl><shift>-I
make sure you are in the "Console" tab/section of the developer tools
paste the following snippet into the console, and hit enter to execute the command

document.querySelectorAll("path").forEach(function(userPath) {
userPath.setAttribute("fill", "hsl("+ Math.floor(Math.random() * Math.floor(255)) + ",90%,60%)");
userPath.setAttribute("fill-opacity", "40%");
})

This snippet should iterate through all the "path" objects in your document, and set the fill color to:

a random hue between 0 and 255
saturation of 90%
luminosity of 60%
opacity of 40%

This should be easy to modify to your liking, since the numbers are unique, and the attribute they affect should be clear.

in cells selection failing

this example does not select cells inside the shape

Add text inside each cell

Hi, this feature would be extremely useful for labeling cells and would love to see this added. Thank you so much for the time and consideration.

Failing cubic bezier import on Fusion360

Wondering if this is not a Fusion360 limitation...

Fusion360

Browser

<svg id="main_svg" 
    xmlns="http://www.w3.org/2000/svg" width="100%" height="60%">
    <g id="svg_g_bezier_cells">
        <path d="M412.4717425873301,20.098834050356288 C412.9389244865767,34.99766810071258 412.9389244865767,34.99766810071258 454.384561218125,86.329207020215 S495.83019794967333,137.6607459397174 541.3150989748367,145.89898089893188 S586.8,154.1372158581464 586.8,79.66860792907319 S586.8,5.200000000000001 499.40228034404174,5.2 S412.0045606880835,5.199999999999999 412.4717425873301,20.098834050356288 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M254.64669827148415,48.918126343501164 C256.57708726719244,92.63625268700233 256.57708726719244,92.63625268700233 290.47610686741575,109.89177322231262 S324.37512646763906,127.1472937576229 345.439150408597,118.93807123126899 S366.5031743495549,110.7288487049151 384.5310317951909,73.26311304884592 S402.55888924082694,35.79737739277677 402.07916912199056,20.498688696388385 S401.5994490031542,5.200000000000003 327.157879139465,5.200000000000003 S252.71630927577587,5.200000000000004 254.64669827148415,48.918126343501164 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M111.47651245541348,63.24613880922354 C143.09211635964837,121.29227761844707 143.09211635964837,121.29227761844707 177.55284095613632,133.65254733040913 S212.0135655526243,146.0128170423712 229.1298918699356,120.22209769848071 S246.24621818724688,94.43137835459021 244.27619699404454,49.815689177295106 S242.30617580084223,5.2 161.0835421760104,5.2 S79.86090855117858,5.2 111.47651245541348,63.24613880922354 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M394.0328773500384,160.54030700345356 C412.0911652827125,206.04997694269602 412.0911652827125,206.04997694269602 448.94951470777835,173.9264550404453 S485.8078641328442,141.80293313819456 447.3620932580078,94.18680899141006 S408.91632238317135,46.57068484462556 392.4454559002678,80.80066095441833 S375.9745894173643,115.03063706421112 394.0328773500384,160.54030700345356 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M41.57271262443263,257.5219007092888 C77.94542524886526,246.75134230934793 77.94542524886526,246.75134230934793 105.80174863020277,186.23283549666826 S133.65807201154027,125.71432868398861 100.83820355327575,65.4571643419943 S68.01833509501122,5.2 36.60916754750561,5.2 S5.2,5.2 5.200000000000001,136.7462295546148 S5.200000000000001,268.29245910922964 41.57271262443263,257.5219007092888 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M226.5756952201271,177.68458375826035 C233.4104792160052,202.1921736235795 233.4104792160052,202.1921736235795 266.29262347010354,193.41891620639382 S299.1747677242019,184.64565878920817 308.3854268745969,160.00603901122201 S317.5960860249919,135.36641923323583 285.44122383481886,118.99872213237484 S253.28636164464575,102.63102503151384 236.5136364344474,127.90400946222752 S219.74091122424903,153.1769938929412 226.5756952201271,177.68458375826035 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M340.61541029074374,211.04945707789375 C371.90223306339686,234.91439573813838 371.90223306339686,234.91439573813838 387.9643884610646,224.41892984397276 S404.0265438587323,213.92346394980711 385.69992266630635,167.73755282255388 S367.3733014738804,121.55164169530067 347.7609836135532,129.1950949131804 S328.14866575322606,136.83854813106012 318.73862663565836,162.01153327435463 S309.32858751809067,187.18451841764914 340.61541029074374,211.04945707789375 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M136.83213670271294,252.95263505751757 C184.3003602024225,259.0879861059363 184.3003602024225,259.0879861059363 187.16725267246562,258.03711958314034 S190.03414514250872,256.9862530603443 203.59189829212087,243.00112384540694 S217.14965144173303,229.01599463046955 220.7431231929268,218.69314435184276 S224.33659494412055,208.37029407321597 217.07161341658048,182.3201383165091 S209.80663188904043,156.2699825598022 176.0050197927462,144.14612134964364 S142.20340769645196,132.02226013948507 115.78366044972768,189.41977207429193 S89.36391320300339,246.8172840090988 136.83213670271294,252.95263505751757 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M456.3650071988532,244.2336517479963 C495.6668486504737,272.9551035312676 495.6668486504737,272.9551035312676 541.2334243252369,263.62353874139376 S586.8000000000001,254.2919739515199 586.8000000000001,209.49919844083422 S586.8000000000001,164.70642293014856 540.6660937394013,156.35064000449304 S494.5321874788026,147.99485707883753 455.79767661301764,181.75352852178128 S417.06316574723274,215.512199964725 456.3650071988532,244.2336517479963 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M286.11406470588327,258.5438028909689 C344.1381010501169,287.8655184843177 344.1381010501169,287.8655184843177 354.66132912089193,265.36799256152307 S365.18455719166695,242.87046663872843 333.5830866020033,218.76552115813325 S301.98161601233966,194.66057567753805 267.8845107506048,203.75799582539813 S233.78740548887,212.8554159732582 230.93871692525983,221.03875163543916 S228.09002836164962,229.22208729762008 286.11406470588327,258.5438028909689 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M404.95002351686037,310.25537024748405 C456.4901732048671,327.9211067664456 456.4901732048671,327.9211067664456 471.96121122142625,303.8697827173236 S487.4322492379854,279.8184586682016 448.4314920003692,251.3170366701981 S409.43073476275293,222.81561467219458 392.592151576106,233.81842040816616 S375.7535683894591,244.8212261441377 364.5817211091563,268.7054299363301 S353.40987382885356,292.58963372852253 404.95002351686037,310.25537024748405 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M241.94500111432262,309.3554819214078 C283.87553034939856,357.07820962599567 283.87553034939856,357.07820962599567 307.677748885824,338.65303445071754 S331.4799674222494,320.22785927543947 335.89245523457595,308.90441163795265 S340.3049430469025,297.5809640004659 281.5289314936981,267.87924721106316 S222.75291994049377,238.17753042166044 211.38369590987026,249.90514231924016 S200.0144718792467,261.6327542168199 241.94500111432262,309.3554819214078 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M84.97435208729028,381.939134605617 C164.74870417458058,402.4882142696192 164.74870417458058,402.4882142696192 171.9636795856809,335.7003612329611 S179.17865499678123,268.91250819630295 130.6423419607188,262.63910470409087 S82.10602892465639,256.36570121187873 43.653014462328194,267.7522711990199 S5.200000000000001,279.1388411861611 5.200000000000001,320.2644480638879 S5.200000000000002,361.39005494161484 84.97435208729028,381.939134605617 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M226.2141068376347,382.52935017653226 C276.9604018687963,364.9642959688427 276.9604018687963,364.9642959688427 234.17272594486266,316.26601706608335 S191.38505002092904,267.56773816332407 190.55174616398358,267.8731877522888 S189.71844230703815,268.1786373412535 182.59312705675563,334.1365208627377 S175.46781180647312,400.0944043842219 226.2141068376347,382.52935017653226 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M378.58072875901746,365.47476044191444 C415.38361017159,408.5048618561272 415.38361017159,408.5048618561272 433.94550000389233,385.31373818866314 S452.5073898361947,362.122614521199 452.919418210887,349.9774967816637 S453.3314465855793,337.8323790421284 401.4817967347749,320.0605592393259 S349.63214688397045,302.28873943652343 345.7049971152077,312.3666992321125 S341.77784734644484,322.4446590277016 378.58072875901746,365.47476044191444 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M524.8827595536965,385.9778384442209 C586.8,411.37014313998395 586.8,411.37014313998395 586.8,338.1389795687876 S586.8,264.90781599759123 542.2224221645462,274.03684422907986 S497.64484432909245,283.16587246056855 480.726126414575,309.46776420320475 S463.8074085000575,335.769655945841 463.3864638037252,348.1775948471494 S462.96551910739294,360.58553374845786 524.8827595536965,385.9778384442209 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M300.68755135125684,407.47826810829775 C314.4374408639735,445.9737569942959 314.4374408639735,445.9737569942959 361.4449132384975,437.56374968414343 S408.45238561302153,429.15374237399095 409.2422625318438,423.7011167081117 S410.032139450666,418.24849104223244 372.5506341451834,374.424939392244 S335.0691288397008,330.6013877422556 311.30383080414447,348.99798294735035 S287.53853276858814,367.39457815244504 287.23809730356413,368.1886786873723 S286.9376618385401,368.9827792222996 300.68755135125684,407.47826810829775 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M502.85563277844517,456.95823924389754 C586.8000000000004,484.4198220521019 586.8000000000004,484.4198220521019 586.8000000000004,453.5152723972959 S586.8000000000004,422.61072274248994 523.0368302252859,396.4614011057909 S459.2736604505714,370.3120794690919 439.86681974558866,394.5588801370282 S420.4599790406059,418.80568080496454 419.68562229874794,424.1511686203288 S418.91126555688993,429.4966564356931 502.85563277844517,456.95823924389754 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M192.58288863004236,499.1505327026981 C210.85726241531265,586.7999999999993 210.85726241531265,586.7999999999993 221.70745964953448,586.7999999999993 S232.55765688375632,586.7999999999992 268.9520672476226,519.1201340139364 S305.3464776114889,451.4402680278736 291.7894809270699,413.4848201160996 S278.23248424265086,375.52937220432557 226.27049954371145,393.51521880486126 S174.30851484477205,411.50106540539696 192.58288863004236,499.1505327026981 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M182.11927519970206,499.91805847528013 C164.00492580808157,413.0361169505603 164.00492580808157,413.0361169505603 84.60246290404078,392.5828322413628 S5.199999999999999,372.1295475321653 5.199999999999999,479.46477376608254 S5.199999999999999,586.7999999999998 102.71681229566127,586.8 S200.23362459132255,586.8 182.11927519970206,499.91805847528013 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M419.01632250874417,513.4538702697257 C420.13403832891186,586.8000000000001 420.13403832891186,586.8000000000001 503.46701916445573,586.8000000000001 S586.7999999999996,586.8000000000001 586.7999999999996,541.0810938248264 S586.7999999999996,495.36218764965287 502.34930334428805,467.7349640945521 S417.8986066885765,440.10774053945136 419.01632250874417,513.4538702697257 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
        <path d="M408.61345838732524,513.3451602623403 C407.49408594402666,439.89032052468076 407.49408594402666,439.89032052468076 360.952268617622,448.2170184765361 S314.4104512912173,456.54371642839146 279.3882141183964,521.6718582141957 S244.3659769455754,586.7999999999998 327.0494038880996,586.7999999999998 S409.7328308306238,586.7999999999998 408.61345838732524,513.3451602623403 Z" stroke="red" stroke-width="0" fill="#221155" fill-opacity="0.2"/>
    </g>
</svg>

new feature: Victorian edge styles

Discussed in https://github.com/WebSVG/voronoi/discussions/25

^{Originally posted by wassfila September 17, 2022}
Experimental Featuer for replacing cell edges with Victorian style curves

Server-side rendering?

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!

exported height limited to 60%

split view and export svg so that the export can have different properties
use different method for svg size on window
might relate to the vertical view feature

White page using Firefox and not Chrome

bur report from https://www.thingiverse.com/messages:419713

TO DO provide hints about OS and browser used

tested url :
https://websvg.github.io/voronoi/

tested browser "Google Chrome", OS "Windows 10"

expected debug console log (ctrl+shift+j) :

same version 76, loading
seeds.js:255 seeds_update: 7.000 ms
voronoi_diag.js:347 voronoi: 5.2509765625ms
voronoi_diag.js:351 post proc: 1.50390625ms

Screenshot

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.