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 turn the first image into thesecond image we need a $1,500 piece ofsoftware.
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)
User Experience:1. Chose your Video2. Convert to Frames (Needed for next version)3. Rotoscope4. Review5. Upload to video sharing site or Save local
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 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
Major limit, localStorage 5MB limit error looks like this and my program stops working. (must be smaller) to clear run localStorage.clear()
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
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!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)