i-create | therefore-i am

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.

WebGL Rendering of BSP Maps

Brendon Smith — Fri, 14 May 2010 23:42:21 +0000

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

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

WebGL Libraries:
Canvas #D Library” target=”_blank”>C3DL
Copperlicht
CubicVR
Energize
GLGE

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

I love that idea!

Brendon Smith — Thu, 13 May 2010 23:39:14 +0000

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.

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

Is Apple Becoming the New Big Brother?

Brendon Smith — Mon, 12 Apr 2010 04:33:25 +0000

Once upon a time their was young Steve Jobs and he fearlessly forged ahead and helped shape the landscape of today’s personal computing. To tell you the truth Macintosh was for the most part based off of the work that was done at PARC ( Palo Alto Research Center ) at the time PARC was run by Xerox. The wonderful people at Xerox worked night and day on LISA which was the first GUI (Graphical User Interface) for personal computing. Some of the brightest luminaries in Computer history worked at PARC like Alan Kay the father of OOP. This was at a time though when most people had no idea that personal computing would explode. Most of the people that were employed at PARC were of course heavily influenced by Douglas Engelbart who ran the Human Augmentation Project at SAIL ( Stanford Artificial Intelligence Laboratory ). At this time in computing people believed that AI (Artificial Intelligence) would be everything because evidently the common man was believed to simply be too stupid to use computers in everyday life. You had a few mavericks at the time that of course did not subscribe to this ideology this group developed the first mouse and many of the interface devices we still use today in the late sixties at Stanford under the guidance of Engelbart. The interface that was developed at PARC had many of the same features that Engelbart’s Human Augmentation project had created the precusor to the LISA interface and at this time Piracy really wasn’t considered a crime. At this time you also had people in the valley that were bright enough to pick up on the fact that the rate of Computing Power was exponential and it was doubling every two years this of course later became known as Moore’s Law. Douglas Engelbart understood this fact and predicted things like the pocket library which is now pretty much your smart phone or iPad. Steve Jobs has been extremly successful in making his childhood dreams a reality. This of course only came about with failure and constant work, ambition to push things further and further and he has radically changed the history of personal computing for the most part for the betterment of all mankind. Although Steve Jobs beginning was literally taking LISA’s beginning from Xerox and refitting it to the Macintosh. Simply because the people at Xerox had no idea of the caliber of intellectual property they owned at the time sad really. It was somewhat shady business moves like this that literally spawned personal computing.

Recently though Apple has made in my mind some rather bothersome decisions. I fully understand them not wanting to include Flash as a part of their ecosystem. This definitely comes from the need to dominate their platform and insure the sales of apps on the iTunes store. If everyone had the flash player would so many apps actually be sold?? I don’t believe they would be. Up until now Apple devices have had relatively low computing power but this is no longer the case with the iPad. Lots of developers have banded together and created some really cool tools out their like Unity3D, Corona SDK, Appcelerator, etc which by the way really creates a considerable amount of those casual games you play on your iPhone. Recently Apple announced they would not allow 3rd party tools to compile to the iPhone / iPad. This is extremely troublesome for developers. I will be honest I love technology and for the most part I consider myself technologically agnostic as in I don’t really believe that one Technology is the complete answer. I am completely for learning new technologies, languages etc. I like Objective-C have played around with it a little and I also own several books on it. I also like other technologies like Flash and when Adobe mentioned they were bringing the ability to compile directly to the iPhone / iPad I was of course elated. The reason why is quite simple I want to utilize existing skills and compile to as many platforms as possible with a minimal amount of rework to get applications to work on a given device and honestly when it comes to this Adobe has that game down! The flash community as a whole have spawned some of the coolest user interfaces ever put together period. As a whole this community has really helped shape the future of computing and User Experience. Many of the features of the current JavaScript libraries have been around in the flash community for years. I mean you have to kind of laugh to yourself when the JavaScript community mentions something like easing these techniques were really defined well in the flash community and all you have to do to see this is simply do a Google search on Easing Equations you will find Robert Penner at the top. I love both technologies and I really don’t want to be in one of those childish conversations where to whiners, whine about which one is better and which one will when over. It is a silly argument to have in the first place. As a developer it is important to have knowledge of both and not let your opinions cast doubt on one or the other platform. HTML5 will advance to where flash is now but when it does flash will be well beyond where it is today. So I guess I am upset at Apples decision to really kind of flip the bird to the development community and tell everyone they can only use their tools to create content or they have to use HTML5. To be honest with you, I have been thinking about using HTML5 simply to escape the whole Apple approval process. I will definitely be putting my weight around HTML5 and Flash for all the other Mobile platforms. The people at Adobe are not lazy Steve. They worked extremely hard to put together something that they believed would help your iTunes app store and consumers as well and it is not just the people at Adobe you have alienated by this decision.

With the people at Apple making decisions like this you can’t help but wonder how far they will reach to control content. I believe that content is up to the user hopefully they won’t extend policies like this to their bookstore. Really the fact of the matter is people will purchase these devices in mass numbers because it was created by Apple and Apple does have a killer marketing strategy and team. They won’t so much think about the lack of freedom or the buyer lockin to the iTunes ecosystem. In many ways their ecosystem for entertainment is ridiculously far ahead of the competitors. In short it is nothing short of a Monopoly you may not see it yet but it is definitely there. On the other hand their moves may force the development community to swing to Microsoft and Google the HP Slate doesn’t look half bad. I know, I will be developing for the iPhone and iPad I was just in the hopes to speed up my process I guess that looks like it is no longer an option. I will in fact have to recreate the whole experience just for that device.

I wonder if the young Steve Jobs would do what he is doing today?

Well on a side note next weekend I might be posting code for a Twitter Spider created with Silverlight. Silverlight is cool! I am of course looking forward to the Windows 7 phone and Visual Studio 2010!

Oh and last time I mentioned RayCasters Bruce Jawn released his source code for Alchemy compiling of this RayCaster you can find the code here! On his site you can find some cool examples of how to use Alchemy for Flash Development.

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:(

Next Chapter

Brendon Smith — Mon, 29 Mar 2010 03:54:12 +0000

Well the good news is I am officially a Rich Internet Application Developer! So I will mainly be focusing on creating reusable controls with JavaScript and ActionScript for the retail store Hayneedle! I will miss working with all the wonderful developers at infoGroup. I was fortunate enough to start their as a Graphical User Interface Developer and end as a Software Engineer. I have learned a tremendous amount from working at infoGroup and will miss all of them. I will also never forget all the knowledge they shared with me. C# is an awesome language and so is Ruby on Rails! I will continue to use both in the future! While working at infoGroup I worked on numerous projects 2 newer versions of Salesgenie.com and one entirely new product SalesDesk a real-time CRM. I utilized jQuery, CSS, ASP.NET 2.0, ASP.NET 3.5 (MVC), and Ruby on Rails. I will continue to learn and use new languages at my new post at Hayneedle I will be using ColdFusion, JavaScript, and ActionScript. I think it will be fun to have a change of pace and I am really excited to be a part of their development / user experience group! I believe this job will enable me to use my creative side a little more; so I think that will be enjoyable and I think I will learn a tremendous amount by working with the new team they are an extremely innovative group. It is always good to challenge yourself and change things, and have new experiences, I will miss infoGroup. This month I have been extremely busy I am currently working with two clients in the Omaha Metro area and I will be teaming up with MinorWhiteStudios on future projects so I am excited to be working with them. I believe they are the best photographers / designers in town. I hadn’t talked to Scott in years and it was nice of him to call me. His whole team is extremely creative and I belive I will also learn a great deal working with them!

I have really been sitting around and reading a great deal at home. I don’t get out much anymore. I find myself playing with new technologies on my off time. I have also been working on a game for a client of mine and hopefully I can have a demo of that soon! Lately I have been playing around with ProcessingJS and here is a new experiment. This example uses a font from DaFont. This example also borrows from this example thanks to @F1LT3R for sharing this example. You know it’s fun using Processing with jQuery I will continue to watch and play with this framework because its fun:)

var jData;
var objClik = new Array();
var colorPool = new Array("#075997","#079714","#970744","#079792","#970769","#078497", "#970718", "#075197", "#079733","#079707");
function loadFeed(){
	jQuery.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=2432dea4d4d6afa353c425dc5e542fb4&_render=json&_callback=?", function(json) {
	jData = json;
	jQuery('#YahooPipe').width(jQuery(window).width());
	jQuery('#YahooPipe').height(jQuery(window).height());
	loadProcessing();
});
}
jQuery(document).ready(function() { 
try{
if(!jQuery.browser.msie){
loadFeed();
}else{
	jQuery('#result').text("Sorry you are using Internet Explorer an inferior browser please utilize a next generation browser like FireFox, Chrome, or Safari!");
}
}catch(err){
	jQuery('#result').text("Sorry Pipe Failed to Load Please refresh and try again:)");
}
});
 
function loadProcessing(){
		var script = document.getElementById( 'linkScript' ).text;
		var canvas = document.getElementById( 'YahooPipe' );
		Processing(canvas, script);
	}
 
 
void setup()
{
  strokeWeight(0);
  noStroke();
  size(jQuery(window).width(),jQuery(window).height());
  background(255);
  smooth();
}
PFont font = loadFont("Champagne_Limousines.svg");
void draw() 
{
  for(i = 0; i < jData.value.items.length; i++){
  int pointX = random(0,jQuery(window).width());
  int pointY = random(0,jQuery(window).height());
  int fSize = random(30,65);
  objClik.push(new alinked(pointX,pointY,fSize,jData.value.items[i].link, jData.value.items[i].title, colorPool[Math.floor(Math.random() * colorPool.length)],colorPool[Math.floor(Math.random() * colorPool.length)])); 
 
  }
  forLinks('render');
  exit();
}
 
 
void forLinks(mode){
  for(int i=0;i < objClik.length; i++){
    t=objClik[i];
    switch(mode){
      case 'render':objClik[i].render();break;
      case 'detect':
        mouseX > objClik[i].x &&   
        mouseY > objClik[i].y &&
        mouseY < objClik[i].y+t.size &&
        mouseX < objClik[i].x+t.anchorWidth?
          objClik[i].rollOver():
          objClik[i].rollOut();
        break;
      case 'clicks':objClik[i].mouseOver?objClik[i].clicked():0;
    }
  }
}
 
void mouseMoved(){forLinks('detect');}
void mouseClicked(){forLinks('clicks');}
 
class alinked{
  boolean mouseOver;
  color current_col;
  float anchorWidth;
  alinked(float x, float y, float size, String href,String anchor, Color text_col, Color hover_col)
  {
    href=href;    
    anchor=anchor;    
    this.size=size;
    this.x=x,this.y=y;
    text_col=text_col;
    hover_col=hover_col;
    current_col=text_col;
    mouseOver=false;    
  }
  void render(){
    anchorWidth=font.width(anchor)*size;    
    clear(x,y,anchorWidth,size+4);
    textFont(font,size);
    fill(current_col);
    mouseOver?rect(x,y+size+2,anchorWidth,1):0;
    text(anchor,x,y);    
  }
  void rollOver(){
    if(!mouseOver){      
      mouseOver=true;
      cursor('pointer');
      current_col=hover_col;
      render();
    }
  }
  void rollOut(){
    if(mouseOver){
      mouseOver=false;
      cursor('auto');
      current_col=text_col;
      render();
    }
  }
  void clicked(){
    link(href, "_blank");
  }
}

Launch Example / Download Example

This experiment simply grabs a yahoo pipe parses the JSON and then adds the links to the Canvas tag. It is really amazing to see all the progress of HTML5 and all the cool new JavaScript libraries. Please note internet explorer users will not be able to view this example because IE does not support the Canvas tag:(. Sometimes I have also noticed it fails to capture the JSON but I have a try catch so it should tell you to try again. I am not going to add a JAVA version of this project simply because I don’t have time too right now. I noticed ProcessingJS is now supporting some of the 3D functions of Processing (JAVA) I haven’t had time to play with them lately but I will make a data mashup with it as soon as I can find the time. I am also still working on my new Portfolio the never ending project maybe within the next two weeks I will actually post it! I am looking forward to CS5 and purchasing Flash Builder 4! I have also noticed that with libraries like Scripty2 it might be a fun to port over some Flash Games (AS2) utilize JavaScript so they can be enjoyed with out a plugin!

Sandy3D haXe 2 JavaScript Examples
Corona SDK
SproutCore JavaScript FrameWork
Scripty2
Excellent C++ RayCaster Example
Ajax RayCaster Example
XNA C# RayCaster

jQuery CenterIT

Brendon Smith — Mon, 08 Feb 2010 00:37:54 +0000

Have you ever had to deal with the hassle of centering modal windows? I made this function to automagically center windows I call this function after I load a modal and it centers the object perfectly for every browser. It takes the hassle of wondering if something is perfectly center in every browser. The only thing I do to use it is send it the main containing div that the object should be centered in and the div that I want to be centered. It grabs the offset does a little basic math and that’s it. No more hassle with centering now it will be perfectly centered.

function CenterIT(mainModal, mainContainer) {
    var modalW = $(mainModal).width() / 2;
    var windowW = $(mainContainer).width() / 2;
    var modalH = $(mainModal).height() / 2;
    var windowH = $(mainContainer).height() / 2;
    var centerPointW = windowW - modalW;
    var centerPointH = windowH - modalH;
    var myPoint = $(mainContainer).offset();
    centerPointW = myPoint.left + centerPointW;
    centerPointH = myPoint.top + centerPointH;
    $(mainModal).css('left', centerPointW);
    $(mainModal).css('top', centerPointH);   
}

Some Useful/Interesting Flash Links:
Prefab – Highly useful tool when it comes to 3D in flash with Away3D
Snook on HTML5 and Adobe

Some Useful/Interesting JavaScript Links:
Javascript RayCaster
Burst Engine for SVG in JavaScript
Canvas 3D
JS3D library
Parallax in CSS
WebGL Example

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

The Evolutionary iPad

Brendon Smith — Fri, 29 Jan 2010 06:50:06 +0000

What is my opinion? It’s awesome I will definitely get one. I also think it presents a unique opportunity for Google and others to create competing products. The iPad is essentially a big iPod touch. So whats the big deal? Well more cool apps that have yet to be developed. More useful applications for email, note taking, and wordpress etc. I could see this device being very useful for consumers and I am not saying Apple is the only one capable of creating a revolutionary change. They do happen to be the most tactful, creative, and divisive competition though. I personally would like to have all my books on such a devices why? I don’t know probably; because I imagine writing notes on virtual pages is less destructive then writing notes on the sides of pages, I pay for I also would like to be able to search all my reference books quickly simultaneously. I am also confident that the user interface will be easy to utilize. I also think it will be highly useful in educational settings. I would think this would be a very handy device for college students. I can also see people creating all sorts of new educational content for kids on it. It seems to me that Macromedia (Adobe) Director and Flash used to own this niche market.

I would also like to point out it is still a very much so walled garden (the size just got larger). Why are their no competing browsers on the iPod platform, Android has them, why no flash, still 1ghz of speed and no flash? I think the dominance of the Apple makes it hard to compete iTunes has weight behind it. This will enable writes, artist everyone really to display their work to a community that can purchase their work easily. I think both Google and Microsoft can learn from Apples innovative interfaces (Not to say Microsoft hasn’t done a great job with Surface). I am looking forward to developing for it and on the apple platform. I am also anxious to see FlashCS5 this will also ensure a boom for the app store. With the apple bookstore also comes lock in fear as if iTunes wasn’t enough for music. This could very well be the death kneel for bookstores lets at least hope it angers Amazon enough to utilize Android to create a competing product. I am also hopeful to hear about Windows Mobile 7 I think it will be awesome to develop mobile applications with Silverlight, Microsoft is in need of a comeback. I think windows 7 will also be on a variety of devices, tablets, etc..

The iPad is evolutionary but not necessarily revolutionary in my opinion.

Reloaded..

Brendon Smith — Fri, 29 Jan 2010 05:56:09 +0000

Quick Tip:

Utilize Firebug with ActionScript to trace out tough Bugs
Add the import statment at the Top and then call it anywhere Handy:) Note I was having troubles getting it to work with Firebug 1.5 but on Firebug 1.4.5 works like a charm!

import flash.external.ExternalInterface; 
ExternalInterface.call( "console.log" , "Omaha Winter. Camera Z:" + cam.z);

The example below will show it in action if you have Firebug 1.4.5 I will print out a message. This example was built off of Away3d use your arrow keys to move and your “w” and “s” key to zoom. On a side note – I am looking forward to reading the Essential Guide to 3D in flash it goes over the Away3D engine indepth

Reloaded

I have been making style changes and I am not done with making those changes; I am just glad the old version is gone for good! I have been very busy at work and working on several other websites simultaneously. I have been working on my wordpress blog lately and rearranged some things. First of all this blog will NO LONGER Supports IE6 on purpose! I personally have a great disdain for IE6 and I don’t want to spend my free time programming for it unless it is absolutely required. In short this browser is no longer supported and this is for many reasons so many that I can’t post them all here. So if your using IE6 or lower please upgrade and you might even want to try something new like Chrome or Firefox both of these browsers in my opinion are better suited for the web. I really just wanted to make my blog brighter and more easily read. I also need to make the loading a little more graceful I just simply haven’t had the time yet. I guess, I will just apply agile and continually improve it:)

I will be updating my 404 Error tutorials soon maybe even this weekend if I get ahead. I have been spending my time working on redoing my interactive portfolio. I have also been experimenting with Processing on Android and my initial reaction to programming with Processing and Android in my opinion have been very positive. I have a couple of books that I have been reading and I might put together a video tutorial of my new apps I have been working on. I am also really looking forward to Verizon updating to Android 2.1! Processing / Android kit targets 2.0 and higher. I think Android has lots of potential for developers in my opinion it is an excellent time to be a developer things are really booming and changing in the tech industry and they will trickle down to everyday life and really change the way people go about everyday tasks.

Reading lately:
The Essential Guide to Processing for the Flash Developer
Tutorial on Away3D