Links

• Demos
• Candy 0.7 source code (Github)
• Candy wiki project page

0.6 –> 0.7 changes

• Added cool demos
• Added unit testing
• Moved candy (effects) source code above Popcorn function
• Combined pointillize-e + pointillize-r effects
• Fixed pointillize var size + spacing bug
• Added/Optimized/Completed rotate effect
• Added new effect: noise
• Added new effect: multi

What to expect for 0.8 release

• A music video using Candy effects library
• A complete and updated Wiki project page
• OldTV effect (noise + grayscale)
• Combine comic + comic-bw effects
• Optimize sepia effect (it seems to have performance issues)
• Optimize rotate effect (has issues with transitions)
• Add default values to effects with options

Sample screenshots

Okey well there has been a lot of bug fixes since 0.5 version. Here’s the 0.6 demo and repo. There are no more errors when a video runs because I’ve added a try-catch block to the main function: draw(). If any errors are caught the canvas will continuously keep trying to draw() until some of the video is rendered. Supposedly the loadeddata event listener should resolve the blank video bug I had in earlier versions, but I read in some forum that that listener is unpredictable sometimes. That’s why I turned to try-catch.

What else? Oh! The rotate effect has been added back in with no transition errors, as well as the RGB effect (optimized and working); this allows a user to control the level of Red, Green, and/or Blue in the video… an example of this would look like this:

.candy({      
  start: 6, // seconds        
  end: 10, // seconds        
  filter: 'rgb|100|0|0'      
})

So the above code would create Red saturated video.

The blur effect is also back and super optimized. I’m using a simple:

c.globalAlpha = 0.05;

to create a blurry’ish type of effect.

And lastly, the modulate effect has been added with no after effect to the video.

Two new effects that I added was a black/white comic effect and xray effect (black/white negative effect), which was obviously derived from comic and negative effects respectively.

To summarize the new AND improved video effects, here are the changes:

• Added rotate effect
• Added and optimized RGB effect
• Added and optimized Blur effect
• Added and optimized modulate effect
• Added black/white comic effect
• Added xray effect

As for previous code, I’ve continued to reduced the amount of global variables.

I’ve already start 0.7 (since I’m behind on releases), I’m thinking of adding an option to use multiple filters, for example: grayscale & greenscreen effect. I’m continuing to optimize, and continue to hack into this code.

I will be meeting with Dave Humphrey later on today to get some feedback on what he expects to see in the final version, Candy 1.0.

Well, till next time! =]

It’s final, Candy 0.5 has been released. Check out the demo and fork the repo from github.

What’s new?

• Added most of the effects from 0.1-0.3 Candy releases
• Reduced amount of global variables… this is still an issue that is being worked on
• Optimized some code in the effects

What to look for?

• Add/fix rest of video effects left out of Candy 0.5
• Reduce variables used in video effect source code
• Work on new architecture for adding/using video effects
• Add transitional video effects (fade in, fade out, etc.)?
• Use WebGL and CSS for video effects?

Till next time! 8)

• rotate effect
• tilt-shift effect
• rgb effect ( only optimize)
• blur effect
• pointillize effect
• pixelate effect
• modulate effect
• disperse effect (and optimize)
• when user clicks on video timeline <canvas> freezes

Every time I add one of the effects above, the <canvas> will freeze when done using it. This seems like a lot of work to do, but once I fix one of those effects, I’ll understand how to fix the rest of them. Ok, back to work…

I’ve been working on Candy 0.5 for a week now, little by little. You should expect to see most of the effects from 0.1-0.3 releases:

I will also be adding unit testing. Hmmm? What else? Oh, and optimized code. It will be a very small release, but at the same time it will show off what the Candy plugin is capable of.

Keep an eye out on my blog this weekend, I plan to release Candy 0.5. Well, till next time! 8)

I assumed that the play event was sending rendered data to the <canvas> tag already, I was totally wrong. So I did some research by Googling the failure code above and found a video event listener called loadeddata. It was exactly what I needed for this bug. I wrapped the play event around the loadeddata event:

<canvas> will now wait for the <video> to press play AND render data before applying any Candy to the <canvas>.

Check out the demo here.

How to Use Candy Plugin

It’s possible that this small tutorial may change as new releases come out. But here goes…

1. Download Popcorn from GitHub
2. Download Candy 0.4 Plugin from Github and save candy folder into Popcorns plugin folder (popcorn-js\plugins\)
3. In your HTML page <head> tag:

<script src=”../../popcorn.js”></script>
<script src=”popcorn.candy.js”></script>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
var p = Popcorn(‘#video’)
.play()
.candy({
start: [SECONDS], // seconds to start
end: [SECONDS], // seconds to end
filter: ‘[EFFECT]‘ //video effect from start to end
} )
}, false);
</script>

4. In your HTML page <body> tag:

<video src=”[URL]” width=”[WIDTH] height=[HEIGHT] />

Currently the Candy library only has two effects: grayscale and emboss. Here is the 0.3 Candy release demo, which has tons more of effects, they’re being ported as soon as I finish optimizing 0.4. Expect all the effects to be added in 0.5 release.

Please give the Candy Plugin a try and leave some feedback or add/edit/delete whatever you want in popcorn.candy.js. It’ll help in the development of the project. And if your running into any problems just ping me on IRC: kpangilinan, I’m normally on #seneca and #popcorn channels.

A week a of classes has passed and already I can see where things are going in terms of work load — it’s going to be a stressful =[ but fun semester =]. Being in my eight and last semester at Seneca College I only have two exams, which is not necessarily a good thing because those exams that I don’t need to take are converted into BIG semester projects. I know for a fact that my time and organization skills will play a big role in my success this semester.

Ok. Enough venting about my work load, and on to what I plan to do with the existing Candy.js 0.3 library.

Introduction to DPS911…

On Tuesday I met with Dave Humphrey and Anna Sobiepanek. Dave gave me a brief introduction to DPS911 – Open Source Project, “this course builds on the skills and knowledge developed in DPS909 by having the student take a partially developed open source project to completion. The student must have an open source project in progress, along with a faculty mentor and coordinator approval, in order to enroll. The student will learn what is necessary to take a working program and polish, refactor, and improve it on the way to making 1.0 product release”.

Dave also gave me a general idea of what he sees for Candy version 1.0 (plug-in architecture, use of WebGL, re-factored/optimized code), what he expects from me this semester (weekly blog post, bi-weekly meeting w/ Anna and himself, and a bi-weekly release of Candy.js) and lastly he gave me a few directions on where to start with all of this. He directed me to Anna, Anna sent me a few links to look at to familiarize myself with the new Butter.js and Popcorn.js plug-in architecture source code.

My Plan

• One or more weekly blog posts to encourage open source community to get involved
• Meet bi-weekly for project status updates with Dave and Anna
• Collaborate with CDOT: Dave, Anna, Scott Downe, Matthew Postil
• Designate a consistent time to work on DPS911 in my busy semester schedule
• Understand how Butter.js and Popcorn.js source code works, specifically the new plug-in code
• Develop my project management skills
• Develop a greater understanding of JavaScript
• ***Pass DPS911***
• And… have fun!

• Candy project wiki page
• Candy.js GIT Hub

It’s here once again! New and improved: Candy 0.3 — the HTML5 video effects extension to Popcorn.js. Before I begin to get into the effects and the functionality of the library and my experience working on this project. Let me say how this all started:

When the project launched in September, I was introduced to Brett Gaylor (team lead for the WebMadeMovies project) via email by Dave Humphrey (my professor for DPS909: Topics in Open Source Development). Daves initial assignment for me was to create a few simple effects to work/learn off from:
* Make the video black and white
* Make the video sepia tone
* Flip the video horizontal, vertical, etc.
* Add interlacing lines, to make it look like an old TV

And Bretts initial assignment for me was to create a pointillize effect, an effect that transforms an image into a series of uniformly colored dots. http://colmertech.com/support/help/pixamajig1/ImagePointillize.htm <–Exact link Brett sent me.

Black and white, sepia tone, rotating the video, and interlacing lines… piece of cake! I was able to create those effects (plus more) in Candy 0.1. In 0.2 it was about dynamic effects and brightness controlling. But still no pointilling video effects. It wasn’t until Brian Law (a fellow colleague and ComicBook.js author) presented a demo in class that I figured it all out. Brian based his code off of this code. But even though it was a working demo, I still felt it shouldn’t have been as complex to create (no matter how crazy the video effect looked). So I asked myself the obvious question, “How are they doing that?” It was simple!

In pseudo code:

• loop through x axisof frame
  • loop through y axis frame (this was to cover the whole image frame and not miss out on any pixels)
• store the color from position x,y
• apply color to shape and draw it onto <canvas>
• move to next video frame

Simple or what!? Obviously there’s more to it than that but that’s the main core of the code. From here I realized the potential of this code and I felt like I could manipulate and create any effect I wanted to! So yes, pointillize effect is apart of the Candy library (ver. 0.3). Along with these other effects:

• 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
• Negative -Turns positive RGB video colors into negative RGB
• Bright – Control brightness and darkness of video
• Emboss – Video is molded or carved in relief
• Tilt-Shift – refers to the use of camera movements on small- and medium-format cameras, and sometimes specifically refers to the use of tilt for selective focus, often for simulating a miniature scene.
• 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.
• Disperse -Spreads/Scatters pixels from original video

Here’s how to apply these effects to your <video> tag in your HTML in three simple steps:

1. Download candy.js
   
2. Import library into your header

   • <head>
         <script type="text/javascript" src="candy.js"></script>
     </head>

3. Place <video> tag  with these mandatory attribute into the <body>: src=”[URL]” + id=”candy” + data-apply-effect=”[EFFECT]” + width=”[WIDTH]” + height=”[HEIGHT]”
   • <video id=“candy” src=”bunny.ogv” data-apply-effect=“comic” width=“800″ height=“500″ />

Note: Candy is supported only with HTML5 video formats

Being a 7th semester BSD (Bachelor of Software Development) student, this project, this course, this programming language, this style of learning was a surprising all new experience to me. So in other words, a lot of learning/researching was needed here. Candy was written in javascript, at the beginning of the course I had no  knowledge of javascript whatsoever and it was until the last month of the semester Dave started teaching us javascript — and I *think I understand why he taught us so late in the semester. He was pushing to use the open source community. He wanted us to research things on our own and whenever we hit a brick wall he wanted us to get on IRC and ask questions or fork other developers source code from GIT Hub and try to implement it into your own code — he wanted us to use the open source community as a resource!

Overall this was a great learning experience…

I now look forward to DPS911 – Open Source Project. Candy 1.0?

    <script type="text/javascript;version=1.8" src="../candy.js"></script>