i-create | therefore-i am » Experiment

Virtual Painting with Hype

Brendon Smith — Wed, 04 Aug 2010 04:28:55 +0000

The hypeframe work is truly a unique library it offers generative artists a new tool to quickly create generative art. I believe it also provides flash developers with a rich actionscript library that does a great deal of heavy lifting. The library allows you to quickly create swarming effects that you can use to create stunning artwork rapidly. In the example below I am using hype to paint a picture it does this by grabbing the pixel value and then applying it to the canvas. As a result you can simulate a painting effect that can really turn out stunning results. This is one of the many things I really like about this library, is how quickly you can create art with it!

Simple Hype Painting Example:

Download Example / Launch Demo
So what have I been up to lately? I have really been diving into html5 with webGL coming out soon I think combining html5, webgl, and flash developers will be able to create a whole new breed of rich internet applications. I have also been shifting my focus on mobile, because it is the only way truly creative developers can rapidly create applications and profit off of them quickly. It has the lowest barrier of entry and with mobile really starting to take off most applications will have to be completely re-written for these low power, light weight devies that everyone will use. I am excited about what I see and I believe webGL will be supported in both the iphone, android, and hopefully palm! I also believe that javascript development will be needed more and more simply because javascript is the glue that holds the web together and it is supported by all mobile platforms. So you may see a variety of experiments here and I don’t think of development as javascript vs. actionscipt I just view them as working more together instead of against each other so this is not an HTML5 vs. Flash thing. I wouldn’t be surprised one bit by adobe releasing a Flash to Canvas feature for CS6. What makes flash so compelling to me is the amount of libraries available to developers. I would also be willing to bet in the near future flash will also support 3d hardware acceleration this would really allow for lots of new games on the flash platform. Not too mention it doesn’t look like Internet Explorer is going to support any type of 3d in the near future.

Simple 3D Panoramic in JavaScript no IE Support!:

Download Example / Launch Demo
So you showed me some actionscipt can you show me some javascript? Of course, I have been playing around a little with three.js. As you can see above I built a simple panoramic sphere with javascript Mr. Doob created a really cool 3-D library that has lots of similar characteristics too PaperVision3D and it has some basic primitives so it makes it really easy to work with. I will warn you ahead of time this example is a processor hog and it runs really, really slow, but it is some where to start. JavaScript libraries are still a long way from where ActionScript is right now. I have been working on a new version of my memorial panoramic with flash, only it will have 3-D sound that will be dynamically created by user interaction so stop by in about a month.

Simple HTML5 Example Chrome or Safari only!:

Download Example / Launch Demo

It will be interesting to see if the new devies start to have more hardware acceleration for the canvas. It’s funny for as much as apple touts HTML5 it really runs slow on the iPhone and iPod and you can’t get a good read out on the emulator in that comes with the apple sdk so it is a let down. Example, I was working on video game that runs at about 40-45 frames per second on the laptop emulator but when I actually place it on the iPhone it drops down to about 4 frames per second just enough to be useless. So I hope they speed up the rendering on these devices. I believe google will help drive that competition. Google will be coming out with competing tablets, phones, and TV set top boxes. Froyo will be on all these devices and it is a significant speed boost not too mention it supports flash! I am really interested though in the future of webGL with flash on devices because, I know this combination will enable developers to create some really cool experiences and games for mobile devices. JavaScript also lacks a true sound api. With flash not only can I play sounds mp3 etc.. I can also create sound from scratch and manipulate that sound just one of the many advantages of the Flash Platform.

Cool Flash Libraries:
HypeFramework
Sonoport
Bit-101 sound synthesis
Cool JavaScript Libraries:
PhoneGap
Lawnchair
Processing
three

HTML5 jQuery jqPanoramic Plugin Alpha

Brendon Smith — Tue, 01 Jun 2010 05:24:09 +0000

A simple jQuery plugin that allows for creation of Cubic Panoramic Images. This plugin utilizes on CSS3 3D transfoms to complete this task it also relies on jQuery UI. This plugin is an alpha and currently only works for Safari Nightly builds it has been tested against on an Apple running the latest webkit nightly build on Snow Leopard. This plugin should also be compatible for the iPad although I have not had time to test it yet. I will be adding more features to this plugin on a semi weekly basis. I am an extremely busy person and if you email me for support it might take me awhile to respond. Cubic panoramics have long been available in Flash and Java. The reason for creating this was simply to test out the new CSS3 3D properties and hopefully to make a great plugin that will work well on the iPad so users can view panoramics easily on their mobile devices.

This plugin requires a WebKit Nightly Build

jqPanoramic jQuery plugin usage example ->
$('body').jqPanoramic({
dHeight:"640",
dWidth:"1600",
cubeSide1:"http://i-create.org/JavaScript/jqPanoramic/cubicSide1.jpg",
cubeSide2:"http://i-create.org/JavaScript/jqPanoramic/cubicSide2.jpg",
cubeSide3:"http://i-create.org/JavaScript/jqPanoramic/cubicSide3.jpg",
cubeSide4:"http://i-create.org/JavaScript/jqPanoramic/cubicSide4.jpg",
cubeTop:"http://i-create.org/JavaScript/jqPanoramic/top.jpg",
cubeBottom:"http://i-create.org/JavaScript/jqPanoramic/bottom.jpg"
});
 
//or for the default example just
$('body').jqPanoramic();

Download Plugin / Launch Plugin Example

Tweet Tank in Away3D and Hype pt. 2

Brendon Smith — Mon, 17 May 2010 04:09:11 +0000

I have now added support to search twitter. Once you search twitter it repopulates the fish bowl with fish that once clicked will navigate to that twitter search result. I have been working on optimizing the content. Specifically the fish models are very processor intensive. I have been looking at different ways to improve this. Away3Dlite is new than the other versions and it does have many benefits. The main build has other techniques like level of detail and fogging. These help to reduce the over all processor hit. I believe in the near future some of these features will hopefully be ported over to the Away3Dlite version if not then within in the next couple of weeks I will port this over. I think utilizing fogging and level of detail will greatly reduce the overall processor hit.

Processor Intensive Experiment:

You will notice that when it renders it is rendering 110+ DisplayObject3D I have also been working on Garbage Collection I have found that after doing several searches the Memory is increasing greatly. So I have added some techniques like removing the objects and then nullifying them although it doesn’t appear to be helping much. I will have to look into this again soon. I would also like to super impose a Google map on the top make it click-able and then have the camera zoom in on that particular fish which should not really be difficult at all because I can use tween lite to simply zoom the camera to the objects position. So I am not done with this and I will be revisiting these issues. Memory management can be difficult. I will also be scouring the web for flash tools that help profile and reduce memory so if anyone has any suggestions feel free to chime in. I have also been reading the 3D in Flash Book from Friends of Ed it does have a whole chapter on optimizing 3D content for the web so I will be reading that chapter soon. I have also been looking at gSkinners blog it has a considerable amount in regards to memory management.
The Source Code:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.system.System;
 
	public class TweetTank extends Sprite {
		public var twitterFish:tweetFish;
		public var searchClipGo:searchClip = new searchClip();
		public var sound:Sound;
		private var musicChannel;
		public function TweetTank() {
			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler, false, 0, true);
		}
 
		private function addedToStageHandler(e:Event):void {
			playMusic();
			twitterFish=new tweetFish;
			addChild(twitterFish);
			twitterFish._twitSearch = "Flash";
			twitterFish.init();
			twitterFish.visible = true;
			addChild(searchClipGo);
			searchClipGo.x = 250;
			searchClipGo.y = 30;
			searchClipGo.btnSearch.addEventListener(MouseEvent.CLICK, TweetSearch);
			removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
		}
 
		public function TweetSearch(e:MouseEvent):void{
			//trace(searchClipGo.txtSearch.text);
			try{
			this.twitterFish.killAll();
			this.twitterFish.xMove = null;
			this.twitterFish.twFishOne = null;
			this.twitterFish = null;
			twitterFish=new tweetFish;
			addChild(twitterFish);
			twitterFish._twitSearch  = searchClipGo.txtSearch.text;
			twitterFish.init();
 
			twitterFish.visible = true;
 
			addChild(searchClipGo);
			searchClipGo.x = 250;
			searchClipGo.y = 30;
			searchClipGo.btnSearch.addEventListener(MouseEvent.CLICK, TweetSearch);
			System.gc();
			// the GC will perform a full mark/sweep on the second call.
			}catch(fail:Error){
				//trace(fail);
			}
		}
 
 
		public function playMusic():void {
			sound = new Sound();
			sound.load( new URLRequest( "test.mp3" ) );
			musicChannel=sound.play(0, int.MAX_VALUE);
			try{
 
			}catch(e:Error){
				musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopMusic);
			}
			musicChannel.addEventListener(Event.SOUND_COMPLETE, loopMusic);
		}
 
		public function loopMusic(e:Event):void {
			if (musicChannel!=null) {
 
				playMusic();
			}
		}
 
	}
}
 
 
package {
	import away3dlite.containers.ObjectContainer3D;
	import away3dlite.materials.*;
	import away3dlite.materials.WireColorMaterial;
	import away3dlite.primitives.Cube6;
	import away3dlite.templates.BasicTemplate;
	import away3dlite.core.base.*;
	import away3dlite.core.utils.*;
	import away3dlite.events.*;
	import twFish.*;
	import twTank.*;
	import RSSJSONW;
	import com.theflashblog.utils.Math2;
 
	import com.adobe.utils.XMLUtil;
	import com.adobe.serialization.json.JSON;
	import com.adobe.xml.syndication.rss.Item20;
	import com.adobe.xml.syndication.rss.RSS20;
	import flash.events.IOErrorEvent;
	import flash.events.EventDispatcher;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.net.URLRequestMethod;
	import flash.system.Security;
 
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Vector3D;
	import flash.media.Sound;
	import flash.display.*;
	import flash.net.URLRequest;
	import flash.display.Bitmap;
	import flash.display.BlendMode;
	import flash.filters.BlurFilter;
	import flash.filters.GlowFilter;
	import flash.media.SoundChannel;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.system.System;
 
	import gs.TweenLite;
 
	import hype.extended.behavior.FunctionTracker;
	import hype.extended.layout.GridLayout;
	import hype.framework.sound.SoundAnalyzer;
 
 
	public class tweetFish extends BasicTemplate {
		private var origin:Vector3D=new Vector3D(0,40,900);
		public var twFishOne:TwFish1;
		public var twTankC:TwTank1;
		public var soundAnalyzer:SoundAnalyzer;
		private var myX:Number=0;
		public var layout:GridLayout;
		public var Tank:ObjectContainer3D;
		public var xMove:FunctionTracker;
		public var _twitSearch:String;
		public var xScaleTracker:FunctionTracker;
		public var yScaleTracker:FunctionTracker;
		public var zScaleTracker:FunctionTracker;
		[Bindable]public var myRSS:RSSJSONW;
		Security.loadPolicyFile("http://twitter.com/crossdomain.xml");
		Security.allowInsecureDomain("*");
		Security.allowDomain("*");
		public var myTimer:Timer = new Timer(1000);
		public var colourScheme:Array=[0x18b849,0x1858b8,0x18b81c,0x18b89c,0xb818b2,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02];
		public function tweetFish() {
			super();
		}
 
		public function init():void {
			stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent, false, 0, true);
			var filterA:Array=new Array  ;
			filterA.push(new GlowFilter(0xFFFFFF, 1, 19, 19, 1, 1, false, false));
			var blur:BlurFilter = new BlurFilter();
			blur.blurX=900;
			blur.blurY=900;
			filterA.push(blur);
			soundAnalyzer = new SoundAnalyzer();
			soundAnalyzer.start();
			layout=new GridLayout(-900,-175,30,30,60);
			Tank = new ObjectContainer3D();
			view.scene.addChild(Tank);
			Tank.addEventListener(MouseEvent3D.MOUSE_MOVE, goFish,false, 0, true);
			twTankC=new TwTank1(view);
			view.scene.addChild(twTankC);
			view.mouseEnabled=true;
			jsonInit("http://search.twitter.com/search.json?q=" + _twitSearch);
			camera.z=-2000;
			camera.x=-1600;
			camera.y=400;
			camera.lookAt( origin );
			stage.addEventListener(MouseEvent.CLICK,_checkMouseEventTrail,false,0,true);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown, false, 0, true);
 
		}
 
		public function jsonInit(siteFeed:String):void
			{
				myRSS = new RSSJSONW();;
				myRSS._data = "";
				myRSS._txtURL = siteFeed;
				myRSS.onJSON(myRSS._txtURL);
				myTimer.start();
				myTimer.addEventListener("timer", timedFunction);
			}
			public function timedFunction(eventArgs:TimerEvent):void
			{
				if (myRSS._IsReady == "true")
				{
					myTimer.stop();	
					addFish(myRSS);
				}
			}
		//Really Helpful for tracing events!	
		public function _checkMouseEventTrail($e:MouseEvent):void {
			var p:* =$e.target;
			while (p) {
 
				//trace(">>", p.name,": ",p);
				p=p.parent;
			}
		}
 
		public function killAll():void {
			xMove.stop();
			xScaleTracker.stop();
			yScaleTracker.stop();
			zScaleTracker.stop();
			xScaleTracker = null;
			yScaleTracker = null;
			zScaleTracker = null;
			view.scene.removeChild(twFishOne);
			view.scene.removeChild(twTankC);
			xMove = null;
			twTankC = null;
			twFishOne = null;
			System.gc();
			trace("Killed");
		}
 
		public function addFish(myRSS:RSSJSONW):void{
			//trace(myRSS._twdata.length);
			var numFish:Number;
			if(myRSS._twdata.length >= 6){
				numFish = 6;
			}else{
				numFish = myRSS._twdata.length;
			}
			for (var i:uint = 0; i<numFish; i++) {
				//trace(view);
				twFishOne=new TwFish1(view);
				if (i!=0) {
					twFishOne.x=i*randRange(-200,400);
					twFishOne.y=i*randRange(-200,400);
					twFishOne.z=i*randRange(-200,400);
				}
				var baseFrequency:uint = (90 % 64)*4;
				xMove=new FunctionTracker(twFishOne,"scale",dancingFish,[i,twFishOne]);
				xMove.start();
				//trace(twFishOne.x);
				//var fishy:Object3D=twFishOne;
				//twFishOne.clipContainer.addChild(twFishOne);
				//twFishOne.addChild(twFishOne);
				view.scene.addChild(twFishOne);
 
				twFishOne.name=i.toString();
 
				//fishy.layer.blendMode = BlendMode.ADD;
				twFishOne.addEventListener(MouseEvent3D.MOUSE_DOWN, goFish,false, 0, true);
				System.gc();
 
			}
		}
		protected function goFish(event:MouseEvent3D):void {
			//trace(myRSS._twdata[int(event.currentTarget.name)]);		
			var myURL:URLRequest = new URLRequest(myRSS._twdata[int(event.currentTarget.name)]);
			navigateToURL(myURL);
		}
		public function onMouseWheelEvent(event:MouseEvent):void {
			//trace(event.delta);
			TweenLite.to(camera,1,{z: event.delta * 500 + camera.z,onUpdate: onCameraMove});
		}
		private function keyDown(e:KeyboardEvent):void {
			//trace(e);
			switch (e.keyCode) {
				case 32 :
					moveCamera();
					break;
			}
		}
 
		public function randRange(min:Number, max:Number):Number {
			// Generate a number between and including min - max
			var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
			return randomNum;
		}
 
		private function dancingFish(i:uint, twFishOne:TwFish1):void {
			var baseFrequency:uint = (i % 64)*4;
			//trace(baseFrequency + "-Beat");
			xScaleTracker=new FunctionTracker(twFishOne,"scaleX",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			yScaleTracker=new FunctionTracker(twFishOne,"scaleY",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			zScaleTracker=new FunctionTracker(twFishOne,"scaleZ",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			TweenLite.to(twFishOne, 5, {x:twFishOne.x + 50, y:twFishOne.y + 50, z:twFishOne.z + 50});
			xScaleTracker.start();
			yScaleTracker.start();
			zScaleTracker.start();
		}
		private function moveCamera():void {
			//trace("In Move Camera");
			TweenLite.to(
			                    camera, 
			                    4, 
			                    {
			                        x: Math2.rand(-9000, 9000),
			                        y: Math2.rand(-9000, 9000),
			                        z: 1400 + Math2.rand(-9800, 9000),
			                        delay: 2,
			                        onUpdate: onCameraMove
			                    }
			                );
 
		}
 
		private function onCameraMove():void {
			camera.lookAt( origin );
		}
 
 
		override protected function onPreRender():void {
			Tank.rotationY++;
 
		}
	}
}

Download Code / Launch Experiment

I also like what I have been seeing in the WebGL community. I think it would be really cool if haXe created a library for exporting to webGL/JavaScript I think this would have many benefits namely I could use my Away3D skills and export to webGL. They do currently export to Canvas but at this time I am not aware of any WebGL support within haXe. HaXe does support openGL for use in its vitual machine Neko so it seems that a library will likely be available soon.

Tweet Tank in Away3D and Hype

Brendon Smith — Tue, 11 May 2010 04:05:59 +0000

Alright so I know everyone associates Twitter with birds well all the bird models in the google 3d Warehouse suck. So I decided to make a fish tank because fish are cool. I used away3dlite, hype, and twitter to create this simple 3d / hype experiment. I will give you fare warning it is kind of processor intensive and I think if I re-export my models from prefab as a compile .awd this will alleviate some of the performance issues. The memory management isn’t so bad but I would like to improve the FPS. I will say this though in comparison to the html5 / webGL TweetTank I believe this one performs better. It also doesn’t heat up my Mac book like it is going to take off for space (I have noticed that in Firefox it does heat up when using webGL although it is a pre-alpha). I was also able to add sound to this version and use away3dlite a really solid 3d library for flash. This project was pretty easy didn’t take long to create and PreFab really speed up the process.

The Experiment:

PreFab is an Air application that allows Awary3d scene designers to easily import and export models for use with away3d. It is also important to note that away3d has spent a significant amount of time to optimize 3d away3d support Binary Space Partitioning. Hopefully in future versions of PreFab we can import .bsp maps that would truly be the cats meow! I was able to use PreFab to import my .dae files with ease and export them to actionscript with minor changes. It is nice to create the models as actionscirpt class files you can easily make changes to the class file directly and it didn’t take long to get them into flash!

In the next version of this fish tank I will make it so you can search twitter and the fish will be populated with your results. Right now if you click on a fish it will take you to a new window with a twitter search for “Flash”. I will also look at ways to further incorporate Hype and animate the fish more smoothly. I will also implement more camera support. In the third version I would like to demonstrate google maps integration and use the map to zoom in on the specific fish.

For those of you interested learning more about Away3d I suggest this Amazon book I haven’t read it yet but I look forward to it I just received it today in the mail. Away3d is easy to use and I also highly recommend looking at Hype this is a really cool framework that really opens up lots of possibilities for your creative output!

The Source Code:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class TweetTank extends Sprite {
		public var twitterFish:tweetFish=new tweetFish;
 
		public function TweetTank() {
			addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler, false, 0, true);
		}
 
		private function addedToStageHandler(e:Event):void {
 
			addChild(twitterFish);
			twitterFish.init();
			twitterFish.visible = true;
		}
 
 
	}
}
 
package {
	import away3dlite.containers.ObjectContainer3D;
	import away3dlite.materials.*;
	import away3dlite.materials.WireColorMaterial;
	import away3dlite.primitives.Cube6;
	import away3dlite.templates.BasicTemplate;
	import away3dlite.core.base.*;
	import away3dlite.core.utils.*;
	import away3dlite.events.*;
	import twFish.*;
	import twTank.*;
	import RSSJSONW;
	import com.theflashblog.utils.Math2;
 
	import com.adobe.utils.XMLUtil;
	import com.adobe.serialization.json.JSON;
	import com.adobe.xml.syndication.rss.Item20;
	import com.adobe.xml.syndication.rss.RSS20;
	import flash.events.IOErrorEvent;
	import flash.events.EventDispatcher;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.net.URLRequestMethod;
	import flash.system.Security;
 
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Vector3D;
	import flash.media.Sound;
	import flash.display.*;
	import flash.net.URLRequest;
	import flash.display.Bitmap;
	import flash.display.BlendMode;
	import flash.filters.BlurFilter;
	import flash.filters.GlowFilter;
	import flash.media.SoundChannel;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
 
 
	import gs.TweenLite;
 
	import hype.extended.behavior.FunctionTracker;
	import hype.extended.layout.GridLayout;
	import hype.framework.sound.SoundAnalyzer;
	import hype.framework.display.BitmapCanvas;
	import hype.extended.rhythm.FilterCanvasRhythm;
	import hype.extended.rhythm.FilterRhythm;
 
 
	public class tweetFish extends BasicTemplate {
		private var bitmapCanvas:BitmapCanvas;
		private var musicChannel;
		private var origin:Vector3D=new Vector3D(0,40,900);
		private var twFishOne:TwFish1;
		private var bitmapCanvasBlur:BitmapCanvas;
		private var twTankC:TwTank1;
		public var soundAnalyzer:SoundAnalyzer;
		public var sound:Sound;
		private var myX:Number=0;
		public var layout:GridLayout;
		public var Tank:ObjectContainer3D;
		[Bindable]public var myRSS:RSSJSONW;
		Security.loadPolicyFile("http://twitter.com/crossdomain.xml");
		Security.allowInsecureDomain("*");
		Security.allowDomain("*");
		public var myTimer:Timer = new Timer(1000);
		public var colourScheme:Array=[0x18b849,0x1858b8,0x18b81c,0x18b89c,0xb818b2,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02];
		public function tweetFish() {
			super();
		}
 
		public function init():void {
			stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
			var filterA:Array=new Array  ;
			filterA.push(new GlowFilter(0xFFFFFF, 1, 19, 19, 1, 1, false, false));
			var blur:BlurFilter = new BlurFilter();
			blur.blurX=900;
			blur.blurY=900;
			filterA.push(blur);
			playMusic();
			soundAnalyzer = new SoundAnalyzer();
			soundAnalyzer.start();
			layout=new GridLayout(-900,-175,30,30,60);
			Tank = new ObjectContainer3D();
			view.scene.addChild(Tank);
			Tank.addEventListener(MouseEvent3D.MOUSE_MOVE, goFish,false, 0, true);
			twTankC=new TwTank1(view);
			view.scene.addChild(twTankC);
			view.mouseEnabled=true;
			jsonInit("http://search.twitter.com/search.json?q=flash");
			camera.z=-2000;
			camera.x=-1600;
			camera.y=400;
			camera.lookAt( origin );
			stage.addEventListener(MouseEvent.CLICK,_checkMouseEventTrail,false,0,true);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown, false, 0, true);
 
		}
		public function jsonInit(siteFeed:String):void
			{
				myRSS = new RSSJSONW();;
				myRSS._data = "";
				myRSS._txtURL = siteFeed;
				myRSS.onJSON(myRSS._txtURL);
				myTimer.start();
				myTimer.addEventListener("timer", timedFunction);
			}
			public function timedFunction(eventArgs:TimerEvent):void
			{
				if (myRSS._IsReady == "true")
				{
					myTimer.stop();	
					addFish(myRSS);
				}
			}
		//Really Helpful for tracing events!	
		public function _checkMouseEventTrail($e:MouseEvent):void {
			var p:* =$e.target;
			while (p) {
				trace(">>", p.name,": ",p);
				p=p.parent;
			}
		}
 
		public function addFish(myRSS:RSSJSONW):void{
			for (var i:uint = 0; i<myRSS._twdata.length; i++) {
				trace(view);
				twFishOne=new TwFish1(view);
 
				if (i!=0) {
					twFishOne.x=i*randRange(-200,400);
					twFishOne.y=i*randRange(-200,400);
					twFishOne.z=i*randRange(-200,400);
				}
				var baseFrequency:uint = (90 % 64)*4;
				var xMove:FunctionTracker=new FunctionTracker(twFishOne,"scale",dancingFish,[i,twFishOne]);
				xMove.start();
				trace(twFishOne.x);
				var fishy:Object3D=twFishOne;
				//twFishOne.clipContainer.addChild(twFishOne);
				//twFishOne.addChild(twFishOne);
				view.scene.addChild(twFishOne);
 
				twFishOne.name=i.toString();
 
				//fishy.layer.blendMode = BlendMode.ADD;
				fishy.addEventListener(MouseEvent3D.MOUSE_DOWN, goFish,false, 0, true);
 
 
			}
		}
 
		public function playMusic():void {
			sound = new Sound();
			sound.load( new URLRequest( "test.mp3" ) );
			musicChannel=sound.play(0, int.MAX_VALUE);
			try{
 
			}catch(e:Error){
				musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopMusic);
			}
			musicChannel.addEventListener(Event.SOUND_COMPLETE, loopMusic);
		}
 
		public function loopMusic(e:Event):void {
			if (musicChannel!=null) {
 
				playMusic();
			}
		}
 
 
		protected function goFish(event:MouseEvent3D):void {
			trace(myRSS._twdata[int(event.currentTarget.name)]);		
			var myURL:URLRequest = new URLRequest(myRSS._twdata[int(event.currentTarget.name)]);
			navigateToURL(myURL);
		}
		public function onMouseWheelEvent(event:MouseEvent):void {
			trace(event.delta);
			TweenLite.to(camera,1,{z: event.delta * 500 + camera.z,onUpdate: onCameraMove});
		}
		private function keyDown(e:KeyboardEvent):void {
			trace(e);
			switch (e.keyCode) {
				case 32 :
					moveCamera();
					break;
			}
		}
 
		public function randRange(min:Number, max:Number):Number {
			// Generate a number between and including min - max
			var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
			return randomNum;
		}
 
		private function dancingFish(i:uint, twFishOne:TwFish1):void {
			var baseFrequency:uint = (i % 64)*4;
			//trace(baseFrequency + "-Beat");
			var xScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleX",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			var yScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleY",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			var zScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleZ",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]);
			TweenLite.to(twFishOne, 5, {x:twFishOne.x + 50, y:twFishOne.y + 50, z:twFishOne.z + 50});
			xScaleTracker.start();
			yScaleTracker.start();
			zScaleTracker.start();
		}
		private function moveCamera():void {
			trace("In Move Camera");
			TweenLite.to(
			                    camera, 
			                    4, 
			                    {
			                        x: Math2.rand(-9000, 9000),
			                        y: Math2.rand(-9000, 9000),
			                        z: 1400 + Math2.rand(-9800, 9000),
			                        delay: 2,
			                        onUpdate: onCameraMove
			                    }
			                );
 
		}
 
		private function onCameraMove():void {
			camera.lookAt( origin );
		}
 
 
		override protected function onPreRender():void {
			Tank.rotationY++;
 
		}
	}
}

Download Code / Launch Experiment

Cool Links:
Hype
Hype Blog
Prefab
Prefab – blog
Relly Cool Hype Away3d Example
Away3D
Context Free Art with JavaScript

Away3D with Hype Fish Tank

Brendon Smith — Mon, 03 May 2010 05:29:15 +0000

Well for awhile I was experimenting with C3DL which I like and will continue to play with in my spare time (Becuase it needs lots of refinement it is really rough). This is a flash rendering of the same experiment I will break this into several tutorials in the next couple weeks and post the code. In short I used PreFab to manage my models and I am really pleased with how easy it was to use! I have also decided to add sound to the experiment. I am also using the hype framework. I would like to make the fish in the Tank have a swarming effect. The swarming effect utilizes a point. I would like to look at modifying this so it could also except a vector. I will look at diving into this in the future. RIght now if you click on them they will not go to a twitter result this functionality and twitter search will be built into it at a later date probably next weekend. If you click on the spacebar the camera will zoom randomly if you spin the mouse wheel you will pivot around the center points. I will add more control in the near future. I really like the amount of control I have with the combination of Hype and Away3D this experiment was fun to put together. I am looking forward to refining it. The fish also currently dance to the music (Only if sound is not currently running in another tab like Youtube) I will work on smoothing these features out. I did get into a gotcha with mouse events in away3d and it was caused by a blur feature I added to a bitmap canvas it took me awhile to track down the issue and I found this helpful chunk of code on my quest to debug it. Check it out this is a life saver for tracking events down in ActionScript.

Click Here

I enjoyed working with prefab it is an excellent tool that will greatly speed up your away3d work-flow. The guys that built away3d have a book coming out from Friends of Ed. I personally can’t wait to receive it in the mail. I also hope to see a HypeFramework book in the near future as well. It is definetly an exciting time to be a flash developer. I am really looking forward to flash being on Android. It will be fun to use the HypeFramework with the accelerometer etc..

I have been busy working. I have really been studying HTML5 and I am really excited about it. I think WebGL is really cool although I also think the browsers should open up sound streams in the browser so they can be interpreted. Currently Flash can interpret sound but you can’t make a mashUp with youtube and interpret sound from that location because that would not be inline with the Flash Security model. I have also been keeping my eye on javascript frameworks that are geared toward mobile. I recommend looking at jQTouch and Sprout Core they have lots of potential. CSS3 is definitely the holy grail of CSS. The CSS transforms that are allowed on Webkit are awesome. Hopefully all the other browsers will follow suit (I won’t hold my breath for Internet Exploder). I am looking forward to putting together more content that is just geared at mobile devices. I also have been playing around with the iPhone SDK I got Wolfenstein to run on my iPhone emulator this week:)

Flash Links:
Hype Framework
Away3D
PreFab

WebGL Links:
Learning WebGL
C3DL
Energize
GlGE

JavaScript:
jQTouch
Sprout Core
Scripty
ProcessingJS

WebGL TweetTank Built with C3DL Part 2

Brendon Smith — Tue, 27 Apr 2010 04:27:42 +0000

I have added the ability to search twitter and re-populate the fish tank. So now you can place a search in like “Tool” or “Toledo” or whatever you query it will pull results from twitter. I have noticed this experiment is resource intensive. In part three of this experiment I will look for ways to tidy up the code make it more reusable and less resource intensive. I also noticed in c3dl they already have a nice random number function built in I will have to try and use that in the future. I am also curious to see if I can’t use this library to augment the Processing.JS library I noticed the same group at Secena is also working on this library I believe they have ported most of the new functions. I also added two sliders with jQuery to control the camera I am currently using an orbitCamera I think I will change this in the future to utilize a free camera and use the animateAxis function to animate around a vector with an angle. Currently I am using the Yaw and Pitch functions of the orbitCamera of course it looks kind of awkward to spin it. I will try to find ways to speed this experiment up, fix the picking result to be more sensitive, clean up the look and feel of it for part three. If there is a part four it will be about making the fish bound to the sphere and maybe making them so the swim back and forth not in a straight line.

I might also be making a similar experiment with away3Dlite and the hype framework with flash this weekend. This has been a fun experiment to play around with. Maybe Adobe should allocate some of their resources to compiling to javascript and using the webGL and DirectX for IE with the canvas tag (Even though It isn’t as fast as flash and doensn’t display the same across browsers). Haxe I believe currently does this to some extent I am not sure how fast the results are but seems to me their are Sandy3D experiments on Google Experiments.

Here is the code for the experiment:

var CANVAS_WIDTH = $(window).width;
var CANVAS_HEIGHT = $(window).height()*2;
$('#tweetTank').width(CANVAS_WIDTH);
$('#tweetTank').height(CANVAS_HEIGHT);
$('#tweetTank').css('display','block');
		var arrayTwit;
        var schooloffish;
        var fishArray = [];
        var bubblesArray = [];
        var bubbles;
		var objectsHit = "";
		var objectSelected;
		var cam;
		var searchInt = 0;
        function mRandom(r) {
            var randomInt = Math.floor(Math.random() * r + 1);
            return randomInt;
        }
 
        c3dl.addModel("fish.dae");
        c3dl.addModel("OceanSphere.dae"); 
        // The program main
        function canvasMain(canvasName) {
 
            // Create new c3dl.Scene object
            scn = new c3dl.Scene();
            scn.setCanvasTag(canvasName);
 
            // Create GL context
            renderer = new c3dl.WebGL();
            renderer.addTexture("bubble.jpg");
            renderer.createRenderer(this);
 
            // Attach renderer to the scene
            scn.setRenderer(renderer);
            scn.init(canvasName);
            //the isReady() function tests whether or not a renderer
            //is attached to a scene.  If the renderer failed to
            //initialize this will return false but only after you
            //try to attach it to a scene.
            if (renderer.isReady()) {
                // Create a Collado object that
                // will contain a imported
                // model of something to put
                // in the scene.
                var schooloffish = mRandom(100);
                var ocean = new c3dl.Collada();
                ocean.init("OceanSphere.dae");
                ocean.setAngularVel(new Array(0, .00005, 0));
                ocean.scale([20.0, 20.0, 20.0]);
                ocean.setPickable(false);
                scn.addObjectToScene(ocean); 
				//console.log(arrayTwit.length);
                for (var i = 0; i < arrayTwit.length; i++) {
					//console.log(arrayTwit[i]);
                    fishArray[i] = new c3dl.Collada();
                    fishArray[i].init("fish.dae");
                    fishArray[i].yaw(45.0);
					fishArray[i].ID = "Fish" + i;
                    //fish.roll(25.0);
                    fishArray[i].pitch(-86.4);
					fishArray[i].setLinearVel([0,0,-2]);
                    fishArray[i].url = "http://twitter.com/" + arrayTwit[i].from_user;
                    //fish.setPosition([1200, 100, 700]);
                    fishArray[i].setPosition([mRandom(1200), mRandom(900), mRandom(1500)]);
                    scn.addObjectToScene(fishArray[i]);
                }
                for (var i = 0; i < 7; i++) {
                    bubblesArray[i] = new c3dl.ParticleSystem();
                    bubblesArray[i].setMinVelocity([-2, 0, -2]);
                    bubblesArray[i].setMaxVelocity([2, 25, 2]);
                    bubblesArray[i].setMinLifetime(5.3);
                    bubblesArray[i].setMaxLifetime(10.7);
                    bubblesArray[i].setMinColor([0, 0, 0.3, 0]);
                    bubblesArray[i].setMaxColor([0, 0.3, 0.5, 1]);
                    bubblesArray[i].setSrcBlend(c3dl.ONE);
                    bubblesArray[i].setDstBlend(c3dl.ONE);
                    bubblesArray[i].setMinSize(0.5);
                    bubblesArray[i].setMaxSize(5.0);
                    bubblesArray[i].setTexture("bubble.gif");
                    bubblesArray[i].setAcceleration([0, 9, 0]);
                    bubblesArray[i].setEmitRate(40);
                    bubblesArray[i].init(150);
                    bubblesArray[i].setPosition([mRandom(1200), mRandom(100), mRandom(700)]);
                    scn.addObjectToScene(bubblesArray[i]);
                }
                // Create a camera
                //var cam = new c3dl.FreeCamera();
 
 
 
               // scn.setCamera(cam);
                cam = new c3dl.OrbitCamera();
                cam.setFarthestDistance(2000);
                //cam.pitch(90);
                cam.setPosition(new Array(3000.0, 300.0, 200.0));
                //cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));
                cam.setOrbitPoint(new Array(800.0, 100.0, 200.0));
                cam.setClosestDistance(200);
                cam.setDistance(900);
                //cam.pitch(1);
                scn.setCamera(cam);
                // Start the scene
                scn.startScene();
                scn.setPickingCallback(goLink);
                //scn.setKeyboardCallback(onKeyUp, onKeyDown);
                scn.setMouseCallback(mouseWheel);
 
            }
        }
 
		function goLink(pickingObj)
		{
 			var objectsHit = pickingObj.getObjects();
 
 			if( objectsHit.length > 0 )
			 {
 				var sepiaEffect = new c3dl.Effect();
				sepiaEffect.init(c3dl.effects.SEPIA);
 				window.open(objectsHit[0].url, '_blank');
				objectsHit[0].setEffect(sepiaEffect);
 					for(var i = 0; i < arrayTwit.length; i++){
 						if(objectsHit[0].url == scn.getObj(i).url)
 					scn.getObject(i).setEffect(sepiaEffect);
 					}
 				}
		}
 
        function mouseWheel(event) {
            var delta = 0;
			const ZOOM_SENSITIVITY = 3;
            // Chromium
            if (event.wheelDelta) {
                delta = -event.wheelDelta / 20;
            }
            // Minefield
            else if (event.detail) {
                delta = event.detail * 4;
            }
 
            else {
                if (keyD) {
                    cam.yaw(delta * ZOOM_SENSITIVITY / 100);
                }
                else {
 
                    // towards user
                    if (-delta * ZOOM_SENSITIVITY < 0) {
                        cam.goFarther(-1 * -delta * ZOOM_SENSITIVITY);
                    }
 
                    // towards screen
                    else {
                        cam.goCloser(-delta * ZOOM_SENSITIVITY);
                    }
                }
            }
        }
 
 
function twitterSearch(searchTag) {
	//console.log(searchTag);
	arrayTwit = "";
	arrayTwit = new Array();
                $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?",
        function(data) {
            $.each(data.results, function(i, item) {
                twitSeach = item;
                arrayTwit.push(twitSeach);
            });
 
			if(searchInt >=1){
				searchInt++;
				$('#TweetTankBowl').html("");
				$('#TweetTankBowl').html('');
				$('#tweetTank').width(CANVAS_WIDTH);
				$('#tweetTank').height(CANVAS_HEIGHT);
				$('#tweetTank').css('display','block');
				canvasMain("tweetTank");
			}else{
				searchInt++;	
				c3dl.addMainCallBack(canvasMain, "tweetTank");
			}
		 });
}
$(document).ready(function() {
            twitterSearch("fishing");
			sliderGo();
        });
 
function goTwitter(){
var tweet =  $('#tweetSearchTxt').val();
twitterSearch(tweet);	
}
 
function sliderGo(){
$("#sliderVeritcal").slider({
				step: 0.15,
				min: 0.00,
				max:360.00,
				orientation: 'vertical',
				slide: function(event, ui) {  
					cam.pitch(ui.value);
				}
			});
				$("#sliderHorizontal").slider({
				step: 0.15,
				min: 0.00,
				max:360.00,
				slide: function(event, ui) {  
					cam.yaw(ui.value);
				}
			});	
}

Launch Experiment / Download Code

WebGL TweetTank Built with C3DL Part 1

Brendon Smith — Mon, 19 Apr 2010 01:04:01 +0000

First of all let me mention you will not be able to run this demo unless your browser is WebGL ready. So that means if you want to see this then you have to download a nightly build of FireFox, Chrome, or Safari. You can read how to do this here.

My first impressions of WebGL is it is awesome and easy to do. I believe WebGL will make it easy for any developer to rapidly create a game on the web. It is fast appears to have decent support meaning that it works awesome on my Apple computers and on one of my Windows7 computers but then fails for me on one of my workstations that has a souped up ATI graphics card humm.. go figure. It is hard to say how well the graphics rendering will perform on the majority of computers out their but it probably won’t be that bad and after all these are nightly builds that are pre-alpha for the most part. It also makes me wonder if the next iPhones will have this feature built into their webkit. Hard to say. It is known that out of all the new browsers coming out that ie9 will not support graphics rendering shocking (Not really). It might be because Microsoft believes that WebGL will be an epic failure or maybe they simply don’t have the resources to devote to it at this time.

I believe graphic card support in these new browsers will speed up canvas rendering a little but I when looking at the flash benchmarks that are currently out their it definitely shows you how fast the flash player is in comparison. In short canvas tag is not even remotely as fast. In the news their has been lots of discussion about flash being dead but this simply isn’t true. Here is why forthcoming HDTV/3DTV will support flash, google phones will support flash, blackberry, and windows phones will all support flash. So as a mobile platform it will be the easiest way to build and deploy to all platforms. It is too bad Apple doesn’t see it but oh well. I guess I will just have to get better at Objective-C to be on that platform.

This is the first part of a two part example. I created a simple mashup. To create this example I used C3DL and jQuery. C3DL is an awesome opensouce library put together by the wonderful people at Seneca College. This example pulls a search results from twitter with the search query subject being fishing. Yes, I know that twitter is all about birds and tweets but after scouring the Google 3D warehouse, I decided that most of the models for birds that are freely available suck. So I made a virtual fish tank instead. The tank has bubbles rendered with the C3DL particle library and it also has a school of fish that swim slowly though the tank. It’s not really ground shaking stuff pretty simple. I will work on a future version where it pulls results with ajax. I noticed the C3DL library attaches an event listener in the init.js that listens for the document to be loaded . This of course makes my search function of twitter fail. I have looked at overriding this feature a number of ways not limited to jQuery getScript, etc.. I could also put the query on the query string for the window location and then re-load the page but I think that would be kind of wonky so whatever I will do this in the next version of the experiment. So whatever I will save it for next time.

Check out the experiment here but before you do download a nightly build of Firefox.

Here is the code for the experiment:

var CANVAS_WIDTH = $(window).width();
var CANVAS_HEIGHT = $(window).height()*2;
$('#tweetTank').width(CANVAS_WIDTH);
$('#tweetTank').height(CANVAS_HEIGHT);
$('#tweetTank').css('display','block');
 
		var arrayTwit;
        var schooloffish;
        var fishArray = [];
        var bubblesArray = [];
        var bubbles;
		var objectsHit = "";
		var objectSelected;
        function mRandom(r) {
            var randomInt = Math.floor(Math.random() * r + 1);
            return randomInt;
        }
 
        c3dl.addModel("fish.dae");
        c3dl.addModel("OceanSphere.dae"); 
        // The program main
        function canvasMain(canvasName) {
 
            // Create new c3dl.Scene object
            scn = new c3dl.Scene();
            scn.setCanvasTag(canvasName);
 
            // Create GL context
            renderer = new c3dl.WebGL();
            renderer.addTexture("bubble.jpg");
            renderer.createRenderer(this);
 
            // Attach renderer to the scene
            scn.setRenderer(renderer);
            scn.init(canvasName);
 
            //the isReady() function tests whether or not a renderer
            //is attached to a scene.  If the renderer failed to
            //initialize this will return false but only after you
            //try to attach it to a scene.
            if (renderer.isReady()) {
                // Create a Collado object that
                // will contain a imported
                // model of something to put
                // in the scene.
 
                //fish.setAngularVel(new Array(0.0, 0.0001, 0.0));
 
                var schooloffish = mRandom(100);
                var ocean = new c3dl.Collada();
                ocean.init("OceanSphere.dae");
                ocean.setAngularVel(new Array(0, .00005, 0));
                ocean.scale([20.0, 20.0, 20.0]);
                ocean.setPickable(false);
                scn.addObjectToScene(ocean); 
				//console.log(arrayTwit.length);
                for (var i = 0; i < arrayTwit.length; i++) {
					//console.log(arrayTwit[i]);
                    fishArray[i] = new c3dl.Collada();
                    fishArray[i].init("fish.dae");
                    fishArray[i].yaw(45.0);
					fishArray[i].ID = "Fish" + i;
                    //fish.roll(25.0);
                    fishArray[i].pitch(-86.4);
					fishArray[i].setLinearVel([0,0,-2]);
                    fishArray[i].url = "http://twitter.com/" + arrayTwit[i].from_user;
                    //fish.setPosition([1200, 100, 700]);
                    fishArray[i].setPosition([mRandom(1200), mRandom(900), mRandom(1500)]);
                    scn.addObjectToScene(fishArray[i]);
                }
                for (var i = 0; i < 7; i++) {
                    bubblesArray[i] = new c3dl.ParticleSystem();
                    bubblesArray[i].setMinVelocity([-2, 0, -2]);
                    bubblesArray[i].setMaxVelocity([2, 25, 2]);
                    bubblesArray[i].setMinLifetime(5.3);
                    bubblesArray[i].setMaxLifetime(10.7);
                    bubblesArray[i].setMinColor([0, 0, 0.3, 0]);
                    bubblesArray[i].setMaxColor([0, 0.3, 0.5, 1]);
                    bubblesArray[i].setSrcBlend(c3dl.ONE);
                    bubblesArray[i].setDstBlend(c3dl.ONE);
                    bubblesArray[i].setMinSize(0.5);
                    bubblesArray[i].setMaxSize(5.0);
                    bubblesArray[i].setTexture("bubble.gif");
                    bubblesArray[i].setAcceleration([0, 9, 0]);
                    bubblesArray[i].setEmitRate(40);
                    bubblesArray[i].init(150);
                    bubblesArray[i].setPosition([mRandom(1200), mRandom(100), mRandom(700)]);
                    scn.addObjectToScene(bubblesArray[i]);
                }
                // Create a camera
                //var cam = new c3dl.FreeCamera();
 
 
 
               // scn.setCamera(cam);
                cam = new c3dl.OrbitCamera();
                cam.setFarthestDistance(2000);
                //cam.pitch(90);
                cam.setPosition(new Array(3000.0, 300.0, 200.0));
                //cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));
                cam.setOrbitPoint(new Array(800.0, 100.0, 200.0));
                cam.setClosestDistance(200);
                cam.setDistance(900);
                //cam.pitch(1);
                scn.setCamera(cam);
                // Start the scene
                scn.startScene();
                scn.setPickingCallback(goLink);
                scn.setKeyboardCallback(onKeyUp, onKeyDown);
                scn.setMouseCallback(mouseMove, mouseWheel);
 
            }
        }
 
		function goLink(pickingObj)
		{
 			var objectsHit = pickingObj.getObjects();
 
 			if( objectsHit.length > 0 )
			 {
 				var sepiaEffect = new c3dl.Effect();
				sepiaEffect.init(c3dl.effects.SEPIA);
 				window.open(objectsHit[0].url, '_blank');
				objectsHit[0].setEffect(sepiaEffect);
 					for(var i = 0; i < arrayTwit.length; i++){
 						if(objectsHit[0].url == scn.getObj(i).url)
 					scn.getObject(i).setEffect(sepiaEffect);
 					}
 				}
		} 
 
 
        function onKeyUp(event) {
            if (event.keyCode == 89) { keyD = false; }
        }
 
 
        function mouseWheel(event) {
            var delta = 0;
 
            // Chromium
            if (event.wheelDelta) {
                delta = -event.wheelDelta / 20;
            }
            // Minefield
            else if (event.detail) {
                delta = event.detail * 4;
            }
 
            else {
                if (keyD) {
                    cam.yaw(delta * ZOOM_SENSITIVITY / 100);
                }
                else {
 
                    // towards user
                    if (-delta * ZOOM_SENSITIVITY < 0) {
                        cam.goFarther(-1 * -delta * ZOOM_SENSITIVITY);
                    }
 
                    // towards screen
                    else {
                        cam.goCloser(-delta * ZOOM_SENSITIVITY);
                    }
                }
            }
        }
 
 
        function onKeyDown(event) {
            if (event.keyCode == 65) {
                cam.setOrbitPoint([0, 0, 0]);
            }
            if (event.keyCode == 89) {
                keyD = true;
            }
        }
        function mouseMove(event) {
            // get mouse coords relative to window
            var mmx = event.pageX - 1;
            var mmy = event.pageY - 1;
 
 
 
            if (mmx != null && mmy != null) {
                // NDC
                var normalizedDeviceCoords = [
        (2 * mmx / CANVAS_WIDTH) - 1,
       -((2 * mmy / CANVAS_HEIGHT) - 1),
        1, 1];
 
                // Sometimes this is called before the perspective transform
                // is setup which causes warnings. This check prevents that.
                if (c3dl.isValidMatrix(scn.getProjectionMatrix())) {
                    var iproj = c3dl.inverseMatrix(scn.getProjectionMatrix());
 
                    // To get the clip coords, we multiply the viewspace coordinates by
                    // the projection matrix.
                    // Working backwards across the pipeline, we have to take the normalized
                    // device coordinates and multiply by the inverse projection matrix to get
                    // the clip coordinates.
                    var clipCoords = c3dl.multiplyMatrixByVector(iproj, normalizedDeviceCoords);
 
                    // perspective divide
                    clipCoords[0] /= clipCoords[3];
                    clipCoords[1] /= clipCoords[3];
                    clipCoords[2] /= clipCoords[3];
                    clipCoords[2] = -clipCoords[2];
 
                    var rayInitialPoint = cam.getPosition();
 
                    var x = clipCoords[0];
                    var y = clipCoords[1];
                    var z = clipCoords[2];
 
                    var kludge = c3dl.multiplyVector(cam.getLeft(), -1);
                    var viewMatrix = c3dl.makePoseMatrix(kludge, cam.getUp(), cam.getDir(), cam.getPosition());
 
                    var rayTerminalPoint = c3dl.multiplyMatrixByVector(viewMatrix, [x, y, z, 0]);
                    var rayDir = c3dl.normalizeVector(rayTerminalPoint);
 
                    // get angle
                    var angle = Math.acos(-1 * rayDir[1]);
                    var camHeight = rayInitialPoint[1];
 
                    var hyp = camHeight / Math.cos(angle);
 
                    mx = hyp * rayDir[0] + rayInitialPoint[0];
                    my = hyp * rayDir[1];
                    mz = hyp * rayDir[2] + rayInitialPoint[2];
                }
            }
        }
function twitterSearch(searchTag) {
	//console.log(searchTag);
	arrayTwit = "";
	arrayTwit = new Array();
                $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?",
        function(data) {
            $.each(data.results, function(i, item) {
                twitSeach = item;
                arrayTwit.push(twitSeach);
            });
			//c3dl.init();
			c3dl.addMainCallBack(canvasMain, "tweetTank");
        });
 
        }
$(document).ready(function() {
            twitterSearch("fishing");
        });

Launch Experiment / Download Code

I mentioned possibly creating a spider with silverlight. I still would like to do that in the near future. I found this cool silverlight examples and would like to study it! I have installed Visual Studio 2010 on my Windows boxes and it is awesome!

I have also been eying a new tutorial on the Hype Framework in ComputerArts latest issue(174). Has a really cool example that teaches you how to use Hype to make music drawings created by Stewart Hamilton-Arrandale. I will learn from this code. I could add this type of functionality into my KulerSplash.

I also found this resource recently on Objective-C really cool web site it was nice of them to share so much Fabien also has some cool JAVA examples as well.

WebGL libraries:
C3DL
CopperLicht
SceneJS

Simple Flip3D in ActionScript3

Brendon Smith — Sun, 11 Apr 2010 21:31:15 +0000

This code will show you how to develop a simple native actionscript3d Class it shows you two different methods you could use to develop your own flip 3d effect in ActionScript3 this uses Flash Player 10. This code also only uses the built in functionality of Flash with the exception of the use of Tweener Class used in one of the way you could potentially animate it. You could also use a 3d library like Papaervision3D or Away3D and these libraries would give your more options and greater control but this is just a simple 3D flip using rotationX property of flash. This shows you how you might go about creating a Rolodex like effect in flash. I have also made the code more reusable because it is a class of its own that can be linked to a flash movie clip dragged on the stage and then called and reused easily. One of the many great features of flash is the ability to change visual objects into classes (Visual OOP) of there own rapidly! I have written code that basically once applied to a movie clip will randomly display a frame you will see this in the class you can expand it add new frames to the array etc.. What it does is randomly picks a frame displays the image and then once clicked will rotate the X property of the movie to about 84 degrees and disappear. It also shows you two different ways you could accomplish this task. One way the way I like the best is to use Tweener an animation library that has been around in the Flash community for years. Tweener frees you from the time line in other words your animation is time based instead of frame based. Time based is completely the way to go this ensures your users that they will have the same effect and performance regardless. Time based animation effects have been around in the Flash community for years actually Robert Penner wrote an excellent book Programming Macromedia Flash MX years ago I would recommend this book to anyone who is interested in learning the inner workings of easing equations for animation. His book inspired many animation libraries to be built and his equations can actually be found in many JavaScript animation libraries as well. Frame based animations tend to not always run at the speed of the Timeline FPS as a result they can lag and display a jumpy performance. If you would like a frame based approach I have included one that show you you can call a click function and then tie it to an EnterFrame event and that triggers the animation if you so please.

Call the Class from the Frame

var flipID:uint = new uint(1);
var sc9MainPortImg1:sc9MainPortImg = new sc9MainPortImg();
addChild(sc9MainPortImg1);
sc9MainPortImg1.x=0;
sc9MainPortImg1.y=55;
sc9MainPortImg1.name = "sc9Img"+flipID;
sc9MainPortImg1.buttonMode = true;
sc9MainPortImg1.addEventListener(MouseEvent.MOUSE_DOWN, sc9PortClick);
 
function sc9PortClick(e:MouseEvent){
var sc9MainPortImg1:sc9MainPortImg = new sc9MainPortImg();
addChildAt(sc9MainPortImg1,1);
sc9MainPortImg1.x=0;
sc9MainPortImg1.y=55;	
sc9MainPortImg1.name = "sc9Img"+flipID++;
trace(sc9MainPortImg1.name);
sc9MainPortImg1.buttonMode = true;
sc9MainPortImg1.addEventListener(MouseEvent.CLICK, sc9PortClick);
}

The actual Simple Flip 3D Class

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.*;
	import flash.display.*;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import flash.net.LocalConnection;
	import fl.transitions.*;
	import caurina.transitions.Tweener;
	import flash.external.ExternalInterface;
 
	public class sc9MainPortImg extends MovieClip {
		public var n:Number;
		public function sc9MainPortImg():void {
			randomFrame();
			this.addEventListener(MouseEvent.CLICK, spinClick);
		}
 
		public function randomFrame():void{
			var frameArray:Array = new Array();
			frameArray[0]=1;
			frameArray[1]=2;
			frameArray[2]=3;
			frameArray[3]=4;
			// Get random number created
			n=randRange(1,4);
			trace(n);
			trace(frameArray);
			// gotoAndStop Frame lable name
			this.gotoAndStop(frameArray[n]);
		}
 
		public function spinClick(e:MouseEvent):void{
			//this.addEventListener(Event.ENTER_FRAME, spin); --> Enable for Frame Based Animation Example 
			var open_tween={rotationX:-84,alpha:0.0,time:20,transition:"easeoutelastic",delay:0};
			Tweener.addTween( this, open_tween);
		}
 
		public function spin(e:Event){
			this.rotationX -= 2;
			if(this.rotationX == -84){
				this.visible = false;
				this.removeEventListener(Event.ENTER_FRAME, spin);
			}
		}
 
		public function randRange(min:Number, max:Number):Number {
				// Generate a number between and including min - max
				var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
				return randomNum;
		}
	}
}

Launch Experiment / Download Code

jQuery Abstract Lines Experiment

Brendon Smith — Sun, 11 Apr 2010 19:12:06 +0000

I have put together a simple experiment that draws semi-transparent lines on an HTML page incrementally for no particular purpose. This is something I can do with ActionScript the difference is this experiment in ActionScript would be 3 times faster and I would have greater control not only would it be faster but it would also work on every browser and render the exact same way. I do like JavaScript but it is not substitution for ActionScript or C#. Someday I am quite sure it will mature and more and more libraries of code will be ported over but the expectation for things to render the same way cross browser is a long ways away form a reality. HTML5 is simply not a Flash or Silverlight Killer. I also know that browsers will need faster JavaScript engines more like Google’s Chrome V8 to compete with browser plugins. I love ActionScript I find it to be a powerful fast solution with stunning results that cannot be found on the web else where. In the future I think I will focus most of my JavaScript experiments on jQuery using processingJS because processing is easy to use fast and is the weapon of choice I believe for making really cool data visualization mashups. In this experiment I used a jQuery timer to execute drawing of lines on the page. It is a relatively easy experiment and didn’t take long to make and was fun to create so here you go.

var bg = ' 
';
var lpos = 0;
var lint = 1;
var midPoint;
var lineCount = 0;
var mainWidth = $(window).width();
mainWidth = mainWidth - 15;
var mainHeight = $(window).height();
midPoint = mainHeight / 2;
function goLines(){
$('#container').append(bg);
$('.lineBg').css('top', midPoint - 100);
$('.lineBg').css('left', '0');
$('.lineBg').css('display', 'block');
$(this).everyTime(200, function(lineCount) {
	lineCount++;									
    randomLines(lineCount);
  }, 700);
}
function randomLines(i){	
var l1 = ';
var l2 = '" class="line"> 
';
	 var l = l1+i+l2;	
	 $('#container').append(l);
	 $('#'+i).css('left', getLeftPos(i,mainWidth));
	 if(isEven(i)){
      $('#'+i).css('top',midPoint);
	  $('#'+i).animate({rotate: getRotation(), height: getScale(), opacity: '+=0.5', backgroundColor:'#01a6fb' }, 300); 
	 }else{
	 var neg = true;
	  $('#'+i).css('top',midPoint - 100);
	  $('#'+i).animate({rotate: getRotation(neg), height: getScale(), opacity: '+=0.5' }, 300); 	 
	 }
	  $('#'+i).css('display','block');
}
 
function getLeftPos(i,mainWidth){
	lPos = i;
	lPos *= 5;
	if(lint > mainWidth){
		lint = 1;
	}
   if(lPos > mainWidth){
		lPos = 0 + lint++;
		lPos *= 5;
	}
	console.log("Width " + mainWidth+ " lPos " + lPos + " lint " +lint );
	return lPos;
}
 
function isEven(num) {
  return !(num % 2);
}
 
 
function getRotation(neg){
if(neg == undefined){
var rotation = Math.random()*100-50;
var rotation = '-=' + rotation.toString();
console.log("Neg " + rotation);
}else{
var rotation = Math.random()*300-50;	
var rotation = '+=' + rotation.toString();
console.log("Pos " + rotation);
}
return rotation;
}
 
function getScale(){
var scale = Math.random()*300;
var scale = '+=' + scale.toString();
return scale;
}
 
 
 
 
$(document).ready(function() { 					   
if(!$.browser.msie){						   
 goLines();
 
}else{
	$('#container').append("Please don't use this browser it lacks HTML5 capablites and is the bane of Web Development!  Go get Chrome, Firefox, Safari, something!");
}
});

Launch Experiment / Download Code

Simple jQuery Flower Experiment

Brendon Smith — Tue, 06 Apr 2010 04:00:12 +0000

Simple flower experiment didn’t take to long this experiment uses jQuery. This experiment didn’t take long to put together but at the same time I can’t help but think it would be better with Flash/Silverlight/Processing simply because of the way the browser doesn’t seem to be able to handle the PNG with semi-transparency and the animation ends up being kind of slow might have been better if I would have used ProcessingJS, but at the same time it was an idea I had and took all of about a half hour to produce. While searching for a plugin that could rotate the object I also found a cool bezier, curve, arc plugin and really it is kind of fun to play around with jQuery. This was kind of fun to make although it also kind of reminds me of playing around with a Mandala kids toolkit for drawing (you know those simple toolkits where you get a wheel and you spin it around to create various concentric circles). Don’t get me wrong I like both JavaScript and technologies like Flash/Silverlight/Processing but I see those technologies being able to handle extreme graphic rendering extremely well and more importantly consistently. The catch with no plugin has always been browser support. Maybe that will go away if the next generation browser all implement the new technologies consistently but honestly I don’t see that happening anytime soon. I am also glad to hear that flash is going to be integrated into chrome! I think flash should honestly be integrated directly into the browsers. It is also exciting to see the new browsers supporting WebGL. I see adobe making future versions of flash with the ability to compile to Canvas just a hunch especially when you start to consider technologies like haXe and jangaroo

 
function bloom(){
var scale = 120;
var rotation = 0;
var flower = '
';
var flower2 = '
';
var flower3 = '
';
var flower4 = '
';
 for(i=0; i<40; i++){
 $('#flowerBed').append(flower);
 $('#flowerBed').append(flower2);
 $('#flowerBed').append(flower4);
 $('#flowerBed').append(flower3);
 $('.flower').css('top', $('#flowerBed').height() / 2);
 $('.flower').css('left', $('#flowerBed').width() / 2);
 $('.flower').animate({rotate: '+=20deg', scale: '+=0.06', opacity: 0.90}, 400);
 $('.flower2').css('top', $('#flowerBed').height() / 2);
 $('.flower2').css('left', $('#flowerBed').width() / 2);
 $('.flower2').animate({rotate: '+=40deg', scale: '+=0.04', opacity: 0.60}, 600);
 $('.flower4').css('top', $('#flowerBed').height() / 2);
 $('.flower4').css('left', $('#flowerBed').width() / 2);
 $('.flower4').animate({rotate: '+=60deg', scale: '+=0.03', opacity: 0.30}, 800); 
 $('.flower3').css('top', $('#flowerBed').height() / 2);
 $('.flower3').css('left', $('#flowerBed').width() / 2);
 $('.flower3').animate({rotate: '+=80deg', scale: '+=0.01'}, 1000); 
 }
}
 
$(document).ready(function() { 
if(!$.browser.msie){						   
 bloom();
}else{
	$('#flowerBed').append("Please don't use this browser it lacks HTML5 capablites and is the bane of Web Development!  Go get Chrome, Firefox, Safari, something!");
}
});

Launch Experiment / Download Code

CodeBreaker a Game of Deduction

Brendon Smith — Sun, 04 Apr 2010 20:01:45 +0000

Let me first start of by simply telling you I have been reading Flash Game University by Gary Rosenzweig. This is an excellent resource for anyone who wants to teach themselves how to create games. The examples in the book are relatively simple but of course the logic that goes into creating them is not. While reading and studying the examples I have decide to convert some of the examples over to JavaScript not because I think JavaScript is better etc. etc. Personally I hate reading articles where people flame Adobe and say flash is dead etc.. Most of the time the people who write these articles can’t do both I can so I like both! Simply because I thought it would help me along in the thinking process. Some people play Bridge, Chess, Sudoku, or Crossword Puzzles to stay sharp I write code and study code to stay sharp. So in his book he has an example that is similar to the MasterMind board game. I decided to port over this game to JavaScript and have done this you can find the example by clicking here. If you like this example please purchase his book it is an excellent book and this code was generated by studying his example so please pay him tribute and purchase the book like I have. A little background about the game if it says you have a correct spot and the correct color. If it says you have the correct color you have the correct color but it is in the incorrect spot.

 		// constants
        const numPegs = 5;
        const numColors = 5;
        const maxTries = 10;
        const horizOffset = 30;
        const vertOffset = 60;
        const pegSpacing = 30;
        const rowSpacing = 30;
 
        // game play variables
        var solution = new Array();
		var solutionButtonArray;
        var turnNum;
 
        // references to display objects
		var buttonImages = new Array("img/cbBlack.png","img/cbGreen.png","img/cbYellow.png","img/cbPurple.png","img/cbRed.png", "img/cbBlue.png" );
        var currentRow = new Array();
        var currentText;
		var currentButton;
	    var mainIds = 0;
		var myButton;
		function startGame() {
			for(var i =0;i<numPegs;i++) {
				// random, from 0 to 4
				var r = Math.floor(Math.random()*numColors) + 1;
				solution.push(r);
			}
			turnNum = 0;
			createPegRow();
		}
 
	   function createPegRow(start) {
		   solutionButtonArray = new Array();
		   if(start == undefined){
		   $('#cbMainGame').html("");
		   }
		   var cbButton1 = ';
		   var cbButton2 = '" onclick="clickButton(this)">;
		   var cbButton3 = '" alt="0" src="img/cbBlack.png" />
';
		   var mainWrapper1 = '';
		   var mainWrapper2 = '
';
		   $('#cbMainGame').append(mainWrapper1);
		   var btnFinished = ';
		   var btnFinished2= '">;
		   var btnFinished3= '" onclick="executeGameQuery(this)">Done
';
	   	   currentRow = new Array();
		   for(i=0;i<numPegs;i++) {
				$('#cbMainGame').append(cbButton1+mainIds+cbButton2+mainIds+cbButton3);
				solutionButtonArray.push("img"+mainIds);
				mainIds++;
			}
			$('#cbMainGame').append(btnFinished+mainIds+btnFinished2+mainIds+btnFinished3+mainWrapper2);
	   }
 
	   function clickButton(clicked){
		   var myButton = clicked;
		   var img = $(clicked).find('img');
		   var imageToChange = img[0].alt.toString();
		   if(imageToChange == 6){
			imageToChange = 0;   
		   }
		   //console.log(imageToChange);
		   $("#"+img[0].id).attr("src",buttonImages[parseInt(imageToChange) + 1]);
		   $("#"+img[0].id).attr("alt", parseInt(imageToChange) + 1);
	   }
 
	   function executeGameQuery(mainButton){
		   var buttonClicked = mainButton;
		   var changeThis = buttonClicked.id;
		   var currentColorList = new Array();
		   var colorList = new Array(0,0,0,0,0);
		   var soltionList = new Array(0,0,0,0,0);
		   changeThis = $("#"+changeThis).parent().parent();
		   //console.log(changeThis);
		   var numberCorrect = 0;
		   var numberColorsCorrect = 0;
		   turnNum++;
		   for(i=0; i<numPegs; i++){
			   currentColorList.push($("#"+solutionButtonArray[i]).attr("alt"));
			   $("#"+solutionButtonArray[i]).parent().removeAttr("onclick");
		   }
		   for(i=0; i<numPegs; i++){
			  if(currentColorList[i] == solution[i] ){
				  numberCorrect++;
			  }else{
				  soltionList[solution[i]]++;
				  colorList[parseInt(currentColorList[i])]++;
			  }
		   }
		   for(i=0; i<numColors; i++){
			   var test = Math.min(soltionList[i],colorList[i]);
				numberColorsCorrect = numberColorsCorrect + Math.min(soltionList[i],colorList[i]);
			}
		   $("#"+buttonClicked.id).remove();
		   if(numberCorrect == numPegs){
		   $(changeThis).html('You Got It!
Play Again
');
		   }else if(turnNum == maxTries){
			   $(changeThis).html('I regret to infrom you just lost next time do it quicker! 
Play Again
');
 
		   }
		   else{
		   $(changeThis).html("Correct Spot: "+numberCorrect+", Correct Color: "+numberColorsCorrect);
		   var start = true;
		   createPegRow(start);
		   }
	   }
$(document).ready(function() { 
$('#cbMainGame').append(startGameHTML);						   
});

Launch Game / Download Code

I have also been spending some time playing around with Alchemy last post I displayed some examples of RayCasters the old style 3d of Games like Wolfenstien and Doom. In short most of the raycasters out their follow this example this example is a c++ example and Adobe has a project in their labs called Alchemy. Alchemy allows you to port existing C/C++ to ActionScript. Which is really cool but also extremely difficult to do:) Right now I need to rewrite a chunk of it that uses SDL lib an old library that was used to create most video games years ago. I searched to see if someone was doing something similar and sure enough someone is Bruce Jawn. He informed me that instead of using SDL I need to pass it to the screen buffer as a byte array. So that is currently what I am trying to do he also mentioned posting his Make file under Google code in the near future. Hopefully he does I have also noticed haXe has an SDL wrapper. This might also be useful to study RayFaster2 this is a RayCaster built with haXe that is super fast. Their are numerous examples of RayCasters written in ActionScript but I am looking for speed. I might think about also just writing one from scratch and implementing a JavaScript version of it as well. I could have spent this weekend working on my new portfolio but unfortunately I didn’t do that:( I will have to extend it deadline beyond the 4 days time limit once again:(

404 Errors Hyped With PaperVision3d pt. 2

Brendon Smith — Sun, 07 Feb 2010 20:14:32 +0000

Capture URL for search with JavaScript and Pass it to Flash
Search Google from URL parsing
Use of Random Range
Create an Array of Spheres that holds the Google results
Apply the title field to a Text3D and add that as a child to the Sphere
Apply an Event to the Sphere to navigate to the Google result.
How to trace out events from flash to Firebug

This tutorial uses the following libraries of code:
Hype
PaperVision3d
googleas3api

I chose to omit the parallax effect. You can find an excellent example of the parallax effect on gotoandlearn.com, .Net , and web designer magazine. I might modify this swf later to have youtube results and render them as planes. If you go to seacloud9.org and look for a page that you know is not on that web server it will serve up google results and display them in three dimensions randomly. This page is distracting on purpose but It was kind of fun to make. You can go to the page results by clicking on the sphere. You can move the viewport of the search results by moving the sliders.

JavaScript to retrieve the url location and parse it:

    var gResult;
    var gResultL;
    function getQueryString(){
    var qString = window.location;
    myReg  = new RegExp("http://seacloud9.org/");
    var url = qString.href.replace(myReg, "");
    return url;
    }
 
    function googleResultArray(googleResult){
        gResult = googleResult;
    }
 
    function getGoogleTitle(titleNum){
        return gResult[titleNum];
    }

ActionScript 3 Code behind for SWF all Google Search code and Debugging

package {
    import flash.display.*;
    import flash.events.*;
    import flash.events.Event;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.BlurFilter;
    import fl.transitions.*;
    import flash.media.Sound;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.navigateToURL;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.typography.Font3D;
    import org.papervision3d.typography.Text3D;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.materials.special.Letter3DMaterial;
    import org.papervision3d.typography.fonts.HelveticaBold;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.materials.*;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import hype.framework.core.TimeType;
    import hype.framework.rhythm.SimpleRhythm;
    import hype.framework.sound.SoundAnalyzer;
    import org.papervision3d.lights.PointLight3D;
    import org.papervision3d.materials.shadematerials.CellMaterial;
    import flash.external.ExternalInterface;
    import be.boulevart.google.events.*;
    import     be.boulevart.google.ajaxapi.search.web.*;
    import     be.boulevart.google.ajaxapi.search.web.data.*;
    import     be.boulevart.google.ajaxapi.search.*;
 
 
    public class e404 extends MovieClip {
        public var viewport:Viewport3D;
        public var scene:Scene3D;
        public var camera:Camera3D;
        public var viewport2:Viewport3D;
        public var scene2:Scene3D;
        public var camera2:Camera3D;
        public var plane:Plane;
        public var plane2:Plane;
        public var plane3:Plane;
        public var sphere:Sphere;
        public var font3d:Font3D;
        public var text3d:Text3D;
        public var fontMat:Letter3DMaterial;
        private var cell:CellMaterial;
        private var sphereArr:Array;
        public var light:PointLight3D;
        public var renderer:BasicRenderEngine;
        public var renderer2:BasicRenderEngine;
        public var googleTitle:Array = new Array();
        public var googleLink:Array = new Array();
        public var googleWebSearch:GoogleWebSearch=new GoogleWebSearch();
        public var googURL:URLRequest;
 
 
        public function e404():void {
            addEventListener( Event.ENTER_FRAME, e404Go );
 
        }
        private function onWebResults(e:GoogleSearchEvent):void {
            var resultObject:GoogleSearchResult=e.data as GoogleSearchResult;
            ExternalInterface.call( "console.log" ,"Estimated Number of Results: "+resultObject.estimatedNumResults);
            ExternalInterface.call( "console.log" ,"Current page index: "+resultObject.currentPageIndex);
            ExternalInterface.call( "console.log" ,"Number of pages: "+resultObject.numPages);
 
            for each (var result:GoogleWebItem in resultObject.results) {
                googleTitle.push(result.title);
                googURL = new URLRequest (result.url);
                googleLink.push(googURL);
                ExternalInterface.call( "console.log" ,"link:"+result.url+"title:"+result.title );
            }
 
            ExternalInterface.call( "googleResultArray" , googleTitle );
            //build 3d world now that we have our google search!
            init3D();
            createSearch();
            addEventListeners();
        }
 
        private function onAPIError(evt:GoogleAPIErrorEvent):void {
            trace("An API error has occured: " + evt.responseDetails, "responseStatus was: " + evt.responseStatus);
        }
 
        public function e404Go(e:Event):void {
            removeEventListener(Event.ENTER_FRAME,e404Go );
            // Create the container Sprite
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;
            //this javascript function returns the query string from the window location
            googleWebSearch.search(ExternalInterface.call( "getQueryString" ),0,"english");
            googleWebSearch.addEventListener(GoogleAPIErrorEvent.API_ERROR,onAPIError);
            googleWebSearch.addEventListener(GoogleSearchEvent.WEB_SEARCH_RESULT,onWebResults);
 
        }
 
        private function init3D():void {
            // VIEWPORT
            viewport=new Viewport3D(0,0,true,false);
            viewport2=new Viewport3D(stage.width,stage.height,true,true);
            addChild( viewport );
            addChild( viewport2 );
            //
            // RENDERER
            renderer = new BasicRenderEngine();
            renderer2 = new BasicRenderEngine();
            //
            // SCENE
            scene = new Scene3D();
            scene2 = new Scene3D();
            //
            // CAMERA
            camera = new Camera3D();
            camera.zoom=11;
            camera.focus=100;
 
            camera2 = new Camera3D();
            camera2.zoom=11;
            camera2.focus=100;
        }
 
        private function createSearch():void {
            // Set some colors so we can see if loading is still happening,
            // or if it failed
            BitmapFileMaterial.LOADING_COLOR=0x000000;
            BitmapFileMaterial.ERROR_COLOR=0xFF0000;
            //
            var material:BitmapFileMaterial=new BitmapFileMaterial("404e.png");
            material.doubleSided=true;
            var material2:BitmapFileMaterial=new BitmapFileMaterial("404e2.png");
            material2.doubleSided=true;
            var material3:ColorMaterial=new ColorMaterial(0xFC0606,.3);
            material3.doubleSided=true;
            light=new PointLight3D(true);
            light.z=0;
            light.y=randomRange(-30,280);
            light.x=randomRange(-350,500);
 
 
            //
            plane=new Plane(material,300,100,10,10);
            plane.x=-350;
            plane.y=265;
 
            // Second ViewPort objects sphere and text from google
            sphereArr = new Array();
            for (var i:int = 0; i < googleTitle.length; i++) {
                var myPattern:RegExp = /<b>/g;
                var myPattern2:RegExp = /<\/b>/g;
                var googSearch:String = new String(googleTitle[i].toString());
                googSearch = googSearch.replace(myPattern, "");
                googSearch = googSearch.replace(myPattern2, "");
                sphere=new Sphere(buildCell(),randomRange(10,100),randomRange(5,20),10);
                sphere.x=randomRange(-500,500);
                sphere.y=randomRange(-500,500);
                sphere.z=randomRange(-500,500);
                try{
                var colorPoolCell:Array = new Array(0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1);
                var colorID:int = randomRange(7, 0);   
                fontMat = new Letter3DMaterial(colorPoolCell[colorID]);
                font3d = new HelveticaBold();
                text3d = new Text3D(googSearch, font3d,  fontMat);
                text3d.x = sphere.x + googSearch.length + 10;
                text3d.y = sphere.y + 10;
                //text3d.z = sphere.z + 10;
                sphere.addChild(text3d);
                sphere.id = i;
                scene2.addChild( sphere );
                sphereArr.push(sphere);
                }
                catch(e:Error){
                    // Sometimes the google title font3D will fail but we can catch it so it doesn't
                    // have a nasty flash epic fail warning..
                    ExternalInterface.call( "console.log" , "Error Reached = " + e);
                }
 
 
 
            }
            //create the 3D planes for the first ViewPort
 
            plane2=new Plane(material2,300,100,10,10);
            plane2.x=-350;
            plane2.y=265;
            plane2.z=-60;
            plane3=new Plane(material3,800,150,10,10);
            plane3.x=-350;
            plane3.y=285;
            plane3.z=80;
            //
            scene.addChild( plane );
            scene.addChild( plane2 );
            scene.addChild( plane3 );
            addListner();
        }
        function addListner():void{
            for(var i:int = 0; i < sphereArr.length; i++){
            try{
            sphereArr[i].addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, callLink );
            ExternalInterface.call( "console.log" , "Event Added" + i);
            }catch(e:Error){
                ExternalInterface.call( "console.log" , e);
            }
            }
        }
        function callLink(e:InteractiveScene3DEvent):void {
            try {
                navigateToURL(googleLink[e.target.id], '_blank');
                ExternalInterface.call( "console.log" , "link Clicked --" + e.target.id + "Link Called - " + googleLink[e.target.id]);
            } catch (err:Error) {
                ExternalInterface.call( "console.log" , err + " id: " + e.target.id + "Errored on: " + googleLink[e.target.id].toString() );
            }
        }
 
 
 
        function buildCell():CellMaterial {
            var colorPoolCell:Array = new Array(0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1);
            var colorID:int = randomRange(7, 0);
            var colorID2:int = randomRange(7, 0);
            //random color material generation returns cellMaterial
            //cell=new CellMaterial(light,Math.round(Math.random()*0xFFFFFF),Math.round(Math.random()*0xFFFFFF),100);
            cell=new CellMaterial(light,colorPoolCell[colorID],colorPoolCell[colorID2],100);
            cell.interactive=true;
            return cell;
        }
 
        function randomRange(max:Number, min:Number = 0):Number {
            return Math.random() * (max - min) + min;
        }
 
 
        private function addEventListeners():void {
            addEventListener( Event.ENTER_FRAME, __onEnterFrame );
        }
 
        private function removeEventListeners():void {
            removeEventListener( Event.ENTER_FRAME, __onEnterFrame );
        }
 
        /*===================================================================\\
        ||Listener Functions ||
        \\===================================================================*/
 
        private function __onEnterFrame( e:Event ):void {
            //moves the error planes viewort according to mouse position
            plane.rotationY=viewport.mouseX/4;
            plane.rotationX=viewport.mouseY/4;
            plane2.rotationY=viewport.mouseX/4;
            plane2.rotationX=viewport.mouseY/4;
            plane3.rotationY=viewport.mouseX/4;
            plane3.rotationX=viewport.mouseY/4;
            light.rotationX=viewport2.mouseY/4;
            light.rotationY=viewport2.mouseY/4;
            //
            sldWorld.addEventListener("change", updateWorldAxisValue);
            sldZoomCam.addEventListener("change", updateCamerValue);
            this.setChildIndex(sldWorld, this.numChildren-1);
            this.setChildIndex(sldZoomCam, this.numChildren-1);
            renderer.renderScene( scene, camera, viewport );
            renderer2.renderScene( scene2, camera2, viewport2 );
        }
 
        function updateWorldAxisValue(argument) {
            var sldWorld_value:Number=this.sldWorld.value;
            camera2.rotationY=sldWorld_value;
 
 
        }
        function updateCamerValue(argument) {
            var sldZoomCam_value:Number=this.sldZoomCam.value;
            camera2.zoom=sldZoomCam_value;
 
        }
    }
}

ActionScript3 Timeline Code for Sound Analysis and Image Effects

import hype.extended.behavior.FunctionTracker;
import hype.extended.behavior.Oscillator;
import hype.extended.color.ColorPool;
import hype.extended.layout.GridLayout;
import hype.framework.display.BitmapCanvas;
import hype.framework.sound.SoundAnalyzer;
import hype.extended.behavior.FixedVibration;
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
 
var clipCanvas:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
addChild(clipCanvas);
 
var clipContainer:Sprite = new Sprite();
 
var soundAnalyzer:SoundAnalyzer = new SoundAnalyzer();
soundAnalyzer.start();
 
var colorPool:ColorPool = new ColorPool(
    0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1
);
 
// xStart, yStart, xSpacing, ySpacing, columns
 
var layout:GridLayout = new GridLayout(0, myHeight / 2, 10, 0, 34);
 
var numItems:int = 64;
var freq:int = 120;
 
for (var i:uint = 0; i < numItems; ++i) {
    var clip:MySquare = new MySquare();
 
    layout.applyLayout(clip);
    colorPool.colorChildren(clip);
 
    // object, property, soundAnalyzer.getFrequencyRange, [startRange, endRange, min, max]
 
    var aTracker:FunctionTracker = new FunctionTracker(clip.myFill, "alpha", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.25, 1.0]);
    var sTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleY", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.5, 30.0]);
    aTracker.start();
    sTracker.start();
 
    // target Object, property, waveFunction, frequency, min, max, start value
 
    var yOsc:Oscillator = new Oscillator(clip, "y", Oscillator.sineWave, freq, 60, 600, i/(180/2));   
    yOsc.start();
 
    clipContainer.addChild(clip);
}
 
clipCanvas.startCapture(clipContainer, true);
 
var sound:Sound = new Sound();
sound.load(new URLRequest("http://i-create.org/actionscript/404e/shortCircuitE1.mp3"));
sound.play();
 
var aVibration:FixedVibration = new FixedVibration(cBagHead, "alpha", 0.9, 0.1, 0.0, 1.0, false);
aVibration.start();

You find working examples of this 404 error page working at the following location:
http://seacloud9.org/Processing.org
http://seacloud9.org/Context Free Art
http://seacloud9.org/Generative Art

A few articles that are good reads:
Web development will become much more complicated
The Future of Web Content

404 Errors Hyped With PaperVision3d

Brendon Smith — Sun, 20 Dec 2009 06:12:57 +0000

404 Error Pages don’t have to be boring. Especially if you develop rich internet applications and have access to awesome tools like PaperVision3d and Hype! This is a two part example. This example just shows you simple code to create a planes in PaperVision3d make them follow your mouse. I also used SoundSnap to snag some short-circuit static for background noise. I also used Hype to analyze the sound this is literally an out of the box example of Hype. What is hype? Hype is a new framework for quickly putting together highly interactive eye-candy. Hype was created by Joshua Davis and Brendan Hall. It has special methods like Color Pool, Grids, Vibrations Effects, Sound Analysis, just to name a few in short its wicked cool. I am looking forward to playing around with it more it’s just a matter of finding the time. This was just something I was thinking about placing on my new interactive portfolio. I am going to create a 404 page that utilizes these libraries. This part only shows you the audio analysis(please note the analysis will fail if you are playing youtube or something else in another window), papervision3d plane code, and vibration effect applied to a movie. In part two I will add a parallax effect to give this error page more depth. Mash it with a search that pulls results from i-create (I will pull the URL from the browser with JavaScript) and also has hidden gems in it. I will hope to really dig into hype more. Sometimes it can be fun to make websites that are distracting on purpose read like a choose your own adventure album. I can show an example like this and now show you one of my favorite sites. You have to go out and check out ABC (Abnormal Behavior Child) I think he originally made this style and his site is setup more like a personal odyssey.

Code for the Class Code Behind:

package {
	import flash.display.*;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.*;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import fl.transitions.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.*;
	import hype.framework.core.TimeType;
	import hype.framework.rhythm.SimpleRhythm;
	import hype.framework.sound.SoundAnalyzer;
 
 
	public class e404 extends MovieClip {
		public var viewport:Viewport3D;
		public var scene:Scene3D;
		public var camera:Camera3D;
		public var plane :Plane;
		public var plane2 :Plane;
		public var plane3 :Plane;
		public var renderer:BasicRenderEngine;
 
		public function e404():void {
			addEventListener( Event.ENTER_FRAME, e404Go );
 
		}
		public function e404Go(e:Event):void {
			removeEventListener(Event.ENTER_FRAME,e404Go );
			// Create the container Sprite
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;
			//
			init3D();
			createPlane();
			addEventListeners();
 
 
		private function init3D():void {
			// VIEWPORT
			viewport=new Viewport3D(0,0,true,false);
			addChild( viewport );
			//
			// RENDERER
			renderer = new BasicRenderEngine();
			//
			// SCENE
			scene = new Scene3D();
			//
			// CAMERA
			camera = new Camera3D();
			camera.zoom=11;
			camera.focus=100;
		}
 
		private function createPlane():void {
			BitmapFileMaterial.LOADING_COLOR=0x000000;
			BitmapFileMaterial.ERROR_COLOR=0xFF0000;
			//
			var material:BitmapFileMaterial=new BitmapFileMaterial("404e.png");
			material.doubleSided=true;
			var material2:BitmapFileMaterial=new BitmapFileMaterial("404e2.png");
			material2.doubleSided=true;
			var material3:ColorMaterial=new ColorMaterial(0xFC0606,.6);
			material3.doubleSided=true;
 
			//
			plane=new Plane(material,300,100,10,10);
			plane.x=-350;
			plane.y=265;
 
			plane2=new Plane(material2,300,100,10,10);
			plane2.x=-350;
			plane2.y=265;
			plane2.z=-60;
 
			plane3=new Plane(material3,800,150,10,10);
			plane3.x=-350;
			plane3.y=285;
			plane3.z=80;
			//
			scene.addChild( plane );
			scene.addChild( plane2 );
			scene.addChild( plane3 );
		}
 
		private function addEventListeners():void {
			addEventListener( Event.ENTER_FRAME, __onEnterFrame );
		}
 
		private function removeEventListeners():void {
			removeEventListener( Event.ENTER_FRAME, __onEnterFrame );
		}
 
		private function __onEnterFrame( e:Event ):void {
			plane.rotationY=viewport.mouseX/4;
			plane.rotationX=viewport.mouseY/4;
			plane2.rotationY=viewport.mouseX/4;
			plane2.rotationX=viewport.mouseY/4;
			plane3.rotationY=viewport.mouseX/4;
			plane3.rotationX=viewport.mouseY/4;
			//
			renderer.renderScene( scene, camera, viewport );
		}
	}
}

Below are the actions that are applied to the time-line with in the Movie

import hype.extended.behavior.FunctionTracker;
import hype.extended.behavior.Oscillator;
import hype.extended.color.ColorPool;
import hype.extended.layout.GridLayout;
import hype.framework.display.BitmapCanvas;
import hype.framework.sound.SoundAnalyzer;
import hype.extended.behavior.FixedVibration;
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
 
var clipCanvas:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
addChild(clipCanvas);
 
var clipContainer:Sprite = new Sprite();
 
var soundAnalyzer:SoundAnalyzer = new SoundAnalyzer();
soundAnalyzer.start();
 
var colorPool:ColorPool = new ColorPool(
	0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1
);
 
// xStart, yStart, xSpacing, ySpacing, columns
 
var layout:GridLayout = new GridLayout(0, myHeight / 2, 10, 0, 34);
 
var numItems:int = 64;
var freq:int = 120;
 
for (var i:uint = 0; i < numItems; ++i) {
	var clip:MySquare = new MySquare();
 
	layout.applyLayout(clip);
	colorPool.colorChildren(clip);
 
	// object, property, soundAnalyzer.getFrequencyRange, [startRange, endRange, min, max]
 
	var aTracker:FunctionTracker = new FunctionTracker(clip.myFill, "alpha", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.25, 1.0]);
	var sTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleY", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.5, 30.0]);
	aTracker.start();
	sTracker.start();
 
	// target Object, property, waveFunction, frequency, min, max, start value
 
	var yOsc:Oscillator = new Oscillator(clip, "y", Oscillator.sineWave, freq, 60, 600, i/(180/2));	
	yOsc.start();
 
	clipContainer.addChild(clip);
}
 
clipCanvas.startCapture(clipContainer, true);
 
var sound:Sound = new Sound();
sound.load(new URLRequest("shortCircuitE1.mp3"));
sound.play();
 
var aVibration:FixedVibration = new FixedVibration(cBagHead, "alpha", 0.9, 0.1, 0.0, 1.0, false);
aVibration.start();

Sometimes it can be fun to make something that is distracting. Kind of reminds me of my college days. Life drawing for about 3 hours(which beats the hell out of Biology and Business lectures) in the morning and then off to do some display work at the Hitchin Post a clothing store I worked at for years. I always had opportunities to use my creative skills with display work their. You know you’ve created great display work when people ask for things out of the window. Display work also used to make retail work easy people see something like it and want to buy hence you don’t need to talk to them. It can be fun to make things interactive! People like eye-candy. Anyway exercises like these help make you a little bit more creative. At least that was the case for these well known display artists Jasper Johns and Andy Warhol. Anyway enough ranting it is Saturday night. I can’t wait until my Media Temple migration is complete and my new interactive portfolio is done. Than I can work on new projects. Ya thanks Josh and Brendan the Hype Framework is like an awesome set of paints!

Cool Sites to Check Out:
ABC
Choose Your Own Adventure and Informatics

Cool Frameworks to Check Out:
PaperVision3D
Hype