Arduino + Processing: Make a Radar Screen to Visualise Sensor Data from SRF-05 – Part 2: Visualising the Data

Arduino SRF 05 radar

This is where all the work is done to read an interpret the values from the servo and the sensor. If the readings are to erratic then you won’t have nice shapes. Also if you don’t allow enough time to the signals to be sent back then you’ll get false distance readings. So this code is only as good as your Arduino code and sensor setup.

Took me a few evenings to work this out to get it how I wanted, the hardest bit is the trigonometry involved which isn’t that difficult, everything else is done by loops and a few IF statements. I use the FOR loops alot because the all the elements can be displayed programmatically without having to write each rectangle, cirle and line to the screen with their own statement.

If you’re not familiar with Processing then head over to Processing is a tool/ IDE that lets you program and code graphics and animation, it’s free to use and pretty powerful – best part is it works hand in hand with Arduino in the same C/C++ style of code, letting us take data from Arduino and whatever’s plugged into it and then visualise it on screen, e.g. like a radar screen.

First we have to setup our variables, background and load in the serial port libraries to ensure we can read the data sent by the Arduino. We also have to include a function from the serial library called serialEvent() which listens for data being sent and allows us to read the data easily. We do some easy string work, splitting the serial port lines to get the servo position and sensor value.

Also we can setup the radar screen, drawing the text, measurements and display grid. With processing whats nearest the top of the draw() function is displayed first with everything subsequentally drawn on top of this. So our lines and text will be at the bottom of the function so it will always be visible. To draw the lines and measurements we use a FOR loop. The draw() function draws one frame, so we basically re-draw the frame 180 times – we use a couple of arrays to store the previous values to make it look continuous.

Now that we have those we can then begin to display the values on our screen. We use a FOR loop to loop through each item in our array, newValue and oldValue. These are setup to hold 181 items – 1 item per servo position with 1 extra just in case, we loop through these to constantly display the previous readings – if we were to use the servo position itself to iterate through the array then no previous data would be displayed since the servo position is always changing.

Thoughout we need to calculate the X and Y co-ordinates of each servo position and sensor distance reading. To get these values we use trigonometry using sine and cosine and converting the servo position to a radian using the sensor reading as the distance from the center from which to draw the point. To learn more about this and to save me writing it up check out this tutorial at

The Sketch
Below is the code used to create the radar screen, it has comments to help explain. Everything used is an in built function of the Processing language and you can find the reference for the functions that I use in the reference section on the website. So methods such as fill(), stroke(), rect(), line() etc…

Radar Screen Visualisation for SRF-05
Maps out an area of what the SRF-05 sees from a top down view.
Takes and displays 2 readings, one left to right and one right to left.
Displays an average of the 2 readings
Displays motion alert if there is a large difference between the 2 values.
import processing.serial.*;     // import serial library
Serial myPort;                  // declare a serial port
float x, y;                       // variable to store x and y co-ordinates for vertices
int radius = 350;               // set the radius of objects
int w = 300;                    // set an arbitary width value
int degree = 0;                 // servo position in degrees
int value = 0;                  // value from sensor
int motion = 0;                 // value to store which way the servo is panning
int[] newValue = new int[181];  // create an array to store each new sensor value for each servo position
int[] oldValue = new int[181];  // create an array to store the previous values.
PFont myFont;                   // setup fonts in Processing
int radarDist = 0;              // set value to configure Radar distance labels
int firstRun = 0;               // value to ignore triggering motion on the first 2 servo sweeps

/* create background and serial buffer */
void setup(){
  // setup the background size, colour and font.
  size(750, 450);
  background (0); // 0 = black
  myFont = createFont("verdana", 12);
  // setup the serial port and buffer
  myPort = new Serial(this, Serial.list()[1], 9600);

/* draw the screen */
void draw(){
  fill(0);                              // set the following shapes to be black
  noStroke();                           // set the following shapes to have no outline
  ellipse(radius, radius, 750, 750);    // draw a circle with a width/ height = 750 with its center position (x and y) set by the radius
  rectMode(CENTER);                     // set the following rectangle to be drawn around its center
  rect(350,402,800,100);                // draw rectangle (x, y, width, height)
  if (degree >= 179) {                  // if at the far right then set motion = 1/ true we're about to go right to left
    motion = 1;                         // this changes the animation to run right to left
  if (degree <= 1) {                    // if servo at 0 degrees then we're about to go left to right
    motion = 0;                         // this sets the animation to run left to right
  /* setup the radar sweep */
  We use trigonmetry to create points around a circle.
  So the radius plus the cosine of the servo position converted to radians
  Since radians 0 start at 90 degrees we add 180 to make it start from the left
  Adding +1 (i) each time through the loops to move 1 degree matching the one degree of servo movement
  cos is for the x left to right value and sin calculates the y value
  since its a circle we plot our lines and vertices around the start point for everything will always be the center.
  strokeWeight(7);                      // set the thickness of the lines
  if (motion == 0) {                    // if going left to right
    for (int i = 0; i <= 20; i++) {     // draw 20 lines with fading colour each 1 degree further round than the last
      stroke(0, (10*i), 0);             // set the stroke colour (Red, Green, Blue) base it on the the value of i
      line(radius, radius, radius + cos(radians(degree+(180+i)))*w, radius + sin(radians(degree+(180+i)))*w); // line(start x, start y, end x, end y)
  } else {                              // if going right to left
    for (int i = 20; i >= 0; i--) {     // draw 20 lines with fading colour
      stroke(0,200-(10*i), 0);          // using standard RGB values, each between 0 and 255
      line(radius, radius, radius + cos(radians(degree+(180+i)))*w, radius + sin(radians(degree+(180+i)))*w);
  /* Setup the shapes made from the sensor values */
  noStroke();                           // no outline
  /* first sweep */
  fill(0,50,0);                         // set the fill colour of the shape (Red, Green, Blue)
  beginShape();                         // start drawing shape
    for (int i = 0; i < 180; i++) {     // for each degree in the array
      x = radius + cos(radians((180+i)))*((oldValue[i])); // create x coordinate
      y = radius + sin(radians((180+i)))*((oldValue[i])); // create y coordinate
      vertex(x, y);                     // plot vertices
  endShape();                           // end shape
  /* second sweep */
    for (int i = 0; i < 180; i++) {
      x = radius + cos(radians((180+i)))*(newValue[i]);
      y = radius + sin(radians((180+i)))*(newValue[i]);
      vertex(x, y);
  /* average */
    for (int i = 0; i < 180; i++) {
      x = radius + cos(radians((180+i)))*((newValue[i]+oldValue[i])/2); // create average
      y = radius + sin(radians((180+i)))*((newValue[i]+oldValue[i])/2);
      vertex(x, y);
  /* if after first 2 sweeps, highlight motion with red circle*/
  if (firstRun >= 360) {
      for (int i = 0; i < 180; i++) {
        if (oldValue[i] - newValue[i] > 35 || newValue[i] - oldValue[i] > 35) {
          x = radius + cos(radians((180+i)))*(newValue[i]);
          y = radius + sin(radians((180+i)))*(newValue[i]);
          ellipse(x, y, 10, 10);
  /* set the radar distance rings and out put their values, 50, 100, 150 etc.. */
  for (int i = 0; i <=6; i++){
    stroke(0, 255-(30*i), 0);
    ellipse(radius, radius, (100*i), (100*i));
    fill(0, 100, 0);
    text(Integer.toString(radarDist+50), 380, (305-radarDist), 50, 50);
  radarDist = 0;
  /* draw the grid lines on the radar every 30 degrees and write their values 180, 210, 240 etc.. */
  for (int i = 0; i <= 6; i++) {
    stroke(0, 55, 0);
    line(radius, radius, radius + cos(radians(180+(30*i)))*w, radius + sin(radians(180+(30*i)))*w);
    fill(0, 55, 0);
    if (180+(30*i) >= 300) {
      text(Integer.toString(180+(30*i)), (radius+10) + cos(radians(180+(30*i)))*(w+10), (radius+10) + sin(radians(180+(30*i)))*(w+10), 25,50);
    } else {
      text(Integer.toString(180+(30*i)), radius + cos(radians(180+(30*i)))*w, radius + sin(radians(180+(30*i)))*w, 60,40);
  /* Write information text and values. */
  fill(0, 100, 0);
  text("Degrees: "+Integer.toString(degree), 100, 380, 100, 50);         // use Integet.toString to convert numeric to string as text() only outputs strings
  text("Distance: "+Integer.toString(value), 100, 400, 100, 50);         // text(string, x, y, width, height)
  text("Radar screen code at", 540, 380, 250, 50);
  fill(0, 100, 0);
  text("Screen Key:", 100, 50, 150, 50);
  text("First sweep", 115, 70, 150, 50);
  text("Second sweep", 115, 90, 150, 50);
  text("Average", 115, 110, 150, 50);
  ellipse(29, 113, 10, 10);
  text("Motion", 115, 130, 150, 50);

/* get values from serial port */
void serialEvent (Serial myPort) {
  String xString = myPort.readStringUntil('n');  // read the serial port until a new line
    if (xString != null) {  // if theres data in between the new lines
        xString = trim(xString); // get rid of any whitespace just in case
        String getX = xString.substring(1, xString.indexOf("V")); // get the value of the servo position
        String getV = xString.substring(xString.indexOf("V")+1, xString.length()); // get the value of the sensor reading
        degree = Integer.parseInt(getX); // set the values to variables
        value = Integer.parseInt(getV);
        oldValue[degree] = newValue[degree]; // store the values in the arrays.
        newValue[degree] = value;
        /* sets a counter to allow for the first 2 sweeps of the servo */
        if (firstRun > 360) {
          firstRun = 360; // keep the value at 360

[ad#Google Ad in content]

The end result
Here’s a video below of it all working! There is an issue to bare in mind with the SRF-05 and thats that it works best as a static range finder, it emits a conical wave which will bounce back off of anything small or large and has a wide detection field of vision so it may pick up something that’s not directly in front of it. As you can see by the below image the detection range is so wide that it doesn’t truly see all the gaps as its detected something else in its field of vision.


If there are less objects it works fine… time to look at other sensors I think – anyway here’s the video below just showing it working on my screen.

Part 1: Setting up the Circuit and Outputting Values
Part 3: Visualising the Data from Sharp Infrared Range Finder


  • Cool project.

    That said, it is a sonar, not a radar.

    • there you have me bang to rights! :) It is a sonar, but with a radar style screen/ visualisation – at least to my uneducated senses.

  • Makes you wonder how fast this will be when using a Sharp IR distance sensor like GP2Y0A700 with its ~17ms readout speed. I feel a 3D dome scanner coming up…

    • would you believe it! thats exactly what I’m doing – I’m just working out the exponentials for the sharp sensor now, then I’ll update the radar screen to test its accuracy, if that’s all good then I’ll start plotting 3d stuff :)

  • Looks like the movement sensor from the “Aliens” movie.
    Those devices, the way it was explained in the film, implied using some kind of ultrasound that picked up movement, even if the device was stationary, through detection of air movement around a moving object (or creature!!! Hudson!!!!!).

    Does such a sensor exist and could it be used for this project?

    • Dude, that sounds sweet! I will have to hunt around for that, best i got was an Infrared jobby… I have also been trying to find something to do thermal imaging – but right now I’m workin on plotting 3d stuff instead of the radar screen. But Aliens sensor thing would be sweet if it was real

  • I copied and used your code with my JR (MC35) servo… sllooowwwww. If I had an extra $50 laying around, I think it’d be nice to mount a compass module on the USSensor and just have the servo looping 180 back and forth, getting angle and distance readings at the same time. THis should avoid the 1degree then 1degree then 1degree movement. Not sure how fast the compass provides accurate data, though.

    Any thoughts on this approach?

    • I think you can modify the servo libraries to do sub degree movement which would the way to go, not sure bout the compass (I haven’t got one!) but it’d be cool to do that for orientation and mapping

  • I try your sketch with my code and a maxbotix sonar, but when i play it while the serial monitor is running it seems that the data can´t arrive well, it makes a carriage return in the middle of data arrive. when i stop the sketch the data arrives ok again.

    it´s my first approach to Processing, any ideas? what i´m doing incorrectly ?

    Thanks and excuse my poor english:)

    • Ok the serial monitor must be closed. XD

    • You can only have one serial monitor running which can be a pain when you want to look at both Arduino and Processing at the same time. So you can only have the serial monitor for either one. Also anytime you want to upload code to Arduino etc… anything using that serial/ COM port needs to be closed.

  • Hi!

    I really like this idea! But when I try it, nothing happens in Processing.

    Like everything is set up, but sweep doesnt move and the data doesn’t display.

    When I looked at the serial monitor, I see the values are coming through.

    • Which serial monitor are you checking? – if you’re using the Arduino one, then Processing can’t use the serial connection – it can only be used by one program at any one time. Bit frustrating when you’re trying to debug. So make sure you’re not using the serial connection with Arduino and see if you get anything in the Processing serial monitor.

      • I was using the Wiring serial monitor, which doesn’t really help.

        Well, now that I look at it more carefully, I notice that, In processing, (with no monitor open) lists me no COM ports, which means its being viewed by something, which doesn’t make sense to me. I thought it was something along else, so I tried your other sketch, Reading an SRF05 to processing, and it worked out just fine.

        Processing has a serial monitor? Where? How?

        • It says: error, disabling serialEvent() for //./COM16

          • the serial monitor is like the Arduino one in that if you use the Serial.println() command it will write something in the bottom half of the program normally the black window.

            I can run the code fine without any errors here, so would suggest maybe its the baud rate settings for you or com ports aren’t setup. Most likely its because you’re using the serial port in another application.

            But its odd that this program doesnt work yet my other works fine.

  • Pretty cool projecy ! 😀

    Hey I have more ideas continuing your work, check this out! 😀

    I use 4 sensors and the the system must able to interpret the data for 360 degrees.
    So using 4 sensors, I can make the servo works faster and less burden with only rotate for 90 degrees. 😀

    • Please, can you post a valid or alternative url or post the Arduino+Ping code to do rotating solar system? Thanks

  • Looks like that there is a little bug in the processing code.

    Replace the follwing. And the code for the Arduino won’t work. I make my own code. Still have only a servo, no sonar device.

    void setup(){
    // setup the background size, colour and font.
    size(750, 450);
    background (0); // 0 = black
    myFont = createFont(“verdana”, 12);
    // setup the serial port and buffer
    String portName = Serial.list()[1];
    myPort = new Serial(this, portName, 9600);
    myPort.bufferUntil(‘\n’); \\ \n instead of n

    /* get values from serial port */
    void serialEvent (Serial myPort) {
    String xString = myPort.readStringUntil(‘\n’); // read the serial port until a new line
    // \n instead of n
    if (xString != null) { // if theres data in between the new lines

    • Sorry – site bug messed up the source code in the original post – shoudl all be fixed now :)

  • ok i am a noob at this i like your video and everything but this project i dont understand… the radar sweep in processing is just a still picture not like yours were it interacts with the arduino how do you do it like how you are showing it in the project

    • i have the same problem Larry , could u tell us what shall we do ?

  • larry i am your big , large , fan and i being trying your projects all the time its fun .
    greetings for your hard work and passion .
    i just wantedd to tell that the code shows error like

    Exception in thread “Animation Thread” java.lang.ArrayIndexOutOfBoundsException: 1
    at sketch_jan07a.setup(
    at processing.core.PApplet.handleDraw(Unknown Source)
    at Source)
    in the processing ide please help me out.

  • Hey larry, i am very interested in this project and have copied the code from above, but i keep getting the error msg. “ArrayIndexOutOfBoundsException: 1″ the error was on line 32 Where you define ‘myPort’. this is the line”myPort = new Serial(this, Serial.list()[1], 9600);” Any advise??? if so plz msg me. Thx! :)

  • Somebody knows what is the Fs (frequency sampling)?
    and how much bit the processor? Thanks!

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>