├── .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 | 
13 |
14 | ## [CCapture.js + three.js + tween.js](./example_three_tween.html)
15 |
16 | 
17 |
18 | ## [CCapture.js + p5.js](./example_p5.html)
19 |
20 | 
21 |
22 | ## [CCapture.js + hydra](./example_hydra.html)
23 |
24 | 
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
--------------------------------------------------------------------------------