Basic Training in Mathematics: A Fitness Program For Science Students

I stumbled upon the Yale 2006 Physics 201 course on iTunes U. It’s very very good. The professor himself is actually quite a character. After watching about half of the first one, I looked him up on google to see what he was about. There’s no doubt about it, he’s the real deal. One of the first things he said in his physics course was – This is going to be hard. We can’t gloss over the math, there will be a lot of it. Sorry.

I liked him so much, per his recommendation as a study guide I bought his book on amazon.

The Book

Basic Training in Mathematics: A Fitness program For Science Students

It aims to go thru teaching the student (that’s us!) – the “maths” they’ll need to undertake a course in science.
In this case, the professor’s own physics course.

Chapter 1, Page 2

Don’t be impressed, or afraid by that page. It looks scary, but what is going on there is very simple. Thanks to the professors talent in explaining.
Of course you will be googling some math symbols, but again no need to fear “teh scary maff lawlz.”

In order to help me retain more of the knowledge.
I aim to write an example per every section (I would define section as individual significant pieces of knowledge, that make up a chapter. Where a new idea is presented, or previous idea elaborated on in depth).

This is the first one i’ve created. It’s actually laughably simple, but i wanted to make sure I made one before I went to bed. Also it is the FIRST section in the book so I wanted to stay true to that.

Here is ‘a function of x’, where f(x) is continuous, that is – a line can be drawn through it without lifting the pen from the paper:

f(x) = x^2+x/2;

A modest start. Tomorrow I will show the derivative of that function, which should be kind of cool. The classic example is that given the location of a particle P at a time T the derivative of that function is the instantaneous velocity of that particle.

Thoughts on Intelli-J IDEA

Wow. This is the single best code-editor I have EVER used in my life.

  • It is fast.
  • More importantly, It FEELS fast.
  • It gets syntax coloring correct (Can there ever be TOO much syntax-coloring? No. There can be too many colors used, but there cannot be too much syntax-coloring).
  • It has a debugger.
  • It has a very low memory footprint.
  • I can use it for my AS3 / Javascript / PHP / Python / Pearl / Java (I still prefer xcode for c/c++/obj-c)
  • It’s one of the few javascript editors that is not a glorified text editor. In other words it is aware of my properties and their methods!
  • Ctrl+J to quick-view Javadoc for selected method.
  • Ctrl+i to quick-view method implementation.
  • I can export ALL my settings with 3 clicks, and import them into my laptop!
  • It has so many options and things to play with – it recreates that – ooo look what you can do if you press this, feel that makes learning a new IDE fun.

It’s really awesome, and i’ve copied my xcode color settings that Apple probably spent millions of dollars tweaking and now im in coding heaven.

Most importantly, in terms of relative to editor IDE’s it’s “dirt cheap”. FDT is like 500 bucks? WITHOUT debugger? FlashBuilder is like 600 bucks, and it just plain sucks (Everything looks like default text, what are you providing me again? Oh right i forget, annoyance *cough* html-template errors *cough* compiling project keeps producing swf with old code *cough* )

The most basic away3d scene

Time to get cracking getting back to doing 3D in AS3. I’m very excited for molehill, and i’m excited that at work I am just starting a new project in which we need to use one of the existing 3D packages. Previously i’ve always used Papervision3D, and i felt very comfortable with it and how it works and the ins-and-outs so I was able to get my hands dirty with it whenever I needed and not feel lost.

Well that time is over, Papervision3D has long since been dead.

With Away3D already working with adobe on their future release of their API that supports Molehill, and a new project at work that will require using one of the 3D packages, I can’t think of a better time to start using/learning Away3D. Especially with the aid of my fellow co worker, ‘wu media‘ – who’s a bit of a wizkid when it comes to 3D

Below is a very basic stub. It contains a barebones document class with barebones 3D scene, including one light source.

I find these useful when you need to just have something on the screen and then go from there. So this is also kind of a reference for myself as well.

	import away3d.cameras.Camera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.lights.DirectionalLight3D;
	import away3d.primitives.Cube;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.geom.Vector3D;
	[SWF(width="800", height="800", backgroundColor="0x000000", frameRate="60")]
	public class MostBasicAwayDocumentClass extends Sprite
		// Away3D 
		private var camera	:Camera3D;
		private var view 	:View3D;
		private var scene	:Scene3D;
		// Constants
		private const WORLD_SIZE	:Number = 800;
		public function MostBasicAwayDocumentClass()
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		private function init(e:Event = null):void
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			addEventListener(Event.ENTER_FRAME, run);			
		private function initEngine():void
			camera = new Camera3D();
			view = new View3D();, 0, -2000); Vector3D(0, 0, 0)); = 10; = 50;
			view.x = stage.stageWidth/2;
			view.y = stage.stageHeight/2;
			scene = view.scene;	
		private function initObjects():void
			var light	:DirectionalLight3D = new DirectionalLight3D();
			light.color = 0xFFFFFF;
			light.ambient = 0.45;
			light.diffuse = 0.55;
			light.specular = 0.9;
			light.direction = new Vector3D(-1, -1, -1);
			var cube	:Cube = new Cube();
		private function run(e:Event):void

Better Eclipse Icon

Eclipse is awesome
Update: Eclipse sucks, use IntelliJ IDEA

However you have to set it up right. I recommend downloading and using only the stripped platform binary ( it should be about ~49M – if it’s much larger then double check you’re downloading the ‘platform runtime binary.’

But let’s face it. The icon sucks

So after looking around I found this.
However as it is, it is a little unusable so i opened up photoshop and modified it a bit to work better at small sizes and decrease the visible hard edges.

Finally i’ve made the .icns file which contains all the appropriate sizes with mask.

Here is the final result

Here’s the icns file for OSX
(if you’re on a PC – post a request and if anyone someone is interested i’ll try to make a .ico file)

To Install

Browse to the Eclipse directory inside your Applicaitons directory. Right click it and select, ‘show package contents’, Go into Contents > Resources and paste the extracted Eclipse.icns file. Restart eclipse.

After that

After that make sure you set the memory and a few other launch arguments correctly, i’m using these:


Again, The real thanks goes to ‘*domox’ for the original imagery, i just modified it a tad to my liking and made the icons.

Sharing a Javascript base class between Node.js Server / Client-side Browser

I’ve been using Node.JS a lot lately, and Im really enjoying it.

What is it / How does it work?

I was very hazy about that a few weeks ago other than, “It’s some kind of server and also a buzz word”
Node.js is a very very fast event-based server. Also equally important, the server-side code you write is itself written in javascript.

One of the good things about Node.js is that It has a strong following already. People have created many modules for it already. One such module is a Websocket implementation.

What might I use it for?

We are using it here at work to create an HTML5+Websockets real-time multiplayer game.

In order to make this game work, I have the server running a version of the game – while each individual client is running in their browser a version of the game as well. The server is ultimately the one in charge of killing players / tracking projectiles.

The users merely see a facade of this game they play. Their own character sends information to the server, which they implement in themselves instantly. For example when you fire a projectile, you send that information to the server (what / how fast / what angle). Once the server receives that message, and adds that projectile to it’s running of the game. You see the projectile move, but really the server is now in charge of it and it will let you know when it has hit another player. Other users characters movements are predicted based on the last received information, but continuously checked as new information is received.

For this methodology to work, the server needs to have a version of the game running. This is only viable if the server and client side can share base classes between one another. For example the character/projectile classes are no different on the client or server. We share both between them.

However ClientGameController and ServerGameController differ from one another, yet both inherit from AbstractGameController.

This is the beauty of node, it is very easy to do this and keep the code looking nearly exactly the same on both sides if you use Require.js.

Let’s see it in action

This is a shared Character class implementation.

var init = function()
	// some defaults we use
	this.velocity = { x: 0, y: 0 }; // how fast i am going
	var CharacterController =  function(aClientID) {
		this.clientID = aClientID;
		console.log('Character ID:', this.clientID); // Node has a console.log so this works perfectly on both.
	CharacterController.prototype.doSomething = function() {
		console.log('(CharacterController) doSomething()!');
		return 'hi';
	return CharacterController;
if (typeof window === 'undefined') {
// We're in node!
	exports.CharacterController = init();
} else {
// We're on the browser. 
// Require.js will use this file's name (CharacterController.js)
// to export an object called - CharacterController
      // You could use this to require modules before your class is created
      define(['ClassCharacterUses', 'WeaponClass'], 'CharacterController', init); 

We are taking advantage of the fact that the browser has a global ‘window’ property. Another thing to note, is how similar Require.js is to Node’s own require syntax.


This weekend I created a way for many people to interact with a native application (and each other) via OSC.

Node.js+Socket.IO+OSC+Cinder+HTML from mario gonzalez on Vimeo.

What you’re seeing:
A native application I created running on OSX
User goes to a web-page via ordinary Safari browser on their iphone
User is interacting with the application
Multiple people interact with the application in real time, via browser on their mac/pc/iphone/android



So i did a minor face lift on my home page, and in the process I ported over some of my favorite code to use. That is Craig Renolds super awesome, boid behaviors. More specifically I ported my Objective-C Boid flocking class, this time around.

You can see it on the action on my site, move the ‘sun’ objects around you can create some interesting visual patterns depending where you place them. The cool thing about these SteeringBehavior’s is that they can be stacked.

For example on my site i’m currently using something like this:

for(var j = 0; j < obstacleCount; j++)
	var obstaclePosition = new Vector(parseFloat(obstacles[j].style.left), parseFloat(obstacles[j];
	boid.fleePanicAtDistanceUsingMultiplier(obstaclePosition, 200, 1);
boid.seekWithinRangeAndApplyMultiplier(mouseCordinates, 100, 0.69);
boid.handleEdgeWithBoundsObjectAndShouldWrap(bounds, false);

Which is saying, loop thru the obstacles array (that I created on page load, it simply contains the 3 suns which are themselves boids). The behavior here is ‘flee:PanicAtADistance:UsingMultiplier’, causing them to avoid the object, and REALLY avoid it if they get closer than ‘PanicAtADistance’, and multiplier adjust the strength of the behavior.

After it says, seek:WithinRangeAndApplyMultiplier causing all the Boids to go towards the mouse unless closer than a certain distance.

Below that we have, Boid.wander(0.2), which tells the boid to ‘wander’.
Wander is an interesting behavior, because it is not random motion. That would look like a jittery mess.
Wander is in the Boid creation function at the top of the file.

boid.setWanderRadiusAndLookAheadDistanceWithMaxTurningAngle(16, 40, 0.3);

It takes the end motion is controlled by three properties. Let’s give them names for reference.


I find the best way to picture that type of motion is to imagine having a stick pointing infront of you as you walk. That stick would represent the LookAheadDistance.
The wander radius can be thought of as an imaginary circle around the leading part of the stick.
Finally we have MaxTurningAngle, which represents say 5-10 degrees left or right.

It’s easy to imagine how these 3 properties combined, can create a nice wandering pattern when you paint this scenario. The stick in front of you, can be turned ‘MaxTurningAngle’ to the left or right, each step. From that point, randomly pick a point around it at most WanderRadius away from the tip of the stick.

Do that each step, and you will be wandering randomly but never make a giant unnatural looking change in position. Playing with these variables yields highly different results. For example imagine if you had only a stick the length of a spoon. You would be moving a lot more sporadically compared to someone using a long broom stick and turning that 5 degrees each time.

Hopefully that shows how cool Wander really is, and why it’s more than just random walking.

Finally we have the edge handling function, which wraps the boids pacman style on the screen when they reach an edge.

It’s really quite amazing how you can stack these behaviors up.
Here are the javascript files themselves: (required by Boid.js) (Usage example)


Model View Controller in the real world

I was watching some of the Apple WWDC 2010 videos, and these two images was shown.
They aren’t meant to be funny, but they made me laugh, it reminds me of when you’re trying to create the proper MVC paradigm on an actual application, and you keep wondering – damn do i really have to connect all these things just to show this info?

MVC In Concept

MVC In The Real World

Least im not the only one who wrestles and questions own choices of is this MVC or is it just spaghetti.
It’s both, but the idea is that its less spaghetti after you take a step back from implementation details

Post-Of-The-Day #7 – Some links?


MIRAGES from Sabrina Ratté on Vimeo.

Also Beautiful

Between Bears from Eran Hilleli on Vimeo.

My own little thing:

Could Never Reach You from mario gonzalez on Vimeo.

My friend told me I should do videos for Chemical Brothers, and linked me to this – which i thought was so amazing.

The Chemical Brothers – Another World from ikkunapaikka on Vimeo.

I’m going to make something with that audio, it reminds me a lot of this thing i made.
Except that theirs is WAY better

Linewaves from mario gonzalez on Vimeo.

So i’ve been doing some face tracking stuff…. and i accidentally created some pretty linewaves.
I think I will try to combine the two. My face tracking stuff is still so primitive, but we’ll see what i can fake.