Skip to content

Commit 9fb3f00

Browse files
tomsoderlundtomsoderlund
committed
01 Basics
0 parents  commit 9fb3f00

File tree

8 files changed

+175
-0
lines changed

8 files changed

+175
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

Diff for: ‎01-basics/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
5+
<title>Example 01: Basics</title>
6+
<link rel="stylesheet" href="../shared/styles.css" />
7+
<script src="../node_modules/ccapture.js/build/CCapture.all.min.js" type="text/javascript" charset="utf-8"></script>
8+
<script src="script.js" type="text/javascript" charset="utf-8"></script>
9+
</head>
10+
<body>
11+
12+
<div>
13+
<button onclick="start()">Start rendering</button>
14+
<button onclick="pause()">Pause rendering</button>
15+
<button onclick="download()">Download movie</button>
16+
<span id="status"></span>
17+
</div>
18+
19+
<canvas
20+
id="canvasElement"
21+
width="1080"
22+
height="1080"
23+
style="border:1px solid #ccc;"
24+
></canvas>
25+
26+
</body>
27+
</html>

Diff for: ‎01-basics/script.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
var FRAME_RATE = 10;
2+
3+
var isRendering = false;
4+
var frameCount = 0;
5+
6+
var capturer = new CCapture({
7+
format: 'webm',
8+
framerate: 10,
9+
// verbose: true,
10+
});
11+
12+
var start = function () {
13+
isRendering = true;
14+
frameCount = 0;
15+
var canvas = document.getElementById('canvasElement');
16+
initCanvas(canvas, canvas.getContext('2d'));
17+
capturer.start();
18+
render();
19+
};
20+
21+
var pause = function () {
22+
isRendering = !isRendering;
23+
if (isRendering) {
24+
capturer.start();
25+
render();
26+
}
27+
else {
28+
capturer.stop();
29+
}
30+
};
31+
32+
var download = function () {
33+
isRendering = false;
34+
capturer.stop();
35+
capturer.save();
36+
};
37+
38+
function render () {
39+
frameCount++;
40+
//document.getElementById('status').innerHTML = 'Rendering ' + frameCount + ' (' + frameCount/FRAME_RATE + ' s)';
41+
if (isRendering) requestAnimationFrame(render);
42+
// rendering stuff ...
43+
var canvas = document.getElementById('canvasElement');
44+
updateCanvas(canvas, canvas.getContext('2d'));
45+
capturer.capture(canvas);
46+
}
47+
48+
//----- Draw -----
49+
50+
const getRandomPosition = (maxValue) => ({
51+
x: Math.floor(Math.random() * maxValue),
52+
y: Math.floor(Math.random() * maxValue),
53+
});
54+
55+
let lastPosition;
56+
57+
const initCanvas = function (canvas, context) {
58+
context.fillStyle = 'white';
59+
context.fillRect(0, 0, canvas.width, canvas.height);
60+
}
61+
62+
const updateCanvas = function (canvas, context) {
63+
context.strokeStyle = 'blue';
64+
context.lineWidth = 5;
65+
//context.strokeRect(20,20,150,100);
66+
if (!lastPosition) lastPosition = getRandomPosition(canvas.width);
67+
context.moveTo(lastPosition.x, lastPosition.y);
68+
lastPosition = getRandomPosition(canvas.width);
69+
context.lineTo(lastPosition.x, lastPosition.y);
70+
context.stroke();
71+
};

Diff for: ‎LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018 Tom Söderlund
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Programmatic Animations with CCapture
2+
3+
Making movies with JavaScript and HTML Canvas. Export as WebM video files.
4+
5+
These examples use [CCapture](https://github.com/spite/ccapture.js) for capturing video frames.

Diff for: ‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"ccapture.js": "^1.1.0"
4+
}
5+
}

Diff for: ‎shared/styles.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
font-family: sans-serif;
3+
background-color: #eee;
4+
}
5+
6+
canvas {
7+
background-color: white;
8+
}
9+
10+
11+
/* Nice & simple: Button - http://codepen.io/tomsoderlund/pen/qqyzqp */
12+
button {
13+
background-color: dodgerblue;
14+
color: white;
15+
border-radius: 0.2em;
16+
border: none;
17+
box-shadow: 0 0.125em 0.125em rgba(0,0,0, 0.3);
18+
box-sizing: border-box;
19+
cursor: pointer;
20+
font-family: inherit;
21+
font-size: inherit;
22+
font-weight: bold;
23+
min-width: 15em;
24+
outline: none;
25+
padding: 0.6em;
26+
margin: 0.2em;
27+
transition: all 0.2s;
28+
}
29+
button:hover:not(:disabled) {
30+
opacity: 0.85;
31+
}
32+
button:hover:active {
33+
opacity: 0.7;
34+
transition: all 0.05s;
35+
}
36+
button:disabled {
37+
background-color: silver;
38+
}

Diff for: ‎yarn.lock

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
ccapture.js@^1.1.0:
6+
version "1.1.0"
7+
resolved "https://registry.yarnpkg.com/ccapture.js/-/ccapture.js-1.1.0.tgz#ac4030e8b43847e305242d784abf284d2313beff"

0 commit comments

Comments
 (0)