Naadloze loopvideo: zo maak je er een die nooit verspringt

Een naadloze loop is een video waarvan het laatste frame rechtstreeks naar het eerste leidt, zodat hij eindeloos kan herhalen zonder dat iemand ziet waar hij begint. Het geheim is dat alles in het beeld op precies het juiste moment thuis moet komen: elke positie, kleur, lichtsterkte en elk deeltje eindigt één stap voor waar het begon. Krijg je dat goed, dan kan een clip van tien seconden de hele dag spelen.

Deze gids behandelt waarom loops verspringen, hoe je beweging ontwerpt die vanzelf terugkeert, hoe je beeldmateriaal redt dat niet is gemaakt om te loopen, en hoe je de naad controleert voordat je publiceert. Zie voor de look van de loop zelf geanimeerde achtergronden met kleurverloop.

Waarom de meeste loops verspringen

Een sprong op de naad heeft altijd een specifieke oorzaak, en elke oorzaak heeft een specifieke oplossing. Het helpt te benoemen naar welke je kijkt.

De derde oorzaak is verraderlijk. Animeer je van A naar B en terug met easing aan beide uiteinden, dan komt de beweging op de naad tot stilstand en lijkt de loop te aarzelen. Easing hoort aan het begin en einde van een eenmalige beweging, niet op de las van een loop. Easing legt het verschil uit.

Beweging ontwerpen die vanzelf loopt

De schoonste loops bestaan uit periodieke beweging: beweging die van nature herhaalt, zoals een punt dat een cirkel rondgaat of licht dat aanzwelt en afneemt. Als alles wat beweegt een geheel aantal cycli voltooit binnen de lengte van de video, valt het laatste frame vanzelf op één lijn met het eerste. Cirkels, sinusgolven en volledige rondes van de tint zijn allemaal periodiek.

const fps = 30
const seconds = 10
const frames = fps * seconds            // 300 frames, numbered 0 to 299

for (let i = 0; i < frames; i++) {
  const phase = i / frames              // 0 up to, but never reaching, 1
  const turn = phase * Math.PI * 2      // one full turn per loop

  const x = Math.cos(turn) * 40         // drift in a circle, 40 px across
  const y = Math.sin(turn) * 40
  const hue = 280 + Math.sin(turn * 2) * 20   // two gentle hue swings per loop
  const glow = 0.5 + 0.5 * Math.sin(turn)     // light breathes once per loop

  drawFrame(i, { x, y, hue, glow })     // your renderer
}

Dat laatste detail voorkomt de hapering. Is je laatste frame identiek aan je eerste, dan toont de speler dat beeld bij elke herhaling twee keer achter elkaar. Het laatste frame hoort het frame vlak voor het eerste te zijn.

Ruis, korrel en deeltjes laten loopen

Organische texturen worden vaak gemaakt van ruis, en die herhaalt standaard niet. De gebruikelijke truc is in een cirkel door de ruis te bewegen in plaats van in een rechte lijn, zodat je na één loop weer op hetzelfde punt zit. Deeltjessystemen zijn anders: de positie van elk deeltje hangt af van de vorige. Laat je de simulatie een volledige loop draaien voordat je opneemt, dan vinden de deeltjes hun ritme en ligt het opgenomen einde dicht bij het begin.

Zo loop je beeldmateriaal dat niet is gemaakt om te loopen

Gefilmde clips, zoals golven, rook of wolken, eindigen zelden waar ze beginnen. De klassieke oplossing werkt in elke video-editor: verplaats de las naar het midden van de clip, waar het beeld al doorloopt, en verberg de nieuwe snede met een overvloeier.

1. 1

   Splits de clip in het midden

   Knip de clip in twee helften, A en B, op een moment met gelijkmatige beweging.

2. 2

   Wissel de helften om

   Zet B eerst en A daarna. Het einde van A vloeit nu over in het begin van B, omdat dat in het origineel één doorlopend moment was, dus het looppunt is naadloos.

3. 3

   Leg een overvloeier op het nieuwe midden

   Laat B en A waar ze elkaar raken een halve tot twee seconden overlappen en laat de een in de ander overvloeien. Zacht beeld met veel textuur verbergt een overvloeier het best.

4. 4

   Kort in tot een ronde lengte

   Mik op een geheel aantal seconden, zodat de loop makkelijk te timen en te hergebruiken is.

Een looplengte kiezen

Langere loops voelen minder repetitief, maar het zijn grotere bestanden en ze hebben meer periodieke beweging nodig om interessant te blijven. Korte loops herhalen vaak, dus hun beweging moet subtiel genoeg zijn om niet hypnotisch te worden. Bij 30 frames per seconde is een loop van 10 seconden 300 frames, en dat deel je netjes in helften, derden en kwarten voor je cycli.

Zo controleer je de naad

Beoordeel een loop niet door hem één keer in een editor te bekijken. Bekijk hem zoals mensen hem tegenkomen: herhalend, op volle grootte, langer dan nodig lijkt. Naden die zich in een klein voorbeeld verstoppen, zie je vaak wel op een groot scherm.

# Play the loop four times in a row as one file, to watch the joins
ffmpeg -stream_loop 3 -i loop.mp4 -c copy loop-x4.mp4

# Save the first and last frames as images to compare side by side
ffmpeg -i loop.mp4 -vf "select=eq(n\,0)" -frames:v 1 first.png
ffmpeg -sseof -0.5 -i loop.mp4 -update 1 last.png

• Bekijk het bestand met vier herhalingen schermvullend en kijk alleen naar de las.
• Kijk naar de randen en hoeken, waar verschuiving het best zichtbaar is.
• Bekijk de korrel en de deeltjes los van de kleur.
• Zie je een zachte puls op de las, dan is het compressie: exporteer op een hogere kwaliteit.

Maak je loops in Gradiently, dan is dit voor je geregeld: elke geëxporteerde loop is zo opgebouwd dat het bewegende vlak hele cycli voltooit binnen de lengte die je kiest, van 5 tot 30 seconden, en het einde op het begin aansluit. Het is dezelfde aanpak die je in code zou kiezen, toegepast op je Mark. Loops zijn ook goede live wallpapers en videoachtergronden voor websites.