hashirama/reanimate
Watch
1
0
Fork
You've already forked reanimate
 0
mirror of https://github.com/reanimate/reanimate.git synced 2026-09-09 07:03:11 +00:00
Code Issues Projects Releases Wiki Activity

Use https when possible.

Browse source
This commit is contained in:
lemmih 2020-10-01 14:40:05 +08:00
commit 5cc47478a6
5 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
LICENSE
View file

@ -21,4 +21,4 @@ OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <http://unlicense.org>
For more information, please refer to <https://unlicense.org>

6
README.md
View file

@ -1,6 +1,6 @@
[![Hackage](https://img.shields.io/hackage/v/reanimate.svg?color=success)](http://hackage.haskell.org/package/reanimate)
[![packagename on Stackage LTS](http://stackage.org/package/reanimate/badge/lts)](http://stackage.org/lts/package/reanimate)
[![packagename on Stackage Nightly](http://stackage.org/package/reanimate/badge/nightly)](http://stackage.org/nightly/package/reanimate)
[![Hackage](https://img.shields.io/hackage/v/reanimate.svg?color=success)](https://hackage.haskell.org/package/reanimate)
[![packagename on Stackage LTS](https://stackage.org/package/reanimate/badge/lts)](https://stackage.org/lts/package/reanimate)
[![packagename on Stackage Nightly](https://stackage.org/package/reanimate/badge/nightly)](https://stackage.org/nightly/package/reanimate)
[![Build Status](https://dev.azure.com/lemmih0612/reanimate/_apis/build/status/reanimate.reanimate?branchName=master)](https://dev.azure.com/lemmih0612/reanimate/_build/latest?definitionId=2&branchName=master)
[![Documentation Status](https://readthedocs.org/projects/reanimate/badge/?version=latest)](https://reanimate.readthedocs.io/en/latest/?badge=latest)
![Platforms](https://img.shields.io/badge/platform-linux%20%7C%20osx%20%7C%20windows-informational)

4
docs/index.md
View file

@ -1,7 +1,7 @@
# Reanimate is:
* **An animation library** - a system for turning code into movies, similar to [3b1b's manim](https://github.com/3b1b/manim) of [YouTube fame](https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw).
* **User friendly** - extensively documented with example animations covering the [entire API](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html).
* **User friendly** - extensively documented with example animations covering the [entire API](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html).
* **Cross-platform** - works on Linux, Mac and Windows.
@ -92,7 +92,7 @@ $ stack ./examples/doc_andThen.hs render --format gif
# Learning resources
* [API documentation](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html)
* [API documentation](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html)
* [Core concepts](introduction)
* [Examples](https://github.com/reanimate/reanimate/tree/master/examples)
* [Design overview](glue_tut)

24
docs/introduction.md
View file

@ -1,7 +1,7 @@
# Introduction
This document will introduce the foundamental concepts used in **reanimate**.
It is assumed that you are already familiar with Haskell. After reading, you will be able to understand all the concepts used in the [API reference documentation](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html). This is not a tutorial, though, and you may have to look at the examples before you can turn these concepts into beautiful animations.
It is assumed that you are already familiar with Haskell. After reading, you will be able to understand all the concepts used in the [API reference documentation](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html). This is not a tutorial, though, and you may have to look at the examples before you can turn these concepts into beautiful animations.
For a bird's eye view on the design philosophy and capabilities of **reanimate**, see [Gluing together animations](/glue_tut/). For help installing **reanimate**, see [Getting started](/#getting-started).
@ -12,7 +12,7 @@ capable of rendering the compiled animation in many different formats (mp4, gif,
and with different resolutions and framerates. In other words, animations are agnostic
with respect to the output format, the resolution, and the framerate.
By default, when you run the executable, the animation will open and play in a new browser window. Running the executable with `render` will create an .mp4 file with the same basename as the source file. For more details, have a look at the [driver documentation](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:reanimate).
By default, when you run the executable, the animation will open and play in a new browser window. Running the executable with `render` will create an .mp4 file with the same basename as the source file. For more details, have a look at the [driver documentation](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:reanimate).
Let's get our feet wet and have a look at an animation written with **reanimate**.
By the way, all animations in this document are available from the [`examples/`](https://github.com/reanimate/reanimate/tree/master/examples) folder in the
@ -30,17 +30,17 @@ We'll start with a minimal animation that prints "Hello world" on top of a cyan
Let's go over the five library functions used by the Hello World animation:
* [`mkText :: Text -> SVG`](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkText)<br/>
* [`mkText :: Text -> SVG`](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkText)<br/>
Each frame in the animation is an SVG image so we need a helper function to
construct an SVG text node.
* [`staticFrame :: Duration -> SVG -> Animation`](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:staticFrame)<br/>
* [`staticFrame :: Duration -> SVG -> Animation`](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:staticFrame)<br/>
Our animation has no moving parts so we use the `staticFrame 1` call to
say that we want the same SVG image for `1` full second.
* [`mkBackground :: String -> SVG`](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkBackground)<br/>
* [`mkBackground :: String -> SVG`](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkBackground)<br/>
This helper function constructs a rectangle the size of the animation with a specific color.
* [`addStatic :: SVG -> Animation -> Animation`](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:addStatic)<br/>
* [`addStatic :: SVG -> Animation -> Animation`](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:addStatic)<br/>
The background is a static component we're adding to our animation.
* [`reanimate :: Animation -> IO ()`](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:reanimate)<br/>
* [`reanimate :: Animation -> IO ()`](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:reanimate)<br/>
Finally, we invoke the main driver to turn the `Animation` into an executable.
## The Canvas
@ -64,21 +64,21 @@ To make animations agnostic to resolution, **reanimate** uses its own coordinate
<source src="https://i.imgur.com/E2hrppM.mp4">
</video><br/>
Many of the SVG constructors such as [mkCircle](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkCircle) and [mkRect](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkRect) do not take positioning arguments and are instead always centered at <0,0>. They can be moved with [translate](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:translate), though.
Many of the SVG constructors such as [mkCircle](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkCircle) and [mkRect](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:mkRect) do not take positioning arguments and are instead always centered at <0,0>. They can be moved with [translate](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:translate), though.
Also, if the default coordinate system or the 16/9 aspect ratio is unsuitable for your needs, they can easily be changed. See [Custom viewports](#custom-viewports) for details.
## Animations
Animations describe how SVG frames change over a finite amount of time. There's both a [declarative API](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:2) and an [imperative API](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:4) for constructing and composing animations, and they are often used in conjunction with each other.
Animations describe how SVG frames change over a finite amount of time. There's both a [declarative API](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:2) and an [imperative API](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:4) for constructing and composing animations, and they are often used in conjunction with each other.
## Signals
Signals are also called easing functions. They modify the rate of change for animations and mutable variables. Graphical examples are available in the [API documentation](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:3). More examples are [covered here](https://easings.net/).
Signals are also called easing functions. They modify the rate of change for animations and mutable variables. Graphical examples are available in the [API documentation](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:3). More examples are [covered here](https://easings.net/).
## Scenes
The [scene API](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:4) offers an imperative method for composing animations. It has sprites and mutable variables, yet is still free of side-effects and can be used freely with declarative combinators and effects.
The [scene API](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#g:4) offers an imperative method for composing animations. It has sprites and mutable variables, yet is still free of side-effects and can be used freely with declarative combinators and effects.
## Text and LaTeX
@ -94,7 +94,7 @@ SVG text nodes can be undesirable for two reasons: (a) How they are rendered dep
## Custom viewboxes
**Reanimate** defaults to a 16 by 9 aspect ratio but is capable of generating videos and GIFs of any resolution. You can create custom aspect ratios by scaling your animation to fit
[screenWidth](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:screenWidth) by [screenHeight](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:screenHeight), or by using the [withViewBox](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:withViewBox) helper function.
[screenWidth](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:screenWidth) by [screenHeight](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:screenHeight), or by using the [withViewBox](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Svg-Constructors.html#v:withViewBox) helper function.
<details>
<summary>Toggle source code.</summary>

6
docs/showcase_colortheory.md
View file

@ -3,9 +3,9 @@
<iframe width="560" height="315" src="https://www.youtube.com/embed/txSAC6mJQDk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
There are several interesting color maps in reanimate, like
[viridis](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:viridis)
[viridis](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:viridis)
and
[parula](http://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:parula).
[parula](https://hackage.haskell.org/package/reanimate/docs/Reanimate.html#v:parula).
This got me interested in the color theory that underpins them and I decided to make
a short video presenting what I learned. This is not about color theory, though,
but rather the technical details involved with writing and rendering a fairly long
@ -92,7 +92,7 @@ I wrote nearly all of the color-theory animation before Reanimate had
way more difficult than I expected. It even affected my development
process. I used to write small fragments of animation and then combined them
into larger segments. Now I focus more on
[sprites](http://hackage.haskell.org/package/reanimate/docs/Reanimate-Scene.html#g:3),
[sprites](https://hackage.haskell.org/package/reanimate/docs/Reanimate-Scene.html#g:3),
their parameters, and their lifetime effects, and leave all timing/durations to
be settled at a later time.