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.

How to trace something in C++

Coming from an Actionscript background, i’ve become accustomed to being able to at will at any given point
tracing an object, or a value. It’s something i actually took for granted.

When I started using Cinder ( http://libcinder.org ) – and in the process doing C++. A language
at the time I had only barely used – but now i love. I realized that – trace, or speaking to my PHP background
printf is something that is not actually built in at all.

It’s something you have to turn into a c_string, which is basically a char* as i understand it.
Devnote: What is a Char* – it’s a pointer to the first character in a string of character, whose ASCI values ( 0 – 255 ) are mapped to strings.

So,
How do you trace a value in C++, be it an interger, string, float, double, or class?

In C++ ( and C? ) – it’s not as straigh forward, but fortunately we have something called operators.
An operator, is actualyl something you’re very accustomed to, such as:

+
-
*
/

Those are actually operators, and what does that mean? Well it means you can define one and when you’re
Type, comes across it it will run this function. We’ll get into it another time, cus its a great topic, but…
What that means right now, is that we can define a “<<" operator, so we can turn out data into a C-String with the relavent info. So we can say:
friend std::ostream& operator<<( std::ostream& lhs, const Vec2& rhs )
{
lhs << "[" << rhs.x << "," << rhs.y << "]"; return lhs; }

Which will make our console function return useful info.
For example:

console << Vec2f(10.0f, 11.1f) << std::endl;

One thing to note is that std::endl, what the heck is that?
It just means go into the STD namespace ( or package if you wanna use a different term )
and grab the "endl" constant... put that there.

Also - for POD ( Plain Old Data ) - we can call a toString function such as

template inline std::string toString (const T& t)
{
std::stringstream ss;
ss << t; return ss.str(); }

Which can be used as:

float pie = 3.1415
Console() << toString( pie ) << std::endl;

And that's how you get values out into the console in C++ / Cinder.