agitcraft

I’ve been working on building a library for bezier curves and editable paths. I’ll share more results later.

I thought it would be interesting to share some algorithms that can be used to solve problems you may run into while developing applications.

Given a variable number of numeric values, which of those values is the “outlier.” In this case, by outlier, we mean the most distant number. For example, given the set [1, 2, 3, 10], the outlying number is clearly 10 since it is further in value from the other numbers than any other.

How do we determine this? We calculate the sum of the distances from each value to each other value. That value looks like this:

The value in your list for which this expression is greatest is your outlier. This works for any set of values for which you can define a distance function. In the case of single values, the distance function is simply:

For coordinate values on a cartesian plane, the function is:

These can of course be extended into any number of dimensions depending on your needs. Here’s a demo that applies the idea.

In the demo above you can see that the outlying, or most distant, point glows in black. You can drag the points around and the outlying point will update accordingly. You can also see a skeleton drawn among the points demonstrating the values being calculated in our distance formula.

I was working recently on a project that called for a certain special effect. Perhaps you’re all familiar with the classic page curl?

There’s an excellent tutorial available for free online at O’Reilly. I followed it in a misguided attempt to create my own page curl in AS3. Unfortunately, AS3 seems to have some trouble rendering complex masking effects correctly, and I was unwilling to drop the project to AS2 to accommodate one pushy art director so we needed another option.

The art director suggested we do the animation manually in InDesign and export a series of still frames that we could use in Flash. It sounded simple enough, so we produced a 50 frame sequence to use for our page curl.

Looks nice, right? Well, we can do better. How? We don’t need to use every frame! We certainly can’t expect visitors to this site to download all 50 frames, especially since there are 4 images total that will need to page flip. But how many frames should we use, and which ones?

Because the art director on this was picky, and because I have no interest in the publish->phone call->debate->repeat cycle, I decided to dump responsibility in his hands in the most explicit way possible: I wrote an app that would let him pick all the parameters for the animation.

What the application does is present every frame available to the animation in the left column. When an item in the list is selected, a preview loads in the top left frame.

The right column shows every frame currently being used in the animation. Users can drag frames from the left column to the right column and back, and a preview animation is updated and played in the top right frame. The speed of the animation can be adjusted by a multiplier of the frame rate of the anticipated swf using a numeric stepper below the animation.

Every frame is numbered and automatically sorted based on its index so that the user doesn’t accidentally produce something worthless.

As I write this I’m waiting to be told which frames to use and how long to display them. I’m not sure how long it will take to get a response, but I know in the time between now and then what I won’t be working on. :)

Try out the Animation Optimizer or Download the Project File

Yet another edition of “What am I working on?”

This time around I’m actually trying to design an experiment.  A real experiment. I think. Allow me to explain.

The Example

Example 1

First of all, let’s call this what it is: a cropped selection from the wonderful “The Joy of Life” by the also wonderful Henri Matisse, duplicated side by side three times. Here’s what you may not have taken note of: Each of the images above was originally compressed at a different “quality” level according to Photoshop’s “Save for Web” feature. The cell on far right is has a quality of 100 (the maximum), the cell in the middle is 50, and the cell no the left is 0 (minimum).

The Explanation

At this size it is probably very hard to tell, but when you look at the images themselves it’s another story.

Quality of 100

The above is the same clip  (not scaled) presented at 100 percent quality.

Quality of 0

Here’s the same image presented at 0 percent quality. It should be easy to see the difference. The lower quality image (which has a higher compression and therefore a smaller file size) is noticeably grainy, muddy, and washed out.

Clearly the lower quality image would be unacceptable for use in any real project, but what about this one?

Quality of 50

I would feel fairly comfortable using the above in a project. We may even be able to reduce the quality even further and still end up with something acceptable.

Why would we want to do that?

The Problem

As I see it, the problem is that as developers we have two competing interests at play here:

1. Our work needs to look good. If we’re using images, this means that we must keep them to a certain standard of quality.
2. Our work needs to arrive fast. That is, we need to minimize the size of our projects to guarantee that when people consume them they don’t get bored waiting for them to load or display and go away.

The tension between these demands has been around for as long as people have been doing work online.

We may have preconceptions about how to best balance these demands (“I just export at the default”), but perhaps we can find an answer.

Perhaps we can figure out the optimal compression level for an image according to the needs of both file size and image quality.

The Project

I’m working on a web application right now that will attempt to discover that very thing. It’s evolving into the form of what I hope will be a formal experimental study.

I’m building it with the MultiCore edition of PureMVC. I’m using the wonderful Pipes and AsyncCommand utilities. Those are my shout outs.

I’ll announce it when it comes out. I expect to be done with it whenever.

Also, because Technorati is a hater, here’s a token: Z3A58QAU6DU6