Author here, this is my first generative art project that I'm remotely satisfied with. I'm new to the whole thing, but I'm having a lot of fun making these things.
As you play with parameters, unique URL will be generatred for easy sharing.
Output is a SVG file that can be downloaded. I want to do some pen plotting in the future, therefore I prefer to work with vectors.
This is really cool, thanks for sharing! If I were to suggest some features I would personally like (so feel free to ignore), it would be cool if the coloring could be constrained to a set of analogous colors [1] so it feels like they are made up of "similar materials".
Honestly, I really like "neon" color chaos. But it shouldn't be too hard to change. If you want to try it locally, you only need to change few lines responsible for color generation:
Thanks! I know it can be cumbersome to navigate a long history, but people generally love this feature. Because it is easy to loose "the perfect" image while playing with controls. This allows you to click back couple of times and find it.
As for how it works, I plan to do a full write up on my blog. But I'll give you a short summary.
- I generate a random vector field (https://en.wikipedia.org/wiki/Vector_field). It is not completely random, I pull them all slightly to the right, as chaos is rarely visually pleasing.
- Then I generate random starting point for each line.
- For each point, I find all vectors in certain radius, and apply their force to the dot. The further away the vector is, the weaker force applies to the point. This will give me next point.
- I repeat the process for the new point, until line is out of bounds or line reaches length of 100 point.
- Now line looks like a array of points (x, y coordinate pairs). Using these points, I draw smooth bezier curve.
That sums it up I think. The whole thing has some random aspects, params controlled by the user and some I tweaked how I like them to give what I think is visually pleasing. Try enabling debug mode and playing with controls.
This codepen is my initial exploration, the code is very similar to the final think and it might be easier to understand.
> I know it can be cumbersome to navigate a long history..
Maybe what you can do is use Neon logo (top left) as reset. Clicking on that takes one back to the original state. After playing around a bit, I wanted to start again and clicked on that logo (multiple times) expecting that to wipe the slate clean and I can restart my exploration again.
Darn, it took me a while to replicate failed downloads.
Everything is generated on the client side, including file to download. Some browsers (I know Chrome for sure) have a size limitation for files you can generate and download on the client.
As a workaround, try Firefox or Safari, or manually copy SVG's code from the inspector.
I'm not sure how to fix it atm, but I'll look into it.
EDIT: I think I fixed it, but if you still encounter it, please open an issue on GitHub. Thanks!
As you play with parameters, unique URL will be generatred for easy sharing.
Output is a SVG file that can be downloaded. I want to do some pen plotting in the future, therefore I prefer to work with vectors.
Any feedback is welcome! <3
[1] https://www.colorpsychology.org/analogous-colors/
Honestly, I really like "neon" color chaos. But it shouldn't be too hard to change. If you want to try it locally, you only need to change few lines responsible for color generation:
https://github.com/Stanko/neon/blob/master/src/utils/generat...
"rng" property is a seeded random generator you can use instead of Math.random
I'll add a short section in readme about running it locally.
A UI issue: Please don't put every change in the browser's URL history - makes it very hard to go back.
As for how it works, I plan to do a full write up on my blog. But I'll give you a short summary.
- I generate a random vector field (https://en.wikipedia.org/wiki/Vector_field). It is not completely random, I pull them all slightly to the right, as chaos is rarely visually pleasing.
- Then I generate random starting point for each line.
- For each point, I find all vectors in certain radius, and apply their force to the dot. The further away the vector is, the weaker force applies to the point. This will give me next point.
- I repeat the process for the new point, until line is out of bounds or line reaches length of 100 point.
- Now line looks like a array of points (x, y coordinate pairs). Using these points, I draw smooth bezier curve.
That sums it up I think. The whole thing has some random aspects, params controlled by the user and some I tweaked how I like them to give what I think is visually pleasing. Try enabling debug mode and playing with controls.
This codepen is my initial exploration, the code is very similar to the final think and it might be easier to understand.
https://codepen.io/stanko/pen/rNavBvN
EDIT: Formatting.
Maybe what you can do is use Neon logo (top left) as reset. Clicking on that takes one back to the original state. After playing around a bit, I wanted to start again and clicked on that logo (multiple times) expecting that to wipe the slate clean and I can restart my exploration again.
My unique ID using only my username as seed parameters (achow):
https://neon-v1.netlify.com/#/false/15/15/50/50/200/5/achow/...
Everything is generated on the client side, including file to download. Some browsers (I know Chrome for sure) have a size limitation for files you can generate and download on the client.
As a workaround, try Firefox or Safari, or manually copy SVG's code from the inspector.
I'm not sure how to fix it atm, but I'll look into it.
EDIT: I think I fixed it, but if you still encounter it, please open an issue on GitHub. Thanks!