From 8123037e04cf102a5636ccad4e052773d4869f35 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Wed, 22 Apr 2020 22:27:09 +0800 Subject: [PATCH] add more examples --- README.md | 27 +++++++------ examples/README.md | 67 +++++++++++++++++++++++++++++++++ examples/customCanvas.js | 11 ++++-- examples/customFabric.js | 5 ++- examples/gl.json5 | 16 +++----- examples/image.json5 | 7 ---- examples/kenBurns.json5 | 10 +++++ examples/resizeHorizontal.json5 | 11 +++--- examples/speedTest.json5 | 10 ++--- examples/subtitle.json5 | 10 ++++- 10 files changed, 123 insertions(+), 51 deletions(-) create mode 100644 examples/README.md delete mode 100644 examples/image.json5 create mode 100644 examples/kenBurns.json5 diff --git a/README.md b/README.md index ecc7c38..7e78558 100644 --- a/README.md +++ b/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 diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..064bdb2 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/examples/customCanvas.js b/examples/customCanvas.js index 363ce5a..e0e7158 100644 --- a/examples/customCanvas.js +++ b/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); diff --git a/examples/customFabric.js b/examples/customFabric.js index cd3b300..b92046f 100644 --- a/examples/customFabric.js +++ b/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 }] }, ], diff --git a/examples/gl.json5 b/examples/gl.json5 index 3d13a44..9186a21 100644 --- a/examples/gl.json5 +++ b/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 }] }, ], } \ No newline at end of file diff --git a/examples/image.json5 b/examples/image.json5 deleted file mode 100644 index d38bf23..0000000 --- a/examples/image.json5 +++ /dev/null @@ -1,7 +0,0 @@ -{ - fast: true, - outPath: './image.mp4', - clips: [ - { layers: [{ type: 'image', path: './vertical.jpg', zoomDirection: 'out' }] }, - ], -} \ No newline at end of file diff --git a/examples/kenBurns.json5 b/examples/kenBurns.json5 new file mode 100644 index 0000000..e97d3b9 --- /dev/null +++ b/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' }] }, + ], +} diff --git a/examples/resizeHorizontal.json5 b/examples/resizeHorizontal.json5 index 77ae2a6..7ce2420 100644 --- a/examples/resizeHorizontal.json5 +++ b/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' }] }, ], } diff --git a/examples/speedTest.json5 b/examples/speedTest.json5 index 5efc51c..25f2627 100644 --- a/examples/speedTest.json5 +++ b/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' }] }, ], } \ No newline at end of file diff --git a/examples/subtitle.json5 b/examples/subtitle.json5 index 7106514..b1d2207 100644 --- a/examples/subtitle.json5 +++ b/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' }, + ] }, ], } \ No newline at end of file