DIY Ultrasonic Radar System with Arduino and Processing 4
- Cartell Automotive
- Jun 6
- 4 min read
"I've seen way to many of these posts on Instagram, so here's the solution for you."
"If you want an enclosure of your own printed let us know! Send through your design."
Have you ever wondered how radar systems detect objects and visualize distance? In this project, We built a simple yet captivating DIY radar system using an Arduino, a servo motor, an ultrasonic sensor, and Processing 4 to render a real-time radar screen. It's a fantastic blend of hardware and software, ideal for anyone curious about sensor interfacing and data visualization.
Using an Arduino with a servo-mounted ultrasonic sensor and Processing 4 for the graphical interface, we scan the environment and visualize detected obstacles in real time.
An Arduino Compatible with a Processing 4 Application.
The components were placed in to a 3D printed Radar enclosure.
Components Used
Arduino Uno (or compatible board)
HC-SR04 Ultrasonic Sensor
SG90 Servo Motor
Jumper Wires
Breadboard
USB Cable
Computer with Processing 4 installed
Project Overview
This radar system works as follows:
The servo sweeps the ultrasonic sensor from 0° to 180° and back.
At each position, the HC-SR04 sensor measures distance to the nearest object.
The Arduino sends angle, distance data over USB serial.
Processing 4 reads this data and renders a beautiful, glowing radar display with animated sweep and fading blips.
This code controls the sweeping motion and handles the ultrasonic distance measurement. It continuously sends data in the format angle, distance.
Arduino Sketch
Have a look at the const variables for wiring indication, simple enough.
#include <Servo.h>
const int trigPin = 10;
const int echoPin = 11;
const int servoPin = 9;
Servo myServo;
int angle = 0;
int step = 1;
void setup()
{
Serial.begin(9600);
myServo.attach(servoPin);
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
}
void loop()
{
myServo.write(angle);
delay(30);
long duration = getUltrasonicReading();
float distance = duration * 0.034 / 2;
Serial.print(angle);
Serial.print(",");
Serial.println(distance, 0);
angle += step;
if (angle >= 180 || angle <= 0)
{
step *= -1;
}
}
long getUltrasonicReading()
{
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);
return pulseIn(echoPin, HIGH, 30000);
}
Processing 4 Sketch
This code opens a full-screen radar interface and visualizes every angle/distance pair with animated blips, a sweeping arm, and a heads-up display.
Make sure to update the serial port in Serial.list()[0] if necessary!
Might have to open Device Manager, easiest is checking which COM port the Arduino sketch is using to connect to the dev board.
import processing.serial.*;
Serial myPort;
String data;
float angle = 0;
float distance = 0;
float radarMaxCM = 300;
float radarRadiusPixels;
float radarScale;
ArrayList<Blip> blips = new ArrayList<Blip>();
void setup() {
fullScreen(); // Auto fullscreen
println("Ports:");
println(Serial.list());
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.bufferUntil('\n');
// Radar scale: max radius is 80% of screen width
radarRadiusPixels = width * 0.4;
radarScale = radarRadiusPixels / radarMaxCM;
frameRate(60);
smooth();
}
void draw() {
fill(0, 50);
noStroke();
rect(0, 0, width, height);
translate(width / 2, height); // bottom center
drawRadarGrid();
drawSweepArm(angle);
drawBlip(angle, distance);
drawBlipEchoes();
drawHUD();
}
void serialEvent(Serial p) {
data = p.readStringUntil('\n');
if (data != null) {
data = trim(data);
String[] parts = split(data, ',');
if (parts.length == 2) {
try {
angle = float(parts[0]);
distance = float(parts[1]);
} catch (Exception e) {
println("Parse error: " + e.getMessage());
}
}
}
}
void drawRadarGrid() {
noFill();
for (int r = 50; r <= radarMaxCM; r += 50) {
stroke(0, 255, 0, map(r, 50, radarMaxCM, 100, 30));
float px = r * radarScale;
ellipse(0, 0, px * 2, px * 2);
}
for (int a = 0; a <= 180; a += 30) {
float x = cos(radians(a)) * radarRadiusPixels;
float y = -sin(radians(a)) * radarRadiusPixels;
stroke(0, 255, 0, 80);
line(0, 0, x, y);
}
}
void drawSweepArm(float a) {
float x = cos(radians(a)) * radarRadiusPixels;
float y = -sin(radians(a)) * radarRadiusPixels;
stroke(0, 255, 0);
strokeWeight(2);
line(0, 0, x, y);
}
void drawBlip(float a, float d) {
float mappedDist = constrain(d * radarScale, 0, radarRadiusPixels);
float dx = cos(radians(a)) * mappedDist;
float dy = -sin(radians(a)) * mappedDist;
blips.add(new Blip(dx, dy));
noStroke();
for (int i = 10; i > 0; i--) {
fill(0, 255, 0, 10 * i);
ellipse(dx, dy, i * 2, i * 2);
}
}
void drawBlipEchoes() {
for (int i = blips.size() - 1; i >= 0; i--) {
Blip b = blips.get(i);
b.update();
b.display();
if (b.alpha <= 0) {
blips.remove(i);
}
}
}
void drawHUD() {
fill(0, 255, 0);
textSize(24);
textAlign(LEFT);
text("Angle: " + nf(angle, 1, 0) + "°", -width / 2 + 20, -height + 40);
text("Distance: " + nf(distance, 1, 0) + " cm", -width / 2 + 20, -height + 70);
}
class Blip {
float x, y;
float alpha = 255;
float pulse = 0;
Blip(float x_, float y_) {
x = x_;
y = y_;
}
void update() {
alpha -= 2;
pulse += 0.2;
}
void display() {
noStroke();
fill(0, 255, 0, alpha);
float size = 8 + sin(pulse) * 3;
ellipse(x, y, size, size);
}
}
What’s Happening Behind the Scenes?
The servo creates a scanning motion, just like real radar.
The HC-SR04 sensor takes range measurements in front of it.
Every frame, Processing plots those readings as radial coordinates.
“Blips” slowly fade out using alpha transparency to mimic echoes.
Have fun with this! easy way to get a graphical interface going.
This radar project is more than a simple hobby build it’s a great exercise in bridging the gap between hardware and software. It opens the door to countless creative applications, from robotic mapping to interactive installations.
If you try this project or put your own twist on it, I'd love to hear about it! Drop a comment or share your build.
Comments