Sømløs loop: slik lager du en video som aldri hopper

En sømløs loop er en video der det siste bildet leder rett inn i det første, så den kan gjentas i det uendelige uten at noen ser hvor den starter. Hemmeligheten er at alt i bildet må komme hjem i nøyaktig riktig øyeblikk: hver posisjon, farge, hvert lysnivå og hver partikkel ender ett steg før der den begynte. Får du det til, kan et klipp på ti sekunder spilles hele dagen.

Denne guiden tar for seg hvorfor looper hopper, hvordan du designer bevegelse som vender tilbake av seg selv, hvordan du redder opptak som ikke ble laget for å loope, og hvordan du sjekker skjøten før du publiserer. For selve uttrykket i loopen, se animerte gradientbakgrunner.

Hvorfor de fleste looper hopper

Et hopp i skjøten har alltid en bestemt årsak, og hver årsak har en bestemt løsning. Det hjelper å sette navn på hvilken du ser på.

Den tredje årsaken er lumsk. Hvis du animerer fra A til B og tilbake med easing i begge ender, bremser bevegelsen til stopp i skjøten, og loopen ser ut til å nøle. Easing hører hjemme i starten og slutten av en enkeltstående bevegelse, ikke i skjøten på en loop. Easing forklarer forskjellen.

Designe bevegelse som looper av seg selv

De reneste loopene er laget av periodisk bevegelse: bevegelse som gjentar seg av natur, som et punkt som går rundt en sirkel, eller et lys som svulmer og faller. Hvis alt som beveger seg, fullfører et helt antall sykluser i løpet av videoens lengde, faller det siste bildet automatisk på linje med det første. Sirkler, sinusbølger og hele omdreininger av fargetone er alle periodiske.

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
}

Den siste detaljen er det som hindrer hakket. Hvis det siste bildet ditt er identisk med det første, viser avspilleren det bildet to ganger på rad ved hver gjentakelse. Det siste bildet skal være det som kommer rett før det første.

Loope støy, korn og partikler

Organiske teksturer lages ofte av støy, som ikke gjentar seg som standard. Standardtrikset er å bevege seg gjennom støyen i en sirkel i stedet for en rett linje, så du etter én loop er tilbake på samme punkt i den. Partikkelsystemer er annerledes: posisjonen til hver partikkel avhenger av de forrige. Å kjøre simuleringen i en hel loop før du tar opp, lar partiklene finne rytmen sin, så slutten på opptaket ligger nær starten.

Slik looper du opptak som ikke ble laget for å loope

Filmede klipp, som bølger, røyk eller skyer, ender sjelden der de begynner. Den klassiske løsningen fungerer i ethvert videoredigeringsprogram: flytt skjøten til midten av klippet, der opptaket allerede er sammenhengende, og skjul det nye kuttet med en krysstoning.

1. 1

   Del klippet på midten

   Klipp det i to halvdeler, A og B, i et øyeblikk med jevn bevegelse.

2. 2

   Bytt om halvdelene

   Legg B først og A etterpå. Slutten av A glir nå over i starten av B, fordi det var ett sammenhengende øyeblikk i originalen, så looppunktet er sømløst.

3. 3

   Krysston den nye midten

   Der B møter A, lar du dem overlappe med et halvt til to sekunder og toner den ene over i den andre. Myke opptak med mye tekstur skjuler en krysstoning best.

4. 4

   Trim til en rund lengde

   Sikt mot et helt antall sekunder, som gjør loopen lett å time og å bruke på nytt.

Velge lengde på loopen

Lengre looper føles mindre repeterende, men de gir større filer og trenger mer periodisk bevegelse for å holde på interessen. Korte looper gjentas ofte, så bevegelsen må være diskret nok til ikke å bli hypnotisk. Med 30 bilder per sekund er en loop på 10 sekunder 300 bilder, som deler seg pent i halve, tredeler og kvarte for syklusene dine.

Slik sjekker du skjøten

Ikke bedøm en loop ved å se den én gang i et redigeringsprogram. Se den slik folk kommer til å møte den: gjentatt, i full størrelse, lenger enn det føles nødvendig. Skjøter som gjemmer seg i en liten forhåndsvisning, synes ofte på en stor skjerm.

# 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

• Se filen med fire gjentakelser i fullskjerm, og se bare på skjøten.
• Se på kantene og hjørnene, der drift er mest synlig.
• Se på kornet og partiklene for seg, atskilt fra fargen.
• Hvis du ser et mykt pulsslag i skjøten, er det komprimering: eksporter i høyere kvalitet.

Hvis du lager looper i Gradiently, er dette ordnet for deg: hver eksporterte loop bygges slik at feltet i bevegelse fullfører hele sykluser innenfor lengden du velger, fra 5 til 30 sekunder, og slutten møter starten. Det er samme tilnærming som du ville brukt i kode, anvendt på Marken din. Looper blir også gode levende bakgrunnsbilder og videobakgrunner til nettsteder.