Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lights, Camera, Action : Présentation de Remotion
Search
jojmaht
November 25, 2021
Programming
0
93
Lights, Camera, Action : Présentation de Remotion
Présentation de Remotion en passant par un peu de théorie des images
jojmaht
November 25, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Hanami and htmx
bkuhlmann
0
190
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
"config" ってなんだ? / What is "config"?
okashoi
0
210
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
860
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Side Projects
sachag
451
41k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Adopting Sorbet at Scale
ufuk
67
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Gamification - CAS2011
davidbonilla
76
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Transcript
Lights Camera Action
None
None
None
None
VIDEO example 1
VIDEO example 2
VIDEO example 3
Développeur front-end freelance Putain de Code (h tt p://putaindecode.io)
The problem Knowledge to make videos Knowledge I have
What Is A picture?
None
None
2 dimensions
2 dimensions 1. Width 2. Height
function picture(width, height) { return Array.from({length: height}).map(y => Array.from({length: width}).map(x
=> getColorAtPosition(x, y)) ) }
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8 picture[y][x]
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8 picture[4][x]
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8 picture[4][x]
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8 picture[4][6]
1 2 3 4 5 6 7 8 1 2
3 4 5 6 7 8 picture[4][6]
What Is A video?
None
None
None
None
None
None
VIDEO IS 3D
time Is a dimension
None
function video(frames, width, height) { return Array.from({length: frames}).map(frame => picture(width,
height) ) }
Videos are state machines.
Enter Remotion
In a nutshell
remotion
remotion $ npm init video $ yarn create video
remotion
function Video() { let frame = useCurrentFrame() return <Picture frame={frame}
/> }
Idempotency
Use current frame const frame = useCurrentFrame()
interpolate const height = interpolate( frame, [frame1, frame100], [value1, value2]
)
random const randomValue = random(seed)
None
A primer about noise "White" noise perlin noise
Real world applications
using randomness
using Perlin noise
using Perlin noise (twice)
Let's try Live coding A video
Aide À COMPRENDRE COMMENT FONCTIONNE L'ANIMATION takeaways 1.
PERMET D'ITÉRER RAPIDEMENT SUR DES IDÉES takeaways 2.
Permet d'automatiser la production vidéo takeaways 3.
partageable directement sur un support web takeaways 4.
takeaways
C’est fun takeaways 5.
Merci ! questions ? Twi tt er: @jojmaht GitHub: @jojmaht