-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
255 lines (235 loc) · 10.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<!--
The entry page showed on wixette.github.io.p5.animS
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>p5.animS - animates p5.js shapes</title>
<link rel="shortcut icon" type="image/png" href="examples/images/favicon.png"/>
<link rel="stylesheet" href="examples/css/prism.css">
<link rel="stylesheet" href="examples/css/main.css">
</head>
<body>
<container>
<header>
<nav>
<div><a href="#getstarted">Get Started</a></div>
<div><a href="#examples">Examples</a></div>
<div><a href="#reference">Reference</a></div>
<div><a href="#source">Source Code</a></div>
</nav>
<h1>p5.animS</h1>
<main id="demo-sketch"></main>
<p>
p5.animS is a library that animates <a href="https://p5js.org/">p5.js</a>
shapes by rendering their drawing processes.
</p>
</header>
<section>
<a name="getstarted"></a>
<h2>Get Started</h2>
<p>Download the JavaScript bundle file <code class="language-bash">p5.anims.js</code>
or <code class="language-bash">p5.anims.min.js</code>
from <code><a href="https://github.com/wixette/p5.animS/tree/main/build">the build dir</a></code>.</p>
<p>Or, clone the source code and rebuild <code class="language-bash">p5.anims.js</code>:</p>
<pre><code class="language-bash">npm install
npm run build</code></pre>
<p>Or, install p5.animS with npm:</p>
<pre><code class="language-bash">npm install p5.anims --save</code></pre>
<p>In your HTML code, put <code class="language-bash">p5.anims.js</code>
right after <code class="language-bash">p5.js</code> or
<code class="language-bash">p5.min.js</code>, followed by your sketch code:</p>
<pre><code class="language-markup"><body>
<main>
</main>
<script src="p5.min.js"></script>
<script src="p5.anims.js"></script>
<script src="sketch.js"></script>
</body></code></pre>
<p>p5.animS functions have very similar interfaces as p5.js functions do.
For example, <code class="language-js">animS.circle()</code> renders the
creation animation of a circle:</p>
<pre data-src="examples/get_started.sketch.js" data-type="text/javascript" class="language-js"></pre>
<p>The first parameter of <code class="language-js">animS.circle()</code> is a unique
instance ID so that the animation state can be kept across frames. The second
parameter is the total frame number that the animation last.</p>
<p><code class="language-js">animS.reset()</code> is used to replay the creation animation.</p>
<p>Here is the sketch rendered by the above code:
<code class="language-bash">Click the canvas to replay</code>
</p>
<iframe src="examples/get_started.html" scrolling="no"></iframe>
<p>The frame rate of p5.js can be used to set the duration of animations. For example,
you can set the frame rate to <code class="language-js">FRAME_RATE</code>
then use <code class="language-js">FRAME_RATE * 3</code> to create a three-second animation.
</p>
<pre data-src="examples/frame_rate.sketch.js" data-type="text/javascript" class="language-js"></pre>
<p>The line is displayed in three seconds:
<code class="language-bash">Click the canvas to replay</code>
</p>
<iframe src="examples/frame_rate.html" scrolling="no"></iframe>
</section>
<section>
<a name="examples"></a>
<h2>More Examples</h2>
<p>The <a href="https://github.com/wixette/p5.animS/blob/main/examples/basic_shapes.sketch.js">sketch</a>
to animate basic shapes:
<code class="language-bash">Click the canvas to replay</code>
</p>
<iframe src="examples/basic_shapes.html" scrolling="no"></iframe>
<p>The <a href="https://github.com/wixette/p5.animS/blob/main/examples/filled_shapes.sketch.js">sketch</a>
to draw circles while filling them:
<code class="language-bash">Click the canvas to replay</code>
</p>
<iframe src="examples/filled_shapes.html" scrolling="no"></iframe>
<p>The <a href="https://github.com/wixette/p5.animS/blob/main/examples/multi_instance.sketch.js">sketch</a>
to render p5.animS animations in multiple canvases, together with the
<code class="language-bash">instance mode</code> of p5.js:</p>
<pre data-src="examples/multi_instance.sketch.js" data-type="text/javascript" class="language-js"></pre>
</section>
<section>
<a name="reference"></a>
<h2>Quick Reference</h2>
<pre><code class="language-js">
/**
* Activates the "instance mode" and associates a new animS instance with the
* specified p5 object. See p5() of p5.js for more details.
* @param {Object} p5obj The instance of the p5 object.
* @returns {Object} The animS instance.
*/
animS.newAnimS(p5obj);
/**
* Removes all the cached shape animation instances so that new shape
* creations result in new animations.
*/
animS.reset();
/**
* Draws an arc while playing its creation animation. The arc mode is always
* OPEN. The elipse mode is always CENTER.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!Number} x The x-coordinate of the arc's ellipse.
* @param {!Number} y The y-coordinate of the arc's ellipse.
* @param {!Number} w The width of the arc's ellipse by default.
* @param {!Number} h The height of the arc's ellipse by default.
* @param {!Number} start The angle to start the arc, in radians.
* @param {!Number} stop The angle to stop the arc, in radians.
*/
animS.arc(id, duration, x, y, w, h, start, stop);
/**
* Draws an elipse (oval) while playing its creation animation. The elipse
* mode is always CENTER.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x The x-coordinate of the center of ellipse.
* @param {!number} y The y-coordinate of the center of ellipse.
* @param {!number} w The width of the ellipse.
* @param {!number} h The height of the ellipse.
*/
animS.ellipse(id, duration, x, y, w, h);
/**
* Draws a circle while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x The x-coordinate of the centre of the circle.
* @param {!number} y The y-coordinate of the centre of the circle.
* @param {!number} d The diameter of the circle.
*/
animS.circle(id, duration, x, y, d);
/**
* Draws a line while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x1 The x-coordinate of the first point.
* @param {!number} y1 The y-coordinate of the first point.
* @param {!number} x2 The x-coordinate of the second point.
* @param {!number} y2 The y-coordinate of the second point.
*/
animS.line(id, duration, x1, y1, x2, y2);
/**
* Draws a quad while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x1 The x-coordinate of the first point.
* @param {!number} y1 The y-coordinate of the first point.
* @param {!number} x2 The x-coordinate of the second point.
* @param {!number} y2 The y-coordinate of the second point.
* @param {!number} x3 The x-coordinate of the third point.
* @param {!number} y3 The y-coordinate of the third point.
* @param {!number} x4 The x-coordinate of the fourth point.
* @param {!number} y4 The y-coordinate of the fourth point.
*/
animS.quad(id, duration, x1, y1, x2, y2, x3, y3, x4, y4);
/**
* Draws a rectangle while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x The x-coordinate of the rectangle.
* @param {!number} y The y-coordinate of the rectangle.
* @param {!number} w The width of the rectangle.
* @param {!number} h The height of the rectangle.
*/
animS.rect(id, duration, x, y, w, h);
/**
* Draws a square while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x The x-coordinate of the square.
* @param {!number} y The y-coordinate of the square.
* @param {!number} s The side size of the square.
*/
animS.square(id, duration, x, y, s);
/**
* Draws a triangle while playing its creation animation.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!number} x1 The x-coordinate of the first point.
* @param {!number} y1 The y-coordinate of the first point.
* @param {!number} x2 The x-coordinate of the second point.
* @param {!number} y2 The y-coordinate of the second point.
* @param {!number} x3 The x-coordinate of the third point.
* @param {!number} y3 The y-coordinate of the third point.
*/
animS.triangle(id, duration, x1, y1, x2, y2, x3, y3);
/**
* Draws a shape while playing its creation animation. The shape is always
* OPEN unless the first vertex and the last vertex are equal.
* @param {!string} id A unique string ID to identify the shape animation.
* @param {!number} duration The duration of the creation animation, in
* number of frames.
* @param {!Array<Array<number>>} vertices The vertices that define the
* shape. Each element of the array may contain eithr two coordinate
* numbers (for simple vertices) or six coordinate numbers (for Bezier
* vertices).
*/
animS.shape(id, duration, vertices);
</code></pre>
</section>
<section>
<a name="source"></a>
<h2>Source Code</h2>
<p>See the source code of p5.animS at <a href="https://github.com/wixette/p5.animS">GitHub</a>.</p>
</section>
<footer>
<nav>
<div><a href="#getstarted">Get Started</a></div>
<div><a href="#examples">Examples</a></div>
<div><a href="#reference">Reference</a></div>
<div><a href="#source">Source Code</a></div>
</nav>
</footer>
</container>
<script src="examples/libs/prism.js"></script>
<script src="examples/libs/p5.min.js"></script>
<script src="build/p5.anims.min.js"></script>
<script src="examples/demo.sketch.js"></script>
</body>
</html>