Introduction: Create a Robotics Simulator Using Processing

By CoreTechRobotics Blog

If you start writing code for a robot it is inevitable to go through a number of iterations until it works as planned. Arduino already makes this easier but especially with complex walking robots it can be a tedious task to reprogram it again and again. This is where a simulator can be very useful.

Step 1: Basics

First you need to download and unpack Processing:

https://processing.org/download/?processing (This tutorial is based on Processing 2.2.1)

Be sure that the newest Java version is installed as well. When this is done start the Processing IDE.

We will start with drawing a simple rectangle. There are two basic functions that need to be in a sketch. Setup() is called once on startup and draw() runs until you close the sketch window. In the setup function we need to define the size of the sketch in pixels. For this tutorial we will stick with 1200x800. Now we already have a working sketch. Next we insert a rectangle by using rect(). The four parameters for this function are x-position, y-position, x-size and y-size. There are other shapes like ellipses that follow the same scheme.

Additionally you can fill the rectangle with a color by using fill(). Under Tools/Color Selector you can pick a color and paste its value as a parameter. It is important to use fill() before drawing the rectangle. Changes in something like color or stroke only affect the subsequent shapes. We won't need outlines for this, so we will eliminate them with noStroke().

void setup(){
   size(1200, 800);
}

void draw(){  
   fill(#FF9F03);
   noStroke();
   rect(100, 100, 500, 500);
}

Step 2: Make It 3D

Turning the square into a box requires a few changes. We need to change to a 3D renderer by adding OPENGL to the size function. Box(size) creates an equal sided cube at the origin (top left corner). The function translate(x, y, z) can be used to move it away from the corner. Rotation is done using rotateX(angle), rotateY(angle) and rotateZ(angle). width and height are referencing the values we added to the size function, translate(width/2, height/2) always makes the cube appear at the center.To enable anti aliasing we need to call the smooth() function. This will not work without adding background(color), that gets called every cycle to overwrite the screen. Lights() turns the lights on and add shades to the cube.

void setup(){
   size(1200, 800, OPENGL);
}

void draw(){  
   background(32);
   smooth();
   lights();
   
   fill(#FF9F03);
   noStroke();
   
   translate(width/2, height/2);
   rotateX(-0.5);
   rotateY(0.5);
   box(300);
}

Step 3: Mouse Controls

3D is kind of boring if you can't interact with it. The easiest way to do this is replacing the fixed rotation values with the mouse position to rotate the cube around while the sketch is running. We need to create two variables, rotX and rotY that well be used as view rotation. The function mouseDragged() is used to write the mouse position to these variables while a mouse button is pressed.

float rotX, rotY;

void setup(){
    size(1200, 800, OPENGL);
}

void draw(){  
   background(32);
   smooth();
   lights();
   
   fill(#FF9F03);
   noStroke();
   
   translate(width/2, height/2);
   rotateX(rotX);
   rotateY(-rotY); 
   box(300);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

Step 4: Importing Geometry

Unless you are building Wall-E, a cube won't be a good representation of your robot. Luckily Processing is able to import various 3D files including .obj-files.For the next steps download the parts I prepared:

https://www.dropbox.com/s/ymn59u6qw7zbjyi/robot%20parts.zip?dl=1

Create a new folder in the direction of your sketch file and name it "data". Unpack the 5 obj-files to that folder.We can now import these objects to our sketch by creating a PShape for each of them and using loadShape("file") to assign the obj-file. Replace the box with shape(base) and Processing will draw the geometry. Depending on the units we will have to scale(factor) the object to better fit the screen. I also used the translate command to position the part lower on the screen because otherwise the robot would be off center later.

PShape base, shoulder, upArm, loArm, end;
float rotX, rotY;

void setup(){
    size(1200, 800, OPENGL);
    
    base = loadShape("r5.obj");
    shoulder = loadShape("r1.obj");
    upArm = loadShape("r2.obj");
    loArm = loadShape("r3.obj");
    end = loadShape("r4.obj");
}

void draw(){  
   background(32);
   smooth();
   lights();
   
   noStroke();
   
   translate(width/2,height/2);
   scale(-4);
   translate(0,-40,0);
   rotateX(rotX);
   rotateY(-rotY);    
     shape(base);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

Step 5: Rotating/Aligning Multiple Parts

Now we will assembly the robot by adding the remaining parts. Use the translate/rotate functions to position the parts. Translation and rotation values will always add up. That means that all parts are in a chain where each link is moved relatively to its predecessor.If you are using your own robot parts you can find the right translation values in the cad file. If the base is 60mm high you have to translate the next part 60 units and so on. Rotation values are in radians and sometimes it will take a few attempts to find the right ones.By defining three rotation values as variables we will be able to move the joints in the next step.If you export your obj-files from a CAD software there will be a second mtl-file containing the color settings and Processing will render it that way. If not, disableStyle() can be used to render objects with the standard fill/stroke setting.

PShape base, shoulder, upArm, loArm, end;
float rotX, rotY;
float alpha = -1, beta = -2, gamma;


void setup(){
    size(1200, 800, OPENGL);
    
    base = loadShape("r5.obj");
    shoulder = loadShape("r1.obj");
    upArm = loadShape("r2.obj");
    loArm = loadShape("r3.obj");
    end = loadShape("r4.obj");
    
    shoulder.disableStyle();
    upArm.disableStyle();
    loArm.disableStyle(); 
}

void draw(){  
   background(32);
   smooth();
   lights();
   
   fill(#FFE308); 
   noStroke();
   
   translate(width/2,height/2);
   scale(-4);
   translate(0,-40,0);
   rotateX(rotX);
   rotateY(-rotY);    
     shape(base);
     
   translate(0, 4, 0);
   rotateY(gamma);
     shape(shoulder);
      
   translate(0, 25, 0);
   rotateY(PI);
   rotateX(alpha);
     shape(upArm);
      
   translate(0, 0, 50);
   rotateY(PI);
   rotateX(beta);
     shape(loArm);
      
   translate(0, 0, -50);
   rotateY(PI);
     shape(end);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

Step 6: Kinematics

For this step we will add a second tab to the sketch where the inverse kinematics and movements are calculated. For this tutorial I reused some of the code from my quadruped robot. Basically, the IK() function converts three coordinates to three angles. SetTime() generates a time value from 0 to 4. WritePos() calls both functions and generates a sine function that looks like a horizontal eight, making for smooth movements of the robot.

The only thing we need to change in the main sketch tab is calling the writePos() function. If you look at the code in the second tab, it could easily be run on an arduino without alterations. This is what I did with my quadruped simulator. I tested the code and later copied the entire thing to my Arduino sketch.

Main Tab

PShape base, shoulder, upArm, loArm, end;
float rotX, rotY;
float posX=1, posY=50, posZ=50;
float alpha, beta, gamma;

void setup(){
    size(1200, 800, OPENGL);
    
    base = loadShape("r5.obj");
    shoulder = loadShape("r1.obj");
    upArm = loadShape("r2.obj");
    loArm = loadShape("r3.obj");
    end = loadShape("r4.obj");
    
    shoulder.disableStyle();
    upArm.disableStyle();
    loArm.disableStyle(); 
}

void draw(){ 
   writePos();
   background(32);
   smooth();
   lights();
   
   fill(#FFE308); 
   noStroke();
   
   translate(width/2,height/2);
   rotateX(rotX);
   rotateY(-rotY); 
   scale(-4);
   
   translate(0,-40,0);   
     shape(base);
     
   translate(0, 4, 0);
   rotateY(gamma);
     shape(shoulder);
      
   translate(0, 25, 0);
   rotateY(PI);
   rotateX(alpha);
     shape(upArm);
      
   translate(0, 0, 50);
   rotateY(PI);
   rotateX(beta);
     shape(loArm);
      
   translate(0, 0, -50);
   rotateY(PI);
     shape(end);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}

Inverse Kinematics Tab

float F = 50;
float T = 70;
float millisOld, gTime, gSpeed = 4;

void IK(){
  float X = posX;
  float Y = posY;
  float Z = posZ;

  float L = sqrt(Y*Y+X*X);
  float dia = sqrt(Z*Z+L*L);

  alpha = PI/2-(atan2(L, Z)+acos((T*T-F*F-dia*dia)/(-2*F*dia)));
  beta = -PI+acos((dia*dia-T*T-F*F)/(-2*F*T));
  gamma = atan2(Y, X);
}

void setTime(){
  gTime += ((float)millis()/1000 - millisOld)*(gSpeed/4);
  if(gTime >= 4)  gTime = 0;  
  millisOld = (float)millis()/1000;
}

void writePos(){
  IK();
  setTime();
  posX = sin(gTime*PI/2)*20;
  posZ = sin(gTime*PI)*10;
}

Step 7: Final Touches

With the code above this is already a fully functional robotics simulator. But there are tons of other things to do with processing. For the last step I added an effect that was supposed to look like a spray can. It ended up a little differently but still looks nice. I also added a directional light, which makes the robot appear a little more realistic.If you want you can export the entire project to a executable program for windows or any other operating system by clicking on "Export Application".

PShape base, shoulder, upArm, loArm, end;
float rotX, rotY;
float posX=1, posY=50, posZ=50;
float alpha, beta, gamma;


float[] Xsphere = new float[99];
float[] Ysphere = new float[99];
float[] Zsphere = new float[99];

void setup(){
    size(1200, 800, OPENGL);
    
    base = loadShape("r5.obj");
    shoulder = loadShape("r1.obj");
    upArm = loadShape("r2.obj");
    loArm = loadShape("r3.obj");
    end = loadShape("r4.obj");
    
    shoulder.disableStyle();
    upArm.disableStyle();
    loArm.disableStyle(); 
}

void draw(){ 
   writePos();
   background(32);
   smooth();
   lights(); 
   directionalLight(51, 102, 126, -1, 0, 0);
    
    for (int i=0; i< Xsphere.length - 1; i++) {
    Xsphere[i] = Xsphere[i + 1];
    Ysphere[i] = Ysphere[i + 1];
    Zsphere[i] = Zsphere[i + 1];
    }
    
    Xsphere[Xsphere.length - 1] = posX;
    Ysphere[Ysphere.length - 1] = posY;
    Zsphere[Zsphere.length - 1] = posZ;
   
   noStroke();
   
   translate(width/2,height/2);
   rotateX(rotX);
   rotateY(-rotY);
   scale(-4);
   
   for (int i=0; i < Xsphere.length; i++) {
     pushMatrix();
     translate(-Ysphere[i], -Zsphere[i]-11, -Xsphere[i]);
     fill (#D003FF, 25);
     sphere (float(i) / 20);
     popMatrix();
    }
    
   fill(#FFE308);  
   translate(0,-40,0);   
     shape(base);
     
   translate(0, 4, 0);
   rotateY(gamma);
     shape(shoulder);
      
   translate(0, 25, 0);
   rotateY(PI);
   rotateX(alpha);
     shape(upArm);
      
   translate(0, 0, 50);
   rotateY(PI);
   rotateX(beta);
     shape(loArm);
      
   translate(0, 0, -50);
   rotateY(PI);
     shape(end);
}

void mouseDragged(){
    rotY -= (mouseX - pmouseX) * 0.01;
    rotX -= (mouseY - pmouseY) * 0.01;
}