Processing House Visualizer

During this holidays week we had the idea of creating a lamp, but a different lamp. We want it to have the shape of a little house, so we thought in going to a FabLab to cut some shapes in order to create a house. Because I used a 2D vectorial program I needed to visualize the shapes to be sure that the snaps would feat together, so I invented the challenge of building a custom visualizer, with the possibility to load SVG’s, adjust and rotate them in xyz.

Nothing better than Processing for the task.

Processing House Visualizer

The SVG’s are loaded and displayed on a 3D space, with the help of the sliders it is possible to position each one of the shapes and record a preset in CSV format.

This was a two day work and because I didn’t wan’t to spend the rest of the holidays coding, I left some features that I will add at another time (or maybe not). This is what I would like to add:

  • add a left overlay layer
  • possibility to change colors
  • possibility to extrude SVGs
  • add a chimney
  • make it playable on the browser

The code is available on GitHub

Meanwhile the shapes seemed to be good to go. It was our first time in FabLab Lisboa and it was a great experience. Using the laser cutter was something new to me and I am thinking in more future stuff to build.

The final result was just great, you can see more in A Rosa Cor de Rosa ‘s blog.

Differential wheeled robot simulator

This Processing application is ment to simulate a differential wheeled robot, very used nowadays. This app will be usefull in our Robotics Workshops!

Differential Drive Simulator in Processing

I missed the github class so here it is the good’old zip
Here’s the link to the repo, you’re welcome to contribute ;)

There are still a couple of enhancements on the list:

  • real metrics and scale
  • connect to motor encoders
  • record a path on the virtual world and let the real robot follow it
  • become real simulator of the arduino code used in our robotics workshops

The video is reproduced a lot faster than the program really performs  :p

Some control keys are available:
Differential Drive Simulator in Processing
Differential Drive Simulator in Processing

The overall program is quite simple to use, just pass the mouse over the joystick area to control the bot.
Differential Drive Simulator in Processing

The program basically maps joystick values X and Y to a differential drive system where two motors are used to drive a robot.

There is also a representation of a robot and its path according to the motors differential rotation.


The joystick program was based on a program entitled ‘JoystickSimulation’ by: Vince Thompson

The robot program was based on a program entitled ‘Kephera Simulator’ by Adam Matic of Croatia

ICU . 1.01

ICU has been sleeping for a while but was awaken suddenly because I was invited to an exhibition at Flausina, a new born association in Lisbon.

ICU v1.01

Complexity is always a welcome thing around here and the bot was presented with two more servo motors and all the software has been re-written. And because I needed to simulate its movements I coded an application in Processing in a way that I could test all the non-dangerous angles. Inverse kinematics is way to advanced for my taste and I think I can call this a “forward kinematics simulator”. This simulator gives also the possibility to generate individual sine waves for each motor, minimum and maximum range of motion, an interpolator for smoothness and frequency for speed.

ICU v1.01

Unfortunately I don’t have any decent video of photos of the Flausina exhibition, I leave you with a video of the bot in the office with the processing application.

TODO list:

– capability to save presets
– timeline with keyframes, play and stop buttons
– upgrade this servos to more powerful and digital servos
– upgrade all the structure to enhance weight distribution
– create a mask in silicon/rubber and give this bot a crazy new look
– everytime a face is detected it will say something on Twitter and upload the picture in an online gallery

Source code can be downloaded here.

All for now.. Roger, over and out.

ICU v1.01

Photo at Flausina.

RGB Mixer – Processing to Arduino

It has been a long time since I wanted to control the arduino with processing and I tried a lot of libraries, and a lot of processes and I always felt that none of those were suited for what I needed. I needed something simple to implement and easy to understand, and because I am not a programmer, I asked for help and @pauloricca replied to me with a quick, fast and really good solution.

In this example I have connected an RGB LED to the Arduino and on Processing we will have a simple mixer to fade in and out color channels. DON’T DO THIS, LED’s always need to have one resistor in series before. In this case I just wanted to show the serial communication part, and I skipped the resistor part, lazy me! Never do this, otherwise you will kill your leds very fast.

RGB Mixer - Processing to Arduino

On the Arduino side, I defined 3 digital output pins 9, 10, 11, these are PWM capable pins. Than I defined pin 8 as an OUTPUT, and digitallyWrite it to LOW, to be the GROUND pin. On the loop() function we used a switch() function that detects when the sync characters ’R’, ‘G’ and ‘B’ are received. These characters will tell us what value is coming next. The function GetFromSerial() is called everytime we need to read a value from the serial port.

void setup()
  // declare the serial comm at 9600 baud rate

  // output pins
  pinMode(9, OUTPUT); // red
  pinMode(10, OUTPUT); // green
  pinMode(11, OUTPUT); // blue

  // another output pin o be used as GROUND 
  pinMode(8, OUTPUT); // ground
  digitalWrite(8, LOW);

void loop()
  // call the returned value from GetFromSerial() function
  case 'R':
    analogWrite(9, GetFromSerial());
  case 'G':
    analogWrite(11, GetFromSerial());
  case 'B':
    analogWrite(10, GetFromSerial());


// read the serial port
int GetFromSerial()
  while (Serial.available()<=0) {

On the Processing side, I am using a slider class adapted from, and I created 3 instances of this class (I assume you understand the concept of class). The important thing to understand here is the import of the Serial library, and the creation of a Serial object called “port”. On the setup() function I print out the available serial ports and than I defined which one is the Arduino port, on my case is the number 0, note that I am using mac, if you are using PC it should be COM1, COM2 or another COM#. Finally I am passing the values of the slider after I pass the sync character ‘R’, ‘G’, ‘B’.

RGB Mixer - Processing to Arduino

import processing.serial.*;
Serial port;

sliderV sV1, sV2, sV3;

color cor;

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

  println("Available serial ports:");

  // check on the output monitor wich port is available on your machine
  port = new Serial(this, Serial.list()[0], 9600);

  // create 3 instances of the sliderV class
  sV1 = new sliderV(100, 100, 90, 255, #FF0000);
  sV2 = new sliderV(200, 100, 90, 255, #03FF00);
  sV3 = new sliderV(300, 100, 90, 255, #009BFF);

void draw() {


  // send sync character
  // send the desired value

Slider Class -
based on slider class
class sliderV {
  int x, y, w, h, p;
  color cor;
  boolean slide;

  sliderV (int _x, int _y, int _w, int _h, color _cor) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;
    p = 90;
    cor = _cor;
    slide = true;

  void render() {
    rect(x-1, y-4, w, h+10);
    rect(x, h-p+y-5, w-2, 13);
    text(p, x+2, h-p+y+6);

    if (slide==true && mousePressed==true && mouseX<x+w && mouseX>x){
     if ((mouseY<=y+h+150) && (mouseY>=y-150)) {
        p = h-(mouseY-y);
        if (p<0) {
        else if (p>h) {

RGB Mixer - Processing to Arduino

RGB Mixer - Processing to Arduino

RGB Mixer - Processing to Arduino

ICU . I See You

ICU is a sub-project of the SWARS (see what a robot sees) project.

This time I not just wanted to see what a robot sees, but I also wanted to give the robot the ability to understand that there is a person in the room, and stare at the person.

To detect faces I used the OPENCV library for Processing, wich turns out to be very fun to work with and is very sensitive to human faces.. and sometimes it detect faces where there aren’t any.. maybe it is a ghost face detector algorythm!!

I didn’t have time to work with the four motors, I am only working with the two servo motors on the top. Next step will be to apply inverse kinematics and have a better level of interactivity.

Unfortunately I had to pick the computer that was being used in this installation, I will need it in the next weeks, but this bot will be available to the public very soon I promise!!

This is the code I am using if someone wants to look at it, you will need to have the MegaServo library installed for the Arduino sketch, and the OPENCV lib for the Processing sketch.

Arduino Sound Sensor

Finally I have some time to continue with this investigation and great improvements were achieved with the circuit provided by Ant:

First here are the photos deleted by mistake from flickr:

Headsets microphones

Electrec thingey inside.

The circuit

This is a closeup of the circuit, I´ve added a 10uF capacitor to stabilize the output signal (it´s the green cap on the right).

The problem here is that I can´t imagine myself soldering all this components onto a pcb, I would like to have at least two of these, four would be awesome.

Click the following button to see source code for Arduino and Processing

/* ****************************************************

Arduino Code

**************************************************** */

int analogValue;
int val;

void setup()
// start serial port at 9600 bps:


void loop()
// read analog input
analogValue = analogRead(0);

// send values to processing
Serial.println(analogValue, DEC);

// pause for 10 milliseconds:


/* ****************************************************

Processing Code

**************************************************** */

// import the Processing serial library
import processing.serial.*;

// declare a font variable
PFont font48;

int linefeed = 10; // Linefeed in ASCII
Serial myPort; // The serial port

// value recieved from the serialport / arduino
int sensorValue;

// mapped value
float sensorValueMap;

// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – Setup

void setup() {
myPort = new Serial(this, Serial.list()[0], 9600);

// read bytes into a buffer until you get a linefeed (ASCII 10):

size (800, 600);
background (0);

// you need to have this font in your machine, if not go to
// Tools – Creat Font – and create your own font
font48 = loadFont(“alask_48.vlw”);



// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – Serial Event

void serialEvent(Serial myPort) {
// read the serial buffer:
String myString = myPort.readStringUntil(linefeed);

// if you got any bytes other than the linefeed:
if (myString != null) {

myString = trim(myString);
// split the string at the commas
// and convert the sections into integers:
int sensors[] = int(split(myString, ‘,’));

// print out the values you got:
for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
//print(“Sensor ” + sensorNum + “: ” + sensors[sensorNum] + “\n”);

// sensor
sensorValue = sensors[0];
//sensorValueSmooth = sensors[1];


// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – Draw

void draw() {

// set the black backgrounf

// run the displayText() function

// map the recieved values
sensorValueMap = map(sensorValue, 0, 1024, 0, 800);

// draw a rectangle based on the variable sensorValueMap
rect (0, 100, width, sensorValueMap);

// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – Display Text

void displayText() {

text(“Sensor Value”, 20, 80);
text(sensorValue, 450, 80);


// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – Save image

void keyPressed(){

Radar Simulator

Few days ago I started wondering how could I make a Radar Simulator with Processing.
I have already placed an ultrasound range finder on a servo motor and sent its data into the radar program, one video will be posted soon.

Now I want to have my wireless communication module setup complete and working on a robot, and I can have the sensor data being displayed on a screen as the robots move around the space. This will be a visual reference of the robot perception, it is also a good exercise of physical computing.

This applet simulates the sensor data through the Y mouse coordinate, have fun :]