Intermediate: Flocking Tutorial – Pun Intended

Nothing like a good pun to start a tutorial. Problem?

Today we’re learning about flocking.

I code particles thinking of its vectors as their personality.

Think about this, try to recall how a mosquito swarm moves.

For starters you’ll notice the swarim is made up of dozens if not hundreds of mosquitos.

All of them behave quite the same so we only have to worry about one

and then make copies of it.

Now let’s picture just one mosquito,

he looks like quite an anxious fellow.

It flies and flies around its target and it never quite seems to get there.

We’ll see how that works in a bit.

Did you read already about Fucking Particles?

Do know about Motherfucking Classes?


We’ll begin by creating a particle with three vectors:

position, velocity & aceleration.

Position will depend of velocity and velocity of aceleration.


Let’s continue with the example.

Open Processing, here we go.

Copy, paste, read and run.


//Create an array of mosquitoes.
Mosquito[] m;

void setup()
//Set our window size.
//Set our background color white.
//Remember to smooth;
//Even with pngs, it looks much, much better.
//Initialize our mosquito array
//Change the [100] to increase the swarm.
m=new Mosquito[100];
//Initialize all of the mosquitoes in the array.
for(int i=0; i< m.length;i++)
m[i] = new Mosquito();

void draw()
//Don’t forget to redraw the background.

//Call the move() function of our Mosquito object
//That’s it’s “draw()” function.
for(int i=0; i< m.length;i++)


//We set the target position with the mouse
//The mouseX and mouseY are variables that
//throw straight the position of the mouse in the window.

void mouseClicked()
//We have a bunch of mosquito trolls
//we have to let all know the new target.
for(int i=0; i< m.length;i++)

class Mosquito
//There are our vectors
//we’ll use them to move our mosquito
//With this object we’ll make an array
//of mosquitos, and let the math do the work.
PVector p,v,a;

//This vector will be the position the mosquito
//will want to fly to.
PVector target;

//We need to position the mosquito somewhere
int startx,starty;

//Variables to calculate our starting position.
//The s will be the size of the mosquito.
int w,h,s;

//Load a troll image.
PImage troll;

//We’ll use this image as our mosquito.
troll = loadImage(“Troll.png”);
//the width and height of our window
w = width;
h = height;
//the size of our mosquito.
s = 4;

//We use temporary x and y position to start the mosquito.
startx = round(random(s,w-s));
starty = round(random(s,h-s));
//set the postiion vector with our coordinates.
p=new PVector(startx,starty,0);
//Start with no velocity, acceleration will take care of that.
v=new PVector(0,0,0);
//Start with no accelartion, our target function will take care of that.
a=new PVector(0,0,0);

//Our target position
//we start with the center.
target=new PVector(w/2,h/2,0);

//This function is the equivalent of our draw() function.
void move()
//We call the target() function to calculate the acceleration needed
//to get to your target.
//Once we got our acceleration we add it to the velocity.
//finally we add the velocity to the position.

//Eliminate the particle stroke.
//fill the particle to black.
//Draw our mosquito with our position vector
//and our s variable that indicates the size.
//Uncomment the ellipse for a traditional mosquito
//place our troll image

//This function will be used to change
//the vector with the target location.
void setTarget(int inX, int inY)
//We recieve x and y and set the vector with those values.

void target()
//We create a temp vector to calculate a vector
//from our position towards the target.
PVector temp;
temp = PVector.sub(target,p);
//Normalize the vector.
//Multimply times .5.
//set our acceleration to that vector.
a = temp;
//Because the acceleration is too big
//the velocity is too big, so it goes so fast
//when it reaches the target position that doesn’t have time to slow down
//That’s how we simulate an axious personality.


You should see something like this.


The tutorial I used to learn PVectors.

Read the other tutorials here:

Beginner: Download and Install Processing

Beginner: Pointilism or GTFO

Beginner: Adding a Library. Problem?

Beginner: Fucking Particles

Intermediate: Me Gusta Face Detection

Intermediate: Motherfucking Classes

Flattr this


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s