Beginners: Fucking Particles

 

FUCKING PARTICLES

Step 1

Open Processing.

Make sure you have Processing already installed,

if not read this tutorial.

Step 2

MUTHERFUCKING CODE!!

Copy, paste, read and run:

 

 

//Processing has two parts.
//The first one, the setup,
//is where you get ready to draw;
//the equivalent of choosing your brushes,
//colors and other material before making
//a master piece.

//There’s also the draw part.
//There, you draw, obvisouly.
//That function loops the instructions
//in the order you write them.

/**Another thing you should
know before continuing would be,
how to write comments.
If you have pasted this text
in processing, it should look grey;
that means it is a comment.
There are two ways of writing comments,
the one-liners that start with a double slash,
like this:
//This is a one-liner.
or the multi-line that startswith a slash plus two stars
and ends with a star and a slash,
like this whole paragraph.
*/

//One line comment

/**multi
line
*/

void setup()
{
size(500,500); //Choose the width and height of your window.
background(0); //Choose a black background: 0 is black, 255 is white.
//We’ll talk about colors later
}

void draw()
{
//Press run (upper-left corner, looks like a play button)
//that will run the instructions on the setup
//setup up the size of the window
//and set the background to black
//Then it will jump to draw
//and loop through this instructions.
//Sadly because this is all comments
/**this program won’t do anything*/
//Leasson learned.
}

 

It should look like this:


Ok, so now you know about comments.

Let’s so some drawing. How about a circle?

Copy, paste, read and run:

 

//Circles are drawn with the ellipse function.
//When you call the function you tell it
//where you want to put the ellipse, it’s width and height
//and you are done.

//A int represents a whole number, positive or negative.
//The ones in black are variables that will store values representing
//the position and shape of our particle.
//I separate them with a coma because all will be int.
//position, width and heigh are all pixels.

int xposition, yposition, ellipsewidth, ellipseheight;

void setup()
{
size(500,500);
background(0); //255 is white, 0 is black.
smooth(); //This smooths out the edge of the circle.
xposition = 250; //Here we
yposition = 250;
ellipsewidth = 100;
ellipseheight = 100;
}

void draw()
{
noStroke(); //This eliminates the border of the circle.
fill(255); //255 is white, 0 is black.
ellipse(xposition,yposition,ellipsewidth,ellipseheight);
//Draws the ellipse the parameters are: ellipse(x,y,w,h);
}

 

It should look like this:

 

Now, let’s add movement:

For that we’re going to use some things called Vectors.

A vector can represent position, velocity, aceleration or any other value in space.

Let me explain: In the past example we used

two variables (xposition and yposition)

to represent the position of the ellipse in the window space.

With a vector we could replace them with just one variable (a position vector),

it would be like hiring a dude that remembers two things

insead of two guys remembering one each.

Vectors in processing are created like this.

Copy,paste, read and run:

 

PVector position, velocity; //Here we declare two Processing Vectors.

int diameter; //This variable will hold the size of the particle.

void setup()
{
size(500,500); //The size of the window.
background(0); //255 is white, 0 is black.
smooth(); //This smooths out the edge of the circle. Comment this to see the difference.
position = new PVector(10,10,0); //Here we create a Processing Vector aka PVector, and set it’s parameters x,y,z to 10,10,0.
velocity = new PVector(1,1,0); //PVectors are floats, that means it can handle decimals.
//Here we want to move 1 pixel per loop in x and 2 pixel per loop in y
//We won’t touch the z parameter in PVector(x,y,z) for now, that will appear later on.
diameter = 10; //Set the diameter to 10 pixels.
}

void draw()
{

background(0); //You might ask yourself why paint the background again.
//Well, because we loop, again and again this function, is we don’t,
//instead of a particle it will redraw over itself, looking like a brush. Comment that line to see what I mean.
//In real life we have velocity when we walk
//because we add a step every second or so.
//Because this draw function loops (repeats itself again and again)
//it is like time passing by and if we add a step every time we loop
//we can simulate movement by adding the velocity to the position, like this:
position.add(velocity); //To add vectors we use the .add() function ad pass the Vector to add as a parameter.

noStroke(); //This eliminates the border of the circle.
fill(255); //255 is white, 0 is black.
ellipse(position.x,position.y,diameter,diameter);
//To “ask” for the x value we use a period “.”
//We ask the position vector what’s it’s x value like this position.x,
//it’s y value like this position.y and it’s z like this position.y.
//This works with any other PVector variable
//Draws the ellipse the parameters are: ellipse(x,y,w,h);
}

WE HAVE LIFTOFF!

Now let’s create our first function

and make that particle bounce off the walls

instead of flying away to infinity.

Copy, paste, read and run:

 

PVector position, velocity;

int diameter;

void setup()
{
size(500,500);

background(0);

smooth();

position = new PVector(10,10,0);
velocity = new PVector(3,5,0);

diameter = 10;
}

void draw()
{
background(0);

position.add(velocity);

//This is the function I was talking about.
//Read below to see what it does.
//Here bounceWalls does whatever is below
//in between bounceWalls(){   }
bounceWalls();

noStroke(); //This eliminates the border of the circle.
fill(255); //255 is white, 0 is black.
ellipse(position.x,position.y,diameter,diameter);
}

//Here you create the function.
//You write void because you don’t return anything.
//don’t worry about this now, we’ll talk about it later.

void bounceWalls()
{
float leftLimit, rightLimit, upperLimit, lowerLimit; //here we create four variables to create the limits where the particle will bounce.

leftLimit = diameter*.5; //Because the origin of the circle is in the middle our limit is half the circle,
//so it will look like it bounces off when it touches the edge.
rightLimit = width – diameter*.5; //The width variable in blue gives you the value of your window. We subtract only half because of the same reason
//that we did on the left limit.
upperLimit = diameter*.5; //Upper limit same principle.
lowerLimit = height – diameter*.5; //Lowe limit same as right but with height.

//Here we’re going to use the if(){}statement.
//What an if does is that test a statement
//if the statement is true it will do what’s in between {}
//if it’s false will continue without touching what’s inside {}

//We check if the x position of the particle is less than the left limit. Same with each different limit.
if(position.x < leftLimit)
{
position.x = leftLimit; //We position on the limit and invert the velocity.
velocity.x = velocity.x*-1; //By multiplying times -1 it creates the bounce effect, velocity is the negative of what it was.
}
if(position.x > rightLimit)
{
position.x = rightLimit;
velocity.x = velocity.x*-1;
}
if(position.y < upperLimit)
{
position.y = upperLimit;
velocity.y = velocity.y*-1;
}
if(position.y > lowerLimit)
{
position.y = lowerLimit;
velocity.y = velocity.y*-1;
}
}

 

BOUNCE, BOUNCE, BOUNCE BABY!

If you want to start playing with the reference:

http://www.processing.org/reference/

Next tutorial: Intermediate Motherfucking Classes


Flattr this

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s