Take on me

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
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.
26. Interactive media Take Rotoscoping' soul into the web
29. Chroma Key
30. Chroma Key • Green or blue background • REALLY good light  Natural light is the devil. @evaferreira92
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; } }
72. @evaferreira92
73. Live demo
74. @evaferreira92
75. MOAR Pixel Manipulation
76. @evaferreira92
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