Joel Gethin Lewis
Lecture 6
Thanks again to Rune Madsen for putting his course online:
http://printingcode.runemadsen.com/lecture-repetition/
Don't forget to click to the slides and press 's' Joel!
Thanks again to Ali Almossawi for writing his book.
Read the Fixing necklaces chapter of "Bad Choices" Joel!
Next we'd like to get on with the work that we set for ourselves in lecture one - to make an Animated GIF maker.
So how do I load animated gifs in p5.js?
Google: "animated gif p5.js"
https://github.com/antiboredom/p5.gif.js/tree/master looks great!
So lets download it.
And try it, by opening the file in the browser.
It doesn't work. )-;
Don't panic! Lets look at the in JavaScript Console.
Hmmm. I don't know what that means, lets Google: "p5.js cross origin error"
Looks like I have to install a server for p5.js.
Lets follow the instructions to install node.js.
CAUTION: COMMAND LINE INTERFACE WARNING!
Let's go to the folder that contains the file we are trying to get working and run the webserver inside it, by dragging and dropping the folder onto the Terminal icon and running: "http-server -c-1".
Of course, we can use any gif we like with this program! Demo using giphy.gif instead.
Wouldn't it be great to be able to slide a slider instead of having to hold my mouse in one place?
Let's use a GUI library to let us do that via the p5.js libraries page.
p5.dom looks good. Let's download it and try it.
The DOM examples look good. So lets start with the old gif example from p5.gif.js and go from there.
OK, lets add the most basic p5.dom to it, just with both running together in the same sketch.js. First look at index.html and then sketch.js from the Slider p5.DOM example and then duplicate them over.
So now we have both running together, we can disable the mouse movement code, as we want it to be controlled by the GUI.
We cam get rid of both the G and B sliders too.
We can edit R to be called something better...
So lets set it to myFrame, and change to display the correct frame.
But how do I know the correct range?
That doesn't seem to be working, lets add console.log to see what is going on.
It's saying 0? I guess the gif hasn't loaded at that point.
So lets keep checking until it is loaded, THEN add the GUI
Use a boolean value! (I use this all the time in my code).
We can even display a loading message while we are waiting. How do we do that? Google "displaying text in p5.js".
