This repository has been archived by the owner on Jul 15, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
animation.html
48 lines (35 loc) · 15.9 KB
/
animation.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
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Animations · Makie Plotting Ecosystem</title><link href="https://fonts.googleapis.com/css?family=Lato|Roboto+Mono" rel="stylesheet" type="text/css"/><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/fontawesome.min.css" rel="stylesheet" type="text/css"/><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/solid.min.css" rel="stylesheet" type="text/css"/><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/brands.min.css" rel="stylesheet" type="text/css"/><link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css" rel="stylesheet" type="text/css"/><script>documenterBaseURL="."</script><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" data-main="assets/documenter.js"></script><script src="siteinfo.js"></script><script src="../versions.js"></script><link class="docs-theme-link" rel="stylesheet" type="text/css" href="assets/themes/documenter-dark.css" data-theme-name="documenter-dark" data-theme-primary-dark/><link class="docs-theme-link" rel="stylesheet" type="text/css" href="assets/themes/documenter-light.css" data-theme-name="documenter-light" data-theme-primary/><script src="assets/themeswap.js"></script><link href="assets/favicon.ico" rel="icon" type="image/x-icon"/><link href="assets/syntaxtheme.css" rel="stylesheet" type="text/css"/></head><body><div id="documenter"><nav class="docs-sidebar"><a class="docs-logo" href="index.html"><img src="assets/logo.png" alt="Makie Plotting Ecosystem logo"/></a><div class="docs-package-name"><span class="docs-autofit">Makie Plotting Ecosystem</span></div><form class="docs-search" action="search.html"><input class="docs-search-query" id="documenter-search-query" name="q" type="text" placeholder="Search docs"/></form><ul class="docs-menu"><li><a class="tocitem" href="index.html">Home</a></li><li><span class="tocitem">Basics</span><ul><li><a class="tocitem" href="basic-tutorial.html">Basic Tutorial</a></li><li><a class="tocitem" href="makielayout/tutorial.html">Layout Tutorial</a></li><li class="is-active"><a class="tocitem" href="animation.html">Animations</a><ul class="internal"><li><a class="tocitem" href="#A-Simple-Example"><span>A Simple Example</span></a></li><li><a class="tocitem" href="#File-Formats"><span>File Formats</span></a></li><li><a class="tocitem" href="#Animations-Using-Observables"><span>Animations Using Observables</span></a></li><li><a class="tocitem" href="#Appending-Data-With-Observables"><span>Appending Data With Observables</span></a></li><li><a class="tocitem" href="#Animating-a-Plot-"Live""><span>Animating a Plot "Live"</span></a></li></ul></li><li><a class="tocitem" href="interaction.html">Observables & Interaction</a></li><li><input class="collapse-toggle" id="menuitem-2-5" type="checkbox"/><label class="tocitem" for="menuitem-2-5"><span class="docs-label">Plotting Functions</span><i class="docs-chevron"></i></label><ul class="collapsed"><li><a class="tocitem" href="plotting_functions/arrows.html">arrows</a></li><li><a class="tocitem" href="plotting_functions/band.html">band</a></li><li><a class="tocitem" href="plotting_functions/barplot.html">barplot</a></li><li><a class="tocitem" href="plotting_functions/contour.html">contour</a></li><li><a class="tocitem" href="plotting_functions/contourf.html">contourf</a></li><li><a class="tocitem" href="plotting_functions/density.html">density</a></li><li><a class="tocitem" href="plotting_functions/errorbars.html">errorbars</a></li><li><a class="tocitem" href="plotting_functions/heatmap.html">heatmap</a></li><li><a class="tocitem" href="plotting_functions/hist.html">hist</a></li><li><a class="tocitem" href="plotting_functions/image.html">image</a></li><li><a class="tocitem" href="plotting_functions/lines.html">lines</a></li><li><a class="tocitem" href="plotting_functions/linesegments.html">linesegments</a></li><li><a class="tocitem" href="plotting_functions/mesh.html">mesh</a></li><li><a class="tocitem" href="plotting_functions/meshscatter.html">meshscatter</a></li><li><a class="tocitem" href="plotting_functions/poly.html">poly</a></li><li><a class="tocitem" href="plotting_functions/rangebars.html">rangebars</a></li><li><a class="tocitem" href="plotting_functions/scatter.html">scatter</a></li><li><a class="tocitem" href="plotting_functions/scatterlines.html">scatterlines</a></li><li><a class="tocitem" href="plotting_functions/stem.html">stem</a></li><li><a class="tocitem" href="plotting_functions/surface.html">surface</a></li><li><a class="tocitem" href="plotting_functions/text.html">text</a></li><li><a class="tocitem" href="plotting_functions/volume.html">volume</a></li></ul></li><li><a class="tocitem" href="theming.html">Theming</a></li></ul></li><li><span class="tocitem">Documentation</span><ul><li><a class="tocitem" href="plot_method_signatures.html">Plot Method Signatures</a></li><li><a class="tocitem" href="figure.html">Figure</a></li><li><input class="collapse-toggle" id="menuitem-3-3" type="checkbox"/><label class="tocitem" for="menuitem-3-3"><span class="docs-label">Layoutables & Widgets</span><i class="docs-chevron"></i></label><ul class="collapsed"><li><a class="tocitem" href="makielayout/layoutables.html">Layoutables</a></li><li><a class="tocitem" href="makielayout/axis.html">Axis</a></li><li><a class="tocitem" href="makielayout/box.html">Box</a></li><li><a class="tocitem" href="makielayout/button.html">Button</a></li><li><a class="tocitem" href="makielayout/colorbar.html">Colorbar</a></li><li><a class="tocitem" href="makielayout/gridlayout.html">GridLayout</a></li><li><a class="tocitem" href="makielayout/label.html">Label</a></li><li><a class="tocitem" href="makielayout/legend.html">Legend</a></li><li><a class="tocitem" href="makielayout/lscene.html">LScene</a></li><li><a class="tocitem" href="makielayout/menu.html">Menu</a></li><li><a class="tocitem" href="makielayout/slider.html">Slider</a></li><li><a class="tocitem" href="makielayout/toggle.html">Toggle</a></li></ul></li><li><a class="tocitem" href="makielayout/layouting.html">How layouts work</a></li><li><a class="tocitem" href="generated/colors.html">Colors</a></li><li><a class="tocitem" href="generated/plot-attributes.html">Plot attributes</a></li><li><a class="tocitem" href="recipes.html">Plot Recipes</a></li><li><a class="tocitem" href="backends_and_output.html">Backends & Output</a></li><li><a class="tocitem" href="scenes.html">Scenes</a></li><li><a class="tocitem" href="lighting.html">Lighting</a></li><li><a class="tocitem" href="cameras.html">Cameras</a></li><li><a class="tocitem" href="faq.html">Frequently Asked Questions</a></li><li><a class="tocitem" href="abstractplotting_api.html">API Reference AbstractPlotting</a></li><li><a class="tocitem" href="makielayout/reference.html">API Reference MakieLayout</a></li><li><a class="tocitem" href="generated/axis.html">Integrated Axes (Axis2D / Axis3D)</a></li></ul></li></ul><div class="docs-version-selector field has-addons"><div class="control"><span class="docs-label button is-static is-size-7">Version</span></div><div class="docs-selector control is-expanded"><div class="select is-fullwidth is-size-7"><select id="documenter-version-selector"></select></div></div></div></nav><div class="docs-main"><header class="docs-navbar"><nav class="breadcrumb"><ul class="is-hidden-mobile"><li><a class="is-disabled">Basics</a></li><li class="is-active"><a href="animation.html">Animations</a></li></ul><ul class="is-hidden-tablet"><li class="is-active"><a href="animation.html">Animations</a></li></ul></nav><div class="docs-right"><a class="docs-edit-link" href="https://github.com/JuliaPlots/AbstractPlotting.jl/blob/master/docs/src/animation.md#" title="Edit on GitHub"><span class="docs-icon fab"></span><span class="docs-label is-hidden-touch">Edit on GitHub</span></a><a class="docs-settings-button fas fa-cog" id="documenter-settings-button" href="#" title="Settings"></a><a class="docs-sidebar-button fa fa-bars is-hidden-desktop" id="documenter-sidebar-button" href="#"></a></div></header><article class="content" id="documenter-page"><h1 id="Animations"><a class="docs-heading-anchor" href="#Animations">Animations</a><a id="Animations-1"></a><a class="docs-heading-anchor-permalink" href="#Animations" title="Permalink"></a></h1><p>With Makie it is easy to create animated plots. Animations work by making changes to data or plot attribute Observables and recording the changing figure frame by frame. You can find out more about the Observables workflow on the <a href="interaction.html#Observables-and-Interaction">Observables & Interaction</a> page.</p><h2 id="A-Simple-Example"><a class="docs-heading-anchor" href="#A-Simple-Example">A Simple Example</a><a id="A-Simple-Example-1"></a><a class="docs-heading-anchor-permalink" href="#A-Simple-Example" title="Permalink"></a></h2><p>To create an animation you need to use the <a href="abstractplotting_api.html#AbstractPlotting.record-Tuple{Any,Any,Any}"><code>record</code></a> function.</p><p>First you create a <code>Figure</code>. Next, you pass a function that modifies this figure frame-by-frame to <code>record</code>. Any changes you make to the figure or its plots will appear in the final animation. You also need to pass an iterable which has as many elements as you want frames in your animation. The function that you pass as the first argument is called with each element from this iterator over the course of the animation.</p><p>As a start, here is how you can change the color of a line plot:</p><pre><code class="language-julia">using GLMakie
using AbstractPlotting.Colors
figure, ax, lineplot = lines(0..10, sin; linewidth=10)
# animation settings
n_frames = 30
framerate = 30
hue_iterator = LinRange(0, 360, n_frames)
record(figure, "color_animation.mp4", hue_iterator; framerate = framerate) do hue
lineplot.color = HSV(hue, 1, 0.75)
end</code></pre><pre class="documenter-example-output">[ Info: Makie/AbstractPlotting is caching fonts, this may take a while. Needed only on first run!</pre><p><video src="color_animation.mp4" controls="true" title="color animation"><a href="color_animation.mp4">color animation</a></video></p><p>Passing a function as the first argument is usually done with Julia's <code>do</code>-notation, which you might not be familiar with. Instead of the above, we could also have written:</p><pre><code class="language-julia">function change_function(hue)
lineplot.color = HSV(hue, 1, 0.75)
end
record(change_function, figure, "color_animation.mp4", hue_iterator; framerate = framerate)</code></pre><h2 id="File-Formats"><a class="docs-heading-anchor" href="#File-Formats">File Formats</a><a id="File-Formats-1"></a><a class="docs-heading-anchor-permalink" href="#File-Formats" title="Permalink"></a></h2><p>Video files are created with <a href="https://github.com/JuliaIO/FFMPEG.jl"><code>FFMPEG.jl</code></a>. You can choose from the following file formats:</p><ul><li><code>.mkv</code> (the default, doesn't need to convert)</li><li><code>.mp4</code> (good for web, widely supported)</li><li><code>.webm</code> (smallest file size)</li><li><code>.gif</code> (lowest quality with largest file size)</li></ul><h2 id="Animations-Using-Observables"><a class="docs-heading-anchor" href="#Animations-Using-Observables">Animations Using Observables</a><a id="Animations-Using-Observables-1"></a><a class="docs-heading-anchor-permalink" href="#Animations-Using-Observables" title="Permalink"></a></h2><p>Often, you want to animate a complex plot over time, and all the data that is displayed should be determined by the current time stamp. Such a dependency is really easy to express with <code>Observables</code> or <code>Nodes</code>.</p><p>We can save a lot of work if we create our data depending on a single time <code>Node</code>, so we don't have to change every plot's data manually as the animation progresses.</p><p>Here is an example that plots two different functions. The y-values of each depend on time and therefore we only have to change the time for both plots to change. We use the convenient <code>@lift</code> macro which denotes that the <code>lift</code>ed expression depends on each Observable marked with a <code>$</code> sign.</p><pre><code class="language-julia">time = Node(0.0)
xs = LinRange(0, 7, 40)
ys_1 = @lift(sin.(xs .- $time))
ys_2 = @lift(cos.(xs .- $time) .+ 3)
figure, _ = lines(xs, ys_1, color = :blue, linewidth = 4)
scatter!(xs, ys_2, color = :red, markersize = 15)
timestamps = 0:1/30:2
record(figure, "time_animation.mp4", timestamps; framerate = 30) do t
time[] = t
end</code></pre><p><video src="time_animation.mp4" controls="true" title="time animation"><a href="time_animation.mp4">time animation</a></video></p><p>You can set most plot attributes equal to <code>Observable</code>s, so that you need only update a single variable (like time) during your animation loop.</p><p>For example, to make a line with color dependent on time, you could write:</p><pre><code class="language-julia">time = Node(0.0)
color_observable = @lift(RGBf0($time, 0, 0))
lines(0..10, sin, color = color_observable)</code></pre><h2 id="Appending-Data-With-Observables"><a class="docs-heading-anchor" href="#Appending-Data-With-Observables">Appending Data With Observables</a><a id="Appending-Data-With-Observables-1"></a><a class="docs-heading-anchor-permalink" href="#Appending-Data-With-Observables" title="Permalink"></a></h2><p>You can also append data to a plot during an animation. Instead of passing x and y (or z) values separately, it's better to make a <code>Node</code> with a vector of <code>Point</code>s, so that the number of x and y values can not go out of sync.</p><pre><code class="language-julia">points = Node(Point2f0[(0, 0)])
fig, ax, sc = scatter(points)
limits!(ax, 0, 30, 0, 30)
frames = 1:30
record(fig, "append_animation.mp4", frames; framerate = 30) do frame
new_point = Point2f0(frame, frame)
points[] = push!(points[], new_point)
end</code></pre><p><video src="append_animation.mp4" controls="true" title="append animation"><a href="append_animation.mp4">append animation</a></video></p><h2 id="Animating-a-Plot-"Live""><a class="docs-heading-anchor" href="#Animating-a-Plot-"Live"">Animating a Plot "Live"</a><a id="Animating-a-Plot-"Live"-1"></a><a class="docs-heading-anchor-permalink" href="#Animating-a-Plot-"Live"" title="Permalink"></a></h2><p>You can animate a live plot easily using a loop. Update all <code>Observables</code> that you need and then add a short sleep interval so that the display can refresh:</p><pre><code class="language-julia">for i = 1:n_frames
time_observable[] = time()
sleep(1/30)
end</code></pre></article><nav class="docs-footer"><a class="docs-footer-prevpage" href="makielayout/tutorial.html">« Layout Tutorial</a><a class="docs-footer-nextpage" href="interaction.html">Observables & Interaction »</a><div class="flexbox-break"></div><p class="footer-message">Powered by <a href="https://github.com/JuliaDocs/Documenter.jl">Documenter.jl</a> and the <a href="https://julialang.org/">Julia Programming Language</a>.</p></nav></div><div class="modal" id="documenter-settings"><div class="modal-background"></div><div class="modal-card"><header class="modal-card-head"><p class="modal-card-title">Settings</p><button class="delete"></button></header><section class="modal-card-body"><p><label class="label">Theme</label><div class="select"><select id="documenter-themepicker"><option value="documenter-light">documenter-light</option><option value="documenter-dark">documenter-dark</option></select></div></p><hr/><p>This document was generated with <a href="https://github.com/JuliaDocs/Documenter.jl">Documenter.jl</a> on <span class="colophon-date" title="Friday 19 March 2021 14:22">Friday 19 March 2021</span>. Using Julia version 1.5.4.</p></section><footer class="modal-card-foot"></footer></div></div></div></body></html>