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
98
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
140
Cache Me If You Can
ryunen344
2
4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
1から理解するWeb Push
dora1998
7
1.9k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
AIでLINEスタンプを作ってみた
eycjur
1
230
Reading Rails 1.0 Source Code
okuramasafumi
0
250
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Gamification - CAS2011
davidbonilla
81
5.4k
How to Ace a Technical Interview
jacobian
279
23k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing for Performance
lara
610
69k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Side Projects
sachag
455
43k
Fireside Chat
paigeccino
39
3.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Designing for humans not robots
tammielis
253
25k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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