spideysensi v.2xxx

=________=

wip.
-----------------------------------
latest updates for spideysensi v.2a


fixed:
----------------------------------
little css error at loading, that not showed while local testing, but did.. online. ouch.
and removed some un-used stuff, that was slow n'down fps

added new:
---------------------------------------------------------------------------------------
- added fxhash features (still needs testing on fxhash, i hope that part works now 0__. )

- random grey backgound, when the first the layer is also transparent (and even more random!)


---------------------------------------------------
see it running on my website
https://elout.home.xs4all.nl/drawz/spideysensi002a/

animated version: after 7+ sec the cartoonshow starts =_____=
--------------------------------------------------------------
https://elout.home.xs4all.nl/drawz/spideysensi002a/index2.html
--------------------------------------------------------------

..reload for a random image combination 
after 7+ seconds the fx-snapshot happens.. and the features will be written in the console log


download project zipfile: 
----------------------------------------------------------------------
https://elout.home.xs4all.nl/drawz/spideysensi002a/spideysensi002a.zip

[index.html / fxhash.min.js (from jun 2024) / and the images total: 37kb]
[or right click; and save source etc. as.. from the browser itself if you don't want to use the zip]

note:
user Empath told me.. that having more then 36 images in 1 directory
can cause troubles, when you want to mint your project onchain on base-eth
although you can create a x-number of directories with like 5-30 images each 

I try to explain settings next. 
needed for your own image base project 




directory structure of my current project and images

1.
make sure you update the favicon.png

it's an 16x16 image .png - for your page - the favicon shows in the menubar, also when bookmarking !

mostly I do this in the gimp (image software like photoshop; free 'n opensource)

2.

i need to edit my index.html

[I use the free-opensource notepad++ text editor for that]
[the index.html contains the javascript code that does all the drawing]
[and the project settings.. where it can find  the images for loading etc.]


and first I need to set the project name 

var cversion="spideysensi_v2a_";

this will be the title of my page, 
but also the name.. when you save the image (when pressing the s-key) 

you can change it to whatever you want
var cversion="whatever_you_want";

[tip: since it's also the save-name, try to avoid spaces or weird characters.]

next i got to set the anim loop to true or  false

var anim_loop =   false;

it will draw a random image, and stops drawing after that




var anim_loop =  true;

if i set the anim loop to true.. after like 7+ seconds, 
it will redraw the composition, with a random new combination
like a cartoonshow, always changing, also nice for watching all possible combinations when testing

var use_features= true; 
I can set use_features to true or false

when it's true..
it will enable $fx.hash features, nice for searching in a collection as well, rarity etc.
you have to set a nice name for each image as well next though.. in the settings

if the images in my first layer are transparent as well... i can set

var first_layer_transparent = true;

then I get an extra background layer
filled with a random grey background color at the moment (even more random variations)
and that grey color will also show up in the features

next i check on the names in layer_1

next I got to set the correct names and paths to my layer_1 in the script

the directory path is now './layers/layer_1/'
all my image names start with `background`
and i got 7 images now in the layer_1 directory

[background1.png, background2.png, etc... background7.png]

I have features enabled now

then i got to give each image, also a nice name
since I have 7 images, i also gotta have 7 names
'dark fade up', 'light fade up', 'clear', 'cyaan fade up', 'dark fade left','dark fade right', 'purple fade up'
and these names will show up in the features!
[and in the console]

you already can release your project, just using 1 layer with a bunch of images..

but that's hardly random, just using background layer, and 1 random image layer on top, and is frowned upon
and might get your project even banned-disabled on fxhash; 

since your really need to mix it up, with some fresh layers and unique-ness, and that random magic that can happen.

people really want to see much and good variations, so that takes more time to finetune

so I added more layers on top for this project

second  layer

set the path correct './layers/layer_2/'
all the images got the same start-name 'body'

and I got 7 images in this directory 

and next I give a feature name for every image, since I enabled features as well
'orange-yellow', 'orange 1', 'orange 2','darker orange', 'waterdrop 1','waterdrop 2','transparent'

layer_3

set the path correct './layers/layer_3/'
all the images got the same start-name 'eyes'

and I got 8 images in this directory 

and next I give a feature name for every image, since I enabled features as well
'eyelook 1', 'eyelook 2', 'eyewink 1','eyewink 2', 'eyewink 3','side-eye 1','side-eye 2','side-eye 3'

layer_4

set the path correct './layers/layer_4/'
all the images got the same start-name 'extra'

and I got 12 images in this directory 

and next I give a feature name for every image, since I enabled features as well
'linecheck cyaan', 'linecheck blue-purple', 'cloud pink','cloud purple', 'shades 1',
'shades 2','shades 3','shades 4','bubble smoke', 'red fader','cyaan fader', 'greenline up'

extra settings

Extra settings
----------------
since images in my layer_1 are also transparent
(and  i have set: var first_layer_transparent = true;  in the start )

It will generate an extra random grey background as well
that also shows up in the features as `background grey: xxx`

you can choose the random range of the random color grey (between 0-255)
since sometimes you don't want the background too dark, or too light 

var grey_low = 30; 
var grey_high = 180;

and because I don't want 100+ different background grey-colors now..  i do the random grey in steps of 10
and i will give a random grey-color between 30 and 180 now

timing: 

var fxsnapshot=700;

wait 10+ seconds : (700/60) for the fxhash snapshot



var nextdraw=200;

and if done.. and var anim_loop =  true;
it will redraw a new random composition and image every  (200/60) 3+ second

basicly
these are the settings and options for now

if you got your images ready, 
names correct and settings you should be ready to upload your project on fxhash next =____=


wip. 
some more info on testing in the previous article. spideysensi v.001
since when working with javascript and loading images in javascript.  
you can't directly run from your harddisk, without security errors
and you really have to run it from a local server, or upload it online, for testing,   seeing it work

more info later. since gotta hit the bed! cheers