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

Take on me

32b23faedcb33ad2079ad33658ac56bb?s=47 Eva Ferreira
September 20, 2019

Take on me

32b23faedcb33ad2079ad33658ac56bb?s=128

Eva Ferreira

September 20, 2019
Tweet

Transcript

  1. Take on me Eva Ferreira

  2. Take on me • Catchy music • Wow animations @evaferreira92

  3. Wow Animations My life goal.

  4. Hi! I’m Eva • Front-end Developer by day • Protector

    of useless creativity at night • Mozilla Tech Speaker • CSSConf Argentina organizer @evaferreira92
  5. Hi! I’m María Evangelina Ferreira Kuzminski • Front-end Developer by

    day • Protector of useless creativity at night • Mozilla Tech Speaker • CSSConf Argentina organizer @evaferreira92
  6. What is this thing? @evaferreira92

  7. Rotoscoping

  8. Take on me – A-ha 1985

  9. 21st Century Breakdown – Green Day 2009

  10. Sheezus – Lily Allen 2014

  11. Hard Times – Paramore 2017

  12. Caught in the Middle – Paramore 2018

  13. I don’t care – Ed Sheeran & Justin Bieber 2019

  14. Rotoscoping 1. Record a video 2. Draw on top 15

    to 25 images per second @evaferreira92
  15. None
  16. None
  17. None
  18. Traditional animation… On the web.

  19. Traditional Web • Stop Motion • Motion Graphics @evaferreira92

  20. Stop Motion – Rachel Nabors

  21. Motion Graphics – Chris Gannon

  22. Julia Muzafarova - @miocene @evaferreira92

  23. Can we go further?

  24. Can we make rotoscoping on the web? No.

  25. None
  26. Interactive media Take Rotoscoping' soul into the web

  27. None
  28. None
  29. Chroma Key

  30. Chroma Key • Green or blue background • REALLY good

    light  Natural light is the devil. @evaferreira92
  31. None
  32. Chroma key with user’s camera

  33. Chroma key in the browser 1. Take the user’s camera

    input 1. Put it in a video tag 2. Copy that into a canvas 3. Process canvas 1. Remove green or blue 2. Show background image or video @evaferreira92
  34. 1. Take the user’s camera input

  35. Take video input @evaferreira92 navigator.mediaDevices.getUserMedia({video: true}) .then() .catch();

  36. Put it in a video tag @evaferreira92 <video id="video" controls></video>

  37. Put it in a video tag @evaferreira92 .then(function (stream) {

    video.srcObject = stream; }) .catch(function (error) { console.log("Error:", error); }); navigator.mediaDevices.getUserMedia({video: true})
  38. @evaferreira92

  39. 2. Copy video into canvas

  40. Create canvas @evaferreira92 <canvas id="canvas" class="canvas"></canvas> c1 = document.getElementById("canvas"); ctx1

    = this.c1.getContext("2d");
  41. Create the draw function @evaferreira92 function draw () { ctx1.drawImage(video,

    0, 0, this.width, this.height); }
  42. Update the canvas function time_callback () { if (video.paused ||

    video.ended) { return; } draw(); // Update setTimeout(function () { this.time_callback(); }, 0); };
  43. @evaferreira92

  44. 3. Process the canvas Remove green or blue background

  45. Pixel manipulation

  46. What is a pixel?

  47. @evaferreira92

  48. @evaferreira92 Pixel

  49. RGB Format

  50. @evaferreira92 = 227 45 145

  51. Alpha Channel @evaferreira92

  52. Ask for pixel information (RGBa) • The red value •

    The green value • The blue value • The Alpha value @evaferreira92
  53. Ask for pixel information (RGBa) • The red value •

    The green value • The blue value • The Alpha value  It will always return 255  … Unless we change it @evaferreira92
  54. Making Chroma happen. 1. Find the green pixels 2. Remove

    them 1. Alpha value of 0 @evaferreira92
  55. Find the green pixels

  56. Ask for pixel data @evaferreira92 function findGreen () { //

    Ask for color data let frame = this.ctx1.getImageData(0, 0, this.width, this.height); ... }
  57. @evaferreira92

  58. @evaferreira92 1,228,800 640 x 480 x 4 =

  59. @evaferreira92

  60. @evaferreira92

  61. @evaferreira92

  62. @evaferreira92 Alpha value

  63. @evaferreira92 R G B A R G B A R

    G B A R G B A R G B A
  64. @evaferreira92 } rgba(55, 74, 86, 1)

  65. @evaferreira92 } rgba(55, 74, 86, 1)

  66. Find the green pixels @evaferreira92 function findGreen () { ...

    let allData = frame.data.length / 4; for (let i = 0; i < allData; i++) { ... } }
  67. @evaferreira92 // Save all the data of 1.2m pixels let

    allData = frame.data.length / 4; // Go through it and identify it for (let i = 0; i < allData; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; // Ask if the greatest value is green if (g > r && g > b) { // Remove opacity frame.data[i * 4 + 3] = 0; } }
  68. Return the updated data @evaferreira92 function findGreen () { let

    frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { ... frame.data[i * 4 + 3] = 0; } this.ctx1.putImageData(frame, 0, 0); return; }
  69. @evaferreira92

  70. Improve it 1. Better light 2. Remove only if the

    green is > 100 @evaferreira92 if (g > r && g > b) { if (g > 100 ) { frame.data[i * 4 + 3] = 0; } }
  71. None
  72. @evaferreira92

  73. Live demo

  74. @evaferreira92

  75. MOAR Pixel Manipulation

  76. @evaferreira92

  77. None
  78. @evaferreira92

  79. Copy content into canvases @evaferreira92 <canvas id="canvas1" class="canvas canvas1"></canvas> <canvas

    id="canvas2" class="canvas canvas2"></canvas> <canvas id="canvas3" class="canvas canvas3"></canvas>
  80. Copy content into canvases @evaferreira92 function findColor (color) { let

    frame1 = this.ctx1.getImageData(0, 0, this.width, this.height); let frame2 = this.ctx1.getImageData(0, 0, this.width, this.height); let frame3 = this.ctx1.getImageData(0, 0, this.width, this.height); ... this.ctx1.putImageData(frame1, 0, 0); this.ctx2.putImageData(frame2, 0, 0); this.ctx3.putImageData(frame3, 0, 0); return; }
  81. @evaferreira92

  82. Turn what’s left into pink @evaferreira92 for (let i =

    0; i < l; i++) { ... if (g > r && g > b) { // Remove green } else { frame2.data[i * 4 + 0] = 200; frame3.data[i * 4 + 0] = 200; frame2.data[i * 4 + 2] = 200; frame3.data[i * 4 + 2] = 200; } } 0 = Red 1 = Green 2 = Blue 3 = Alpha
  83. @evaferreira92

  84. @evaferreira92

  85. @evaferreira92

  86. @evaferreira92

  87. Endless possibilities. Runs in your browser with JavaScript. No other

    software required.
  88. Thanks! :) • Slides: https://speakerdeck.com/evaferreira • Green screen online: https://chroma-code.netlify.com/

    • GitHub repo: https://github.com/evaferreira/chroma-code • @evaferreira92