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}
 
+### Convert MP4 to GIF
+
+```bash
 mkdir -p gif
-    mplayer -ao null -vo gif89a:outdir=gif $mp4
+mplayer -ao null -vo gif89a:outdir=gif $INPUT
 mogrify -format gif *.png
-    gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${mp4%.*}.gif
+gifsicle --colors=256 --delay=4 --loopcount=0 --dither -O3 gif/*.gif > ${INPUT%.*}.gif
 rm -rf gif
+```
 
-### Or a given range (-ss -endpos)
+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,95 +1,126 @@
 ---
 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
 
+```js
 // x = 10, y = 20, width = 200, height = 100
-    c.fillStyle = '#ff0000';
+c.fillStyle = '#ff0000'
-    c.strokeStyle = '#ff00ff';
+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
 
+```js
 onframe: function() {
-      c.clearRect(0, 0, w, h);
+  c.clearRect(0, 0, w, h)
 }
+```
 
 ### Transformations
 
+```js
 c.translate(0, 0)
 c.rotate(Math.PI*2/5)
 c.scale(1.0, 1.0)
+```
 
 To rotate along origin:
 
+```js
 c.translate(ox, oy)
 c.rotate(theta)
 c.translate(-ox, -oy)
+```
 
 To scale along origin:
 
+```js
 c.translate(-ox*x, -oy*y)
 c.scale(x, y)
 c.translate(ox/x, oy/y)
+```
 
 See [MDN: Transformations][xform].
 
 ### Image drawing
 
+```js
 c.drawImage(image, dx, dy, [dw, dh]);
 /* `image` can be HTML Image/Canvas/Video */
+```
 
 See [MDN: Images][images].
 
 ### Colors, styles shadows
 
+```js
 c.strokeStyle = '#ff00ff';
 c.fillStyle = '#ff00ff';
+```
 
+```js
 c.shadowOffsetX = 0;
 c.shadowOffsetY = 0;
 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.createLinearGradient(x0,y0,x1,y1)
 gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
 pat = c.createPattern(image, 'repeat-x')
+```
 
+```js
 c.fillStyle = gr
+```
 
 ### Drawing
 
+```js
 c.beginPath()
 c.moveTo(x,y)
 c.lineTo(x,y)
@@ -98,6 +129,7 @@ See [MDN: Styles][styles].
 c.arcTo(...)
 c.arc(...)
 c.closePath()
+```
 
 ### More resources