'open-source' Category

Toxiclibsjs v0.1.0

Wednesday, January 11th, 2012

One year ago, I began porting a couple classes from Toxiclibs over to JavaScript. Now with 90 classes ported and several more nearly completed, Toxiclibsjs is beginning to take shape.

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.

(more…)

Proposal for a more-private Facebook “Like”

Sunday, December 4th, 2011

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.

(more…)

Toxiclibs.js gets VerletPhysics2D

Tuesday, May 24th, 2011

It’s been four months since I initially started creating Toxiclibs.js a JavaScript version of toxiclibs. So far, over 65 ‘classes’ have been written. These classes cover a wide spectrum of functionality that I believe can be helpful on any web project.

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.

(more…)

Toxiclibs.js – open-source computational design

Monday, January 10th, 2011

I have initiated a new open-source project titled Toxiclibs.js. Toxiclibs.js is a JavaScript port of Karsten Schmidt‘s expansive toxiclibs library.
Contributed libraries are an excellent perk of using Processing, and to me there is no library that stands as strong as Karsten’s. Toxiclibs encapsulates a lot of the complexity involved with common computational design problems and has a very large scope of what it can accomplish.

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.

(more…)

Post-Flashbelt Experimentation

Wednesday, July 1st, 2009

Flashbelt has come and gone for 2009, and again it was an experience that I feel lucky to have been a part of. It was great to spend 3 days with like-minded designers and developers; and to listen to presenters show where the past year has led them. Presenters demonstrated completed projects, experiments and the new tools they are using. Rather than repeating tidbits I picked up here and there, I want to show some things I have thrown together since Flashbelt. These are just some quick demos, for me they mainly serve as a form of notes to get familiar with some of the new features and also were thrown together as a quick ‘capabilities demo’ for the team.

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.

(more…)

AdvArray for Actionscript 3

Wednesday, October 1st, 2008

I wrote a brief class extending Actionscript 3′s Array class. Each time that I have found myself repeating common array tasks I have tried to add it. The AdvArray Documentation contains a list of the methods I have added. The ones I find the most helpful are probably clone() and rotate().


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