├── .gitignore ├── .prettierrc.json ├── README.md ├── example_hydra.html ├── example_p5.html ├── example_three.html ├── example_three_tween.html └── media ├── convert_gif.sh ├── convert_mp4.sh ├── example_hydra.gif ├── example_hydra.webm ├── example_p5.gif ├── example_p5.webm ├── example_three.gif ├── example_three.webm ├── example_three_tween.gif └── example_three_tween.webm /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": true, 4 | "tabWidth": 4, 5 | "singleQuote": true, 6 | "jsxSingleQuote": true, 7 | "bracketSpacing": true 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CCapture.js examples 2 | example scripts for rendering video animations in javascript ([three.js](https://threejs.org/) / [p5.js](https://p5js.org/) / [tween.js](http://tweenjs.github.io/tween.js/) / [hydra](https://hydra.ojack.xyz)) using [CCapture.js](https://github.com/spite/ccapture.js) 3 | 4 | click the "record" button in each script to export WebM format video right in your web browser (google chrome reccomended). 5 | 6 | the `media/` folder contains scripts for converting to mp4 & gif using [`ffmpeg`](https://ffmpeg.org/download.html) & [`gifski`](https://gif.ski/) (these are bash executables, so run `chmod +x media/*.sh` first) 7 | 8 | [source](https://github.com/andr-ew/ccapture.js-examples) 9 | 10 | ## [CCapture.js + three.js](./example_three.html) 11 | 12 | ![a three dimentional cube rotating linearly](./media/example_three.gif) 13 | 14 | ## [CCapture.js + three.js + tween.js](./example_three_tween.html) 15 | 16 | ![a three dimentional cube rotating quadratically](./media/example_three_tween.gif) 17 | 18 | ## [CCapture.js + p5.js](./example_p5.html) 19 | 20 | ![a two dimentional square rotating linearly](./media/example_p5.gif) 21 | 22 | ## [CCapture.js + hydra](./example_hydra.html) 23 | 24 | ![a two dimentional square rotating linearly](./media/example_hydra.gif) 25 | -------------------------------------------------------------------------------- /example_hydra.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | three.js animation example 6 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /example_p5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | p5.js example 7 | 18 | 19 | 20 | 21 | 22 | 23 | 75 | 76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /example_three.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | three.js animation example 6 | 16 | 17 | 18 | 19 | 20 | 21 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /example_three_tween.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | three.js animation example 6 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /media/convert_gif.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | width="800" 4 | fps="24" 5 | 6 | for f in *.webm; do gifski $f -r $fps -W $width --output ${f%.*}.gif; done 7 | -------------------------------------------------------------------------------- /media/convert_mp4.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | for f in *.webm; do ffmpeg -i $f ${f%.*}.mp4; done 4 | -------------------------------------------------------------------------------- /media/example_hydra.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_hydra.gif -------------------------------------------------------------------------------- /media/example_hydra.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_hydra.webm -------------------------------------------------------------------------------- /media/example_p5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_p5.gif -------------------------------------------------------------------------------- /media/example_p5.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_p5.webm -------------------------------------------------------------------------------- /media/example_three.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_three.gif -------------------------------------------------------------------------------- /media/example_three.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_three.webm -------------------------------------------------------------------------------- /media/example_three_tween.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_three_tween.gif -------------------------------------------------------------------------------- /media/example_three_tween.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andr-ew/ccapture.js-examples/1772d9b692b05f003bff7ed799299272f414b69c/media/example_three_tween.webm --------------------------------------------------------------------------------