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
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)