Some nice spikey animations. Originally done in OpenProcessing.
Then I made a p5js version and a WebGL p5js version.
Really enjoyed making this animated sketch.
Drag the mouse to adjust hues (x direction) and the size (y direction)
Use “K or L” to change the triangles types and “A” for the 4 colouring modes
Use “i” to invert/reverse spin direction and “s” to save to png and “o” for outlines
In some of the other versions I made I had a preset function to store the animations that I really liked (and later save to JSON). Then I implemented an export to gif function (but ran into problems getting rid of the notification message and the disabling of the HUD). I also “mucked about” until I got the number of frames to play continuously (as it turned out needed 240 frames, tried 80 frames originally). The size of some of the animated gifs were a bit too large so I experimented with different file formats (also cut the size down and then scaled down) using the web site HERE
I tried saving the animation to WebP, in OpenProcessing but ran into many problems trying to save to that format (Used Firefox and Chrome browsers). Not sure if there are any Processing libraries about to compress to different compression formats?
Also in that web site I tried WebP, WebM, APng, Mng, JXL (not supported by browser) but found all of the formats had a bigger size that AviF. The 1st animation that I uploaded was originally 15,396 kB but that compressed to 1.18 MB. I also noticed if I cut out the border and saved to AviF it reduced the size, but if I cut, then resized to a smaller size and saved to AviF sometimes the file size got bigger.
Also noticed if I added text to the animation the file size of the AviF more than doubled (the original size of loop33.gif shown below was 7,114 kB, adding text to loop33.avif was 2.61MB, cutting and saving to loop33.avif was 1.20MB)
