'drawz' fxh_t019 is also vanilla javascript template for fxhash
feel free, to use (parts of) it, and learn from the source. and use it as a start for your own creative projects and adventures
This version has some extra routines you can use; and a lot of comments in the source
A cleaned up - smaller version; just doing the basic tech screen & window-handeling etc. with just drawing dots can be found here. (and older and newer updated versions) https://elout.home.xs4all.nl/drawz/
Mostly I start with a clean template; then add: copy-paste routines into it. Things I want to use; sprites, text-font, filters, lines, 3D etc. Like kinda lego blocks. Some routines I re-use for 30 years now. Although often they have changed over time.
Vanilla javascript - And directly control your rgb buffer
cons:
- can be overwhelming for starting coders compared to p5js
- you have to write / use and tinker with new drawing routines by yourself.
- still can be optimized a lot, and run much faster -- (feel free to do that! - release new versions yourself)
- I just coded it in Notepad++ and tested it in a browser.
- I have no experience with git-hub, or those other nifty tools
- I'm more an Artist than a coder, still learning new things as well.
- I have my own 'old' coding style I picked up ages ago, and still use now and then. Started with basic and Z80a as a teenager.
- for sure there are still some stupid bugs, spelling errors in it ^___^
pros:
- fxtemplate - fxpreview when done drawing / splash-screen support on top; while drawing.
- do like 4000 x 4000 images on safari; on an old Iphone 5
- just 1 index.html now - small file size:
- the source of the 'cleaned-up' version is now 34b (not minified, and still comments in the source; can be even smaller)
- direct control of the RGB buffer; every pixel.
- I added some basic routines, like drawing points, lines, squares, sprite-brushes, filters, and my pixel-font
- draw, add-mix or subtract - manipulate every pixel how you wish
- I work with a big off-screen kind of image; a rgb-buffer; so drawing goes 'mucho' faster and render it to a screen-scaled image.
- no other libraries used
Mouse-click switches between:
-
screen scaled image
-
The large image
-
The work will refresh and restart after some time
Save image - with s-key (includes the fxhash key-seed and num# of the follow-up images) --- It can take some seconds before the saving happens; --- the browser has to handle (very) large MB .png files first --- before it can save them
- splash image support - to hide drawing at start
- redraw the image after a while; or not.
- mouse position check for the bigger image
- fps counter for testing etc.
written in vanilla JavaScript, more info in the source-code
drawz - latest or an updated version can be found at. https://elout.home.xs4all.nl/drawz/
It would be nice; to include more routines into it in the future.
And instead of 1 big library with everything in it I would like to have these templates; where you can add different little snippets and routines that you want to use into it, and start playing next. Still learning new things as well. And getting inspired.
I don't mind people to use the tech-source as a start for their own projects.
But the palette, and composition & structure build-up; is mine. Don't change just 1 or 2 -things then re-release it.
If you want to release something of your own, your sketch and generative work; really should look total different! You can use the technics to draw new things, but you have to start from scratch again; choosing points, lines etc. to play with and go from there. Enjoy!
-for the love of Art and jumping in rain puddles-
'like jimi and guitar' 0__. ^____^
xxx amsterdam chillout
September 29, 2022