Difference between revisions of "Comicbook-js"
(→Demo Details) |
(→Demos) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 13: | Line 13: | ||
===Release 0.1=== | ===Release 0.1=== | ||
| − | *A video move through 3 divs on a page | + | *A video move through 3 divs on a page |
*Use timecodes provided by Brett execute javascript | *Use timecodes provided by Brett execute javascript | ||
*Create an effect to resemble comic books | *Create an effect to resemble comic books | ||
| + | |||
| + | ===Release 0.2=== | ||
| + | *Combine close-pixelate.js and video | ||
| + | |||
| + | ===Release 0.3=== | ||
| + | *Optimize rendering loop | ||
==Project Leader(s)== | ==Project Leader(s)== | ||
| Line 23: | Line 29: | ||
==Project Contributors(s)== | ==Project Contributors(s)== | ||
| − | == | + | ==Demos== |
[http://matrix.senecac.on.ca/~blaw1/osd600/ Demo 0.1] | [http://matrix.senecac.on.ca/~blaw1/osd600/ Demo 0.1] | ||
| Line 30: | Line 36: | ||
The video time is being tracked which will eventually be used to execute javascript at time intervals. | The video time is being tracked which will eventually be used to execute javascript at time intervals. | ||
| + | |||
| + | |||
| + | [http://matrix.senecac.on.ca/~blaw1/osd600/0-2/example.html Demo 0.2] | ||
| + | |||
| + | This demo combines the close pixelate library with video and canvas. | ||
| + | |||
| + | [http://matrix.senecac.on.ca/~blaw1/osd600/0-3/example.html Demo 0.3] | ||
| + | |||
| + | An optimized version using a back buffering technique. | ||
==Useful Links== | ==Useful Links== | ||
| Line 36: | Line 51: | ||
[http://desandro.com/resources/close-pixelate/ Close Pixelate] | [http://desandro.com/resources/close-pixelate/ Close Pixelate] | ||
| + | |||
| + | [http://www.photoshoproadmap.com/Photoshop-blog/2007/09/13/give-your-photos-a-retro-comic-book-effect/ Halftone/Duotone effect] | ||
==Project News== | ==Project News== | ||
Latest revision as of 12:46, 11 December 2010
Contents
OSD600 Project Plan
ComicBook.js
HTML5/Video Comic Book
Project Description
Mozilla is creating a web-based comic book application, which uses video, canvas, and other HTML5 features. This project will help create the back-end JavaScript necessary to make things work with the video and canvas in the page.
Releases
Release 0.1
- A video move through 3 divs on a page
- Use timecodes provided by Brett execute javascript
- Create an effect to resemble comic books
Release 0.2
- Combine close-pixelate.js and video
Release 0.3
- Optimize rendering loop
Project Leader(s)
- Brian Law
Project Contributors(s)
Demos
When the Play button is pressed on the video the frames from that video will be written to a number of canvases. The first canvas is just a straight frame by frame copy of the video. The second canvas is trying to mimic a comic book style by modifying frames to create solid colours. The last row of canvases are having the video frames written to them with offsets to give the effect of a moving video.
The video time is being tracked which will eventually be used to execute javascript at time intervals.
This demo combines the close pixelate library with video and canvas.
An optimized version using a back buffering technique.
Useful Links
Manaipulating Green Screen Video
Project News
Current Issues
- I've combined the close pixelate library together with video but it's quite choppy. This is probably because of the amount processing required to render the effect.
