Lights, Camera, Action : Présentation de Remotion

Présentation de Remotion en passant par un peu de théorie des images

Transcript

1. Lights Camera Action
6. VIDEO example 1
7. VIDEO example 2
8. VIDEO example 3
9. Développeur front-end freelance Putain de Code (h tt p://putaindecode.io)
10. The problem Knowledge to make videos Knowledge I have
11. What Is A picture?
14. 2 dimensions
15. 2 dimensions 1. Width 2. Height
16. function picture(width, height) { return Array.from({length: height}).map(y => Array.from({length: width}).map(x => getColorAtPosition(x, y)) ) }
17. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8
18. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 picture[y][x]
19. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 picture[4][x]
20. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 picture[4][x]
21. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 picture[4][6]
22. 1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8 picture[4][6]
23. What Is A video?
30. VIDEO IS 3D
31. time Is a dimension
33. function video(frames, width, height) { return Array.from({length: frames}).map(frame => picture(width, height) ) }
34. Videos are state machines.
35. Enter Remotion
36. In a nutshell
37. remotion
38. remotion $ npm init video $ yarn create video
39. remotion
40. function Video() { let frame = useCurrentFrame() return <Picture frame={frame} /> }
41. Idempotency
42. Use current frame const frame = useCurrentFrame()
43. interpolate const height = interpolate( frame, [frame1, frame100], [value1, value2] )
44. random const randomValue = random(seed)
46. A primer about noise "White" noise perlin noise
47. Real world applications
48. using randomness
49. using Perlin noise
50. using Perlin noise (twice)
51. Let's try Live coding A video
52. Aide À COMPRENDRE COMMENT FONCTIONNE L'ANIMATION takeaways 1.
53. PERMET D'ITÉRER RAPIDEMENT SUR DES IDÉES takeaways 2.
54. Permet d'automatiser la production vidéo takeaways 3.
55. partageable directement sur un support web takeaways 4.
56. takeaways
57. C’est fun takeaways 5.
58. Merci ! questions ? Twi tt er: @jojmaht GitHub: @jojmaht