Update more layouts

animated_gif.md

@@ -1,16 +1,28 @@
 ---
-title: Animated gifs
+title: Animated GIFs
 category: CLI
+layout: 2017/sheet
 ---
 
-### Convert mp4 to gif
+## Animated GIFs
+{: .-one-column}
 
-    mkdir -p gif
+### Convert MP4 to GIF
-    mplayer -ao null -vo gif89a:outdir=gif $mp4
-    mogrify -format gif *.png
-    gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${mp4%.*}.gif
-    rm -rf gif
 
-### Or a given range (-ss -endpos)
+```bash
+mkdir -p gif
+mplayer -ao null -vo gif89a:outdir=gif $INPUT
+mogrify -format gif *.png
+gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${INPUT%.*}.gif
+rm -rf gif
+```
 
-    mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4
+You'll need `mplayer`, `imagemagick` and `gifsicle`. This converts frames to .png, then turns them into an animated gif.
+
+### A given range
+
+```bash
+mplayer -ao null -ss 0:02:06 -endpos 0:05:00 -vo gif89a:outdir=gif videofile.mp4
+```
+
+See `-ss` and `-endpos`.

canvas.md

@@ -1,103 +1,135 @@
 ---
 title: Canvas
 category: JavaScript
+layout: 2017/sheet
 ---
 
 ### Getting the context
 
-    var canvas = document.getElementById('c');
+```js
-    var c = canvas.getContext("2d");
+var canvas = document.getElementById('c')
+var c = canvas.getContext('2d')
+```
 
 ### Basic drawing
 
-    // x = 10, y = 20, width = 200, height = 100
+```js
-    c.fillStyle = '#ff0000';
+// x = 10, y = 20, width = 200, height = 100
-    c.strokeStyle = '#ff00ff';
+c.fillStyle = '#ff0000'
+c.strokeStyle = '#ff00ff'
+```
 
-    c.lineWidth = 5;
+```js
-    c.lineCap = 'round';
+c.lineWidth = 5
+c.lineCap = 'round'
+```
 
-    c.fillRect(10, 20, 200, 100);
+```js
+c.fillRect(10, 20, 200, 100)
+```
 
-    c.stroke();
+```js
-    c.fill();
+c.stroke()
+c.fill()
+```
 
 ### Saving and restoring
 
-    c.save();
+```js
+c.save()
+```
 
-    // Saves:
+```js
-    // strokeStyle fillStyle globalAlpha lineWidth lineCap lineJoin miterLimit 
+c.restore()
-    // shadowOffsetX shadowOffsetY shadowBlur shadowColor
+```
-    // globalCompositeOperation
+
-    // Transformations: translate rotate scale transform setTransform
+Saves: `strokeStyle` `fillStyle` `globalAlpha` `lineWidth` `lineCap` `lineJoin` `miterLimit` `shadowOffsetX` `shadowOffsetY` `shadowBlur` `shadowColor`
-    // Clipping path
+`globalCompositeOperation`, Transformations (`translate` `rotate` `scale` `transform` `setTransform`), Clipping path
 
-    c.restore();
 
 ### Animation
 
-    onframe: function() {
+```js
-      c.clearRect(0, 0, w, h);
+onframe: function() {
-    }
+  c.clearRect(0, 0, w, h)
+}
+```
 
 ### Transformations
 
-    c.translate(0, 0)
+```js
-    c.rotate(Math.PI*2/5)
+c.translate(0, 0)
-    c.scale(1.0, 1.0)
+c.rotate(Math.PI*2/5)
+c.scale(1.0, 1.0)
+```
 
 To rotate along origin:
 
-    c.translate(ox, oy)
+```js
-    c.rotate(theta)
+c.translate(ox, oy)
-    c.translate(-ox, -oy)
+c.rotate(theta)
+c.translate(-ox, -oy)
+```
 
 To scale along origin:
 
-    c.translate(-ox*x, -oy*y)
+```js
-    c.scale(x, y)
+c.translate(-ox*x, -oy*y)
-    c.translate(ox/x, oy/y)
+c.scale(x, y)
+c.translate(ox/x, oy/y)
+```
 
 See [MDN: Transformations][xform].
 
 ### Image drawing
 
-    c.drawImage(image, dx, dy, [dw, dh]);
+```js
-    /* `image` can be HTML Image/Canvas/Video */
+c.drawImage(image, dx, dy, [dw, dh]);
+/* `image` can be HTML Image/Canvas/Video */
+```
 
 See [MDN: Images][images].
 
 ### Colors, styles shadows
 
-    c.strokeStyle = '#ff00ff';
+```js
-    c.fillStyle = '#ff00ff';
+c.strokeStyle = '#ff00ff';
+c.fillStyle = '#ff00ff';
+```
 
-    c.shadowOffsetX = 0;
+```js
-    c.shadowOffsetY = 0;
+c.shadowOffsetX = 0;
-    c.shadowOffsetBlur = 3.0;
+c.shadowOffsetY = 0;
-    c.shadowColor = 'rgba(0,0,0,0.2)';
+c.shadowOffsetBlur = 3.0;
+c.shadowColor = 'rgba(0,0,0,0.2)';
+```
 
-See [MDN: Styles][styles].
+See [MDN: Styles][styles]
 
 ### Gradients
 
-    gr = c.createLinearGgadient(x0,y0,x1,y1)
+```js
-    gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
+gr = c.createLinearGradient(x0,y0,x1,y1)
-    pat = c.createPattern(image, 'repeat-x')
+gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
+pat = c.createPattern(image, 'repeat-x')
+```
 
-    c.fillStyle = gr
+```js
+c.fillStyle = gr
+```
 
 ### Drawing
 
-    c.beginPath()
+```js
-    c.moveTo(x,y)
+c.beginPath()
-    c.lineTo(x,y)
+c.moveTo(x,y)
-    c.quadraticCurveTo(cpx,cpy,x,y)
+c.lineTo(x,y)
-    c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
+c.quadraticCurveTo(cpx,cpy,x,y)
-    c.arcTo(...)
+c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
-    c.arc(...)
+c.arcTo(...)
-    c.closePath()
+c.arc(...)
+c.closePath()
+```
 
 ### More resources