Play with the Live Demo!
Built using @code-not-art/sketch from the ready to go development template
After git clone and npm install, run npm start!
Warning: The image generation algorithm is not fast, it can take several seconds to render every line.
This will increase the resolution of the lines (and the drawing time) by approximately 20x. The best way to use this is to preview images with this disabled, then enable it to get a high res render for saving.
Set this to palette to use a random palette, otherwise the image is in monochrome.
By default the flow field is being generated from simplex noise without curl. To enable the curl calculation on the field enable this.
For nicer color combos, update the sketch config to use curated palettes instead of random. Random is useful when working with highlights sometimes.
The flow field is being generated by a constant named noiseA with potential extra manipulation by noiseB. Changing the octaves and frequency of these noise generators will have large and immediate impacts ont he complexity of the noise in the image's flow field.
A potential place for improvement is to expose to the parameters the octaves, frequency, and maybe a parameter for scaling position in the noise field.
TLDR: Spacebar to regenerate, arrow keys to change only colour or image, S to save
| Key | Action |
|---|---|
s |
Save the current image |
u |
Shareable image URL - Create a shareable URL and copy that link to your clipboard |
m |
Show/Hide Parameter Menu |
space |
Draw new image with random image and color seeds. |
↑ |
Move to next color seed, or generate a new one if at end of list. Draw new image. |
↓ |
Move to previous color seed. Draw new image. |
→ |
Move to next image seed, or generate a new one if at end of list. Draw new image. |
← |
Move to previous image seed. Draw new image. |
c |
Generate new color seed. Draw new image. |
i |
Generate new image seed. Draw new image. |