As of today, Toxiclibsjs is being built to the AMD API. It can be used with RequireJS, Node.js or the common way of a single global object as before. Being available in this manner means that not only is Toxiclibsjs available for the same uses as before, but now it can be used on the server-side and with desktop-based javascript programming environments such as Plask.

If you would like to use toxiclibsjs within Node.js it is now available on NPM and can be installed easily:

$ npm install toxiclibsjs

Along with this progress there are now several new classes:

• toxi.math.noise.PerlinNoise
• toxi.math.noise.simplexNoise
• toxi.math.conversion.unitTranslator
• toxi.processing.ToxiclibsSupport
• toxi.THREE.ToxiclibsSupport

Toxiclibsjs now follows the same package structure as the original Toxiclibs. So, if you previously used toxi.Vec2D, now you would use toxi.geom.Vec2D and this is consistent with all documentation for the original library. This can have a positive impact on users of both Processing and Processing.js because now you can refer to your toxiclibs class in long-form and in many more scenarios it will work without altering your code. Along these same objectives, one of the new classes that has been added is toxi.processing.ToxiclibsSupport this class, available in both versions will also ease moving between environments.

Since the release of Toxiclibsjs, I have tracked down several examples of its use on the internet, such as Mary Huang‘s Sake set Creator for Shapeways and Greg Kepler‘s Spider Web generator. I have also used it several of my own projects, such as our studio site for KVS Studio and sketches such as this Simplex Trails sketch I did recently.

Progress is being made to follow the path that Karsten Schmidt has set in his post The Road Ahead. There is now more documentation in the github repository. I will continue to be improving documentation and will be providing unit tests in the future.

Here are some links to the pieces mentioned as well as the new examples on the site:

The Facebook “Like” button is a bit cruel. It tracks every site you go to and stores that information on their servers. They use that information to target you and your friends with advertising. To many, this is an un-ethical practice, but site owners have a reliance on it for generating traffic. The same sites you see writing about Facebook privacy concerns have the button attached to their article.

My proposal is that developers defer the loading of the “Like” button script by requiring a click event from the user first. I have created a project that is a quick-stab at allowing a site owner to leverage a Facebook Like button, while making the invasion more voluntary for the user, in this manner.

Facebook is receiving a lot of heat over the information they are storing, but as web developers we also do have some responsibility in the matter. Just because its the code Facebook gives you, doesn’t mean its the exact code that you have to use. While I admit, my quick-stab is a bit hack, and it only covers one style of implementation (the “button_counts” style), my hope is that site-creators will consider creating a solution that fits their needs and is kinder to the privacy of their audience.

What my implementation does…

Not much. All the script does is use a temporary image in the place of the Like button, clicking that image is a trigger to load the invasive facebook like button and swap them. If this was widely applied to sites it would change the information that Facebook has from being every site that a user visits, to being every site that user interacts with the Like button functionality on.

Like this article with the button below, to try it out!

I have set up a code repository for this extremely-slim example on github. Feel free to use it in any way you wish.

There are currently 18 examples on the site, most of which have focused on being direct ports of the examples from Toxiclibs. Of these examples 14 use Processing.js, 1 uses Three.js, 1 uses Raphael.js, 1 uses Canvas’ 2D API and the other Canvas’ WebGL API. There also is an example using Gee committed by jonobr1. In the future I will be expanding on examples that help clarify the libraries JavaScript nature and independence.

The last 4 examples on the site demonstrate the newest package for Toxiclibs.js, VerletPhysics2D. This package is a light-weight physics engine that is simple to work with and runs well, the Attraction 2D example performs smoothly with 250 particles. VerletPhysics2D includes a base particle class, behaviors, constraints and springs. Behaviors (such as Gravity or Attraction/Repulsion), constraints, and springs are easily applied to the physics world as a whole or to individual particles. You can compare its use with the java documentation for physics2d. I am very excited to have completed this portion of the library, I feel that it fits a void that isn’t currently filled by other physics engines in JavaScript, so please download it and give it a try! And check the site for the new examples.

A great deal of my work involves using HTML5′s canvas tag for generative design; much of the time with the help of Processing.js. Repeatedly, I have spent the time of stripping out references to toxiclibs to make my code work with PJS. I worked-around porting the library for some time because it felt like too large of a project to do by myself. Last week as I was working on a WebGL visualization, I decided it was worth it to port the Vec3D class, and couldn’t stop there. I decided that this has to be done, I badly want these libraries and there have got to be many others thinking the same thing. I encourage anyone interested to contribute to the project.

I am hosting my source at gitHub, http://github.com/hapticdata/toxiclibsjs, and I have prepared an intial round of examples that you can view at http://haptic-data.com/toxiclibsjs.

The code already includes several classes for both 2D and 3D use, there are currently examples on several topics, such as using the TColor class for blending, converting and modifying colors, using Line2D, Vec2D and many others. If you aren’t a PJS user, one of the great things about this library is that it has no dependency on Processing.js. This is all JavaScript, with no dependencies, it can be used with other libraries, such as Raphael.js, or it can be used by itself.

Below are three demos and source code. These demos use some new features, I wrote these for use with the free Flex 4 SDK, which you can also use with Flash Builder 4 Beta, these classes are all very simple to convert for use with Flash CS4 instead.

Slide 1: Click on the photo and it shatters into pieces. This is a custom effect I built after some inspiration from Koen De Weggheleire’ s presentation “Play with Vectors.” For this effect I am drawing a 5×5 grid of rectangles and filling them with their respective pixel’s from the original source image. When the image is clicked the pieces have physics properties applied to propel them.

package com.hapticdata.fb2009
{
	import com.hapticdata.phsyics.AngularVelocityVector;
	import com.theflashblog.fp10.SimpleZSorter;
	import flash.geom.Vector3D;
	import flash.geom.Matrix3D;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.geom.Matrix;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.Stage;
	import flash.display.Sprite;

	/**
	 * Exploading picture,
	 * image is embedded split into a grid, the respective pixels are copied to the Sprite,
	 * and AngularVelocityVector is used for the animation
	 * @author kphillips
	 */
	public class ExplodingPicture extends Sprite
	{

		[Embed (source="../../../../eyes4.jpg")]
		private var imgClass:Class;

		public var bd:BitmapData;

		public var columns:int = 10;
		public var rows:int = 10;

		public var gridWidth:int;
		public var gridHeight:int;

		public var container:Sprite;

		public var items:Vector.;
		public var avVectors:Vector.;

		public var hasExploded:Boolean = false;
		public var axis:Vector.;

		public var _stage:Stage;
		override public function get stage():Stage
		{
			return _stage;
		}

		public function ExplodingPicture(stage:Stage=null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}

			axis = new Vector.();
			axis[0] = Vector3D.X_AXIS;
			axis[1] = Vector3D.Y_AXIS;
			axis[2] = Vector3D.Z_AXIS;

			avVectors = new Vector.();

			addEventListener(Event.ENTER_FRAME,handleEnterFrame);

			container = new Sprite();
			container.x = stage.stageWidth*0.5;
			container.y = stage.stageHeight*0.5;
			addChild(container);

			bd = (new imgClass() as Bitmap).bitmapData;

			gridWidth = bd.width / columns;
			gridHeight = bd.height / rows;

			items = new Vector.();
			for(var c:int=0;c < columns;c++)
			{
				for(var r:int=0;r < rows;r++)
				{
					var s:Sprite = new Sprite();
					var m:Matrix = new Matrix();

					var rectBD:BitmapData = new BitmapData(gridWidth,gridHeight);
					rectBD.copyPixels(bd, new Rectangle(c*gridWidth,r*gridHeight,gridWidth,gridHeight), new Point(0,0));
					s.graphics.beginBitmapFill(rectBD,m);
					s.graphics.drawRect(0,0,gridWidth,gridHeight);
					s.graphics.endFill();
					s.addEventListener(MouseEvent.CLICK,handleMouseClick)

					items.push(s);
					container.addChild(s);
					var sx:Number = (c*gridWidth) - (bd.width*0.5);
					var sy:Number = (r*gridHeight) - (bd.height*0.5);
					s.transform.matrix3D = new Matrix3D();
					s.transform.matrix3D.appendTranslation(sx, sy, 0);

					var av:AngularVelocityVector = new AngularVelocityVector();
					av.vector = {x: s.x, y: s.y};
					av.forces = {vx: 0, vy:Math.random()*-25,angle:Math.random()*360, wind: -1, gravity: 4, drag: 0.999};
					avVectors.push(av);
				}
			}
		}

		private function handleEnterFrame(event:Event):void
		{
			if(hasExploded)
			{
				for(var i:uint=0;i < items.length;i++)
				{
					avVectors[i].step();
					items[i].x = avVectors[i].x;
					items[i].y = avVectors[i].y;

					var rot:int = 4;
					if(i&1)rot *= -1;

					items[i].transform.matrix3D.appendRotation(rot, axis[i%axis.length]);
				}
			}
			SimpleZSorter.sortClips(container);
		}

		private function handleMouseClick(event:MouseEvent):void
		{
			hasExploded = true;
			(event.target as Sprite).transform.matrix3D.appendRotation(45,Vector3D.Z_AXIS);
		}
	}
}

The next 2 examples also were inspired by Koen's presentation. With Flash CS4 there is now a native 3d environment, using the Matrix3D class it simple to work in three dimensions without the use of a third-party library like Papervision3D or Away3D. I did however need to use SimpleZSorter, a great class I found on Lee Brimelow's The Flash Blog.

Slide 2: Accelerated Drawing using Vectors and 3D Transformations. This slide will draw 1000 squares in a 3d space, something that previously would've been very difficult for flash. Now using Vector (so much better than un-typed arrays), and some new drawing classes such as GraphicsPathCommand the drawing is very manageable on your systems resources.

package com.hapticdata.fb2009
{
	import flash.display.BitmapData;
	import flash.display.GraphicsBitmapFill;
	import flash.display.GraphicsPath;
	import flash.display.GraphicsPathCommand;
	import flash.display.GraphicsPathWinding;
	import flash.display.GraphicsSolidFill;
	import flash.display.GraphicsStroke;
	import flash.display.IGraphicsData;
	import flash.display.LineScaleMode;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.geom.Matrix3D;
	import flash.geom.Point;
	import flash.geom.Vector3D;

	/**
	 * Drawing3D, using the Vector class and GraphicsPathCommands to accelerate drawing
	 * @author kphillips
	 */
	public class Drawing3D extends Sprite
	{

		public var i:int = 0;
		public var numShapes:int = 1000;

		public var commands:Vector.;
		public var coords:Vector.;

		public var container:Sprite;
		public var shape:Sprite;

		public var _stage:Stage;

		override public function get stage():Stage {
			return _stage;
		}

		public function Drawing3D(stage:Stage = null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}
			container = new Sprite();
			container.x = stage.stageWidth * 0.5;
			container.y = stage.stageHeight * 0.5;

			addChild(container);

			commands = new Vector.();
			commands[0] = GraphicsPathCommand.MOVE_TO;
			commands[1] = GraphicsPathCommand.LINE_TO;
			commands[2] = GraphicsPathCommand.LINE_TO;
			commands[3] = GraphicsPathCommand.LINE_TO;
			commands[4] = GraphicsPathCommand.LINE_TO;
			//
			commands[5] = GraphicsPathCommand.MOVE_TO;
			commands[6] = GraphicsPathCommand.LINE_TO;
			commands[7] = GraphicsPathCommand.LINE_TO;
			commands[8] = GraphicsPathCommand.LINE_TO;
			commands[9] = GraphicsPathCommand.LINE_TO;

			addEventListener(Event.ENTER_FRAME, handleEnterFrame);
		}

		private function handleEnterFrame(event:Event):void
		{
			if(i++ < numShapes)
			{
				//create shape
				var shape:Sprite = new Sprite();
				shape.transform.matrix3D = new Matrix3D();
				shape.transform.matrix3D.appendTranslation(-stage.stageWidth * 0.5, -stage.stageHeight * 0.5, Math.random() * 50 - 25);
				container.addChild(shape);

				var pt:Point = new Point(Math.random() * stage.stageWidth, Math.random() * stage.stageHeight);
				var width:int = Math.random() * 25 + 1
				var height:int = Math.random() * 25 + 1;
				coords = new Vector.();

				//left x
				coords[0] = pt.x - (width * 0.5);
				//top y
				coords[1] = pt.y - (height * 0.5);
				//right x
				coords[2] = pt.x + (width * 0.5);
				coords[3] = coords[1];

				coords[4] = coords[2];
				//bottom-y
				coords[5] = pt.y + (height * 0.5);

				coords[6] = coords[0];
				coords[7] = coords[5];

				coords[8] = coords[0];
				coords[9] = coords[1];

				var drawingData:GraphicsPath = new GraphicsPath(commands, coords, GraphicsPathWinding.NON_ZERO);
				var fillBitmap:GraphicsBitmapFill = new GraphicsBitmapFill(new BitmapData(width, height, true, Math.random() * 0xFFFFFF00));
				var stroke:GraphicsStroke = new GraphicsStroke(1, true, LineScaleMode.NONE, "none", "round", 3, new GraphicsSolidFill(0xffffff, 1));

				var graphicsData:Vector. = new Vector.();
				//fill
				graphicsData[0] = fillBitmap;
				//stroke
				graphicsData[1] = stroke;
				//data
				graphicsData[1] = drawingData;	//i don't want a stroke

				shape.transform.matrix3D.appendRotation(Math.random() * 360, Vector3D.Y_AXIS);
				shape.transform.matrix3D.appendRotation(Math.random() * 360, Vector3D.X_AXIS);

				shape.graphics.drawGraphicsData(graphicsData);

			}

			container.rotationY++;
		}
	}
}

Slide 3: Controlling an object's rotation in 3D There isn't much new here, I'm just trying to show simple control of the environment. You can see how we can implement 3D planes and rotation very simply, this could open up some doors for possible navigations in future projects without a large time investment.

package com.hapticdata.fb2009
{
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextField;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import flash.geom.Vector3D;

	import com.theflashblog.fp10.SimpleZSorter;
	import flash.geom.Matrix3D;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.display.Bitmap;
	import flash.display.Sprite;

	/**
	 * Rotating3D, an embedded object, rotating in a 3d environment
	 * @author kphillips
	 */
	public class Rotating3D extends Sprite
	{
		[Embed (source="../../../../tree.png")]
		private var imgClass:Class;

		public var original:Bitmap;

		//circle properties
		public var radius:int = 150;
		public var center:Point;

		public var numItems:int = 8;

		public var rotY:Number=0;
		public var rotZ:Number=0;

		public var container:Sprite;
		public var items:Vector.;

		public var _stage:Stage;
		override public function get stage():Stage
		{
			return _stage;
		}

		public function Rotating3D(stage:Stage=null)
		{
			if(!stage)
			{
				stage = this.stage;
				_stage = this.stage;
			}
			else
			{
				this._stage = stage;
			}
			stage.addEventListener(MouseEvent.MOUSE_MOVE,handleMouseMove);
			center = new Point(stage.stageWidth*0.5,stage.stageHeight*0.5);

			var tF:TextField = new TextField();
			tF.defaultTextFormat = new TextFormat("arial");
			tF.autoSize = TextFieldAutoSize.LEFT;
			tF.text = "move mouse to rotate";
			tF.x = 10;
			tF.y = 10;
			addChild(tF);

			container = new Sprite();
			container.x = center.x;
			container.y = center.y;
			addChild(container);
			container.addEventListener(MouseEvent.CLICK,handleClick);

			original = new imgClass() as Bitmap;

			items = new Vector.();
			var radialStep:Number = 360 / numItems;
			for(var i:uint=0;i < numItems;i++)
			{
				items[i] = new Bitmap(original.bitmapData.clone());
				items[i].transform.matrix3D = new Matrix3D();
				var rotZ:int =radialStep * i;

				items[i].transform.matrix3D.appendTranslation(-items[i].width*0.5, -items[i].height*0.5, 0);
				items[i].transform.matrix3D.appendRotation(rotZ,Vector3D.Y_AXIS);

				container.addChild(items[i]);

			}

			//SimpleZSorter.sortClips(container);

			//container.rotationX += 60;
			//container.rotationX += 15;
			addEventListener(Event.ENTER_FRAME,handleEnterFrame);
		}

		private function handleMouseMove(event:MouseEvent):void
		{
			var distX:Number = mouseX - center.x;
			var distY:Number = mouseY - center.y;

			rotY = distX / (stage.stageWidth*0.5);
			rotZ = distY / (stage.stageHeight*0.5);
		}

		private function handleClick(event:MouseEvent):void
		{
                        //move back in z-space every click
			//if(event.target is Bitmap)
			//{
				event.target.transform.matrix3D.appendTranslation(0,0,10);
			//}
		}

		private function handleEnterFrame(event:Event):void
		{
			container.rotationY+=(rotY*-2);
			container.rotationZ+=(rotZ*-2);
			SimpleZSorter.sortClips(container);
		}
	}
}

hd-fbexamples.zip (source files)

package com.hapticdata {

	import flash.utils.ByteArray;

	/**
	 * Adds extra methods to arrays for easier manipulation
	 * @class AdvArray
	 * @author Kyle Phillips - http://www.haptic-data.com
	 * @created Jun 29, 2008
	 */
	dynamic public class AdvArray extends Array {
		public function AdvArray(...args) {
			//this = this as Array;
			for each(var i:* in args)
			{
				super.push(i);
			}
			//super(...args);
		}

		 /**
		  * add an array to the end of the existing AdvArray
		  * @param a (Array) the array to append
		  * @return the new length of the array
		  */
		 public function append(a:Array):uint
		 {
		 	for(var i:uint=0;i < a.length;i++)
		 	{
		 		super.push(a[i]);
		 	}
		 	return super.length;
		 }
		 /**
		  * add an array at a given index of the existing AdvArray, defaults to the beginning of the array
		  * @param a (Array) the array to append
		  * @param index (uint) the index of the array to start placing the new array
		  * @return the new length of the array
		  */
		 public function appendAt(a:Array,index:uint=0):uint
		 {
		 	append(a);
		 	rotate(((a.length)+index)*-1);
		 	return super.length;
		 }
		/**
		 * allows you to search the array for a specific value, similar to MovieClip.contains()
		 * @param i (*) the value you are searching the array for
		 * @return returns Boolean
		 * @example
		 * if(myArray.contains("my string"))var myString:String = myArray.pluck(myArray.indexOf("my string"));
		 */
		public function contains(i:*):Boolean
		{
			var index:int = this.indexOf(i);
			return (index != -1) ? true : false;
		}

		/**
		 * pull an item out of the array by its index and re-sort the array
		 * @param index (int) the index of the array to pluck
		 * @return the item that was removed from the array
		 */
		public function pluck(index:int):* {
			return super.splice(index,1);
		}

		/**
		 * allows you to cycle an array one step forward, placing the first item at the end of the array
		 * @return returns the new AdvArray
		 */
		public function rotateForward():Array {
			var firstItem:* = super.shift();
			super.push(firstItem);
			return this;
		}
		/**
		 * allows you to cycle an array one step backwards, placing the last item at the beginning of the array
		 * @return returns the new AdvArray
		 */
		public function rotateBackwards():Array {
			var lastItem:* = super.pop();
			super.unshift(lastItem);
			return this;
		}
		/**
		 * allows you to specify a positive or negative value to cycle the array, 0 will do nothing
		 * @param inc (int) positive or negative value for direction and amount to rotate the array
		 * @return returns the new AdvArray
		 */
		public function rotate(inc:int=1):Array {
			if(inc > 0)
			{
				for(var j:int=0;j < inc;j++) rotateForward();
			}
			else if(inc<0)
			{
				for(var k:int=0;k > inc;k--)rotateBackwards();
			}
			return this;
		}
		/**
		 * makes a shallow copy of the current array
		 * Flex3 LiveDocs: In a shallow copy, if the original array has elements that are objects, only the
		 * references to the objects are copied rather than the objects themselves. The copy points to the same objects as the original does.
		 * Any changes made to the objects are reflected in both arrays.
		 * @return a shallow copy of the current array
		 */
		public function shallowCopy():Array
		{
			return super.concat();
		}

		/**
		 * makes a deep copy of the current array
		 * Flex3 LiveDocs: In a deep copy, any objects found in the original array are also copied
		 * so the the new array does not point to the same objects as does the original array. 
		 * @return a deep copy of the current array
		 */
		public function clone():Array
		{
    		var myBA:ByteArray = new ByteArray();
    		myBA.writeObject(super);
    		myBA.position = 0;
    		return(myBA.readObject());
		}

	}
}

Download the source:
AdvArray.as