boostworthyisryantaylor

The highly anticipated History Of America short film by the ever talented MK12 is finally up for public viewing. If you are into cowboys and astronauts and you enjoy trippy, visually appealing works of motion art…this piece is for you. Go watch!

Great work MK12.

Good times in Chicago are quickly approaching. Between the scheduled sessions and the massive attendance, it’s shaping up to be quite a conference. Representing the Schematic MPG will be myself, Alan Queen, Paul Newman, Robert Reinhardt, and Carlos Zumbado. I’ve never been to Chicago, so I’m pretty excited to check out the city. Morton’s anyone?

Hope to see you there!

Those of you who were fortunate enough to be at the Adobe onAIR Event here in Atlanta no doubt remember my buddy (and fellow co-worker) Alan Queen’s demo of his Adobe AIR application, DigiMix. In a nutshell, DigiMix is an audio editing application which allows you to import audio tracks and/or choose from a library of included loops to author your own content. DigiMix supports the creation of ‘projects’ and allows you to save them out so you can revisit them at another time. You also have the ability to apply a variety of different filters (such as delay) to any given track.

What makes DigiMix especially amazing is that it supports audio file types that Flash natively does not. The current public beta release allows for WAV files to be imported and used in a project and additional file types such as AIF are right around the corner. His technique for accomplishing this is brilliant and it has certainly been turning heads.

Beyond this big breakthrough, the application sports a very nice interface designed by The Depth, another good buddy of mine (however I don’t believe he is ready to disclose his true identity just yet).

All of this combined into one solidly written Flex/AIR application that smartly demonstrates the capabilities of Adobe’s new runtime technology really makes this application something worth checking out.

Whether you are in search of some new design or development inspiration - run, not walk to the website below and have a look at the beta version of DigiMix for yourself.

http://www.digimix.com

I have a collection of handy color spectrum classes in my personal library that are useful for creating a variety of color-picker components and what not. I thought I would share a few of them with you, as well as discuss the math that is involved in drawing a color spectrum.

Before diving in, I want to clarify how individual RGB channels are merged into one color value to ensure that everyone can follow along. Since each R, G, and B value is commonly represented by a value of '0' to '255', but when combined make up a single 24-bit color value, you need to understand a little bit about bitwise operations to understand how and why this is the case. In binary, you need 8 bits to represent a value that is up to 255, so '00000000' to '11111111'. That means to represent three of these 8-bit numbers, you need to combine them into one big value of 16.7 million colors. Reading from right to left in binary, the first eight digits are blue, the second set are green, and the third set are red, making up a range of black '000000000000000000000000' to white '111111111111111111111111'.

Now, a bitwise rotation will move a set of digits over to the left or right. So 255 (which is '000000000000000011111111') rotated left by 8 becomes '000000001111111100000000'. So in practice:

Moving along...

You may be familiar with the use of sine waves for animation-related tasks, but did you know that they are also the key to drawing a color spectrum? A full cycle of '0' to '2Pi' with some additional math for offsetting the wave position for each color channel will gracefully rotate through the various color values of the visible spectrum. Once you have calculated each of the individual RGB channels, you can OR the values together to form a single color value.

In the case of a horizontal color spectrum, you can calculate the angle for the RGB values by using the percentage of the width you are drawing and then converting the degree to radians.

Now that you have the necessary color information, you are ready to use the Flash drawing API to draw the data to the display. In the case of my 'ColorBar' class, I simulate the color bar seen in the Photoshop color palette (with the horizontal color spectrum and a vertical fade from white to black).

Here is the result:

Another nice way to present this data is in circular form (also known as a color wheel). We use the same method for calculating the RGB channels as before; however this time we can loop from '0' to '360' degrees and simply convert the degree to radians.

To render the circle itself, we use the angle of the color to plot the coordinate we are drawing the line to from the center of the circle.

Now, like last time, we just use the Flash drawing API to draw the data. Note that the critical piece here is the matrix which is used to transform the gradient for the line being drawn; it must be rotated to match the angle of the line itself.

And the result:

The math I have just demonstrated is extremely useful in working with color and can be used for much more than just simple little color-picker components. Below is a zip file that contains all the source for the color spectrums shown above.

Download 'boostworthy_color_demos.zip'

I hope you will find this both useful and inspiring.

I have been asked to present at the October AFPUG (Adobe Flash Platform User Group) meeting here in Atlanta. Here's what I will be presenting:

Programmatic Animation

Come explore the worlds of code and math and how a combination of the two can spawn a universe of beautiful, natural motion. We'll take an in-depth look at how programmatic animation works; from simple linear animations to complex sequences. We'll also explore the most efficient ways to render and manage your animations, ensuring that everything runs as smoothly as possible. Demonstrations will include simple 2D motion, trig and physics, sharing animations throughout an application, and bringing your animations into 3D space.

So if you are in the Atlanta area, come out for a fun night of sine waves and pizza. This is going to be a good one.

NOTE: I will post up about this again closer to October along with a confirmation of the date (it looks like it's going to be the 9th) as well as directions and a link to where you can RSVP.

Hope to see you there!

We have officially soft-launched version 3.0 of our company site this evening. You can zoom in and out and drag the page around to view the various "slides" of information. Be sure to check out the motion graphics reel as well.

http://www.schematic.com

Enjoy!

Recently I've been playing around with square root approximation algorithms in hopes that I could write one that is faster than the standard 'Math.sqrt' method. Here are the contenders:

The Babylonian Method

The classic Babylonian method iteratively performs some basic math until a solution is found. To increase performance, a threshold may be applied to cut off the iteration process once the result is reasonably accurate. Let's have a look at my implementation:

It's important to understand that the key to making these approximation methods as fast as possible lies in the ability to start with a good rough estimation. That closer we can get to the correct answer right off the bat, the fewer iterations it will take to solve. One of the best ways is to calculate 3 to the power of D, where D is the number of digits of the number we are finding the square root of. This may lead you to try this:

Unfortunately, the 'toString' method absolutely ruins the performance of the algorithm, so an alternative means must be used. In this case (and on the PV3D optimizations page) a value of 1/4 the size of the given number seems to be a decent substitute. Before benchmarking this method against the 'Math.sqrt' method, let's take a look at one other alternative as well.

The Bakhshali Approximation

The Bakhshali Approximation is basically two iterations of the Babylonian method. This is accomplished by starting with a value that is known to be very close to the end result. In order to get as close as possible, I implemented a lookup table which can be used for finding the nearest square integer.

With a lookup table created, here is the Bakhshali method:

It works by type casting the number value as an integer, then checking the cache for the integer's root. Next, a quick check is performed to see if the root that was found is in fact the correct result. If not, some additional math takes place to refine the approximated root to the correct value.

Now that we have seen the contenders, let's have a look at the test itself:

When 'nValue' is equal to '25', the average results were as follows:

Math.sqrt: 120ms (result: 5)
Babylonian: 167ms (result: 5.000000232305737)
Bakhshali: 177ms (result: 5)

Disappointing to say the least. Others have found the Babylonian method to actually perform better than 'Math.sqrt', however I have yet to see this in my results. I am going to continue to experiment with these in hopes that a better solution can be found. In the meantime, I recommend sticking with 'Math.sqrt' in your equations.

As the title suggests, Powerflasher has gone public with the beta of FDT 3. Information about the release is available here:

http://fdt.powerflasher.com/beta/

After getting setup, you may find my tutorial on AS3 Ant builds useful for optimizing your AS3 workflow in FDT 3. Happy coding!