lab.joelGillman.com

Map Function

joel gillman — Mon, 29 Sep 2008 22:39:41 +0000

If you’ve ever used Processing you’ve probably used the ‘map’ function. From the Processing Reference section it reads: “Re-maps a number from one range to another. In the example above, the number ‘25′ is converted from a value in the range 0..100 into a value that ranges from the left edge (0) to the right edge (width) of the screen.”

Unfortunately the function doesn’t exist in Flash, so I rewrote it. Why is this function useful? Lets say your mouse can move within the bounds of your stage from 0 to 550 pixels along its x-axis. You want a box to move back and forth from 100 to 200 pixels according to the position of the mouse. So when your mouse is halfway across the stage your box should be halfway between 100 and 200 pixels. You would simply use:

myBox.x = map(mouseX, 0, 550, 100, 200);

Easy as that!

Usage:
map(value, low1, high1, low2, high2);
low2 and high2 default to 0 and 1, respectively so you don’t have to put them in if you just want to normalize your value.

function map(value:Number,

             low1:Number,

             high1:Number,

             low2:Number = 0,

             high2:Number = 1):Number {

    //if the value and the 1st range low are equal to

    // the new value must be low2

    if (value == low1) {

        return low2;

    }

    //normalize both sets to a 0-? range

    var range1 = high1 - low1;

    var range2 = high2 - low2;

    //normalize the value to the new normalized range

    var result = value - low1;

    //define the range as a percentage (0.0 to 1.0)

    var ratio = result / range1;

    //find the value in the new normalized-range

    result = ratio * range2;

    //un-normalize the value in the new range

    result += low2;

    return result;

}

And super compressed (less readable, less space, works the same):

function map(v:Number, a:Number, b:Number, x:Number = 0, y:Number = 1):Number {

    return (v == a) ? x : (v - a) * (y - x) / (b - a) + x;

}

Why You Should Embed Your Fonts

joel gillman — Mon, 22 Sep 2008 22:52:36 +0000

I think this should go without saying, but not everyone knows how to do this. First I randomly downloaded a font from dafont.com to make sure that I would be using a font that 99% of people didn’t have. If you check out the Flash below you can see that the top text field is using some crazy bitmap-esque font. The text field on the bottom is actually using the same font but since I created it on the stage by hand (rather than dynamically with my code) it is probably displaying Times New Roman. Or some other default serif typeface. The the source code for a commented explanation.

AS3 Code:

import flash.display.Sprite;

import flash.text.AntiAliasType;

import flash.text.Font;

import flash.text.FontStyle;

import flash.text.FontType;

import flash.text.TextField;

import flash.text.TextFormat;

import flash.text.TextFormatAlign;

import flash.text.TextRenderer;

var format:TextFormat = new TextFormat();

var font:Font         = new bitmapRegular36(); //use the linkage name for the font in the library

var size:Number       = 36;

function init():void {

    format = makeTextFormat(size, font);

    makeTextField("This ridiculous font is dynamicly embedded.", format);

}

function makeTextFormat(__size:Number, __font:Font):TextFormat {

    var result:TextFormat = new TextFormat();

    result.font     = __font.fontName;

    result.size     = __size;

    result.kerning  = true; //not availible for non-embedded fonts

    return result;

 }

function makeTextField(_inputText:String, __format:TextFormat, __x:Number = 0, __y:Number = 0):void {

    var tf:TextField = new TextField();

    tf.x              = __x;

    tf.y              = __y;

    tf.width          = 450;

    tf.height         = 200;

    tf.type           = TextFieldType.INPUT;

    tf.wordWrap       = true;

    tf.multiline      = true;

    tf.selectable     = true;

    tf.embedFonts     = true;

    tf.antiAliasType  = AntiAliasType.ADVANCED; //not availible for non-embedded fonts

    tf.gridFitType    = GridFitType.PIXEL; //not availible for non-embedded fonts

    tf.text           = _inputText;

    //as a general rule, set the textFormat last

    tf.setTextFormat(__format);

    addChild(tf);

}

//start

init();

Download the source.

Original font by Sam Derrick.

False 3D in Flash: Displacement Maps

joel gillman — Wed, 17 Sep 2008 21:53:48 +0000

After seeing a post on the Puny Blog about displacement maps I became interested in how they did it. Unfortunately there wasn’t any source code so I’ve replicated the effect from scratch.
Turns out displacement maps are really hard to wrap your head around, so I’ll try to explain it very carefully and slowly.

I feel that Wikipedia is always a good place to start:

Displacement mapping is an alternative computer graphics technique in contrast to bump mapping, normal mapping, and parallax mapping, using a (procedural-) texture- or height map to cause an effect where the actual geometric position of points over the textured surface are displaced, often along the local surface normal, according to the value the texture function evaluates to at each point on the surface. It gives surfaces a great sense of depth and detail, permitting in particular self-occlusion, self-shadowing and silhouettes; on the other hand, it is the most costly of this class of techniques owing to the large amount of additional geometry.

Displacement maps are commonly used in 3D programs to make complicated geometry using simple 2D images. In those programs it actually morphs objects in a 3D-space (along a z-axis). But in our (so far) 2D flash world, it’s easier to think of the displacement maps as distortion. In plain English, you distort an image using a separate gray scale image.

I’m a visual thinker so I drew it out in my sketch book first:

This is the distortion I wanted to achieve. If you can’t read my chicken scratch it says, “x: -30 to 0 to +30″. Meaning that if every square were for 5 pixels, at the grid’s most distorted point the bottom-left point would be offset by -30 pixels along it’s ‘x’ axis while the bottom-right point is offset by +30 pixels. The bottom-middle is not offset along the ‘x’ axis.

After drawing out and writing down what would happen to each pixel, translating it into a gradient was pretty easy. A gray scale image consists of 255 levels, 0 being black and 255 being white. If you’re reading this you probably already know that. You also know that any digital image is made up of three channels: Red, green and blue. In Photoshop, you can see these channels individually by opening the channels window. This will be important, or at least handy to know later. SO, converting those levels into hex you get 00 (black, -30px offset), 80 (middle gray, 0 offset) and FF (white, +30 offset).

I didn’t want the whole image to be distorted, so part of the image needed to remain unchanged. This is where the middle-gray comes in. The gray fades in from the bottom to about a third of the way up the image and from there it is the same even color all the way up.

If you break it out into channels you get this:

For this example I am only using the RED and BLUE channels (though since the BLUE and GREEN are the same in this case, they are interchangeable). The BLUE channel goes from black to gray meaning that pixels will be moved in a negative direction, this is the first part of the skewed illusion. The second, and most important part, comes from the RED channel. Starting with the most extreme black (00) and fading to the most extreme red (FF), we get our most extreme distortion. Cowabunga!
From there, as we move up, the image fades more and more to middle-gray creating less and less distortion until there is no distortion at all.

At first I used a picture of some pretty flowers to test the distortion, but I realized that with a real photo, it wasn’t very obvious what had actually been morphed. I ditched it for a good ol’ grid. The grid makes it ridiculously easy to tell what’s been morphed, plus it looks like a cool Tron-esque world.

Check out the working demo. (click to turn the distortion on and off)

Download the source. All code is EXPLICITLY commented.

A few sites that I found helpful:

After all of that the one thing that I still don’t get is why when the image is distorted why it looks so crappy. I’ve tried using different image formats (jpeg vs png) and I’ve even dynamically drawn in a vector grid, but it still give me that pixelly crap. Anyone have an answer?

Sun Chips

joel gillman — Wed, 16 Apr 2008 03:05:01 +0000

I had been doing an interactive chess table using the ReacTable software, but that whole project was nothing but problems. It ended up needing more time and money than I had available. One day I’ll finish it…

This video is a test run of my new senior project. This goes back to my projects last semester when I was using little to no computers. I know, scary.

This project consists of solar powered creatures who collect light energy and then use the energy to make a movement. There are only two in this video as I’m in the process of making more so they can live in a small and bright colony of happy moving guys.

Sun Chips - Test Run 01 from Joel Gillman on Vimeo.

Emitters

joel gillman — Fri, 07 Mar 2008 07:48:49 +0000

For a project I needed to learn how to make an emitter (for particles). Specifically and emitter object that can be called several times so that there can be several unique emitters. I have made something similar before but it works more efficiently now. Videos only.

Mouse Emitter from Joel Gillman on Vimeo.

Emitter - Star Field from Joel Gillman on Vimeo.

Chess Clock

joel gillman — Sun, 02 Mar 2008 21:43:28 +0000

A friend and I have been playing Chess recently (neither of us are very good) and we decided we could use a chess clock to make the games faster and more stressful. We decided to make a game of it and see who could program a rudimentary (but working) chess clock. Here’s mine.

10 minutes per player is the default.
‘r’ to reset
’space’ to switch players
‘p’ to pause

Source 1 2 and 3

Circle Crawlers

joel gillman — Fri, 08 Feb 2008 22:59:43 +0000

Circle Crawlers spawns a large number of ‘crawlers’ and a smaller number of ‘anomalies’ who each crawl around the screen randomly. The large anomalies move slow and thus never get too far away from the center. The smaller crawlers can move faster and can break away from the center but always die before they get too far out from their point of origin.

Press ‘r’ to reset.

Source

Spawn Object

joel gillman — Wed, 30 Jan 2008 06:06:07 +0000

I was learning how to properly use objects and classes. Here there is a base class “Bug” and a class to extend it called “Crawler.” Class Bug is never directly called, I had planned on using it in the future, but never did. Also, I figured out how to use fonts for text in Processing.

Source

Playground

joel gillman — Fri, 25 Jan 2008 22:10:48 +0000

A simple Processing program where a bunch of circles are drawn around the mouse.

Source