Save 37% off PRO during our Black Friday Sale! »

Lights, Camera, Action : Présentation de Remotion

Ee8d347ec2f880d84716039440000c3f?s=47 jojmaht
November 25, 2021

Lights, Camera, Action : Présentation de Remotion

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

Ee8d347ec2f880d84716039440000c3f?s=128

jojmaht

November 25, 2021
Tweet

Transcript

  1. Lights Camera Action

  2. None
  3. None
  4. None
  5. None
  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?

  12. None
  13. None
  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?

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. VIDEO IS 3D

  31. time Is a dimension

  32. None
  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)

  45. None
  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