Pet project 2020 : first animated GIFs
December 28, 2019Here my first work on the pet project.
I decided to start by listing all work-related and household-related "annoying tasks"
and start to think, how can I animate them to become "motivational GIFs".
This is the "motivational GIF" it will play,
once I have emptied the biowaste bin.
I set it so, that it only plays the GIF once - to see it again, refresh your page.
These are to be VERY simplistic - the focus being "kawaii" (i.e. "super cute"),
rather than "very good art".
We are after the "hormonal response" (oxytocin, and maybe some dopamin as well),
not "oh what great art" response.
I got a good list of "very annoying tasks" done,
and some ideas how to draw them.
Trash cans are easy to draw, so I started with them.
I used ezgif.com GIF maker, to join my individual .png files to a GIF.
I also managed to write a html page, actually playing them.
Only playing them once I have pressed a button.
And stopping playing when the gif has played once.
And playing them AGAIN - if I press the button again.
The images in the html page are jumping to "wrong places" in the layout, for some reason.
Have seen this before, so probably some obvious reason. Omitting that for now.
Here my current web page for it :
So - baby steps in Javascript : succesfully accomplished.
Here my baby steps code :
The html part :
<p>
<img id="biowaste"
src="images/biowaste.png"
width="237" height="340"
align="left"
alt=""/>
<button onclick="reloadBiowaste()">Biowaste done</button>
</p>
The javascript part :
function reloadBiowaste() {
document.getElementById("biowaste").src = "images/biowaste_gif.gif";
setTimeout(function (){
document.getElementById("biowaste").src = "images/biowaste.png";
}, 8000);
}