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 (http://download.eclipse.org/eclipse/downloads/drops/R-3.6.1-201009090800/index.php) 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
Eclipse.icns
(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:

-startup
../../../plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
--launcher.library
../../../plugins/org.eclipse.equinox.launcher.cocoa.macosx.x86_64_1.1.1.R36x_v20100810
-showsplash
-showlocation
org.eclipse.platform
--launcher.XXMaxPermSize
512M
--launcher.defaultAction
openFile
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms512m
-Xmx1024m
-Xss2m
-XX:PermSize=1024m
-XX:MaxPermSize=1024m
-XX:MaxGCPauseMillis=10
-XX:MaxHeapFreeRatio=70
-XX:+UseConcMarkSweepGC
-XX:+CMSIncrementalMode
-XX:+CMSIncrementalPacing
-XX:CompileThreshold=5
-Dcom.sun.management.jmxremote
-Xdock:icon=../Resources/Eclipse.icns
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts

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
	define(init);
 
/*
      // 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.

Node.js+Socket.IO+OSC+Cinder+HTML

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

Repository:

Boid.js

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].style.top));
	boid.fleePanicAtDistanceUsingMultiplier(obstaclePosition, 200, 1);
}
 
boid.seekWithinRangeAndApplyMultiplier(mouseCordinates, 100, 0.69);
boid.wander(0.2);
 
boid.update();
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.

LookAheadDistance
WanderRadius
MaxTurningAngle

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:

http://onedayitwillmake.com/lib/javascript/Boid.js
http://onedayitwillmake.com/lib/javascript/Vector.js (required by Boid.js)
http://onedayitwillmake.com/lib/javascript/swarming.js (Usage example)

Enjoy!

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?

Beautiful

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.

Post-A-Day #4 – Objective-C Flocking-Behaviors/Boid Class

This post a day thing is great, it’s really made me kick some stuff into gear.

I love flocking behaviors, they’re awesome.
What are Flocking Behaviors?


They were created in the 1980’s from by Criag Renolds, the gist of it is that using 3 simple behaviors, surprisingly complex motion can be formed when you have many actors ( Referred to as Boids, i think Craig meant it as a another way of saying Birds, a more new york way).


The three rules are simple, i’ll explain them as i know them but im no expert.
Separation: Boids want to stay a little away from each other, some elbow room.
Cohesion: Boids want to be grouped, as long as they dont get too close they violate rule 1
Alignment: Boids within a certain range, care about which way other boids are going.

Simple right? Anyway, it makes for very pretty stuff.


A few months ago a friend of mine gave a talk based on Kieth Peters book AdvancED ActionScript 3.0 Animation (a great book). This re-sparked my interest in them, and with my on going interest in iphone development – I decided to try and port Kieth Peters code to Objective-C as best I could with the more limited knowledge I had at the time.

It actually didn’t work all that great, but, I came across SoulWire’s interpretation of Flocking (also in AS3), and I ported that. Maybe it was because it was my second attempt at porting, but this time I got really great results.
200 Objects flocking, all aware of every single other one, on a tiny iphone in your hand, that was very rewarding.
The problem was that I used Box2D’s point class B2Vec2, and then i modified it a little to boot, because I wanted to add a few operators it didn’t have built in. So it left me with something I could not really share with anyone else, and also it was now Combining Objective-C and C++, which always seems like you should avoid it whenever possible.

This was many months ago (march according to my SVN), and i had my fun playing with it and left it at that.
However, recently on the Cocos2D forums someone brought up making a heat seeking missile and I mentioned that stearing behaviors would be a great for that, if maybe over complicated but being a game forum – you worry about that less as it might be a great jumping platform from which additional gameplay ideas stem.

I decided I would revisit my class, as I had been wanting to for a long time, and re-write it using only CGPoints so that it could be pure Objective-C.

This was the result:

LittleBirds from mario gonzalez on Vimeo.

Here’s how to use the class:

 
// Creating it
boid = [Boid spriteWithSpriteSheet:_sheet rect: boidRect];
[boid setSpeedMax: 2.0f andSteeringForceMax: 1.0f];
[boid setWanderingRadius: 16.0f lookAheadDistance: 40.0f andMaxTurningAngle:0.2f];
 
// On your update function
while(boid)
	{
		Boid* b = boid;
		boid = b->_next;
		[b wander: 0.19f];
		[b 
		 flock:_flockPointer
		 withSeparationWeight:0.6f
		 andAlignmentWeight:0.1f
		 andCohesionWeight:0.2f
		 andSeparationDistance:10.0f
		 andAlignmentDistance:30.0f
		 andCohesionDistance:20.0f
		 ];
 
		[b flee:badThingPosition panicAtDistance:5 usingMultiplier:0.6f]; // avoid touch
		[b seek:yummyFoodPosition withinRange:75 usingMultiplier:0.35f]; // go towards touch
                [b update];
	}

The class may be downloaded here:
BoidsExample Version 0.2

It’s coded to the best of my ability, if you have (impactful) optimizations please share.

Update #1:
Fixed Flocking example class linked list creation bug.

Simple rules combine to make seemingly complex behaviors:

Accident – Linewaves

This is a pretty cool still frame – of an application I’m working on at the moment.
Changing this single parameter ( which controls acceleration ) – to a number i only accidentally set it to gave me this:


( You have to click on these to actually see what it looks like, the thumbnail scaling hides the effect )


Linewaves from mario gonzalez on Vimeo.