1. Rotoscoping
in the
Browser
Simple
Rotoscoping QuickTime™ and a
decompressor
in the
are needed to see this picture.
Browser

2. What is rotoscoping?

3. Developed by the Fleischer
Bros
Invented the technique in 1915 for Koko the
Clown
Other examples..
QuickTime™ and a
GIF decompressor
are needed to see this picture.

4. What a complex Roto looks
like

5. A simple use of Rotoscope
The Lightsaber effect in Star Wars

6. Challenge:
Can we create a consumer app with which the
user can rotoscope 2 rectangles in the
browser?
Currently in order to turn the first image into the
second image we need a $1,500 piece of
software.

7. Goals:
Acquire users video using API’s or youtube_dl
(command line tool for multi-site support)
Create closed quadratic shapes.
Straight, and curved lines with controls
Step through frame by frame of users footage
and store the results
Present the work for the users approval
Output results to local machine or preferred
video site. (Using API of video site)

8. User Experience:
1. Chose your Video
2. Convert to Frames (Needed for next version)
3. Rotoscope
4. Review
5. Upload to video sharing site or Save local

9. UI Mock Up:

10. Foundation 4 Interface

11. How do we make this?
Notice working circles for handles to move the shape of glow

12. Solution: The Canvas!
The Canvas can be placed on top of video
With the canvas we will:
Create Handles to control our shape
arc (2 arc’s make a circle)
Create points and controls, draw different
lines types
lineTo()
quadraticCurveTo()
bezierCurveTo()
Fill the shape with a style similar to a saber

13. Interactive Curve
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.h

14. Creating Points/Handles and
Style
function Init(quadratic) {
point = {p1: { x:100, y:250 },
p2: { x:400, y:250 }};
if (quadratic) {point.cp1 = { x: 250, y: 100 };}
else {point.cp1 = { x: 150, y: 100 };
point.cp2 = { x: 350, y: 100 };}
// default styles
style = {
curve: { width: 6, color: "#333" },
cpline: { width: 1, color: "#C00" },
point: { radius: 10,
width: 2, color: "#900",
fill: "rgba(200,200,200,0.5)",
arc1: 0, arc2: 2 * Math.PI }}
// line style defaults
ctx.lineCap = "round";
ctx.lineJoin = "round";
// event handlers
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
DrawCanvas();
}

15. Drawing the lines
function DrawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// control lines
ctx.lineWidth = style.cpline.width;
ctx.strokeStyle = style.cpline.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
ctx.lineTo(point.cp1.x, point.cp1.y);
if (point.cp2) {
ctx.moveTo(point.p2.x, point.p2.y);
ctx.lineTo(point.cp2.x, point.cp2.y);}
ctx.stroke();
// curve
ctx.lineWidth = style.curve.width;
ctx.strokeStyle = style.curve.color;
ctx.beginPath();
ctx.moveTo(point.p1.x, point.p1.y);
if (point.cp2) {
ctx.bezierCurveTo(point.cp1.x, point.cp1.y,
point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
}
ctx.stroke();

16. Video Controls and
Storage
Canvas on top of video
Play footage
Step through per frame
Allow user to draw on each frame
Store the frames
Present Frames for the User to Review

17. The following is a walk
through of Boaz
Senders file, app.js.
(as in I didn’t write it, but made changes)

18. Create the Video Element

19. Create localStorage in browser
(not using Backlift)
(not using Backlift)

20. saveFrameData to
localStorage

21. Render frame from
localStorage

22. Demo current state of
project

23. Major limit, localStorage
5MB limit error looks like this and my program
stops working. (must be smaller)
to clear run localStorage.clear()

24. Improvements and
Features
Re-write Boaz Senders app.js to use a proper
Re-write Boaz Senders app.js to use a proper
DB to avoid size limit of localStorage (5MB)
Adjust canvas and controls based on the video
size
Place control handles on dif layer than saber,
hide at capture time
Variable to set number of sabers
Color controls for each saber
Improve review playback
Export/Save comped videos using API’s
Re-make using Ruby on Rails

25. Note to my designers
blending modes are in the queue to be added
to CSS3
Screen
Multiply
Luminosity
Overlay
etc...

26. This NSS student would like thank...
John Wark
Adam Scott
Andrew Butler
students and mentors for a great first session!
Those who helped with SaberMe
Cade Truitt
Christopher Cotton
Adam Scott (clear localStorage)
Boaz Sender (canvas over video and localStorage
solution)
Craig Buckler (curve creation and controls on
canvas)