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
/
Copy pathanimation.html
49 lines (36 loc) · 14.3 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
49
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Animations · Makie.jl</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"/><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.jl logo"/></a><div class="docs-package-name"><span class="docs-autofit">Makie.jl</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">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><li><a class="tocitem" href="#More-Animation-Examples"><span>More Animation Examples</span></a></li></ul></li><li><a class="tocitem" href="interaction.html">Observables & Interaction</a></li><li><a class="tocitem" href="plotting_functions.html">Plotting Functions</a></li></ul></li><li><span class="tocitem">Documentation</span><ul><li><a class="tocitem" href="scenes.html">Scenes</a></li><li><a class="tocitem" href="generated/axis.html">Axis</a></li><li><a class="tocitem" href="convenience.html">Convenience functions</a></li><li><a class="tocitem" href="generated/signatures.html">Plot function signatures</a></li><li><a class="tocitem" href="generated/plot-attributes.html">Plot attributes</a></li><li><a class="tocitem" href="generated/colors.html">Colors</a></li><li><a class="tocitem" href="lighting.html">Lighting</a></li><li><a class="tocitem" href="theming.html">Config file</a></li><li><a class="tocitem" href="cameras.html">Cameras</a></li><li><a class="tocitem" href="recipes.html">Plot Recipes</a></li><li><a class="tocitem" href="output.html">Output</a></li><li><a class="tocitem" href="backends.html">Backends</a></li><li><a class="tocitem" href="troubleshooting.html">Troubleshooting</a></li></ul></li><li><span class="tocitem">MakieLayout</span><ul><li><a class="tocitem" href="makielayout/tutorial.html">Tutorial</a></li><li><a class="tocitem" href="makielayout/grids.html">GridLayout</a></li><li><a class="tocitem" href="makielayout/laxis.html">LAxis</a></li><li><a class="tocitem" href="makielayout/special_plots.html">Special Plots</a></li><li><a class="tocitem" href="makielayout/llegend.html">LLegend</a></li><li><a class="tocitem" href="makielayout/layoutables_examples.html">Layoutables Examples</a></li><li><a class="tocitem" href="makielayout/theming.html">Theming Layoutables</a></li><li><a class="tocitem" href="makielayout/layouting.html">How Layouting Works</a></li><li><a class="tocitem" href="makielayout/faq.html">Frequently Asked Questions</a></li><li><a class="tocitem" href="makielayout/reference.html">API Reference</a></li></ul></li><li><span class="tocitem">Developer Documentation</span><ul><li><a class="tocitem" href="why-makie.html">Why <code>Makie</code>?</a></li><li><a class="tocitem" href="devdocs.html">Devdocs</a></li><li><a class="tocitem" href="abstractplotting_api.html">AbstractPlotting Reference</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 <code>Makie.jl</code> it is easy to create animated plots. Animations work by making changes to data or plot attribute Observables and recording the changing scene 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>Scene</code>. Next, you pass a function that modifies this scene frame-by-frame to <code>record</code>. Any changes you make to the scene 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, AbstractPlotting
using AbstractPlotting.Colors
# create the scene
scene = lines(0..10, sin; linewidth=10)
lineplot = scene[end]
# animation settings
n_frames = 30
framerate = 30
hue_iterator = LinRange(0, 360, n_frames)
record(scene, "color_animation.mp4", hue_iterator; framerate = framerate) do hue
lineplot.color = HSV(hue, 1, 0.75)
end</code></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, scene, "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)
scene = lines(xs, ys_1, color = :blue, linewidth = 4)
scatter!(scene, xs, ys_2, color = :red, markersize = 15)
timestamps = 0:1/30:2
record(scene, "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)])
scene = scatter(points, limits = FRect(0, 0, 30, 30))
frames = 1:30
record(scene, "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><p>If you want to animate a plot while interacting with it, check out the <code>async_latest</code> function, and the <a href="interaction.html#Observables-and-Interaction">Observables & Interaction</a> section.</p><h2 id="More-Animation-Examples"><a class="docs-heading-anchor" href="#More-Animation-Examples">More Animation Examples</a><a id="More-Animation-Examples-1"></a><a class="docs-heading-anchor-permalink" href="#More-Animation-Examples" title="Permalink"></a></h2><p>You can see more complex examples in the <a href="http://juliaplots.org/MakieReferenceImages/gallery/index.html">Example Gallery</a>!</p></article><nav class="docs-footer"><a class="docs-footer-prevpage" href="basic-tutorial.html">« 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="Tuesday 22 December 2020 03:09">Tuesday 22 December 2020</span>. Using Julia version 1.3.1.</p></section><footer class="modal-card-foot"></footer></div></div></div></body></html>