Pat Cullen

The consolidated web feed of Pat Cullen.


Orderedlist.com?

Online CSS Optimizer / Optimiser

PHP Speedy | Aciddrop.com

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

John Resig - Processing.js

Markup Factory | CMS | Blog | Newsletter | Calendar | Registrations

P.O.R.K - Pork.dbObject

Mootools Block Fx

So I found http://gruppler.dojotoolkit.org/ - It looks really great - Only problem is I'm a proud Mootools fan... So I whipped together a mimic - Fx.Block.

Fx.Block is a simple way of applying morphs to a set of clipped blocks achieving a greater effect. I thought it might add consistency to use a similar build up as morph and tween. I know my code will serve as an abomination to the general Mootools community; I've most likely transgressed every second Mootools design pattern. The effects are slow and coded ugly. But I achived what I wanted: a start. I encourage everyone to please try do better and leave links to your work in the comments. Hopefully someone else can take this and reshape it into something more production ready.

Ideas moving forward:
  • Chaining effects to produce even more complex animations.
  • Better code and class structure that facilitates extending effects.
  • Fx.Block isnt my favourite name - How about Fx.Compund? Fx.Anim?

An example of using this code:
new Fx.Block($('element'), { effect: Fx.Block.Explode }).start();

If you didn't catch it up top, the code and examples can be found at:
http://b22222.com/files/mooblock.html

Petrol

Dinner :?

At the factory

Petrol :(

Mobile video with JME and MMAPI, Part 1 - Java World

I dont like games that i lose

Varicocele boy

self portrait

This is just a favourite of mine. Please respect the owners rights to this content.

I secretly like tea so i dont have to work as much

Java Image Comparison

I've recently purchased a wireless security camera which is very conveniently smaller than a cubic inch. Well the imagination runs wild once you've got this device,... Who can I spy on? What can I monitor? What does the domestic worker actually do when I'm at work?.. and so the list continues.

I played around in java's JMF for a day and soon had a small app that recorded one still frame per second. Now I could review the recorded images when getting home at the end of the day. Hovever, 1 frame per second equates to 36000 images over the 10 hour work day that I'm not at home! I don't really want to record motion video - yet. I'm still happy with working with images,.. albeit a lot of them. So now I've got a haystack of images, and presumably somewhere inside of them is the needle of interesting footage.

I searched pretty hard for a Java image comparison class or library and could not find anything. Just a whole bunch of forum posts declaring how advanced the topic can get. So sleeves up, I created my own rudimentary ImageCompare class. (Download Link). It's not bulletproof, and its not lightspeed, but for my purposes it's done the job perfectly.

The class breaks up the images into smaller regions and compares the brightness of each corresponding region. If any particular pair of regions are vastly different then something must have changed in that part of the image.

How to use:

// Create a compare object specifying the 2 images for comparison.
ImageCompare ic = new ImageCompare("c:\\test1.jpg", "c:\\test2.jpg");
// Set the comparison parameters.
// (num vertical regions, num horizontal regions, sensitivity, stabilizer)
ic.setParameters(8, 6, 5, 10);
// Display some indication of the differences
in the image.
ic.setDebugMode(2);
// Compare.
ic.compare();
// Display if these images are considered a match according to our parameters.
System.out.println("Match: " + ic.match());
// If its not a match then write a file to show changed regions.
if (!ic.match()) saveJPG(ic.getChangeIndicator(), "c:\\changes.jpg");


The setParameters() accepts four parameters.
  1. The number of vertical columns in the comparison grid.
  2. The number of horizontal rows in the comparison grid.
  3. A threshold value. If the difference in brightness exceeds this then the region is considered different.
  4. A stabilization factor. In future I will calculate this automatically since it is proportional to parameters 1 and 2.
setDebugMode() is completely optional and only really usefull while designing your parameters.

After running compare(), match() will hold the result.

Example:
The above code was run on the following two images:




The console output looked like this:
|0,0,0,0,0,0,1,0|
|0,0,0,0,0,0,0,1|
|0,0,0,0,0,0,0,3|
|0,0,0,0,0,1,1,8|
|0,0,0,0,0,0,0,8|
|0,0,0,0,0,1,0,0|
Match: false
... and the image output (changes.jpg) looked like this:



On my todo list:
  • Provide an array/vector of changed regions, or number of changed regions.
  • Heuristically determine a stabilizing factor, thus not having to specifying one.
  • Allow for the input of area vectors before comparison for the purpose of excluding or only checking these areas.
  • I'd also like to integrate this into a more real time solution that then exposes events and the like.

What you see here is a very alpha stage development. Take it and use it if you like, but do so at your own risk,.. or frustration. I'll try post some updates to this code as and when significant changes have been made.