Comments (20)
I'm not developer neither, sorry :)
I was only playing a bit in fusion360 today, to make a custom soap holder, and I wanted to explore with voronoi also.
So I find quite cool your app, to be able to adjust and constrain how seeds are placed is awesome 👍
but frustrating when not understanding why it is not working. ^^
So I search a bit and wanted to share what I found.
Then as soon as limitations are better known, it's easier to play with and it could help or motivate someone to help on the code. I hope someone will help
It would be useful to understand how to make svg with inkscape since they have SVG as standard file, it should be easier for most to not have to write themselves the svg. They have a script for voronoi but quite too basic. 👎
Maybe as a wiki, on this repo. I would be glad to help/test when I can.
At the end, I tested with the png map from gimp. But there is a lot of potential to understand better how it work.
Thanks.
from voronoi.
Here are examples of Fusion360 things I printed from a design with this tool :
from voronoi.
from voronoi.
from voronoi.
For SVGs where Inkscape wrapped my path in a <g> node with a transform, I fixed that by using the Apply Transforms extension:
https://inkscape.org/~Klowner/%E2%98%85apply-transforms
from voronoi.
Ah, and I'm testing under Brave browser (which is based on chrome), without any script blockers
from voronoi.
Strange, now I'm testing with a circle. The "optimized svg" doens't work anymore.
the square outline is:
<svg width="425mm" height="425mm" version="1.1" viewBox="0 0 425.01 425.01" xmlns="http://www.w3.org/2000/svg"><path d="m12.5 12.5h400.01v400.01h-400.01z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.6119"/></svg>
The circle is:
<svg width="400" height="400" version="1.1" viewBox="0 0 105.83 105.83" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-24.067 -55.817)"><path d="m111.58 103.11a39.688 39.688 0 0 1-39.687 39.687 39.688 39.688 0 0 1-39.688-39.687 39.688 39.688 0 0 1 39.688-39.688 39.688 39.688 0 0 1 39.687 39.688z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.247"/></g></svg>
Could it be the "transformation" function?
from voronoi.
yes.
This is working:
<svg width="400" height="400" version="1.1" viewBox="0 0 105.83 105.83" xmlns="http://www.w3.org/2000/svg"><path d="m111.58 103.11a39.688 39.688 0 0 1-39.687 39.687 39.688 39.688 0 0 1-39.688-39.687 39.688 39.688 0 0 1 39.688-39.688 39.688 39.688 0 0 1 39.687 39.688z" fill="none" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.247"/></g></svg>
So, what do you use to create your SVG?
Because it feel difficult to get the file right.
from voronoi.
PNG
Must be a non-transparent png. no alpha channel.
Gray levels on white background.
from voronoi.
Hi @nicolasdb
Thank you for your interest in this project, it is indeed a project I had a lot of fun developing and not very common to see such svg interactivity in projects. Usually as soon as it's get complex, then it's done in graphics rendering and not geometrically with vector graphics.
The error you see is a known limitation and even coming from the code of this project not from any other dependency :
Line 181 in aa2eaa8
For SVG file examples, it's a bit tough, but I directly referred to the SVG standard and created the example SVG by hand :
https://github.com/WebSVG/voronoi/tree/master/data
It should be possible to create samples using other tools, but once you're inside a tool, SVG is tainted with lots of variety, some programs even embed pixel colors inside an SVG to emulate shadows, and when in vectors, there are hundred of ways how to represent the same thing.
I'm doing web and graphics development for fun, not my core know-how, but I'll be glad to help you if you think this tool is useful. I would still have some concerns, this tool is far from being a sw product and is a proof of concept, so might be more relevant for other developers rather than for end users.
If you're interested to understand it as a developer, I'll be glad to explain more.
If you're willing to help by testing and reporting issue, that might still be good to show others what the limitations are, but I do not think I'll be investing effort turning this PoC into a product, who knows maybe someone would then fix these issues with a PR.
from voronoi.
I also noticed some selection failures that would be good to fix, if you have more examples you could post them, I have a ticket open for that
#11
from voronoi.
Back to the main topic, the reason why "only supported import of SVG with a single path on the top level"
is that I'm using a path function to define if a point is in or out, and the complexity grows exponentially if I try either to turn a random SVG into a single path, or if I start looping through all paths in a file, that would not be computationally efficient.
from voronoi.
An additional hint, one of the reasons why I did not push this project that much further is that there is an alternative that can be used to produce any sorts of complex SVG, but only if the precision is not needed to be extreemly high, you could work in pixels with any graphics tool and then at the end create an SVG path from any sort of selection.
So if you provide more info about your use case, what did you intend to use this tool for, we might think of enhancements or alternatives.
from voronoi.
@nicolasdb thank you for trying to make the tool better. I will try to help you too. If you want, you can attach the files you created and I'll do the test myself and check why they did not work, or maybe either create the files that work for you and add them to the existing data folder so that you can select them from the drop down menu
or figure out how to adapt files from Gimp and document that..
from voronoi.
your third example is shown as invalid but could get openeed nevertheless
it's just a bit small, unit is screen pixels pixels
Your square example is working
I have an issue with the display "in cells" function
But if you select Shape "avoid path" and Display "all" you get a result without errors, the only down side is that you have to manually delete the outside cells, I did that before and it goes quite quick with fusion
from voronoi.
some models are available on thingiverse
https://www.thingiverse.com/thing:4282292
from voronoi.
from voronoi.
The giraffe was the hardest, I had a bug, so I performed a lot of manual cleaning by selecting Shape "avoid path" and Display "all" then removing out ones by hand.
from voronoi.
So if you have an idea in mind, you can show me sketches even drawn by hand or examples and I can help you create the svg files for you and I'll add them as examples.
from voronoi.
This has been fixed since 0797cb6 so latest version should be fine.
from voronoi.
Related Issues (17)
- wrong half edges orientation on resize HOT 1
- seeds file should control the window size
- in cells selection failing HOT 4
- White page using Firefox and not Chrome HOT 1
- Random color assignment - code fragment HOT 2
- Failing cubic bezier import on Fusion360 HOT 1
- feature requests: mouseover preview for the 'add' function, undo/redo HOT 1
- new feature: Victorian edge styles HOT 2
- Add offset from shape edges HOT 4
- Add text inside each cell
- exported height limited to 60% HOT 4
- SVG path shaped area import error HOT 4
- Circle function is cut off at the bottom HOT 1
- Color does not export HOT 2
- Server-side rendering?
- "only one file allowed" on Linux + Firefox/Chrome HOT 3
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.
from voronoi.