drawz fxh_t019 #6

'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