-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
399 lines (358 loc) · 16.5 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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<html>
<head>
<meta charset="UTF-8">
<title>Reanimate</title>
<meta name="description" content="High-level introduction to the Reanimate animation library." />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.56.0/codemirror.min.js"
integrity="sha512-H5RyE1jRbGn8d0dsSstZi0SSs23X6Hkkf5hLneEIFyCfP/cBwJ/jFJESBuFBiUyzbGZGa06tnrvw1SboRKdwcA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.56.0/mode/haskell/haskell.min.js"
integrity="sha512-oOdg3fdacCLYkvreThQx4i+lslUn27SGRFyjQOyE5M+KaM3vPJNyLDjU82LEkMup6PTWPrpFt7zkiBBGSZLEbg=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.56.0/codemirror.min.css"
integrity="sha512-/BlxZbYLtYGExexketXsTi47eHp+r2kTeq2OHecQPZlfbc7WFXVrwbVW9HOYjI6c9Ti+P60ASmVLxittZ0EBGw=="
crossorigin="anonymous" />
<script src="https://reanimate.github.io/reanimate/playground/snippets.js"></script>
<script src="https://reanimate.github.io/reanimate/playground/embed.js"></script>
<script src="https://reanimate.github.io/reanimate/playground/elm.js"></script>
<script src="https://reanimate.github.io/reanimate/playground/playground.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://reanimate.github.io/reanimate/playground/embed.css">
</head>
<body>
<a href="https://github.com/reanimate/reanimate" class="github-corner" aria-label="View source on GitHub"><svg
width="80" height="80" viewBox="0 0 250 250"
style="fill:#64CEAA; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<article>
<header>
<!-- <h1><img width="100px" src="reanimate-logo.svg"/></h1> -->
<h1>Reanimate</h1>
<h2>Build declarative animations with SVG and Haskell</h2>
<div class="btn">
<a class="btn" href="https://github.com/reanimate/reanimate">GitHub</a>
<a class="btn" href="https://hackage.haskell.org/package/reanimate/docs/Reanimate.html">API reference</a>
<a class="btn" href="https://reanimate.readthedocs.io/en/latest/?badge=latest">Documentation</a>
<a class="btn" href="https://github.com/sponsors/Lemmih">Sponsor</a>
<a class="btn" href="https://reanimate.github.io/reanimate/playground/">Playground</a>
<a class="btn" href="https://discord.gg/Qs28Dv6">Discord</a>
</div>
<div class="social">
<a href="https://github.com/reanimate/reanimate/stargazers"><img alt="GitHub stars"
src="https://img.shields.io/github/stars/reanimate/reanimate"></a>
</div>
</header>
<main>
<h2><span style="color: #2374AB;">Reanimate</span> is:</h2>
<ul>
<li>
<b>An animation library:</b>
Animations are written as code.
</li>
<li><b>Written in Haskell:</b> High-level, purely functional, expressive.</li>
<li><b>Based on SVG:</b> Powerful and introspective.</li>
<li><b>Cross-platform:</b> Windows, MacOS, and Linux.</li>
</ul>
<p>
<b>Reanimate</b> aims to be a batteries-included way of creating
animations and illustrations. It builds on two core ideas:
(1) graphics (both still and animated) should be expressed
as code, and (2) reactive programming is the best paradigm
for animating data that changes over time. Reactive programming
has been popularized by <b>D3.js</b> and <b>React.js</b>, and
familiarity with either of those two libraries makes reanimate
easier to understand.
</p>
<p>
Installation instructions are available on github. If you run into
any trouble, by far the quickest way to get help is to ask in our
discord server.
</p>
<h2>Try it live!</h2>
<p>
Play with reanimate right here in your browser before installing it locally:
</p>
<pre class="playground-code"></pre>
<script>
var code = snippets[0].code; // default
for(var i=0;i<snippets.length;i++) {
if(snippets[i].title === 'Try it live') {
code = snippets[i].code;
break;
}
}
embedPlaygroundCode(document.querySelector('.playground-code'), code);
</script>
<h2>Showcase</h2>
<p>
The best way to understand what reanimate does is to see it in action. Click on the
videos below to view them in high-definition. Click again to close the high-definition video.
</p>
<br />
<div class="showcase">
<div>
<video muted autoplay loop>
<source src="media/demo_tangent.mp4">
</video>
<video id="tangent" class="hidden large" muted loop>
<source src="media/demo_tangent.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/demo_tangent.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Reanimate is built on vector graphics, including support for intro­spection.
This example ani­mation shows the letter <kbd>'S'</kbd>, and the tangent and normal of each
point along the curve.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/tut_glue_fourier.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/tut_glue_fourier.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_fourier.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
The combination of vector graphics and Haskell's expressiveness makes
reanimate particularly well suited for rendering mathematical illustrations.
In this example, a fourier series is used to increasingly approximate the
shape of pi.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/map.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/map.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/videos/map-projection/gif.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
With the full power of Haskell, manipulating GeoJSON data becomes easy. This
example shows country borders being distorted by a range of map projections.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/stars.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/stars.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/demo_stars.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Starfield. This example was inspired by a pixel-based shader. Many pixel-based
effects can be easily vectorized without having to resort to pixmaps.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/latex.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/latex.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_latex.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
While SVG has built-in support for text, it's heavily dependent
on available system fonts and does not support typesetting.
Fortunately, LaTeX can produce SVGs and integrates directly
with reanimate.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/physics.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/physics.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/reanimate-examples/tut_glue_physics.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Animating with Haskell means you have access to a large number of code
libraries. In the spirit of being a batteries-included
framework, reanimate ships with a built-in 2D physics library, called
Chipmunk­2D. The video to the left demonstrates how SVG shapes can be used
nearly effortlessly in a physics simulation.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/povray.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/povray.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_povray.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
All the videos above have demonstrated 2D vector graphics. But reanimate
is capable of much more with the help of external programs. In this video,
the ray-tracer Povray is used to apply 3D trans­formations to the
LaTeX animation.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/povray_ortho.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/povray_ortho.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_povray_ortho.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Mixing 2D and 3D graphics with pixel-perfect precision can be
difficult when using a regular, perspective camera. A perspective
camera changes sizes and angles, making it complicated to predict
where a 3D object will appear on the screen.
But switch out the perspective camera with an orthographic camera and
it becomes trivial to align 2D and 3D objects.
This example renders a sphere with an orthographic camera. Notice
how the symbols stay the same size even as they move into the background.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/potrace.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/potrace.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_potrace.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
With povray, we can project our vector graphics into a 3D
world and get beautiful, pixel-based images. If we want to
apply further vector transformations then we have to convert
the pixel-based images back into vector graphics and this is
exactly what 'potrace' does.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/default_cube.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/default_cube.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/blender_default_cube.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Blender is an amazingly powerful tool for 3D graphics and it is entirely
scriptable with Python. Reanimate offers built-in support for moving
vector graphics into Blender, running custom scripts, and then merging
the results back into an animation. The spinning cube to the left is
the famous Default Cube and represents the simplest scene possible.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/blender.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/blender.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/tut_glue_blender.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Animated vector graphics are projected on to a 9-by-16 plane. This plane
is then morphed into a sphere and rotated. The blender script to achieve
this may appear fairly complex but was created using the blender GUI which
has a gentler learning curve.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/fe_morph.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/fe_morph.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/fe_morph.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Vector graphics (be they in 2D or 3D) can easily look cold and hard with
straight lines and mathematically defined curves being dominant. For a
more organic feel, SVG filter effects can be used to merge shapes and colors.
</p>
</div>
<div>
<video muted autoplay loop>
<source src="media/fe_bleed.mp4">
</video>
<video class="hidden large" muted loop>
<source src="media/fe_bleed.hd.mp4">
</video>
<p>
<a href="https://github.com/reanimate/reanimate/blob/master/examples/fe_bleed.hs">
<img src="external-link.svg" alt="View source code" align="right" />
</a>
Psychedelic Octopus Cat.<br />
Filter effects are powerful and versatile enough that the limiting
factor is imagination.
</p>
</div>
</div>
<script>
function togglePlay(video) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function configureHandlers() {
var elts = document.getElementsByTagName('video');
for (var i = 0; i < elts.length; i += 2) {
const idx = i;
elts[idx].addEventListener("click", function () {
if (elts[idx + 1].paused) {
// elts[idx + 1].currentTime = elts[idx].currentTime;
elts[idx + 1].play();
}
elts[idx + 1].classList.toggle('hidden');
});
elts[idx + 1].addEventListener("click", function () {
elts[idx + 1].classList.toggle('hidden');
elts[idx + 1].pause();
});
}
}
configureHandlers();
// Ugly hack to fix the layout after an orientation change.
window.onorientationchange = function () {
window.location.reload();
};
</script>
</main>
</article>
</body>
</html>