HTML5 jQuery jqPanoramic Plugin Alpha

By Brendon Smith on June 1, 2010

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

Posted in 3d, i-create, JavaScript | Tagged Experiment, HTML5, JavaScript, JQuery, Panoramic, plugin | 2 Responses

Tweet Tank in Away3D and Hype pt. 2

By Brendon Smith on May 16, 2010

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.

Posted in ActionScript, Flash, i-create | Tagged 3d, ActionScript, as3, Away3D, data visualization, Experiment, hype, interactive, twitter | Leave a response

WebGL Rendering of BSP Maps

By Brendon Smith on May 14, 2010

It has never been a better time to be a developer. I am really looking forward to full implementations of HTML5 everywhere I believe HTML5 / JavaScript / ActionScript will be an extremly potent combination! I believe their will be proliferation of new devices in the mobile arena. JavaScript and HTML are also becoming more powerful. I have been reading about WebGL and experimenting with it for awhile now and the other day I heard about CopperCube by Ambiera based off of the Irrlicht Engine and I was immediately curious. It is basically a world editor / game engine for the web that supports Flash and WebGL output. I have to be honest I think for Flash, I will definitely stick with Away3D. For WebGL output I am extremely impressed It was easy to use and in the next few months, I will be studying their web javascript api copperlicht. Here are a couple examples of scenes I was easily able to export out with CopperCube. This stuff can also of course be done with Flash. You can run Quake in flash using Alchemy. Alchemy is an extremly innovative software project if you are not familiar with it by now I suggest looking at it. I have found Bruce Jawn’s website to be insightful not only on Alchemy but also in regards to Raytracing with flash.

You will only be able to see the example below if you have a webGL compatiable browser. Here are instructions on how to get a webGL browser.

Click Here to View
Quake Map in JavaScript

To create the environment that are displayed above it was easy. I was able to download Quake3 maps from a few sites like lvlworld or Map Factory. Once the maps have been downloaded and unzipped notice that it has a .pk3 extension change it to a zip file and then extract it. You will find all you need in that folder from their all you have to do to get it into CopperCube is navigate to the folder named Map and select the .bsp file and from that point on you are good to go. I have also been attempting to convert these files to OBJ and then bring them into PreFab. I will keep you all posted on the updates as I progress.

Click Here to View
Quake Map in JavaScript

WebGL Libraries:
Copperlicht
CubicVR
Energize
GLGE

WebGL / HTML5 Links:
Learning WebGL
HTML5 3D Gallery
HTML5 Planes and Cubes
JavaScript Coverflow
CSS3 Cube NetTuts Premium Tutorial

Posted in 3d, i-create, JavaScript | Tagged 3d, CSS, HTML5, JavaScript, Quake, webGL | 1 Response

I love that idea!

By Brendon Smith on May 13, 2010

Show support submit a work of Public / Weblic Art in the comments to this blog post. We should respond using the Heart as an artistic symbol much in the same way Chicago had their CowParade. The adobe community should respond virally through the use of the web as a means to communicate. So I would encourage anyone to simply create a flash, html5, after effects, processing, context free art, whatever medium you want in response to Apple’s recent changes in heart in regards to thinking different. Post the art work on the web then comment back. Show the world what you created it and how you created it. Share your code / art / and source files because that is how the community progresses.

I think the Adobe community is primarily comprised of artist, designers, publishers, developers, etc.. In short I think they are the most creative people on the net. I would like to see what their unified response would look like. I think it would make for a really cool gallery. So create something and share it.

Why? Because it is really about choice. I pick the programs and place them on the machine. I use it however, I like. I do not need some foreign body that decides what software to use and how to use it. Is everyone sleeping or am I the only one that is intimidated of that concept? I don’t want too have some wizard of oz tell me what to put on my device or computer that is my decision for better or worse. I personally would like the option to have multiple operating systems on my cell phone if that is a possibility without voiding my warranty. I am the user, I am the owner, I pick what goes on and how not some governmental official or CEO. That is my concern why can’t you clarify your policy at least so can I not use the Corona SDK what if I want to use haXe? I believe that if someone owns the device the device owner should have the end all say on what goes on it and what doesn’t. Why can’t users have the choice to download and use things like Scratch?

“It doesn’t make much difference how the paint is put on as long as something has been said. Technique is just a means of arriving at a statement.” -Jackson Pollock

As the creators we should be able to pick whatever programming language etc and run it on the device. It is up to the consumer to choose what they want and what works out best for them on that device. Create something cool in the shape of a heart tell the community how you created it and share it.

Follow It

Oh, and the share buttons aren’t there for aesthetic value.

Posted in ActionScript, Adobe, Flash, i-create | Tagged Adobe, Apple, Tech | Leave a response

Tweet Tank in Away3D and Hype

By Brendon Smith on May 10, 2010

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

Posted in 3d, ActionScript, i-create | Tagged 3d, ActionScript, as3, Away3D, data visualization, Experiment, Flash, hype, interactive, twitter | Leave a response

Other Websites

Brendon Smith Social Networks

i-create | therefore-i am

i-create | therefore i-am | a blog about opensource technology and rich internet applications