Comicbook-js

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 (In Progress)

• Combine close-pixelate.js and video

Project Leader(s)

• Brian Law

Demos

Demo 0.1

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.

Useful Links

Manaipulating Green Screen Video

Close Pixelate

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.