C# + f = :)

CATiledLayers

2011-09-20T19:13:00.001-04:00

I've been working on a class in an iOS app, that displays a series of slides with one large image per slide. The user has the ability to swipe left or right and navigate to a new slide. The images were large enough that there was a noticeable lag. After much research I discovered CATiledLayers.
In short, a CATiledLayer will appropriately blend sections of an image together while a user is zooming and panning an image. Only small sections, or tiles, of the image are loaded into memory and onto the screen. This saves a lot of memory overhead as well as an allocation and a decompression lag in the main thread.

Apple gives you a nice head start on this functionality, but the don't give you everything. In my current iOS project, I am downloading images from a CMS. Once each image is downloaded, I slice it up accordingly using CGDrawing methods, then I cache them to disk, naming them imagename_row#_column#.png. In all, I saved four levels of detail for each image. This means that each image is resized, sliced up, and cached at four different resolutions (just think of having to do that in photoshop...for every client image). Then in the CATiledLayer implementation, it looks for the appropriate images to load based upon scale and position of the UIScrollView. It works really well and makes those high-res images load quickly.

Ocean Isles

2011-06-19T16:12:00.000-04:00

I've been dreaming of an oceanic island scene in Unity. Here I really didn't spend too much time on the models, but instead focused on implementing a nice camera fly courtesy of iTween, as well as some nice 3D sounds. I also implemented some basic pov manipulation scripts but they are buggy at best. This project was built in a days time. I deployed this to my iPad2 and it swims along at 60 fps...even when the camera is up next to the fire particles;). Click the image to give it a try. Make sure your speakers are on. I recommend headphones.

Unity Christmas Tree Scene

2010-12-24T21:16:00.000-05:00

Watch it on YouTube here.
I modeled this scene in Blender, imported it to Unity, light mapped it with beast, added occlusion culling and then ported it to the iPad. I am pleased to say that it gets a very high frame rate on the iPad.

iPad functionality includes: swipe finger to rotate the scene left or right. Touch on an area of interest to zoom in. Tilt the iPad up, down, left or right to do a smooth look in that direction. Pinch fingers together to zoom back out to the original point of view. Clicking on the end table reveals a Christmas card in the drawer.

I did not use any tween libraries for any of this functionality. I wanted to keep it very light for the iPad, so instead I used Unity's linear interpolation functions to calculate the distance for each movement. I wrote all the functionality in C#, as always.

This was created for my wife as a Christmas card on the iPad. Merry Christmas!

Asteroid Field

2010-11-29T21:35:00.002-05:00

I just had to make an Earth with the sun and an asteroid field. I mean..wouldn't you? The camera fly is completely scripted. The asteroids are randomly placed.
Earth, cloud and specular map courtesy of oera.net (which seems to be down as of the moment of this post)

Cornel Box Fly

2010-11-23T18:37:00.004-05:00

I created a simple bluish-grey Cornel Box and lightmapped it with beast lightmapper in Unity. I played around with the settings a lot more in order to get a very nice over head lit look. I was able to script the camera fly in only a few lines of code. A nice polished piece for just a little bit of work! Give it a click and watch!

Unity City

2010-11-15T18:26:00.006-05:00

Modeled by Sean McDonald
Before hand, this scene had one directional light and quite a few draw calls that slowed performance. I had the camera in forward render mode (no point lights so I don't need deferred render mode). Then I light mapped the entire scene and changed the rendering path to Vertex Lit. This immediately gave me a much better frame rate. I then baked in Occlusion Culling so that only the geometry that is seen by the camera is sent to the render pipeline which yielded a well optimized environment

Unity3D Studio Apartment

2010-08-10T15:38:00.002-04:00

I modeled and UV mapped this 3D Studio with Blender and assembled it in Unity.
You can click and drag the sliders to dynamically change the room lighting. Click on a view button to see parts of the apartment.

Click here to view the interactive scene!

or watch the youtube video below.

Firewall

2010-04-14T09:20:00.005-04:00

Wow! Unity is just amazing. Sean McDonald modeled the sidewinder missile used in this game. Firewall was inspired by Unity's free Detonator Library. I got the metal texture for the blocks from desizntech.info. Which brings me to my next point, Unity makes mip and bump mapping a snap! Drag a texture onto a 3D asset, then click on the image in your library and click generate bump map...done! The UI even has a slider to control mip mapping and shininess of the bump mapping.

Firewall uses a lot of object oriented C# scripting for each gameObject. It's very easy to get things to work once you understand Vector3s and Quaternions. What's the hardest part? Any GUI or HUD work is really just a pain!

The levels in Firewall are XML driven, you can sneak a peak from my levels.xml document.
Each level is made up of a node, where each | represents the end of a line and each number is a stack of cubes.
...........|
...45554...|
...........|
...........|
...........|
...........|
...........|

Functionality:
Getting the missile to shoot at the mouse, but take on the cameras transform:

GameObject rocket = Instantiate(Resources.Load("Rocket")) as GameObject;
rocket.rigidbody.transform.position = camera.transform.position;
rocket.rigidbody.transform.rotation = Quaternion.LookRotation(Camera.main.ScreenPointToRay(Input.mousePosition).direction);
rocket.rigidbody.velocity = transform.TransformDirection(new Vector3(r.direction.x * 50, r.direction.y * 50, r.direction.z * 50));

Getting the 3D object that is under the mouse, to turn red. Also referencing variables in a dynamic prefab's class:

//raycast directly under the mouse for a distance of 100, return the first object that is hit.
Ray r = Camera.main.ScreenPointToRay(Input.mousePosition);
RaycastHit hit;

//if the ray hit an object, parse it as a Cube (Cube is the .cs class for the block prefab) and selected is a public bool.
if(Physics.Raycast(r, out hit, 100))
(hit.collider.gameObject.GetComponent("Cube") as Cube).selected = true;

//inside of Cube.cs on update we have the following:
rigidbody.renderer.material.color = selected ? Color.red : Color.white;

Shark Attack Island

2010-04-06T09:59:00.018-04:00

My first experiments with Unity3D revealed that it is extremely easy to get a 3D scene set up and running. Texturing 3D objects is as easy as drag and drop. Need a first person shooter control? Just drag and drop the fps walker prefab into your scene and tweak the variables! Sean McDonald did all the 3D modeling for this (except for the palm trees, those were Unity default materials). We found that Unity was able to import .3ds, .dae, and .fbx and even .ma and .mb if you have Maya installed on the same computer that Unity is on.

Current known bugs: Sharks swim through the island.
Please feel free to submit bugs.

I scripted the games animations through C#.

Ocean Movement:

Shark Movement

Player Throws Coconut at Mouse

For the explosions I used http://unity3d.com/support/resources/unity-extensions/explosion-framework

Socket Server/Client Chat

2010-03-01T17:31:00.009-05:00

I've written a Socket Server in C# and a Socket Client in Actionscript 3.0
What you see in this picture is a server interface in the middle that logs server start, client connections and disconnections.
It uses TCP traffic to a central server that relays messages to all clients currently connected to it. It acts as a chat program, but can be used to interface Adobe Flash and Microsoft .Net together! Using this concept, one could even make a Flash network game. Although the server app must be run on a Windows platform, the flash chat client works both on Windows and Macintosh. If anyone would like some code samples, please inquire.

Valentines Day

2010-02-02T16:39:00.003-05:00

I'm a total nerd. I made this for my fiancée as fun way to find out where we are going to Valentines Day.
She has to unscramble four pictures one at a time. The four pictures are a Saint Helmet, Elmo, a plate with 2 steaks on it and House (the Dr. on the TV show). So you put them all together?
St. Elmo's Steak House!

I made all the graphics myself, given that I'm just a programmer I'd say I'm getting a little bit better.

I wrote a cool little class that animates the instructions dynamic text field. (in the top left hand corner)

Hexart

2010-02-02T16:20:00.002-05:00

Here's what it looks like.
What is it? I've create a site where you upload any image you want and it goes through one block of pixels at a time, evaluating each blocks median color hex code and prints that value to screen. You can adjust the font size and the font density. Go ahead give it a try!

Here's some code for ya!

I wrote this bitmap slicer class. It works really well, just pass it a bitmap and how many slices you want to slice it into. Each slice is the same aspect ratio of the original image. The parameter "pieces" is the square root of the total squares that there will be. The more square, the more memory is use.

public static function Slice(origBitmap:Bitmap, pieces:int):Array{
  var BitmapArray:Array = new Array();
   
  var recX:Number = 0;
  var recY:Number = 0;
  var recW:Number;
  var recH:Number;
  var aspctRatio:Number;
  var destBitmap:Bitmap;
  var totalSquares:Number;
   
  if(origBitmap.height > origBitmap.width){
     aspctRatio = origBitmap.width/origBitmap.height;
     recH = Math.floor(origBitmap.height/pieces);
     recW = Math.floor((origBitmap.height/pieces)*aspctRatio);
     totalSquares = Math.floor(pieces * (origBitmap.width/recW));
  }
  else if(origBitmap.height < origBitmap.width){
     aspctRatio = origBitmap.height/origBitmap.width;
     recW = Math.floor(origBitmap.width/pieces);
     recH = Math.floor((origBitmap.width/pieces)*aspctRatio);
     totalSquares = pieces * Math.floor(origBitmap.height/recH);
  }
  else{
     aspctRatio = 1;
     recW = (origBitmap.width/pieces);
     recH = recW;
     totalSquares = pieces * (origBitmap.height/recH);
  }
   
   
  var xPos:Number;
  var yPos:Number;
  var colCounter:Number = 0;
  var rowCounter:Number = 0;
  for(var i:int = 0; i < totalSquares; i++){
     destBitmap = new Bitmap(new BitmapData(recW, recH),PixelSnapping.NEVER, true);
     destBitmap.bitmapData.copyPixels(origBitmap.bitmapData, new Rectangle(recX+(recW*colCounter), recY+(recH*rowCounter), recW, recH), new Point(0, 0));
     BitmapArray.push(destBitmap);
     destBitmap = null;
     colCounter++;
     if(colCounter >= pieces){
          colCounter = 0;
          rowCounter++;
     }
  }
   
  return BitmapArray;
}

This finds the median color of each bitmap slice

//this finds the mean color for a bitmap data
public static function get_median_hex(bd:BitmapData):uint{
  var pixelValue:uint;
  var red:Number = 0;
  var green:Number = 0;
  var blue:Number = 0;
  var count:Number = 0;
   
  for (var i:int = 0; i < bd.height; i++){
     for (var j:int = 0; j < bd.width; j++) {
        pixelValue = bd.getPixel(j, i);
     
        red += pixelValue >> 16 & 0xFF;
        green += pixelValue >> 8 & 0xFF;
        blue += pixelValue & 0xFF;
        count++;
     
     }
  }
  red /= count;
  green /= count;
  blue /= count;
  return red << 16 | green << 8 | blue;
}

Xml Namespace

2010-02-02T12:59:00.004-05:00

I've loaded various xmlns through Url Loaders and sometimes you just can't parse them because you have to first import the namespace. Here's an example (cause I keep forgetting)

namespace media= "http://search.yahoo.com/mrss/"; //for flickr
use namespace media;
namespace media= "http://www.w3.org/2005/Atom"; //for Atom
use namespace media;

FlashWars

2010-01-19T17:05:00.006-05:00

I finally wrote my own collision detection engine from scratch. This game may or may not mimic another game for a certain unnamed console. Earth is being attacked and it's up to you to save the world! There are two bosses you'll have to face before the earth can be set free of impending Armageddon via meteor attack! Get as many points as you can in order to reach them! High score is also implemented into the game(although I think my server is currently down, so you can play, but no high score).
I've implemented a few new ideas into the game. Time bombs, lasers, bosses and background graphics to name a few. A mouse is pretty much required to play this game, because you click and hold to shoot. Moving the mouse will move the direction of fire. You can toggle special weapons with "1", "2", and "3", while "W", "A", "S", and "D", move the player around the screen. Give it a try, just click on the picture!

The game actually ended up being a lot more work than I had originally planned. A lot of trig went into the enemy chase movements, as well as the firing direction.
It just needs music now....

The enemy graphics were created in flash, while the background images and some boss graphics were created in Blender
The Earth is from my Papervision Phong Shader demo. I found an Earth cloud map and warped it to the earth in Photoshop.

26 Actionscript classes, 1598 lines of code. I tried really hard to keep it as efficient as possible.

If anyone has any questions about the game or its collision detection engine, feel free to contact me.

Screens RSS Dashboard

2009-12-16T22:48:00.005-05:00

FINALLY!!!!!!! I've finished it!
Make sure your speakers are on!

Capabilities

Takes advantage of muli-threading
Can post status updates to Twitter and Facebook
Displays local weather and traffic
OCRemix latest remixes mp3 player
Shows new comments on my Flickr photos
Sends and receives Gmail
Fully functional YouTube player (can even search for new videos)
Each module updates automatically after 1 hour but user can update at will by clicking the modules logo.
Toggles fullscreen, on and off with F10, similar to a mac dashboard, but better:)

Many hours of research were necessary to make this happen. I've still got some memory testing to under go, but it's stable and I've shot down the memory leaks.

Weather Icon Set - thanks to http://joshj132.deviantart.com/art/Touchflo-weather-HD-133213861
Music in the YouTube video - 'Aire Tam Break' : thanks to http://ocremix.org/artist/4754/fishy
Module Logos, found in various places online.

All other graphics were created by me!

I'm thinking about releasing this as a free download. Would anybody be interested?

--------------------------------------
OLD POST:

I've been working on this project for about a month now. It's a Mac-like dashboard but for Windows. The idea is that instead of lame widgets that I'll never use, I've combined every main site that I frequent along with several main social networks via their api's and browser impersonating web requests to create one centralized location where all my interested live data is found. (All I have to do is hit F10 to toggle it!, or whatever key you decide to bind it to).

It's a C# win form, that goes fullscreen and hides the taskbar. It embeds flash through an Active-X control that has all the "widgets" for you to interact with. It's transparent too so you can see straight through to your desktop background.

So far I've developed modules for

Facebook (can post status update)
Gmail (can preview, and send emails)
Twitter (can post status update)
Flickr (can see any new photo comments on my photostream)
OCRemix.org (plays any selected new remix locally in the flash file)
local weather
local traffic (gives me live traffic updates...I live in the city so that helps)

I'm currently working on a YouTube player module that will be able to play/search any video on youtube.

I'll post more soon when I get it finished!

Tetris

2009-11-09T08:19:00.007-05:00

After years of programming, I had always wanted to make a game. I had heard that Tetris was a good place to start. I encountered many hurdles but successfully overcame most of them.

collision detection engine
an engine to remove tetris lines
look ahead rotation/collision detection

There are definitely still some bugs in it but it's close enough for now. Perhaps someday I'll fix the bugs but for now I really don't care:)

The graphic design was done by Ronnie Fenwick
The background images were from my flickr photostream and then filtered in photoshop.
Beta-Testing was done by many of my friends(greatly appreciated)

The music is from http://www.8bitdaily.com/ and used under the creative commons license
This website and it's content's composers are in no way affiliated with this Tetris demo application.

Google Maps API

2009-10-06T15:14:00.004-04:00

Using Google Maps Api, I've created my own xml driven map program with completely customizable pop-ups and map locations. It's actually very easy and only took me about an afternoon to figure out.
Check out the xml file that drives it too.
There's still quite a bit of code that you have to write to interact with the api's libraries, but Google definately makes it easier.
Here's their online documentation.

Blades: Concept Image Gallery

2009-09-15T17:23:00.004-04:00

I've been playing around with this for a long time and I finally decided to finish it. It's just a concept image gallery I've called Blades.
It's dynamically generated via an xml file and virtually everything (except the spinning pre-loaded and the images themselves) are created through code(All graphics and animations).

Hover your mouse over each image to expand the pane. Go ahead and try to break it. I DARE you!

Journey Church

2009-09-14T16:25:00.004-04:00

This flash site is entirely driven off of C#/ASP.NET CMS. It uses LINQ to SQL to store data into the SQL database. It communicates with the flash via a web service that returns xml to the flash site, giving it it's dynamic content.

The CMS uses a lite implementation of the FCKEditor, as well as some custom pages that allow images to be uploaded to the home page rotator and can determine which section of the site each rotator image links to.
This site was a lot of fun because I learned a lot more about the greensock tween class, which I've been using for about 6 months now.

AS3 Flash Vars

2009-09-01T09:56:00.005-04:00

it's nothing new, I just keep forgetting how to do it. So here it is so I will never have to look it up again!

import flash.display.LoaderInfo;
try {
 var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;
 img_path = String(allFlashVars["path"]);
  
 if (img_path.toString() == String(undefined)){
   throw new Error("FlashVars did not load");
 }
 }catch(e:Error){
   //error_txt.text = "did not load flash vars";
   img_path = "path_to_my_image.jpg";
 }

The Green Room

2009-08-06T14:46:00.007-04:00

This is my most ambitious project yet. It integrates UV Mapping with a 3D model that I created in Blender. Also I've integrated a 3D interactive page flip using the as3mod library. It works with most flash 3D engines.

I created the 3D mesh in Blender, UV Mapped the mesh, exported to a .DAE file, and imported the .DAE into papervision at run-time. It works really well although I had a lot of performance issues at first with triangles z-fighting. It is a common problem with the papervision rendering engine.
After reading through many forums, I finally figured out how to solve this problem and keep my cpu cylces low. I used separate viewport layers for each object that was having z-fighting issues.

here's an example

var obj_layer:ViewportLayer = viewport.getChildLayer(my_3D_Display_Object);
obj_layer.layerIndex = 1;

//tell the viewport to sort by z-indexing
viewport.containerSprite.sortMode = ViewportLayerSortMode.INDEX_SORT;

//I have an array of viewportLayers that I send to the rendering engine.
layers.push(obj_layer);

I was able to further tweak the performance by only removing things from the "layers" array that did not need updating once they've been rendered. For example...when you click on the book, the camera zooms in. Once it's stopped zooming in, it no longer needs to update the room mesh, just the book. So I remove the room's viewport layer from the layer array and viola...the rendering engine does not perform calculations on it until the user clicks the book's back button to return to the room view.

There are still a few z-index issues as well as camera rotation issues. The room does not spin, the camera spins around the room, I just constantly update the cameras degrees and run them through my formula, thus moving the camera in a circular motion around the 3D scene.

camera.x = 3800 * (Math.sin(degrees * (Math.PI/180)));
camera.y = 3800 * (Math.cos(degrees * (Math.PI/180)));
camera.rotationZ = (360-(degrees-180));
degrees += inertiaX;
if (!dragging) {
inertiaY *= .92;
inertiaX *= .92;
}

I also made the background design and the wallpaper myself in photoshop:)

Augmented Reality

2009-07-28T19:44:00.011-04:00

This one takes a little bit of time and money to figure out. It's really really cool though. At a glance, Augmented Reality is just flash accessing your web cam, scanning for a specific pattern, and then orienting a 3D scene to that pattern.

Here are two demo's I've been able to build from it so far!

Phong Shader

2009-07-10T09:47:00.006-04:00

Yes I know, another 3D earth! But this one is different. It's got a dynamic light source that gives a true feel of the earth rotating around the sun. Click and drag your mouse in any direction to change the POV and see the light source move with it. Very cool if you ask me:)
Sorry if it kills your cpu. Phong shaders don't play nicely with the CPU...oh flash when will you utilize the GPU. (CS4 says that it does but let's not fool ourselves)
I've created a phong shader material and have mapped a light source with a texture of the earth. thanks nasa:)

MVC with jQuery/Ajax + xVal

2009-07-07T16:34:00.004-04:00

This is my first MVC (Model View Controller) site that I've been experimenting with. It uses a lot of jQuery/Ajax to accomplish it's many tasks.
I did my best to simulate what a new Facebook post looks like.
Fill out all the fields, select a date from the calendar and click "Add Run"
You'll see it add a new run to the "jog log" just like a Facebook post would do.

It's also got some snazy client side form validation (so the user doesn't have to wait for the server to tell them that they've not filled out something correctly)
It uses xVal to write the validation rules on the server side (in C#). Then at run time the xVal framework spits out the rules in minified javascript.

You'll still need to have server side validation for security purposes, but you can still validate against the original rules you wrote in C# so you only have to write the rules once.

Here are the order of events to give you an idea of how it works.

Fill out all fields correclty
Click "Add Run"
javascript wraps values into an object and posts them to the server
server validates the objects values
if not valid, it throws an error which is then handled my javascript and makes a pop-up box that says "fill out all fields correclty"
if successfully added to the database, it runs a javascript success function that calls some javascript animating functions that slide the div down and fade in the new record.

All actions rely upon one another. So it won't add a record visually to the html before it has added it to the database...the same goes for the delete function.

The functionality is cross-browser although I did not take the time to necessarily make it cross-browser as far as css goes.

Either way it's a successfull example of how the jQuery and xVal plays with MVC.

http://jakkd.info

2009-07-07T16:18:00.004-04:00

jakkd.info is a biking website I made for my sister. She's going on a cross country biking trip with her friends and wanted a site to be able to update pictures and statuses...etc.
My co-worker made the graphics. There's a link to her site at the bottom of jakkd.info

jakkd are the initials of all the people on the trip. I tried to convince them it was a bad domain name, but you know how the clients can be.....

So any way, I made them a login page too so that they can securely update their entire site's contents as the want. Very cool if you ask me.
The back end CMS is written in C# and uses a SQL database. As always they comminicate through a web service.

There are 3 admin sections.

Blog
Route
Gallery

The Blog section allows you to add/edit/delete any blog post
The Route Section is a drop down box that allows you to select any city name along the route of the trip and it will automatically connect the dots of every city they have ridden through, highlighting the current city location.
The Gallery section allows you to upload an image of any size. It will save a thumbnail version of it as well as a custome sized image for the actual flash gallery.

Visual Studio + Firefox

2009-06-30T09:33:00.004-04:00

Firefox has known performance issues when debugging locally with visual studios.
The fix? Right here http://damianm.com/tech/tip-speed-up-firefox-for-asp-net-development/

in the firefox address bar:
navigate to about:config
find the entry: network.dns.ipv4OnlyDomains
double click on it and change it to localhost.

Garbage Collector

2009-06-03T15:42:00.004-04:00

Throughout the past few applications that I've made at work, I've found constantly run into one problem that I spend a lot of time tweaking. Managing memory. Actionscript 3 does not automate this process very well. I've found a few helpful techniques to run the Garbage Collector at will, although I still feel that it is a wild and uncontrollable wind, I'm at least hopeful to control it.

GSSkinner explains the concepts really well.
http://www.gskinner.com/blog/archives/2006/06/as3_resource_ma.html

One of my most used methods of manual garbage collection is to remove all children in a main section MovieClip, just before I remove it from stage.
for example

//remove all of the children
while(parent.numChildren > 0){
   parent.removeChildAt(0);
}

//remove the parent
removeChild(parent);

//run the garbage colletor
import flash.system.System;
System.gc();

Also you can monitor the swf's total memory usage via
System.totalMemory;
I usually set up something like this

private var peak:Number = 0;
private function mem_test():void{
          if (System.totalMemory > peak)
          peak = System.totalMemory;

          mem_txt.text = "current memory: " + (System.totalMemory/1024).toString() + "\r" + "peak memory: " + (peak/1024).toString();
}

setInterval(mem_test,1000);

3D Sound Spectrum

2009-04-30T14:14:00.004-04:00

Move your mouse around to get a fresh point of view!

I decided to mess around with some sound frequency animations using 3D cubes in papervision. It's a pretty beautiful application for such a simple concept.
Each squished 3D cube represents a sound frequency. There are 20 cubes and the human range of hearing is 20Hz - 20,000Hz (no longer mine thanks to years of guitar!). Therefore each cube is exactly 999Hz from its neighbor.

I've done a bunch of cool animations too! All of them done through code using tweens and lots and lots of trig:) Enjoy!

Primary Color Detection

2009-04-28T12:23:00.007-04:00

I call it Studio Vibe. It shows off quite a bit of functionality I've been able to create. The main technology here being an algorithm to determine the main color of any dynamically loaded image. It then creates a pretty studio like background that inherits the loaded images main color.
My good friend Josh Pate helped me out a lot by telling me what functionality was good to leave or take out after I had round 1 finished.

This is using Papervision 3D of course, to accomplish the 3d effects you see going on with the camera. The application also uses my bitmapSlicer class, you can see demonstrated whenever you click on the picture, each papervision plane rotates on the x-axis.
The tricky part was resizing the Papervision planes when I load an image of a different size. I had to actually tween each planes verticies to stretch or shrink them to the appropriate size and constantly update the bitmapMaterial while doing so.
It was a bit more math than I had hoped, but I was able to figure it out:)

The images are all images I've taken myself and done some post processing in photoshop. You can find my images at my flickr page.

This Studio Vibe application serves best as a concept image gallery. I'd be glad to sell one to anyone who's interested:)

Now for some code

//I was able to get really close without googling for help
but thanks to blog.soulwire.co.uk for some missing pieces!
//this part finds the median hex color value of any image

public function get_median_hex(bd:BitmapData):uint{
var pixelValue:uint;
var red:Number = 0;
var green:Number = 0;
var blue:Number = 0;
var count:Number = 0;

for (var i:int = 0; i < int =" 0;" pixelvalue =" bd.getPixel(j,">> 16 & 0xFF;
green += pixelValue >> 8 & 0xFF;
blue += pixelValue & 0xFF;
count++;

}
}

red /= count;
green /= count;
blue /= count;

return red << update =" true;" number =" (slices[0].width" number =" (slices[0].height" int =" 1;" number =" -(loaded_content.width" number =" (loaded_content.height" vertex3d =" p.geometry.vertices[0];" vertex3d =" p.geometry.vertices[1];" vertex3d =" p.geometry.vertices[2];" vertex3d =" p.geometry.vertices[3];" vertex3d =" (p.getChildByName(" vertex3d =" (p.getChildByName(" vertex3d =" (p.getChildByName(" vertex3d =" (p.getChildByName(" index ="=""> 1 && index % num_sections == 0) {
yPos -= slices[0].height;
xPos = -(loaded_content.width / 2) + ((loaded_content.width/num_sections)/2);
}

index++;
}
}

Geocoding Earth

2009-04-21T16:51:00.007-04:00

One of my most complex works yet. This 3D planet maps several Mercator Projections of the Earth (courtesy Nasa). You'll notice a reflection on the surface. (not really necessary but I like the effect).
That is achieved through a papervision EnvMap or Environment Map. A subtle glow effect is added around the earth to add atmosphere.

The coolest part of this app is the Geocoding. You type in any address in the world (include the city name) and it sends it off to google, who kindly returns me a latitude and longitude coordinates. I then project those coordinates using a sphere and placing it at the correct location, thus highlighting the exact address you typed in. (I had help with the formula from http://blog.zupko.info/?p=221 on this part.) Go ahead try it! (click on the image above)

Here's some code for ya!

//i've already loaded bitmap data from external jpg files into local variables cloud_texture, earth_texture, and bump_texture

var earth_Shader:GouraudShader = new GouraudShader(light, 0xFFFFFF, 0x111111, 30);

//EnvMap gives us our reflection, the bump_texture gives us the small peaks and valleys on the earth
var earth_env:EnvMapShader = new EnvMapShader(light, cloud_texture, earth_texture, 0x0034c1, bump_texture);
var earth_mat:ShadedMaterial = new ShadedMaterial(new BitmapMaterial(earth_texture), earth_env, 0);

//let there be stars!!
var stars:ParticleField = new ParticleField(new ParticleMaterial(0xFFFFFF, .4, 1), 500);
scene.addChild(stars);

var earth:Sphere = new Sphere(earth_mat, 50, 25, 25);
scene.addChild(earth);

//this accomplishes the blurred glow effect around our 3D Earth
var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport, 1000, 1000, true, 0, "CLEAR_POST", false, true);//very important to set the last param to true! Otherwise the glow will continue to concatenate to itself! AHHH!

var gf:GlowFilter = new GlowFilter(0x00aaf6, .2, 5, 30, 2, 1, false);
var ble:BitmapLayerEffect = new BitmapLayerEffect(gf);
bfx.addEffect(ble);
viewport.containerSprite.addLayer(bfx);
bfx.addDisplayObject3D(earth);

//GeoCoding Functions
//I have this built into its own separate class

//Google makes you use their API. I tried over and over to make a simple URLRequest to get the coords...it worked just great locally, but as soon as I posted it to the server..nothin.

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.services.*

//You only get access to the geocoder once a new Map Object has been instantiated
public function GPS(stage:*){
map = new Map();
map.key = "my_google_maps_api_key_here";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
map.visible = false;
stage.addChild(map);

function onMapReady(event:Event):void {
trace(map);
}
}

//when user clicks on the find button, receive address as string, and call back function for when processing is complete.
public function Get_Coords_From_Address(address:String, callBack:Function) {

//format the address for google maps api
var temp:Array = address.split(" ");
address = temp.join("+").toString();

//call their geocoder, it just makes a URLRequest with special params
var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, handleGeocodingSuccess);
geocoder.geocode(address);

//geocode received successfully now parse out latitude and longitude and return for mapping!
function handleGeocodingSuccess(e:GeocodingEvent) {
var t1:int = e.response.placemarks.toString().indexOf("@(") + 2;
var t2:int = e.response.placemarks.toString().indexOf(")");
var data:String = e.response.placemarks.toString().substring(t1, t2);
callBack(data);
}

//here is the callback function
function callBack(data:String){
trace(coords);
var lat:Number = parseInt(coords[0]);
var lon:Number = parseInt(coords[1]);

//convert_coords_to_rotation(lat, lon);
var phi:Number = (90-lat)*(Math.PI/180);
var theta:Number = (lon+180)*(Math.PI/180);

//create the marker
var marker:Sphere = new Sphere(new ShadedMaterial(new BitmapMaterial(new BitmapData(20,20,false,0x00aaf6)), new PhongShader(light, 0x00aaf6)),1,5,5);

//figure the spatial coords in which the sphere should be placed (will be placed directly over the address that the user entered..code courtesy http://blog.zupko.info/?p=221)
var fx:Number = (earth_radius+3) * Math.sin(phi)*Math.cos(theta);
var fz:Number = (earth_radius+3) * Math.sin(phi)*Math.sin(theta);
var fy:Number = (earth_radius+3) * Math.cos(phi);

earth.addChild(marker);
bfx.addDisplayObject3D(marker);

marker.x = 0;
marker.y = 300;
marker.z = 0;
marker.alpha = 0;
//animate the sphere into place from 300 pixels north
TweenMax.to(marker, 2, { x:fx, y:fy, z:fz, ease:Regular.easeOut, alpha:1 } );
}

3D models in flash

2009-04-02T18:14:00.006-04:00

This is probably the coolest thing I've done to date.
The shark was modeled by my friend Sean McDonald in Maya. http://www.vimeo.com/3057750

He simply exported it to a dae file which I dynamically load into papervision, and then I throw an envMap to it with a PointLight3D object.
The envMap is just a jpg texture and the PointLight3D makes the texture reflect light! It's really cool and really really simple to do!
The water/wave effect is just the perlinNoise effect seen in my previous water demos.
Here's some papervision code to wet your appetite!

//gives us a nice particle field of bubbles
var pm:ParticleMaterial = new ParticleMaterial(0x00CCFF,.3,
var pf:ParticleField = new ParticleField(pm,500,10,2000,2000,2000);

//creates the new point light
var light:PointLight3D = new PointLight3D(true, false);

//creates a new EnvMapMaterial to add to our shark, the bmap.bitmapData is bitmapData from a the jpg texture that I loaded dynamically
var envMap:EnvMapMaterial = new EnvMapMaterial(light, bmap.bitmapData, bmap.bitmapData);

//load the dae file
dae = new DAE();
dae.load("3dmodel.dae", new MaterialsList( { all:envMap } ));

//add it to the scene!
scene.addChild(dae);

Playing with Fire II

2009-03-27T17:28:00.006-04:00

What can I say, I like to play with fire!:) Same concept as the below entry, but now you can type in your own name and choose a color! Click and drag to rotate in 3D space! Web 3.0? Try it out!

Playing with Fire

2009-03-26T20:31:00.008-04:00

This uses the BitmapEffectsLayer in papervision 2.0
Click and drag to rotate the 3D cube.

//start with a bitmap file material
var bfm:BitmapFileMaterial = new BitmapFileMaterial("imagePath", true);
bfm.doubleSided = true;

//next we add a bitmap effect layer
var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport, stage.width, stage.height);

//add the effect layer to the viewport
viewport.containerSprite.addLayer(bfx);

//create a materials list with all sides the same
var mlist:MaterialsList = new MaterialsList({all:bfm});

//bind the material list to a new 3D Cube
var cube:Cube = new Cube(mlist, 500, 500, 500, 2, 2, 2);

//add the cube to the effects layer
bfx.addDisplayObject3D(cube);

//now for the fire effect
var fire:BitmapFireEffect = new BitmapFireEffect(0, 1, .2, 1);
fire.smoke = 0;
fire.flameHeight = .5;
fire.fadeRate = .4;
fire.flameSpread = .5;
fire.smoke = 0;
fire.distortion = .4;

//you can also add a new flash blur filter (or any kind of flash filter) to the object
//bfx.addEffect(new BitmapLayerEffect(new BlurFilter(2, 2, 8)));

bfx.addEffect(fire);

//add the cube to the scene
scene.addChild(cube);

//Now render your scene!

Zelda Game

2009-03-22T00:38:00.003-04:00

So I grew up on the console games and I loved them! I've always wanted to figure out how to make one so I've decided to try to figure out how to make a sprite based game...like Zelda. For now I'm just using Zelda sprites until I get a good engine down.

So far I've come up with an efficient, but not great, collision detection engine. I'm currently trying to come up with a state system using bit-wise booleans and masking. I'll be updating my progress if you're interested in checking back often!

Glorified MP3 Player

2009-03-22T00:03:00.008-04:00

This is a glorified mp3 player that I made in early 2008. It serves as a repository for all of the songs that we've played at our church over the years. Core functionality includes:

pagination
scrubbing
play/pause
tons of cool visual effects :)

The spinning diamonds up top will spin faster if you sweep your mouse over them. They also server as a navigation menu. The jomo.tv site in general serves as a weekly set list for our sunday mornings. All information is stored in and queried from my sql db using C# and Linq.

I've updated this to be just one song for security reasons.

Default ASPNet sql db

2009-02-20T10:43:00.004-05:00

I keep wasting time re-searching for this every time that I need it. I'm posting it here so I'll never lose it again!

The default aspnet sql database provides you with generic user and role functionality, among a lot of other things.

To set it up:

start up visual studio 200X command prompt. It's usually located in start menu/all programs/visual studio 200X/visual studio tools/visual studio 200X command prompt
Type in aspnet_regsql.exe and hit enter
It launches the app that sets up the default aspnet sql database
Enter your server name, login info, and database name (usually found in your connection string)
aspnet_regsql.exe can create or modify an existing database.
It creates a bunch of tables and stored procedures necessary for the user and role functionality.

Send a text msg from C#

2009-02-14T11:47:00.005-05:00

I've finally found out how to send any instant updates that I want, to my cell phone.
It's a pretty simple concept although the toughest part has always been finding a free or available smtp server to use. Look no further, Google lets you use their smtp server free of charge! You only need to sign up for a free gmail account. The only draw back is that you can't change the sender name, it must always be the email address @gmail.
Thus far I've been able to email all sorts of attachments out!

The concept within a web application:

Gather the data you want to send
Send it to a C# web service
Receive the data in C#, create a new mail object.
enter the 10 digit phone number and the cell suffix into the email sender property
send the text message!

The cell suffix is different per carrier. A comprehensive list can be found here
for example 1112223333@vtext.com (verizon subscriber).

Update: It's very easy to do if you use RC's GmailHelper.dll

Now for the code! (Old way of doing it, I recommend RC's GmailHelper.dll)

System.Web.Mail.MailMessage myMail = new System.Web.Mail.MailMessage();

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserver", "smtp.gmail.com");

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserverport", "465");

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendusing", "2");

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate", "1");

          //Use 0 for anonymous

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendusername", "myEmailAddress@gmail.com");
          //this is the gmail account that allows us to use the google smtp server

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/sendpassword", "emailPassword");

          myMail.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpusessl", "true");

          myMail.From = "myEmailAddress@gmail.com"; //this is the gmail account that allows us to use the google smtp server

          myMail.To = "recipientEmailAddress";

          myMail.Subject = "emailSubject";

          myMail.BodyFormat = System.Web.Mail.MailFormat.Text;

          myMail.Body = "email body text goes here";

          //if (pAttachmentPath.Trim() != "")

          //{

          //System.Web.Mail.MailAttachment MyAttachment = new System.Web.Mail.MailAttachment(Server.MapPath("pathToAttachmentFile goes here"));
          //may be able to send images in text messages, not sure, haven't tried yet.

          //myMail.Attachments.Add(MyAttachment);

          //myMail.Priority = System.Web.Mail.MailPriority.High;

          System.Web.Mail.SmtpMail.SmtpServer = "smtp.gmail.com:465";

          System.Web.Mail.SmtpMail.Send(myMail);

Sound frequencies animated!

2009-02-01T01:39:00.011-05:00

This was a really fun saturday afternoon project. I'd decided I needed a place to centralize my music. So I built my own xml driven glorified mp3 player. I made all the graphics myself. I made the background from a tutorial that I found at abduzeedo.com.

I created to external actionscript 3 classes for this:

A class that manages each dynamic bubbles random animations
A class that creates dynamic animations based on frequencies of a playing song, just like you see in winamp, or those fancy car stereos.

I learned the concept of this from
I'm really only going to talk about the latter here.
it takes two input params,

An array containing, each slot containing a movieclip with a small blue rectangle in it. There can be any amount of these movieclips in the array. Each movieclip in the array represents a frequency in the sound animation.
The maximum height that you want the bars to animate to at the peak level of audio.

Enough chatter, here's the code.

//here sound init documentation because I keep forgetting how to do it.
sound = new Sound();
sound.load(new URLRequest(mp3_path));
sound.play();

//to control the sound further, use a SoundChannel
var sch:SoundChannel; //this does not have a constructor

sch = sound.play();
//then use
sch.stop();
//and
sch = snd.play(sch.position);
//for the play and pause function


//Audio Animator Class
public class AudioAnimator extends MovieClip
{
private var ba:ByteArray = new ByteArray();
private var a:Number = 0;
private var f:Array;
private var maxH:Number = 0;
private var index:int = 0;

//s sound, f frequencies, mh maxHeight
public function AudioAnimator(frequencies:Array, mh:Number){
f = frequencies;
maxH = mh;
}

public function startAnimation(){
addEventListener(Event.ENTER_FRAME, freqs);
}

public function stopAnimation(){
removeEventListener(Event.ENTER_FRAME, freqs);
}

private function freqs(e:Event):void{
SoundMixer.computeSpectrum(ba,true,0);
index = 0;
for(var i=(256/(f.length)); i < 256; i+=(256/(f.length)))
{
a = ba.readFloat();
var num:Number = a*(a*maxH);
f[index].height = num;
index++;
}
}
}

I learned the concept from http://theflashblog.com/?p=181, but re-wrote a good part of it to fit my needs. The coolest part is that I've modularized it, and can now easily use it in any future project.

Water effects

2009-01-24T10:48:00.008-05:00

..have always been something I've thought was really hard to do in flash. So far I've found two approaches to this solution.

static water animations on the timeline
dynamic water animations via code

the static approach:

This is a great example of how I can go overboard when I start getting creative. You'll probably recognize this image from digital blasphemy. I've taken it and put some cool static animations on it, and even synced up a nice song from OCRemix.
I found the tutorial for the water effect here.

the dynamic approach

This solution is far more realistic, but more costly to the cpu. In this app's case, my cpu sits at 24% (I have a fast computer), so that's actually not too bad, but if we were to size the video up, it would start to slow down.

I did not write make this app, one of my genius friends did, you can view his page here.
I'm not posting his code up here, but he's used the perlinNoise filter to achieve this beautiful ripple effect.

3D Cylinder Image Gallery

2009-01-24T10:30:00.006-05:00

Probably my strongest work yet. This is a 3d image gallery that pulls from my flickr account. It's mostly experimental for now, but I hope to finish it someday.

The Concept:

read in my photography RSS feed from my flickr account.
for each photo node, create a new 3d plane
plot the photo's out in a 3d ring around the camera (requires some trig)
after each ring is complete (10 or so images in a ring) , move up and create another one
user can pan the camera left or right in 3d space
user can click on any image to load it
upon image click, camera zooms out, and loads up my custom bitmap slicer class
the bitmap slicer class gets the original size flickr url via flickr service, and loads the image into memory. It then slices the image into many resolution perportionate bitmaps using the copyPixel function, and pushes them to an array. I then manage the array to animate each piece of the image together in a short amount of time, to give a very cool patch-together animation.
the user can then click on the displayed image to dismiss it and return to the 3d rotating image gallery

Papervision3d is really a cool as3 library. Although difficult to learn at first, it can really pay off if you spend the time to become very familiar with it.

C# Data Sync

2009-01-24T00:53:00.006-05:00

You'll notice the flash menu on the right hand side of this blog column. I wanted a menu that could sort my posts into categories. I could not find one that blogger offered so I decided to do what any self respecting coder does...I made my own!
Blogger offers an RSS feed of my blog, so I read that into flash and did some fancy formatting with xml so that it would sort all my posts into two categories:

Flash
C#

Then I ran into a crossdomain.xml issue. You see, Blogger doesn't allow any domains to in the crossdomain.xml, so my flash menu was done for.....or was it?
I thought, well I'll just write a C# console app that reads my blogs rss feed, saves it as an xml file, then calls another function that logs into my ftp server, posts the newly updated xml file and then closes its streams. It took maybe a few hours to figure out the code and piece it together, but it works great!

Now any time I make a new blog post, I just run the .exe on my computer and it updates the xml file that my flash menu (over on the right) points to, and that new blog post is instantly catagorized and loaded into the menu! FREAKIN SWEET!

and the function that does it, thanks to google and some of my own modification:

static void UploadToFTP()
{
Console.WriteLine("Uploading to FTP");
string filename = "data.xml";
FileInfo fileInf = new FileInfo(filename);

FtpWebRequest request = (FtpWebRequest)FtpWebRequest.Create(new Uri("ftp://domain_name_or_ip/folder_name/" + filename));
request.Method = WebRequestMethods.Ftp.UploadFile;
request.Credentials = new NetworkCredential("username", "password");
request.UseBinary = true;
request.KeepAlive = false;
request.ContentLength = fileInf.Length;

int buffLength = 2048;
byte[] buff = new byte[buffLength];
int contentLen;

// Opens a file stream (System.IO.FileStream) to read the file to be uploaded
FileStream fs = fileInf.OpenRead();

try
{
// Stream to which the file to be upload is written
Stream strm = request.GetRequestStream();

// Read from the file stream 2kb at a time
contentLen = fs.Read(buff, 0, buffLength);

// Till Stream content ends
while (contentLen != 0)
{
// Write Content from the file stream to the FTP Upload Stream
strm.Write(buff, 0, contentLen);
contentLen = fs.Read(buff, 0, buffLength);
}

// Close the file stream and the Request Stream
strm.Close();
fs.Close();

Console.WriteLine("File Uploaded Successfully!");
Console.WriteLine("Closing streams...");
}
catch (Exception ex)
{
Console.WriteLine(ex.Message + ": Upload Error");
System.Threading.Thread.Sleep(3000);
}
}

Flash CS4 3d game

2009-01-23T17:12:00.003-05:00

Less than 160 lines of code. This utilizes the new "z" property that all movieClips have. It allows you to programatically control the depth of the object, but not like z-index in css. Flash CS4 gives a faux-3d environment to work with. The fact that there's not really a camera to "move around" as you would in a 3D editing suite, is rather annoying. However, it would have taken a lot longer to build this in Papervision.

The process: I randomly create a new "wall" (the blue objects that you have to avoid) on a time interval. It then decides whether to create a red, green, or blue wall.
the following shows the effects of the colored walls when running into them:

red = -10 health
blue = -3 health
green +10 health

Every 100 walls that you pass by, sends you on to the next level, picking up speed, on and on until it's too fast! The logic was pretty fun to think through given the new "z" displayObject property.
Give it a try!

3d flash cube

2009-01-23T09:34:00.005-05:00

I've been doing a lot of 3d experiments in flash lately. I normally use papervision3d, but this is a different lightweight 3d engine I found online. After making many modifications to it, I was able to produce a transparent 3d cube that rotates as the user moves the mouse around it. Give it a try!

Larry the Cable Guy

2009-01-23T09:22:00.001-05:00

This was an awesome experience to be able to work on. I built the database, cms, and administrative back-end, as well as a smaller part of the flash front end. My very very talented co-worker did most of the flash front end. All and all a very cool and successful project.

Shane's Landscape

2009-01-23T09:11:00.002-05:00

is a really cool flash site that I built completely in AS3. It uses a good amount of dynamic data that's driven by an xml file. Although I did not create the design, the flash functionality was completely up to me. Given that I generally like to make code as small, neat and efficient as possible, it was a challenge to create a navigational system that inherited all of these traits. The end result was worth it.

Text Recognition

2009-01-21T13:15:00.005-05:00

I recently decided to try to make a text recognition application in Flash AS3. I thought through most of the logic in the car one day and found that it was not nearly as difficult as I had thought.
As it turns out, I was able to get a pretty nice prototype in only 150 lines of code!
Click the image to try it out!

The Concept
When the user clicks the mouse down, tracks the mouse movement to an array. When the user releases the mouse, stop the recorder and match it's array values to a unique identity, a letter of the Alphabet.

Psuedocode

//global vars
var startX:Number = 0;
var startY:Number = 0;
var coordsArray:Array = new Array();

//add event listeners
addEventListener(MouseEvent.MOUSE_DOWN, start_record);
addEventListener(MouseEvent.MOUSE_UP, convert_record);

function start_record(e:MouseEvent):void{
startX = mouseX;
startY = mouseY;
addEventListener(Event.ENTER_FRAME, record);
}

function record(e:Event):void{
if(mouseX > startX){
      //I moved the mouse Right
coordsArray.push("R");
}
else if(mouseX < style="color: rgb(153, 153, 153);">
//I moved the mouse Left
coordsArray.push("L");
}
}

function convert_record(e:MouseEvent):void{
removeEventListener(Event.ENTER_FRAME, record);

   //now convert array values to Alphabet letter
switch(coordsArray.toString()){
case "U,R,D":
      //the letter is A
break;
case "D,U,R,D,L":
      //the letter is B
break;
case "L,D,R":
      //the letter is C
break;
}
}

There were a few tweaks I had to make to enhance the performance, but you get the idea. It works pretty well! Success!