Rotoscopingin theBrowserSimpleRotoscoping           QuickTime™ and a                        decompressorin the            ...
What is rotoscoping?
Developed by the FleischerBrosInvented the technique in 1915 for Koko theClownOther examples..             QuickTime™ and ...
What a complex Roto lookslike
A simple use of RotoscopeThe Lightsaber effect in Star Wars
Challenge:Can we create a consumer app with which theuser can rotoscope 2 rectangles in thebrowser?Currently in order to t...
Goals: Acquire users video using API’s or youtube_dl (command line tool for multi-site support) Create closed quadratic sh...
User Experience:1.   Chose your Video2.   Convert to Frames (Needed for next version)3.   Rotoscope4.   Review5.   Upload ...
UI Mock Up:
Foundation 4 Interface
How do we make this?Notice working circles for handles to move the shape of glow
Solution: The Canvas!The Canvas can be placed on top of videoWith the canvas we will: Create Handles to control our shape ...
Interactive Curvehttp://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.h
Creating Points/Handles andStylefunction Init(quadratic) {              point = {p1: { x:100, y:250 },                 p2:...
Drawing the linesfunction DrawCanvas() {             ctx.clearRect(0, 0, canvas.width, canvas.height);             // cont...
Video Controls andStorageCanvas on top of videoPlay footageStep through per frameAllow user to draw on each frameStore the...
The following is a walk  through of Boaz Senders file, app.js. (as in I didn’t write it, but made changes)
Create the Video Element
Create localStorage in browser      (not using Backlift)      (not using Backlift)
saveFrameData to   localStorage
Render frame from  localStorage
Demo current state of      project
Major limit, localStorage 5MB limit error looks like this and my program stops working. (must be smaller) to clear run loc...
Improvements andFeatures Re-write Boaz Senders app.js to use a proper Re-write Boaz Senders app.js to use a proper DB to a...
Note to my designersblending modes are in the queue to be addedto CSS3   Screen   Multiply   Luminosity   Overlay   etc...
This NSS student would like thank... John Wark Adam Scott Andrew Butler students and mentors for a great first session!Tho...
Upcoming SlideShare
Loading in …5
×

Rotoscope inthebrowserppt billy

428 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
428
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rotoscope inthebrowserppt billy

  1. 1. Rotoscopingin theBrowserSimpleRotoscoping QuickTime™ and a decompressorin the are needed to see this picture.Browser
  2. 2. What is rotoscoping?
  3. 3. Developed by the FleischerBrosInvented the technique in 1915 for Koko theClownOther examples.. QuickTime™ and a GIF decompressor are needed to see this picture.
  4. 4. What a complex Roto lookslike
  5. 5. A simple use of RotoscopeThe Lightsaber effect in Star Wars
  6. 6. Challenge:Can we create a consumer app with which theuser can rotoscope 2 rectangles in thebrowser?Currently in order to turn the first image into thesecond image we need a $1,500 piece ofsoftware.
  7. 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. 8. User Experience:1. Chose your Video2. Convert to Frames (Needed for next version)3. Rotoscope4. Review5. Upload to video sharing site or Save local
  9. 9. UI Mock Up:
  10. 10. Foundation 4 Interface
  11. 11. How do we make this?Notice working circles for handles to move the shape of glow
  12. 12. Solution: The Canvas!The Canvas can be placed on top of videoWith 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. 13. Interactive Curvehttp://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.h
  14. 14. Creating Points/Handles andStylefunction 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. 15. Drawing the linesfunction 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. 16. Video Controls andStorageCanvas on top of videoPlay footageStep through per frameAllow user to draw on each frameStore the framesPresent Frames for the User to Review
  17. 17. The following is a walk through of Boaz Senders file, app.js. (as in I didn’t write it, but made changes)
  18. 18. Create the Video Element
  19. 19. Create localStorage in browser (not using Backlift) (not using Backlift)
  20. 20. saveFrameData to localStorage
  21. 21. Render frame from localStorage
  22. 22. Demo current state of project
  23. 23. Major limit, localStorage 5MB limit error looks like this and my program stops working. (must be smaller) to clear run localStorage.clear()
  24. 24. Improvements andFeatures 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. 25. Note to my designersblending modes are in the queue to be addedto CSS3 Screen Multiply Luminosity Overlay etc...
  26. 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)

×