Hello Fisica (OOP)

Screen Shot 2014-10-06 at 3.18.01 PM
Processing is not exactly appropriate for game development for a variety of reasons but we can use it to prototype game ideas if we extend it with libraries.

Fisica is a wrapper for the most popular 2D physics engine Box2D.

This is the reference
This is a human readable tutorial

The main physics simulation takes place in an FWorld object.
But wait, what are Objects?

We can use Object Oriented Programming (OOP) without knowing how to write classes for now. Here are some general principles:

An object is a computational model of something (e.g. cat).

An object has properties that define its features and its state (the cat is Siamese, sitting on the couch, hungry…).
A properties is a variables contained within an object.

An object has behaviors described by methods (the cat is meowing, eating, dying).
A method is a function contained within an object.

An object is an instance of a class (the idea of cat is the class, my cat Felix is the instance). Think of a class as a blueprint for creating a kind of object.

Some classes can extend other classes (e.g. the class Cat extends the class Animal)

In some cases, like in fisica, objects can contain other objects (e.g. the object Room contains two Cats, each Cat has 4 Leg object).

In Processing objects are used this way (note the example shows an imaginary object Cat which is not part of Processing, this is not functional code):

 
//Declare an object
Cat felix;
 
void setup()  {    
  //Initialize an object
  felix = new Cat();
  //set a property, in this case a string
  felix.breed = "siamese";
  //set another property, in this case a integer
  felix.speed = 0;
}    
 
void draw()  {    
  background(255);  
  //Call methods on the object 
  felix.move();   
  felix.display();   
}
 
void keyPressed() {
if (keyCode == RIGHT) {
   felix.speed = 10;
}
if (keyCode == LEFT) {
   felix.speed = -10;
}
}

Now we don’t really need to know how the “move” or “display” methods are implemented in order to “use” a cat. Objects can be black boxes that take certain inputs and return certain outputs.

Fisica

This is how we set up a world in Fisica.

//Basic setup
 
//import the physics library
import fisica.*;
 
//declare a global variable: our newtonian world
FWorld world;
 
void setup() {
  //sketch size
  size(800, 600);
 
  //initialize the library
  Fisica.init(this);
 
  //create a new Fisica world
  world = new FWorld();
}
 
 
void draw() {
  //simulating and drawing are separate steps
 
  //update the simulation
  world.step();
 
  //display the results
  world.draw();
}

Let’s add a body (FBox) to the world. Add this in the setup function:

  //declare a variable FBox: a body 30pixels W X 50 pixels H
  FBox b = new FBox(30, 50);
 
  //set its position in the center of the sketch
  b.setPosition(width/2, height/2);
 
  //add it to the world
  world.add(b);

This is not just an animation, there’s a lot going on behind the scene. Try to grab the box!

World properties
Here are some properties of an FWorld we can set (also in the setup):

 
  //creates the edges: 4 static bodies at the edge of the sketch
  world.setEdges();
 
  //their names are world.left, world.right, world.bottom, world.top 
  //so you can remove them
  world.remove(world.top);
 
  //gravity
  world.setGravity(0, 100);
 
  //are objects grabbable?
  //world.setGrabbable(false);
 
  //friction and restitution (loss of velocity at collision)
  world.setEdgesFriction(0);
  world.setEdgesRestitution(1);

Bodies properties
Here are a few useful ones:

//Bodies' properties
 
//import the physics library
import fisica.*;
 
//declare a global variable: our newtonian world
FWorld world;
 
void setup() {
  //sketch size
  size(800, 600);
 
  //initialize the library
  Fisica.init(this);
 
  //create a new Fisica world
  world = new FWorld();
 
  //creates the edges: 4 static bodies at the edge of the sketch
  world.setEdges();
 
  //their names are world.left, world.right, world.bottom, world.top 
  //so you can remove them
  world.remove(world.top);
 
  //gravity
  world.setGravity(0, 100);
 
  //declare a variable FBox: a body 30pixels W X 50 pixels H
  FBox b = new FBox(30, 50);
 
  //set its position in the center of the sketch to the left
  b.setPosition(width/2 - 100, height/2);
 
  //add it to the world
  world.add(b);
 
  //Second Box
 
  //declare a variable FBox for comparison: a body 30pixels W X 50 pixels H
  FBox b2 = new FBox(30, 50);
 
  //set its position in the center of the sketch to the left
  b2.setPosition(width/2 + 100, height/2);
 
  //Setting body properties common for all types of bodies
 
  //density: grams per pixel
  b2.setDensity(3000);
  //it will fall at the same speed but it will be heavier
 
  //restitution: loss of velocity at collision (bounciness)
 //b2.setRestitution(2);
 
  //friction: loss of velocity at friction (when the body rubs against other b)
  //b2.setFriction(30);
 
  //damping: loss of velocity at movement (think of air friction)
  //try to set gravity to 0
  //b2.setDamping(10);
 
  //loss of velocity at rotation
  //b2.setAngularDamping(10);
 
  //toggle static/dynamic
  //b2.setStatic(true);
 
  //toggle roteable
  //b2.setRotatable(false);
 
  //toggle grabbing
  //b2.setGrabbable(false);
 
  //make it invisible
  //b2.setDrawable(false);
 
  //add it to the world
  world.add(b2);
 
}
 
void draw() {
 
  //simulating and drawing are separate steps
 
  //update the simulation
  world.step();
 
  background(0);
 
  //display the results
  world.draw();
}

Let’s play around with them.

Other bodies

  //declare a variable FBox: a body 30pixels W X 50 pixels H
  FBox b = new FBox(30, 50);
 
  //set its position in the center of the sketch to the left
  b.setPosition(100, height/2);
 
  //add it to the world
  world.add(b);
 
  //Circle
 
  //create new circle 30 pix diameter
  FCircle c = new FCircle(30);
 
  //set its center position
  c.setPosition(200, height/2);
 
  world.add(c);
 
  //polygon
 
  //create the variable
  FPoly p = new FPoly();
 
  //draw like a processing vertex point by point
  p.vertex(-30, -20);
  p.vertex( 30, -20);
  p.vertex( 30, 0);
  p.vertex( 10, 0);
  p.vertex( 10, 40);
  p.vertex(-10, 40);
  p.vertex(-10, 0);
  p.vertex(-30, 0);
 
  //the center is the position 0, 0
  p.setPosition(300, height/2);
 
  world.add(p);
 
 
  //lines are always static and black by default 
  //you can't grab them
  //since they have no thickness fast bodies might go through them aka "tunnelling"
 
  //point Ax, Ay, Bx, Bx 
  FLine l = new FLine(0, 0, 200, 200);
 
  //position is at 0, 0  
  l.setPosition(500, height/2);
 
  world.add(l);
 
 
  //compound body: a combination of other bodies glued together
 
  //create the pieces separately
  FBox m1 = new FBox(6, 60);
  FCircle m2 = new FCircle(20);
 
  //position them properly
  m2.setPosition(0, -30);
 
  //create a compount (like a group)
  FCompound m = new FCompound();
 
  //add the bodies to the compound with addBody
  m.addBody(m1);
  m.addBody(m2);
 
  //now the compound behaves like a single entity
  m.setPosition(400, height/2);
 
  //don't forget to add it
  world.add(m);

Changing the appearances
Screen Shot 2014-10-06 at 3.58.52 PM

You can download the example with images here

Posted in

Post a comment