In this Arduino Tutorial I will show you how you can make this cool looking radar using

the
Arduino Board and the Processing Development Environment. You can watch the following
video or read the written tutorial below for more details.

Overview

All you need for this Arduino Project is an Ultrasonic Sensor for detecting the objects, a small
hobbyist Servo Motor for rotating the sensor and an Arduino Board for controlling them. You
can watch the following video or read the written tutorial below.

Components needed for this Arduino Project

You can get these components from any of the sites below:

 Ultrasonic Sensor HC-SR04 ………… Amazon / Banggood

 Servo Motor……………………………….. Amazon / Banggood
 Arduino Board …………………………… Amazon / Banggood
 Breadboard and Jump Wires ……… Amazon / Banggood
Disclosure: These are affiliate links. As an Amazon Associate I earn from qualifying purchases.

Building the device

 First I made a cardboard stand for connecting the Ultrasonic sensor to the Servo motor. I
folded it like it’s shown on the picture below, glued it and secured to the servo motor using a
screw like this.
 Also I attached a pin header on which I soldered 4 jumper wires for connecting the sensor.

 Finally I secured the servo motor to the Arduino Board using an elastic band.
 There are also some special mount bracket for the ultrasonic sensor from Banggod. You can get
them from the following links:

 Ultrasonic Sensor with Mounting Bracket ……… Amazon

 Mounting Bracket For Ultrasonic Ranging …….. Banggood

Circuit Schematics

I connected the Ultrasonic Sensor HC-SR04 to the pins number 10 and 11 and the servo motor to
the pin number 12 on the Arduino Board.
Source codes

Now we need to make a code and upload it to the Arduino Board that will enable the interaction
between the Arduino and the Processing IDE. For understanding how the connection works
click here to visit my Arduino and Processing Tutorial.
Here’s the Arduino Source Code with description of each line of the code:

1. // Includes the Servo library

2. #include <Servo.h>.
3.
4. // Defines Tirg and Echo pins of the Ultrasonic Sensor
5. const int trigPin = 10;
6. const int echoPin = 11;
7. // Variables for the duration and the distance
8. long duration;
9. int distance;
10.
11. Servo myServo; // Creates a servo object for controlling the servo motor
12.
13. void setup() {
14. pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
15. pinMode(echoPin, INPUT); // Sets the echoPin as an Input
16. Serial.begin(9600);
17. myServo.attach(12); // Defines on which pin is the servo motor attached
18. }
19. void loop() {
20. // rotates the servo motor from 15 to 165 degrees
21. for(int i=15;i<=165;i++){
22. myServo.write(i);
23. delay(30);
24. distance = calculateDistance();// Calls a function for calculating the distance measured by the Ultrasonic sensor
for each degree
25.
26. Serial.print(i); // Sends the current degree into the Serial Port
27. Serial.print(","); // Sends addition character right next to the previous value needed later in the Processing IDE
for indexing
 28. Serial.print(distance); // Sends the distance value into the Serial Port
29. Serial.print("."); // Sends addition character right next to the previous value needed later in the Processing IDE
for indexing
30. }
31. // Repeats the previous lines from 165 to 15 degrees
32. for(int i=165;i>15;i--){
33. myServo.write(i);
34. delay(30);
35. distance = calculateDistance();
36. Serial.print(i);
37. Serial.print(",");
38. Serial.print(distance);
39. Serial.print(".");
40. }
41. }
42. // Function for calculating the distance measured by the Ultrasonic sensor
43. int calculateDistance(){
44.
45. digitalWrite(trigPin, LOW);
46. delayMicroseconds(2);
47. // Sets the trigPin on HIGH state for 10 micro seconds
48. digitalWrite(trigPin, HIGH);
49. delayMicroseconds(10);
50. digitalWrite(trigPin, LOW);
51. duration = pulseIn(echoPin, HIGH); // Reads the echoPin, returns the sound wave travel time in microseconds
52. distance= duration*0.034/2;
53. return distance;
54. }

Now we will receive the values for the angle and the distance measured by the sensor from the
Arduino Board into the Processing IDE using the SerialEvent() function which reads the data
from the Serial Port and we will put the values of the angle and the distance into the variables
iAngle and iDistance. These variable will be used for drawing the radar, the lines, the detected
objects and some of the text.

For drawing the radar I made this function drawRadar() which consist
of arc() and line() functions.

1. void drawRadar() {
 2. pushMatrix();
3. translate(960,1000); // moves the starting coordinats to new location
4. noFill();
5. strokeWeight(2);
6. stroke(98,245,31);
7. // draws the arc lines
8. arc(0,0,1800,1800,PI,TWO_PI);
9. arc(0,0,1400,1400,PI,TWO_PI);
10. arc(0,0,1000,1000,PI,TWO_PI);
11. arc(0,0,600,600,PI,TWO_PI);
12. // draws the angle lines
13. line(-960,0,960,0);
14. line(0,0,-960*cos(radians(30)),-960*sin(radians(30)));
15. line(0,0,-960*cos(radians(60)),-960*sin(radians(60)));
16. line(0,0,-960*cos(radians(90)),-960*sin(radians(90)));
17. line(0,0,-960*cos(radians(120)),-960*sin(radians(120)));
18. line(0,0,-960*cos(radians(150)),-960*sin(radians(150)));
19. line(-960*cos(radians(30)),0,960,0);
20. popMatrix();
21. }

For drawing the line that is moving along the radar I made this function drawLine(). Its center of
rotation is set with the translate() function and using the line() function in which the iAngle
variable is used the line is redrawn for each degree.

1. void drawLine() {
2. pushMatrix();
3. strokeWeight(9);
4. stroke(30,250,60);
5. translate(960,1000); // moves the starting coordinats to new location
6. line(0,0,950*cos(radians(iAngle)),-950*sin(radians(iAngle))); // draws the line according to the angle
7. popMatrix();
8. }
For drawing the detected objects I made this drawObject() function. It gets the distance from
ultrasonic sensor, transforms it into pixels and in combination with the angle of the sensor draws
the object on the radar.

1. void drawObject() {
2. pushMatrix();
3. translate(960,1000); // moves the starting coordinats to new location
4. strokeWeight(9);
5. stroke(255,10,10); // red color
6. pixsDistance = iDistance*22.5; // covers the distance from the sensor from cm to pixels
7. // limiting the range to 40 cms
8. if(iDistance<40){
9. // draws the object according to the angle and the distance
10. line(pixsDistance*cos(radians(iAngle)),-pixsDistance*sin(radians(iAngle)),950*cos(radians(iAngle)),-
950*sin(radians(iAngle)));
11. }
12. popMatrix();
13. }

For the text on the screen I made the drawText() function which draws texts on particular
locations.

All of these functions are called in the main draw() function which repeats all the time and draws
the screen. Also here I am using this fill() function with 2 parameters for simulating motion blur
and slow fade of the moving line.

1. void draw() {
2.
3. fill(98,245,31);
4. textFont(orcFont);
5. // simulating motion blur and slow fade of the moving line
6. noStroke();
7. fill(0,4);
8. rect(0, 0, width, 1010);
9.
10. fill(98,245,31); // green color
11. // calls the functions for drawing the radar
 12. drawRadar();
13. drawLine();
14. drawObject();
15. drawText();
16. }

Here’s the final appearance of the radar:

Here’s the complete Processing Source Code of the Arduino Radar:

1. import processing.serial.*; // imports library for serial communication

2. import java.awt.event.KeyEvent; // imports library for reading the data from the serial port
3. import java.io.IOException;
4.
5. Serial myPort; // defines Object Serial
6. // defubes variables
7. String angle="";
8. String distance="";
9. String data="";
10. String noObject;
11. float pixsDistance;
12. int iAngle, iDistance;
13. int index1=0;
14. int index2=0;
15. PFont orcFont;
16.
17. void setup() {
18.
19. size (1920, 1080);
20. smooth();
21. myPort = new Serial(this,"COM4", 9600); // starts the serial communication
22. myPort.bufferUntil('.'); // reads the data from the serial port up to the character '.'. So actually it reads this:
angle,distance.
23. orcFont = loadFont("OCRAExtended-30.vlw");
24. }
25.
26. void draw() {
27.
28. fill(98,245,31);
29. textFont(orcFont);
30. // simulating motion blur and slow fade of the moving line
31. noStroke();
32. fill(0,4);
33. rect(0, 0, width, 1010);
34.
35. fill(98,245,31); // green color
36. // calls the functions for drawing the radar
37. drawRadar();
38. drawLine();
39. drawObject();
40. drawText();
41. }
42.
43. void serialEvent (Serial myPort) { // starts reading data from the Serial Port
44. // reads the data from the Serial Port up to the character '.' and puts it into the String variable "data".
45. data = myPort.readStringUntil('.');
46. data = data.substring(0,data.length()-1);
47.
48. index1 = data.indexOf(","); // find the character ',' and puts it into the variable "index1"
49. angle= data.substring(0, index1); // read the data from position "0" to position of the variable index1 or thats the
value of the angle the Arduino Board sent into the Serial Port
50. distance= data.substring(index1+1, data.length()); // read the data from position "index1" to the end of the data
pr thats the value of the distance
51.
52. // converts the String variables into Integer
53. iAngle = int(angle);
54. iDistance = int(distance);
55. }
56.
57. void drawRadar() {
58. pushMatrix();
59. translate(960,1000); // moves the starting coordinats to new location
60. noFill();
61. strokeWeight(2);
62. stroke(98,245,31);
63. // draws the arc lines
64. arc(0,0,1800,1800,PI,TWO_PI);
65. arc(0,0,1400,1400,PI,TWO_PI);
66. arc(0,0,1000,1000,PI,TWO_PI);
67. arc(0,0,600,600,PI,TWO_PI);
68. // draws the angle lines
69. line(-960,0,960,0);
70. line(0,0,-960*cos(radians(30)),-960*sin(radians(30)));
71. line(0,0,-960*cos(radians(60)),-960*sin(radians(60)));
72. line(0,0,-960*cos(radians(90)),-960*sin(radians(90)));
73. line(0,0,-960*cos(radians(120)),-960*sin(radians(120)));
74. line(0,0,-960*cos(radians(150)),-960*sin(radians(150)));
75. line(-960*cos(radians(30)),0,960,0);
76. popMatrix();
77. }
78.
79. void drawObject() {
80. pushMatrix();
81. translate(960,1000); // moves the starting coordinats to new location
82. strokeWeight(9);
83. stroke(255,10,10); // red color
84. pixsDistance = iDistance*22.5; // covers the distance from the sensor from cm to pixels
85. // limiting the range to 40 cms
86. if(iDistance<40){
87. // draws the object according to the angle and the distance
88. line(pixsDistance*cos(radians(iAngle)),-pixsDistance*sin(radians(iAngle)),950*cos(radians(iAngle)),-
950*sin(radians(iAngle)));
89. }
90. popMatrix();
91. }
92.
93. void drawLine() {
94. pushMatrix();
95. strokeWeight(9);
96. stroke(30,250,60);
97. translate(960,1000); // moves the starting coordinats to new location
98. line(0,0,950*cos(radians(iAngle)),-950*sin(radians(iAngle))); // draws the line according to the angle
99. popMatrix();
100. }
101.
102. void drawText() { // draws the texts on the screen
103.
104. pushMatrix();
105. if(iDistance>40) {
106. noObject = "Out of Range";
107. }
108. else {
109. noObject = "In Range";
110. }
111. fill(0,0,0);
112. noStroke();
113. rect(0, 1010, width, 1080);
114. fill(98,245,31);
115. textSize(25);
116. text("10cm",1180,990);
117. text("20cm",1380,990);
118. text("30cm",1580,990);
119. text("40cm",1780,990);
120. textSize(40);
121. text("Object: " + noObject, 240, 1050);
122. text("Angle: " + iAngle +" °", 1050, 1050);
123. text("Distance: ", 1380, 1050);
 124. if(iDistance<40) {
125. text(" " + iDistance +" cm", 1400, 1050);
126. }
127. textSize(25);
128. fill(98,245,60);
129. translate(961+960*cos(radians(30)),982-960*sin(radians(30)));
130. rotate(-radians(-60));
131. text("30°",0,0);
132. resetMatrix();
133. translate(954+960*cos(radians(60)),984-960*sin(radians(60)));
134. rotate(-radians(-30));
135. text("60°",0,0);
136. resetMatrix();
137. translate(945+960*cos(radians(90)),990-960*sin(radians(90)));
138. rotate(radians(0));
139. text("90°",0,0);
140. resetMatrix();
141. translate(935+960*cos(radians(120)),1003-960*sin(radians(120)));
142. rotate(radians(-30));
143. text("120°",0,0);
144. resetMatrix();
145. translate(940+960*cos(radians(150)),1018-960*sin(radians(150)));
146. rotate(radians(-60));
147. text("150°",0,0);
148. popMatrix();
149. }

New Updated version of the code to fit any screen resolution:

Just change the values in size() function, with your screen resolution.

1. /* Arduino Radar Project

2. *
3. * Updated version. Fits any screen resolution!
4. * Just change the values in the size() function,
5. * with your screen resolution.
6. *
7. * by Dejan Nedelkovski,
8. * www.HowToMechatronics.com
9. *
10. */
11.
12. import processing.serial.*; // imports library for serial communication
13. import java.awt.event.KeyEvent; // imports library for reading the data from the serial port
14. import java.io.IOException;
15.
16. Serial myPort; // defines Object Serial
17. // defubes variables
18. String angle="";
19. String distance="";
20. String data="";
21. String noObject;
22. float pixsDistance;
23. int iAngle, iDistance;
24. int index1=0;
25. int index2=0;
26. PFont orcFont;
27.
28. void setup() {
29.
30. size (1920, 1080); // ***CHANGE THIS TO YOUR SCREEN RESOLUTION***
31. smooth();
32. myPort = new Serial(this,"COM4", 9600); // starts the serial communication
33. myPort.bufferUntil('.'); // reads the data from the serial port up to the character '.'. So actually it reads
this: angle,distance.
34. orcFont = loadFont("OCRAExtended-30.vlw");
35. }
36.
37. void draw() {
38.
39. fill(98,245,31);
40. textFont(orcFont);
41. // simulating motion blur and slow fade of the moving line
42. noStroke();
43. fill(0,4);
44. rect(0, 0, width, height-height*0.065);
45.
46. fill(98,245,31); // green color
47. // calls the functions for drawing the radar
48. drawRadar();
49. drawLine();
50. drawObject();
51. drawText();
52. }
53.
54. void serialEvent (Serial myPort) { // starts reading data from the Serial Port
55. // reads the data from the Serial Port up to the character '.' and puts it into the String variable "data".
56. data = myPort.readStringUntil('.');
57. data = data.substring(0,data.length()-1);
58.
59. index1 = data.indexOf(","); // find the character ',' and puts it into the variable "index1"
60. angle= data.substring(0, index1); // read the data from position "0" to position of the variable index1
or thats the value of the angle the Arduino Board sent into the Serial Port
61. distance= data.substring(index1+1, data.length()); // read the data from position "index1" to the end
of the data pr thats the value of the distance
62.
63. // converts the String variables into Integer
64. iAngle = int(angle);
65. iDistance = int(distance);
66. }
67.
68. void drawRadar() {
69. pushMatrix();
70. translate(width/2,height-height*0.074); // moves the starting coordinats to new location
71. noFill();
72. strokeWeight(2);
73. stroke(98,245,31);
74. // draws the arc lines
75. arc(0,0,(width-width*0.0625),(width-width*0.0625),PI,TWO_PI);
76. arc(0,0,(width-width*0.27),(width-width*0.27),PI,TWO_PI);
77. arc(0,0,(width-width*0.479),(width-width*0.479),PI,TWO_PI);
78. arc(0,0,(width-width*0.687),(width-width*0.687),PI,TWO_PI);
79. // draws the angle lines
80. line(-width/2,0,width/2,0);
81. line(0,0,(-width/2)*cos(radians(30)),(-width/2)*sin(radians(30)));
82. line(0,0,(-width/2)*cos(radians(60)),(-width/2)*sin(radians(60)));
83. line(0,0,(-width/2)*cos(radians(90)),(-width/2)*sin(radians(90)));
84. line(0,0,(-width/2)*cos(radians(120)),(-width/2)*sin(radians(120)));
85. line(0,0,(-width/2)*cos(radians(150)),(-width/2)*sin(radians(150)));
86. line((-width/2)*cos(radians(30)),0,width/2,0);
87. popMatrix();
88. }
89.
90. void drawObject() {
91. pushMatrix();
92. translate(width/2,height-height*0.074); // moves the starting coordinats to new location
93. strokeWeight(9);
94. stroke(255,10,10); // red color
95. pixsDistance = iDistance*((height-height*0.1666)*0.025); // covers the distance from the sensor from
cm to pixels
96. // limiting the range to 40 cms
97. if(iDistance<40){
98. // draws the object according to the angle and the distance
99. line(pixsDistance*cos(radians(iAngle)),-pixsDistance*sin(radians(iAngle)),(width-
width*0.505)*cos(radians(iAngle)),-(width-width*0.505)*sin(radians(iAngle)));
100. }
101. popMatrix();
102. }
103.
104. void drawLine() {
105. pushMatrix();
106. strokeWeight(9);
107. stroke(30,250,60);
108. translate(width/2,height-height*0.074); // moves the starting coordinats to new location
109. line(0,0,(height-height*0.12)*cos(radians(iAngle)),-(height-height*0.12)*sin(radians(iAngle))); //
draws the line according to the angle
110. popMatrix();
111. }
112.
113. void drawText() { // draws the texts on the screen
114.
115. pushMatrix();
116. if(iDistance>40) {
117. noObject = "Out of Range";
118. }
119. else {
120. noObject = "In Range";
121. }
122. fill(0,0,0);
123. noStroke();
124. rect(0, height-height*0.0648, width, height);
125. fill(98,245,31);
126. textSize(25);
127.
128. text("10cm",width-width*0.3854,height-height*0.0833);
129. text("20cm",width-width*0.281,height-height*0.0833);
130. text("30cm",width-width*0.177,height-height*0.0833);
131. text("40cm",width-width*0.0729,height-height*0.0833);
132. textSize(40);
133. text("Object: " + noObject, width-width*0.875, height-height*0.0277);
134. text("Angle: " + iAngle +" °", width-width*0.48, height-height*0.0277);
135. text("Distance: ", width-width*0.26, height-height*0.0277);
136. if(iDistance<40) {
137. text(" " + iDistance +" cm", width-width*0.225, height-height*0.0277);
138. }
139. textSize(25);
140. fill(98,245,60);
141. translate((width-width*0.4994)+width/2*cos(radians(30)),(height-height*0.0907)-
width/2*sin(radians(30)));
142. rotate(-radians(-60));
143. text("30°",0,0);
144. resetMatrix();
145. translate((width-width*0.503)+width/2*cos(radians(60)),(height-height*0.0888)-
width/2*sin(radians(60)));
146. rotate(-radians(-30));
147. text("60°",0,0);
148. resetMatrix();
149. translate((width-width*0.507)+width/2*cos(radians(90)),(height-height*0.0833)-
width/2*sin(radians(90)));
150. rotate(radians(0));
151. text("90°",0,0);
152. resetMatrix();
153. translate(width-width*0.513+width/2*cos(radians(120)),(height-height*0.07129)-
width/2*sin(radians(120)));
154. rotate(radians(-30));
155. text("120°",0,0);
156. resetMatrix();
157. translate((width-width*0.5104)+width/2*cos(radians(150)),(height-height*0.0574)-
width/2*sin(radians(150)));
158. rotate(radians(-60));
159. text("150°",0,0);
160. popMatrix();