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
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Ruby Parser progress report 2025
yui_knk
1
460
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
チームのテスト力を鍛える
goyoki
3
930
testingを眺める
matumoto
1
140
Kiroで始めるAI-DLC
kaonash
2
630
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Optimizing for Happiness
mojombo
379
70k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Agile that works and the tools we love
rasmusluckow
330
21k
Scaling GitHub
holman
463
140k
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