Two-Faced: a Direction-Controlled, Dual-Tone 4WD RC Car With a Color-Coded Web Joystick

📺 Watch the full build video here:Two-Faced: A Direction-Controlled, Dual-Tone 4WD RC Car With a Color-Coded Web Joystick

What if a car looked like two completely different machines just by flipping it around — and the controller driving it was just as colorful? That's exactly what this build is. One side wears a deep green diamond pattern, the other a stark white-on-black pattern — same chassis, two distinct identities. Pair that with a fully color-coded web joystick where every function lights up in its own color when active, and you get a project where color isn't decoration — it's the design language for the whole machine, from the chassis paint to the control panel glow.

This is a 4WD WiFi-controlled RC car, built around an ESP8266 NodeMCU and an L298N motor driver, controlled entirely through a custom web-based joystick — no app, no separate remote. Just open a browser, type in an IP address, and drive.

️ Hardware Used

ESP8266 NodeMCU 1

L298N Motor Driver 1

BO Motors (Yellow) 4

Wheels 4

18650 Li-ion Batteries 2

Switch 1

LEDs (Red + White) 4

Resistors (100Ω) 2

BC547 2

Chassis 1

The chassis is built from PVC sheet, finished in two completely different color treatments on opposite faces:

1. Face A: deep green diamond/checker pattern on black
2. Face B: stark silver diamond/checker pattern on black

Same build, same dimensions, same wiring underneath — but depending on which side faces you, it reads as a different car entirely. Frame height sits at 4cm against ~7cm wheel height, giving roughly 3cm ground clearance on both sides for smooth turning and stunt handling.

2× 18650 Li-ion cells in series for power

4× BO motors, wired as left-pair / right-pair through an L298N motor driver (left → Channel 1, right → Channel 2)

Single power switch + dedicated charging port on the rear panel

Since the ESP8266 can't drive multiple LEDs simultaneously at full current, a Darlington pair circuit handles LED switching — white LEDs up front, red LEDs at the rear. This isn't just function — it's another color layer on top of the chassis itself: red, white, and green all present on the physical hardware before the UI even comes into play.

This is where the "every function has its own color" idea fully comes together. The web joystick UI assigns a distinct color to every control, and that color brightens/glows when the function is active:

No two functions share a color, and no function is colorless — so a driver can recognize what's active at a glance, by color alone, without reading labels.

🔼 FWD / 🔽 REV

The large blue directional control on the left is used for vehicle movement.

1. FWD → Drives the car forward.
2. REV → Drives the car backward.
3. Large buttons make one-handed operation easy, even outdoors.

◀️ LEFT / ▶️ RIGHT

The green directional control on the right is used for steering.

1. LEFT → Turns the vehicle left.
2. RIGHT → Turns the vehicle right.
3. Works seamlessly while driving forward or backward.
4. Large buttons make steering easy and accurate, even on a smartphone screen.

Note: Steering speed depends on the M2 mode. With M2 OFF, the car turns smoothly for precise control. With M2 ON, it turns much faster, making quick spins and drifting possible.

When Hazard is enabled:

1. Rear LEDs blink continuously.
2. The Hazard button glows bright red.
3. The web interface blinks in real time to match the physical car.
4. Useful during demonstrations or emergency indication.

The Lights button controls the vehicle headlights.

1. OFF → LEDs remain off.
2. ON → Front LEDs illuminate continuously.
3. Button changes to bright white when active.

M1 changes the driving power of the vehicle.

M1 OFF

1. Motors run at approximately 50% power.
2. Smooth acceleration.
3. Ideal for indoor driving and beginners.
4. Conserves battery power.

M1 ON

1. Motors run at 100% power.
2. Maximum torque.
3. Recommended for:
4. Off-road driving
5. Grass
6. Sand
7. Steep climbs
8. Heavy loads

M2 controls the turning speed of the RC car.

M2 OFF

1. Slower steering.
2. Smooth, controlled cornering.
3. Better precision.

M2 ON

1. Maximum turning speed.
2. Fast rotation.
3. Ideal for:
4. Quick U-turns
5. Drifting
6. Aggressive driving
7. High-speed maneuvering

The STOP button is designed as a master safety switch.

When STOP is activated:

1. All motors stop immediately.
2. Hazard mode is disabled.
3. Lights are disabled.
4. Driving controls are ignored.
5. M1 and M2 functions are locked.
6. The car remains inactive until STOP is released.

This provides an additional layer of safety and prevents accidental movement.

Instead of using a dedicated Android application, the controller runs entirely inside a standard web browser. This makes the project:

1. ✅ Cross-platform (Android, iPhone, Windows, Linux, macOS)
2. ✅ No app installation required
3. ✅ Instant connection through Wi-Fi
4. ✅ Real-time button feedback
5. ✅ Beginner-friendly interface
6. ✅ Easy to customize by editing the ESP8266 web page

This browser-based dashboard makes controlling the RC car intuitive while also providing advanced driving modes for different terrains and driving styles.

Pinout: D1/D2/D5/D6 → motor control · D0/D7 → speed control · D3/D8 → LED control

L298N's onboard 5V regulator powers the ESP8266 directly — no separate buck converter needed

Full Arduino code, circuit diagram, and pin reference: GitHub repo — download and flash directly, no code edits required

Power on the car

Connect your phone to WiFi network CAR_v1.0

Tap "Connect anyway" if your phone warns about no internet — this is expected, the car runs its own local network

Open a browser, go to 192.168.4.1

The color-coded joystick loads — drive directly from the browser

Tested across smooth flooring, rough outdoor terrain, and gravel to confirm 4WD traction and turning radius hold up under real conditions — not just a tabletop demo.

Two colors on the outside, six colors on the control panel, one unified idea: color isn't an afterthought here, it's how the whole machine communicates — what it is, and what it's doing. Full build files, code, and wiring are linked below. Let me know what you'd build next with this approach!

📺 Watch the full build video here:Two-Faced: A Direction-Controlled, Dual-Tone 4WD RC Car With a Color-Coded Web Joystick