Candy 0.7 Release
Ok, so it’s been a week since Candy 0.6 release and I’ve been hacking away at popcorn.candy.js for the past few days now. I’ll make this post nice and short.
Links
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
Candy 0.6 Release
It’s been awhile since my last post and release… still, better late than never. Right? 8P
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! =]
Candy 0.5 Release
Today is about love, chocolate… and Candy 0.5!
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)
Candy @ Version 0.4.5
Back again with a minor release. I am hoping to finish up 0.5 release by tonight. But I am currently having problems with adding a few of the effects I created in 0.3 (pixelate, pointillize, modulate, etc.) to the new plug-in architecture. Here is the current demo I have so far. For Candy 0.5, I still need to fix these bugs:
- 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…
6 Advanced JavaScript Techniques You Should Know
Check out this awesome/helpful blog post I found (for JavaScript programmers): http://sixrevisions.com/javascript/6-advanced-javascript-techniques-you-should-know/
Candy 0.5 on its way
I haven’t blogged in awhile, that’s why I’m letting out two posts today. This is basically a progress update on Candy (a Popcorn plugin).
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)
Candy 0.4 Bug Fix
About a week and half ago I released Candy 0.4, I mentioned to Dave Humphrey that I blogged about the release and sent the link to the demo via IRC #popcorn channel. Obviously Dave wasn’t the only one who clicked on the link. I got a response from one of the members on that channel that my demo wasn’t working on Firefox. And I just realized that I overlooked testing the demo on Firefox, maybe because I was testing it on Minefield, which worked perfectly. I also tested it on Chrome, which worked just as fine. In Firefox, my <canvas> wasn’t receiving any data from the <video> tag when play was pressed. Here is the error I got:
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>.
