add more examples

README.md

@@ -8,9 +8,9 @@ Inspired by [ffmpeg-concat](https://github.com/transitive-bullshit/ffmpeg-concat
 
 [![demo](https://github.com/mifi/gifs/raw/master/commonFeatures.gif)](https://youtu.be/LNeclLkxUEY)
 
-https://youtu.be/LNeclLkxUEY
+https://youtu.be/LNeclLkxUEY - This GIF/youtube was created with this command: "editly [commonFeatures.json5](https://github.com/mifi/editly/blob/master/examples/commonFeatures.json5)"
 
-This GIF/youtube was created with this command: "editly [commonFeatures.json5](https://github.com/mifi/editly/blob/master/examples/commonFeatures.json5)"
+See [more examples here](https://github.com/mifi/editly/blob/master/examples/)
 
 ## Requirements
 
@@ -22,23 +22,23 @@ Make sure you have `ffmpeg` and `ffprobe` installed and available in `PATH`
 ## Features
 
 - Edit videos with code! Declarative API with fun defaults
-- Create colorful videos with random colors generated from aesthetically pleasing pallettes with random effects
+- Create colorful videos with random colors generated from aesthetically pleasing pallettes and random effects
 - Supports any size like 4K video and DSLR photos
 - Can output to any dimensions, like *Instagram post* (1:1), *Instagram story* (9:16), *YouTube* (16:9), or any other dimensions you like.
 - Content will be scaled and letterboxed automatically, even if input aspect ratio is not same, and framerate will be converted.
-- Speeds up / slow down videos automatically to match `cutFrom`/`cutTo` with each clip's `duration`
-- Output GIF
+- Speeds up / slow down videos automatically to match `cutFrom`/`cutTo` segment length with each clip's `duration`
 - Overlay text and subtitles on videos, images or backgrounds
 - Accepts custom HTML5 Canvas / Fabric.js Javascript code for custom screens or dynamic overlays
-- Render GL shaders (for example from [shadertoy](https://www.shadertoy.com/))
+- Render custom GL shaders (for example from [shadertoy](https://www.shadertoy.com/))
+- Output GIF
 
 ## Use cases
 
 - Create a slideshow from a set of pictures with text overlay
-- Create a fast paced video trailer with clips
-- Create a tutorial video
+- Create a fast paced trailer or promo video
+- Create a tutorial video with help text
 - Simply convert a video to a GIF
-- Resize video to any size or framerate and automatically letterbox/crop (e.g. if you need to upload a video somewhere and the site complains **video dimensions must be 1337x1000**
+- Resize video to any size or framerate and with automatic letterbox/crop (e.g. if you need to upload a video somewhere and the site complains **video dimensions must be 1337x1000**
 
 See [examples](https://github.com/mifi/editly/tree/master/examples)
 
@@ -61,10 +61,10 @@ editly \
   img1.jpg \
   img2.jpg \
   title:'THE END' \
-  --audio-file-path /path/to/music.mp3 \
+  --audio-file-path /path/to/music.mp3
 ```
 
-Or create a GIF (or MP4) from a JSON or JSON5 edit spec *(JSON5 is just a more friendly JSON format)*:
+Or create an MP4 (or GIF) from a JSON or JSON5 edit spec *(JSON5 is just a more friendly JSON format)*:
 
 ```sh
 editly my-editly.json5 --out output.gif
@@ -160,7 +160,7 @@ Edit specs are Javascript / JSON ojects describing the whole edit operation.
 
 ### Layer types
 
-For example usage see [commonFeatures.json5](https://github.com/mifi/editly/blob/master/examples/commonFeatures.json5)
+See [examples](https://github.com/mifi/editly/tree/master/examples) and [commonFeatures.json5](https://github.com/mifi/editly/blob/master/examples/commonFeatures.json5)
 
 #### Layer type 'video'
 
@@ -231,9 +231,8 @@ See [customFabric.js](https://github.com/mifi/editly/blob/master/examples/custom
 
 Loads a GLSL shader. See [gl.json5](https://github.com/mifi/editly/blob/master/examples/gl.json5) and [rainbow-colors.frag](https://github.com/mifi/editly/blob/master/shaders/rainbow-colors.frag)
 
-
 - `fragmentPath`
-- `vertexPath`
+- `vertexPath` (optional)
 
 ## TODO
 

examples/README.md

@@ -0,0 +1,67 @@
+# Examples
+
+## Ken Burns zoom slideshow
+
+![](https://github.com/mifi/gifs/raw/master/kenburns.gif)
+
+[kenBurns.json5](https://github.com/mifi/editly/blob/master/examples/kenBurns.json5)
+
+```bash
+editly kenBurns.json5
+```
+
+## Resize modes
+
+![](https://github.com/mifi/gifs/raw/master/resizeHorizontal.gif)
+
+[resizeHorizontal.json5](https://github.com/mifi/editly/blob/master/examples/resizeHorizontal.json5)
+
+```bash
+editly resizeHorizontal.json5
+```
+
+## Speed up / slow down with cutting
+
+![](https://github.com/mifi/gifs/raw/master/speedTest.gif)
+
+[speedTest.json5](https://github.com/mifi/editly/blob/master/examples/speedTest.json5)
+
+```bash
+editly speedTest.json5
+```
+
+## Title and subtitle
+
+![](https://github.com/mifi/gifs/raw/master/subtitle.gif)
+
+[subtitle.json5](https://github.com/mifi/editly/blob/master/examples/subtitle.json5)
+
+```bash
+editly subtitle.json5
+```
+
+## Custom HTML5 canvas Javascript
+
+![](https://github.com/mifi/gifs/raw/master/customCanvas.gif)
+
+[customCanvas.js](https://github.com/mifi/editly/blob/master/examples/customCanvas.js)
+
+
+```bash
+node customCanvas.js
+```
+
+## Custom Fabric.js
+
+![](https://github.com/mifi/gifs/raw/master/customFabric.gif)
+
+[customFabric.js](https://github.com/mifi/editly/blob/master/examples/customFabric.js)
+
+
+```bash
+node customFabric.js
+```
+
+## LosslessCut tutorial
+
+[This video](https://www.youtube.com/watch?v=pYHMxXy05Jg) was created with [losslesscut.json5](https://github.com/mifi/editly/blob/master/examples/losslesscut.json5)

examples/customCanvas.js

@@ -24,9 +24,14 @@ async function func({ canvas }) {
 }
 
 editly({
-  fast: true,
-  outPath: './canvas.mp4',
+  // fast: true,
+  // outPath: './customCanvas.mp4',
+  outPath: './customCanvas.gif',
   clips: [
-    { duration: 2, layers: [{ type: 'canvas', func }] },
+    { duration: 2,
+      layers: [
+        { type: 'rainbow-colors' },
+        { type: 'canvas', func },
+      ] },
   ],
 }).catch(console.error);

examples/customFabric.js

@@ -27,8 +27,9 @@ async function func({ width, height, fabric, canvas }) {
 }
 
 editly({
-  fast: true,
-  outPath: './fabric.mp4',
+  // fast: true,
+  outPath: './customFabric.gif',
+  // outPath: './customFabric.mp4',
   clips: [
     { duration: 2, layers: [{ type: 'fabric', func }] },
   ],

examples/gl.json5

@@ -1,16 +1,10 @@
 {
-  fast: true,
-  // verbose: true,
   outPath: './gl.mp4',
-  defaults: {
-    transition: { name: 'random' },
-    layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' },
-  },
   clips: [
-    { transition: null, duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/3l23Rh.frag' }] },
-    { duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/MdXyzX.frag' }] },
-    { duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/30daysofshade_010.frag', speed: 1 }] },
-    { duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/rainbow-background.frag' }] },
-    { duration: 3, layers: [{ type: 'gl', fragmentPath: './shaders/wd2yDm.frag', speed: 5 }] },
+    { transition: null, duration: 3, layers: [{ type: 'gl', fragmentPath: './assets/shaders/3l23Rh.frag' }] },
+    { duration: 3, layers: [{ type: 'gl', fragmentPath: './assets/shaders/MdXyzX.frag' }] },
+    { duration: 3, layers: [{ type: 'gl', fragmentPath: './assets/shaders/30daysofshade_010.frag', speed: 1 }] },
+    { duration: 3, layers: [{ type: 'gl', fragmentPath: './assets/shaders/rainbow-background.frag' }] },
+    { duration: 3, layers: [{ type: 'gl', fragmentPath: './assets/shaders/wd2yDm.frag', speed: 5 }] },
   ],
 }

examples/image.json5

@@ -1,7 +0,0 @@
-{
-  fast: true,
-  outPath: './image.mp4',
-  clips: [
-    { layers: [{ type: 'image', path: './vertical.jpg', zoomDirection: 'out' }] },
-  ],
-}

examples/kenBurns.json5

@@ -0,0 +1,10 @@
+{
+  outPath: './kenBurns.mp4',
+  defaults: {
+    transition: { name: 'fade' },
+  },
+  clips: [
+    { duration: 3, layers: [{ type: 'image', path: './assets/img2.jpg', zoomDirection: 'out' }] },
+    { duration: 3, layers: [{ type: 'image', path: './assets/img3.jpg', zoomDirection: 'in' }] },
+  ],
+}

examples/resizeHorizontal.json5

@@ -1,13 +1,12 @@
 {
-  fast: true,
   outPath: './resizeHorizontal.mp4',
   defaults: {
-    transition: { duration: 0 },
-    layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf', backgroundColor: 'white' },
+    transition: null,
+    layer: { backgroundColor: 'white' },
   },
   clips: [
-    { layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2 }] },
-    { layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'contain' }] },
-    { layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'stretch' }] },
+    { layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0.4, cutTo: 2 }] },
+    { layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'contain' }] },
+    { layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0.4, cutTo: 2, resizeMode: 'stretch' }] },
   ],
 }

examples/speedTest.json5

@@ -1,15 +1,13 @@
 {
-  fast: true,
-  // verbose: true,
   outPath: './speedTest.mp4',
   defaults: {
     transition: null,
-    layer: { fontPath: './Patua_One/PatuaOne-Regular.ttf' },
+    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
   },
   clips: [
     { duration: 2, layers: [{ type: 'title-background', text: 'Speed up or slow down video', background: { type: 'radial-gradient' } }] },
-    { duration: 2, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 2 }, { type: 'title-background', text: 'Same speed' }] },
-    { duration: 1, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 4 }, { type: 'title-background', text: '4x' }] },
-    { duration: 2, layers: [{ type: 'video', path: './IMG_4605.MOV', cutFrom: 0, cutTo: 1 }, { type: 'title-background', text: '1/2x' }] },
+    { duration: 2, layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0, cutTo: 2 }, { type: 'title', text: 'Same speed' }] },
+    { duration: 1, layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0, cutTo: 4 }, { type: 'title', text: '4x' }] },
+    { duration: 2, layers: [{ type: 'video', path: './assets/IMG_4605.MOV', cutFrom: 0, cutTo: 1 }, { type: 'title', text: '1/2x' }] },
   ],
 }

examples/subtitle.json5

@@ -1,7 +1,13 @@
 {
-  // fast: true,
   outPath: './subtitle.mp4',
+  defaults: {
+    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+  },
   clips: [
-    { duration: 2, layers: [{ type: 'rainbow-colors' }, { type: 'subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }, { type: 'title', position: 'top', text: 'Subtitles' }] },
+    { duration: 2, layers: [
+      { type: 'rainbow-colors' },
+      { type: 'subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.' },
+      { type: 'title', position: 'top', text: 'Subtitles' },
+    ] },
   ],
 }