Difference between revisions of "Candy-js"

From CDOT Wiki
Jump to: navigation, search
(Created page with '== Project Name == Sample Project -- This is a template only! == Project Description == Description should be no longer than a paragraph. Include links to any relevant on-lin…')
 
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Project Name ==
 
== Project Name ==
  
−
Sample Project -- This is a template only!
+
Candy.js Library
  
 
== Project Description ==
 
== Project Description ==
  
−
Description should be no longer than a paragraph. Include links to any relevant on-line resources.  For example, http://google.com or [http://developer.mozilla.org MDC].
+
The Candy.js project is an effects extension to [http://www.drumbeat.org/content/popcorn-js-semantic-video-demo Popcorn.js].
  
 
== Project Leader(s) ==
 
== Project Leader(s) ==
  
−
Name(s) of primary people working on the project. If you want to join a project as leader, discuss with other leaders first. Include links to personal pages within wiki
+
Project Leader: [http://zenit.senecac.on.ca/wiki/index.php/User:Kpangilinan Kenneth Pangilinan]
 +
 
 +
Contacts: [http://www.etherworks.ca/ Brett Gaylor], [http://scottdowne.wordpress.com/ Scott Downe], [http://annasob.wordpress.com/ Anna Sobiepanek], [http://vocamus.net/dave/ Dave Humphrey]
  
 
== Project Contributor(s) ==
 
== Project Contributor(s) ==
 +
Pointallize Effect: Contribution made by [http://zenit.senecac.on.ca/wiki/index.php/User:Blaw1 Brian Law] who is working on [http://zenit.senecac.on.ca/wiki/index.php/Comicbook-js ComicBook.js], his [http://matrix.senecac.on.ca/~blaw1/osd600/0-2/example.html demo] allowed me to analyze his source code and come up with the [http://colmertech.com/support/help/pixamajig1/ImagePointillize.htm pointillism effect].
  
−
Name(s) of people casually working on the project, or who have contributed significant help.  Include links to personal pages within wiki
+
== Project Details ==
  
−
NOTE: only Project Leader(s) should add names here. You '''can’t''' add your own name to the Contributor list.
+
Various projects using video on the web need to create innovative and non-standard effects to transform the video, for example, applying filters, altering the video, using 2D and 3D effects, etc. This project will create a library that provides some commonly needed effects (e.g., colour filters, tilt shifting, etc.). This project will overlap and support the HTML5/Video Comic Book project. The follow is a list of Candy effects:
 +
* Normal - Displays the original video used in the <video> tag
 +
* Comic -Darkens the dark, lightens the light, makes it look cartoony
 +
* Grayscale -Black and white effect
 +
* Sepia -Dark brown grey color filter
 +
* Green Screen – Replaces green screen background for an image
 +
* Rotate – Flips the video horizontally, and/or vertically
 +
* Negative -Turns positive RGB video colors into negative RGB
 +
* Bright – Control brightness and darkness of video
 +
* Emboss – Video is molded or carved in relief
 +
* Blur – Defocus on video
 +
* RGB Filter – Manually add/subtract to RGB values
 +
* Modulate – varies the brightness of an image’s pixels in a periodic way. It can be used add “Venitian blind”, “scanline” or “mesh” type effects.
 +
* Pixelate – transforms an image into a grid of uniformly colored rectangles. So named because it simulates increasing the size of pixels in the image.
 +
* Pointillize - Small, distinct dots of pure color that are applied in patterns to form the video
 +
* Divide - Divides the video into smaller videos
 +
* Multichannel - Allows user to mini video and position it on top the original video
 +
* Xray - Black and white effect mixed with the negative effect
 +
* OldTV - Black and white video with some noise
 +
* Noise - Random variation of brightness or color information in the video
  
−
== Project Details ==
 
  
−
Provides more depth than the Project Description.  This is the place for technical discussions, project specs, or other details.  If this gets very long, you might consider breaking this part into multiple pages and linking to them.
+
===Project Plan===
  
−
== Project News ==
+
{| border="1"
 +
|-
 +
| '''Release'''
 +
| '''Download Release'''
 +
| '''Features/Points Addressed'''
 +
|-
 +
| 0.1
 +
| http://github.com/kpangilinan/Candy
 +
| Demos the Candy library effects
 +
|-
 +
| 0.2
 +
| https://github.com/kpangilinan/Candy/tree/popit
 +
| 0.1 Release + dynamically changing the effects + dynamically changing green screen effect + brightness controller
 +
|-
 +
| 0.3
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
| 0.1 Release + 0.2 Release + RGB filter + Emboss + Blur + Tilt-Shift + Disperse + Modulate + Pixelate + Pointillize
 +
|-
 +
| 0.3
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
| 0.1 Release + 0.2 Release + RGB filter + Emboss + Blur + Tilt-Shift + Disperse + Modulate + Pixelate + Pointillize
 +
|-
 +
| 0.4
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
| Convert Candy into Popcorn plugin
 +
|-
 +
| 0.5
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
| Optimized video effects
 +
|-
 +
| 0.6
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
| Optimized video effects + Xray + Black/White Comic effect
 +
|-
 +
| 0.7
 +
| https://github.com/kpangilinan/Candy/tree/0_3
 +
|
 +
|-
  
−
This is where your regular updates will go.  In these you should discuss the status or your work, your interactions with other members of the community (e.g., Seneca and Mozilla), problems you have encountered, etc.
+
|}
  
−
Put detailed technical information into the Project Details page (i.e., update it as you go), and save this section for news about participation in the project.
+
== Project News ==
 +
'''September:'''
 +
*Implemented original video onto canvas
 +
*Implemented cartoon effect
 +
*Implemented grayscale effect
 +
*Implemented sepia effect
 +
*Implemented green screen effect
 +
*Implemented flip effect
 +
'''October:'''
 +
*Setup GIT Hub repository
 +
*Implemented negative effect
 +
*Implemented interlaced effect
 +
*Released Candy version 0.1!
 +
'''November:'''
 +
*Added 'data-apply-effect' attribute to the <video>
 +
*Modularize source code in Candy.js library
 +
*Dynamically change brightness level
 +
*Dynamically change green screen background
 +
*Dynamically change videos effects
 +
*Released Candy version 0.2!
 +
'''December:'''
 +
*Implemented Color Filter
 +
*Implemented Emboss Effect
 +
*Implemented Blur Effect
 +
*Implemented Tilt-Shift Effect
 +
*Implemented Disperse Effect
 +
*Implemented Modulate Effect
 +
*Implemented Pixelate Effect
 +
*Implemented Pointillize Effect
 +
*Released Candy version 0.3!

Latest revision as of 16:05, 24 April 2011

Project Name

Candy.js Library

Project Description

The Candy.js project is an effects extension to Popcorn.js.

Project Leader(s)

Project Leader: Kenneth Pangilinan

Contacts: Brett Gaylor, Scott Downe, Anna Sobiepanek, Dave Humphrey

Project Contributor(s)

Pointallize Effect: Contribution made by Brian Law who is working on ComicBook.js, his demo allowed me to analyze his source code and come up with the pointillism effect.

Project Details

Various projects using video on the web need to create innovative and non-standard effects to transform the video, for example, applying filters, altering the video, using 2D and 3D effects, etc. This project will create a library that provides some commonly needed effects (e.g., colour filters, tilt shifting, etc.). This project will overlap and support the HTML5/Video Comic Book project. The follow is a list of Candy effects:

  • Normal - Displays the original video used in the <video> tag
  • Comic -Darkens the dark, lightens the light, makes it look cartoony
  • Grayscale -Black and white effect
  • Sepia -Dark brown grey color filter
  • Green Screen – Replaces green screen background for an image
  • Rotate – Flips the video horizontally, and/or vertically
  • Negative -Turns positive RGB video colors into negative RGB
  • Bright – Control brightness and darkness of video
  • Emboss – Video is molded or carved in relief
  • Blur – Defocus on video
  • RGB Filter – Manually add/subtract to RGB values
  • Modulate – varies the brightness of an image’s pixels in a periodic way. It can be used add “Venitian blind”, “scanline” or “mesh” type effects.
  • Pixelate – transforms an image into a grid of uniformly colored rectangles. So named because it simulates increasing the size of pixels in the image.
  • Pointillize - Small, distinct dots of pure color that are applied in patterns to form the video
  • Divide - Divides the video into smaller videos
  • Multichannel - Allows user to mini video and position it on top the original video
  • Xray - Black and white effect mixed with the negative effect
  • OldTV - Black and white video with some noise
  • Noise - Random variation of brightness or color information in the video


Project Plan

Release Download Release Features/Points Addressed
0.1 http://github.com/kpangilinan/Candy Demos the Candy library effects
0.2 https://github.com/kpangilinan/Candy/tree/popit 0.1 Release + dynamically changing the effects + dynamically changing green screen effect + brightness controller
0.3 https://github.com/kpangilinan/Candy/tree/0_3 0.1 Release + 0.2 Release + RGB filter + Emboss + Blur + Tilt-Shift + Disperse + Modulate + Pixelate + Pointillize
0.3 https://github.com/kpangilinan/Candy/tree/0_3 0.1 Release + 0.2 Release + RGB filter + Emboss + Blur + Tilt-Shift + Disperse + Modulate + Pixelate + Pointillize
0.4 https://github.com/kpangilinan/Candy/tree/0_3 Convert Candy into Popcorn plugin
0.5 https://github.com/kpangilinan/Candy/tree/0_3 Optimized video effects
0.6 https://github.com/kpangilinan/Candy/tree/0_3 Optimized video effects + Xray + Black/White Comic effect
0.7 https://github.com/kpangilinan/Candy/tree/0_3

Project News

September:

  • Implemented original video onto canvas
  • Implemented cartoon effect
  • Implemented grayscale effect
  • Implemented sepia effect
  • Implemented green screen effect
  • Implemented flip effect

October:

  • Setup GIT Hub repository
  • Implemented negative effect
  • Implemented interlaced effect
  • Released Candy version 0.1!

November:

  • Added 'data-apply-effect' attribute to the <video>
  • Modularize source code in Candy.js library
  • Dynamically change brightness level
  • Dynamically change green screen background
  • Dynamically change videos effects
  • Released Candy version 0.2!

December:

  • Implemented Color Filter
  • Implemented Emboss Effect
  • Implemented Blur Effect
  • Implemented Tilt-Shift Effect
  • Implemented Disperse Effect
  • Implemented Modulate Effect
  • Implemented Pixelate Effect
  • Implemented Pointillize Effect
  • Released Candy version 0.3!
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=Candy-js&oldid=63524"