today's exercise is to capture the animated gif. Beautiful example from codepen.io
In order to save animaged gif, we need program like Byzanz.
sudo add-apt-repository ppa:fossfreedom/byzanz
sudo apt-get update && sudo apt-get install byzanz
byzanz-record --duration=15 --x=200 --y=300 --width=700 --height=400 out.gif
How do we know how long the dieo should take or the correct height and width of the image file?
Using xmousepos, I move around the screen and hit enter - it records my location.
- upper left corner is 459 439
- the bottom of the screen has y = 692 so that 243 is the total height
- the right of the image is at x = 970 so that 510 is the total width
If we right-click and click inspect element, we find the <canvas> object is 512 × 256.
byzanz-record --duration=10 --x=*** --y=*** --width=512 --height=256 out.gif
IMGUR doesn't seem to take animated gifs, but Giphy does! As does Twitter
BONUS How to get rid of the choppy ending? This involves reading the code for the part dealing with the frequency.
Codepen divides the code into three parts HTML|CSS|JAVASCRIPT, the same way 5 × 6 × 7 = 210.
-
5 document object model variables
-
8 variables related to the graphics
-
3 functions
fourier,connect,drawWaveand an anonymous function()() -
The anonymous function has two options, one for square wave and one for the sawtooth function
-
the
<input type="range">is new to HTML5
The time increment looks bizarre. For some reason they chose an exponential scale:
time += (now - startTime) * Math.pow(10.0, frequencyInput.value);
Additionally the input ranges are all negative and 10^negative < 1. Moving left the app slows down.
<input frequency type="range" min="-5" max="-3" value="-3.5" step="0.0001">