Your SlideShare is downloading. ×
0
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rotoscope inthebrowserppt billy

111

Published on

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

No Downloads
Views
Total Views
111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rotoscopingin theBrowserSimpleRotoscoping QuickTime™ and a decompressorin the are needed to see this picture.Browser
  • 2. What is rotoscoping?
  • 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. What a complex Roto lookslike
  • 5. A simple use of RotoscopeThe Lightsaber effect in Star Wars
  • 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. 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 Video2. Convert to Frames (Needed for next version)3. Rotoscope4. Review5. 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 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. Interactive Curvehttp://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.h
  • 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. 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. 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. 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 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. Note to my designersblending modes are in the queue to be addedto 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)

×