{"id":2798,"date":"2024-10-24T05:09:31","date_gmt":"2024-10-24T09:09:31","guid":{"rendered":"https:\/\/blogs.mathworks.com\/matlab\/?p=2798"},"modified":"2024-10-24T05:43:17","modified_gmt":"2024-10-24T09:43:17","slug":"creating-seamless-loop-animations-in-matlab","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/matlab\/2024\/10\/24\/creating-seamless-loop-animations-in-matlab\/","title":{"rendered":"Creating seamless loop animations in MATLAB"},"content":{"rendered":"
This is a guest post by <\/span>Vasileios Bellos<\/span><\/a> that he originally wrote in the <\/span>MathWorks Central Discussions channel<\/span><\/a>. Vasileios is a PhD candidate in fluid mechanics at Imperial College London, conducting research on physical and numerical wave modelling. When he's not playing inside the giant wave tanks in their hydrodynamics lab, he enjoys developing interactive visualisation tools for scientific applications and showcasing creative animations<\/span><\/div>
This year's <\/span>MATLAB Shorts Mini Hack<\/span><\/a> contest has kicked off, and there are already lots of interesting <\/span>entries<\/span><\/a>. The contest features creating a 96-frame, 4-second animation, which is looped 3 times to compose a 12-second short movie. There is an option to add audio to enhance the animation, and it's restricted to a an upper limit of 2,000 characters to promote efficient coding.<\/span><\/div>
Many of the contestants have already realized the potential for creating a seamless loop, which provides a smooth transition and avoids any discontinuities when the animation is repeated. There are several ways to achieve this. An efficient method for example is utilizing sinusoidal functions, which are periodic, meaning that they repeat themselves over time:<\/span><\/div>
<\/span>\"image.gif\"<\/img><\/div>
An intuitive example of a seamless loop is <\/span>@Edgar Guevara<\/span><\/a>'s <\/span>EKG pulse<\/span><\/a> entry, which features an electrocardiogram signal on an oscilloscope. The animation is perfectly matched by the audio, as explained in <\/span>their post<\/span><\/a>.<\/span><\/div>
Another, rather sophisticated approach is featured in <\/span>@Tim<\/span><\/a>'s <\/span>Moonrun<\/span><\/a> animation in <\/span>last year's contest<\/span><\/a>. This seamless loop is achieved by cleverly manipulating the camera <\/span>position<\/span><\/a> and <\/span>target<\/span><\/a> over a periodic spatial domain, producing this stunning result:<\/span><\/div>
\"image2.gif\"<\/img><\/div>
This essentially tells us that for a seamless loop in the spatial domain, the first frame must match the last frame (with a single timestep difference to be more precise, more on that later). But surely this cannot be achieved by zooming in, unless you are simulating a fractal. Well, there are always workarounds.<\/span><\/div>
One way to achieve this is by zooming into a section that contains the first frame of the animation. This is featured in my<\/span> Winter Loop<\/span><\/a> entry. This is a remix of <\/span>@Oliver Jaros<\/span><\/a>'s <\/span>Winter<\/span><\/a> entry, which was selected as a one of the <\/span>weekly winners<\/span><\/a> in the nature & space category for <\/span>Week 1<\/span><\/a>. The code was modified to lower the character count, but all credits for the original idea and graphics go to them. I also drew inspiration from one of my favourite games of all time, <\/span>Super Mario 64<\/span><\/a>. Oliver's animation reminded me of the <\/span>Cool, Cool Mountain<\/span><\/a> level of the game. In the game, you can enter various levels by jumping into paintings serving as portals.<\/span><\/div>
\"image3.png\"<\/img><\/div>
This inspired the idea of zooming into a rectangular photograph frame containing the first frame of the animation to facilitate restarting the loop. One could argue that it would probably take a crazy person to have a photo of their house framed inside their own house. Well, in this economy and with the current house prices, I don't think this scenario is too far-fetched:<\/span><\/div>
\"image4.png\"<\/img><\/div>
The implementation for this in 2-D is rather simple. Essentially, a second axes is used as the photograph. This is an efficient way of neatly updating the graphics while zooming in. The way this was implemented is explained in the following code snippet, which is a slight modification of the code in the entry:<\/span><\/div>
m = 96; <\/span>% Number of frames<\/span><\/span><\/div><\/div>
% Axes limits for the first frame<\/span><\/span><\/div><\/div>
xm = [xm1,xm2];<\/span><\/span><\/div><\/div>
ym = [ym1,ym2];<\/span><\/span><\/div><\/div>
% Axes limits for the last frame (photograph frame edges)<\/span><\/span><\/div><\/div>
xf = [xf1,xf2];<\/span><\/span><\/div><\/div>
yf = [yf1,yf2];<\/span><\/span><\/div><\/div>
% Zoom-in vectors<\/span><\/span><\/div><\/div>
x1 = linspace(xm(1),xf(1),m+1); <\/span>% Axes left edge to left photo frame edge<\/span><\/span><\/div><\/div>
x2 = linspace(xm(2),xf(2),m+1); <\/span>% Axes right edge to right photo frame edge<\/span><\/span><\/div><\/div>
y1 = linspace(ym(1),yf(1),m+1); <\/span>% Axes bottom edge to bottom photo frame edge<\/span><\/span><\/div><\/div>
y2 = linspace(ym(2),yf(2),m+1); <\/span>% Axes top edge to top photo frame edge<\/span><\/span><\/div><\/div>
if <\/span>f==1<\/span><\/span><\/div><\/div>
axis([x1(f),x2(f),y1(f),y2(f)]); <\/span>% Set main axes limits<\/span><\/span><\/div><\/div>
ax2 = copyobj(gca,gcf); <\/span>% Create axes for the photo frame containing the first frame graphics objects<\/span><\/span><\/div><\/div>
end<\/span><\/span><\/div><\/div>
axis([x1(f+1),x2(f+1),y1(f+1),y2(f+1)]); <\/span>% Zoom in main axes<\/span><\/span><\/div><\/div>
lims = axis; <\/span>% Main axes updated limits<\/span><\/span><\/div><\/div>
pos = get(gca,<\/span>'Position'<\/span>); <\/span>% Main axes position<\/span><\/span><\/div><\/div>
% This keeps the relative position of the 2 axes constant:<\/span><\/span><\/div><\/div>
pos = [pos(1)+diff([lims(1),xf(1)])\/diff(lims(1:2))*pos(3),<\/span>...<\/span><\/span><\/div><\/div>
pos(2)+diff([lims(3),yf(1)])\/diff(lims(3:4))*pos(4),<\/span>...<\/span><\/span><\/div><\/div>
diff(xf)\/diff(lims(1:2))*pos(3),<\/span>...<\/span><\/span><\/div><\/div>
diff(yf)\/diff(lims(3:4))*pos(4)];<\/span><\/span><\/div><\/div>
ax2.Position = pos; <\/span>% Adjust the relative position<\/span><\/span><\/div><\/div><\/div>
Let's break down the code to explain the process:<\/span><\/div>