p5.js: Spawn Road Markings & Remove Off-Screen Objects

In p5.js, spawn multiple road markings using an array of RoadLine objects, pushing new instances from the top every 20-30 frames in draw() for a smooth scrolling effect like your car is speeding forward. Safely remove off-screen ones (y > height) by iterating the array backwards and using splice()—this avoids index shifting errors and lag—while optionally capping the array at 20 by only spawning when under limit. These minimal tweaks turn your single roadLine into dozens of dashing lines without rewriting everything.

Contents

• Why Use an Array of RoadLine Objects
• Spawning Road Markings Over Time
• Updating and Drawing All Markings
• Safely Removing Off-Screen Elements
• Capping Your Array at 20
• Full Updated Code with Minimal Changes
• Best Practices for p5.js Performance
• Sources
• Conclusion

Why Use an Array of RoadLine Objects

Ever wonder why your single roadLine feels static? Arrays let you juggle dozens of identical objects independently—like a fleet of road markings scrolling down to fake forward motion. In p5.js, declare let roadLines = []; globally (you already have roadLinesArray, so rename it for clarity).

Your RoadLine class is perfect: it spawns at y=0 (top), moves down with velocity, and draws two side-by-side dashes. No class changes needed yet. Just create multiples and loop over them.

This scales effortlessly. One line? Boring. Twenty? Highway vibes.

Spawning Road Markings Over Time

Don’t dump all markings in setup()—that’d create a static pile. Spawn dynamically in draw() for control.

Use frameCount (p5.js built-in counter) for timing:

if (frameCount % 25 === 0) {
 roadLines.push(new RoadLine());
}

Every 25 frames (~0.4 seconds at 60fps), boom—a new pair drops from the top. Tweak 25 lower for faster traffic, higher for chill drives.

Where? Right after background(). Why draw()? Runs every frame, perfect for timed events. setup() is one-shot only.

Pro tip: Add randomness? if (frameCount % (20 + random(10)) === 0) for irregular dashes.

Updating and Drawing All Markings

Replace your single roadLine.display(); with a loop:

for (let line of roadLines) {
 line.display();
}

Your display() already updates position (this.pos1.add(this.vel)) and draws rects. Magic—it works on all!

But here’s the catch: your class resets y to 0 when > height. Ditch that! We’ll remove instead (next section). Update RoadLine.display() to only draw and move, no reset:

display() {
 fill(255);
 noStroke();
 rect(this.pos1.x, this.pos1.y, 6, 20);
 rect(this.pos2.x, this.pos2.y, 6, 20);
 this.pos1.add(this.vel);
 this.pos2.add(this.vel);
 // Remove the if(y > height) resets!
}

Clean loop in draw() handles everything. Short. Sweet. No lag yet.

Safely Removing Off-Screen Elements

Loops and splice() can glitch if you remove mid-forward iteration—indices shift, skipping items. Gross.

Fix: Backward loop, as recommended on Stack Overflow for p5.js arrays:

for (let i = roadLines.length - 1; i >= 0; i--) {
 if (roadLines[i].pos1.y > height) { // or pos2.y, same vel
 roadLines.splice(i, 1);
 } else {
 roadLines[i].display();
 }
}

Check off-screen? Splice it out. Backward avoids skips. Do this instead of the forward loop—combines update/draw/remove.

This p5.js tutorial echoes it: always reverse for deletions. No more infinite growth, no lag from thousands of ghosts.

filter() works too (roadLines = roadLines.filter(line => line.pos1.y < height);), but slower for big arrays. Backward splice() wins for games.

Capping Your Array at 20 {#capping-array)

Off-screen removal handles most cases, but for exam safety? Cap at 20: spawn only if roadLines.length < 20.

In spawn:

if (frameCount % 25 === 0 && roadLines.length < 20) {
 roadLines.push(new RoadLine());
}

Boom—max 20. If spawn outpaces removal (slow vel?), it self-limits. Or force-shift oldest:

if (roadLines.length > 20) {
 roadLines.shift(); // Drops first (top/oldest)
}

But off-screen is cleaner for scrolling. Your call—both prevent bloat.

Full Updated Code with Minimal Changes

Here’s your code, tweaked ~20 lines. Copy-paste ready. Changes bolded/commented.

let crashcar;
let carsonroad;
let **roadLines = [];** // Renamed, was roadLinesArray
let **spawnRate = 25;** // Tweak for speed

function setup() {
 createCanvas(720, 540);
 rectMode(CENTER);
 crashcar = new Crashcar();
 carsonroad = new CarsOnRoad();
 **// No more single roadLine!**
}

function draw() {
 background('#1ebc09ff');
 drawRoad();
 **// Spawn logic**
 **if (frameCount % spawnRate === 0 && roadLines.length < 20) {**
 **roadLines.push(new RoadLine());**
 **}**
 **// Update/draw/remove all in one backward loop**
 **for (let i = roadLines.length - 1; i >= 0; i--) {**
 **if (roadLines[i].pos1.y > height) {**
 **roadLines.splice(i, 1);**
 **} else {**
 **roadLines[i].display();**
 **}**
 **}**
 drawRoadBorders();
 crashcar.display();
 carsonroad.display();
 moveCar();
}

// ... drawRoad(), drawRoadBorders(), moveCar() unchanged ...

class Crashcar { /* unchanged */ }

class CarsOnRoad { /* unchanged */ }

class RoadLine {
 constructor() {
 this.pos1 = createVector(width / 3 + 200, 0);
 this.pos2 = createVector(width / 3 + 40, 0);
 this.vel = createVector(0, 5);
 }

 display() {
 fill(255);
 noStroke();
 rect(this.pos1.x, this.pos1.y, 6, 20);
 rect(this.pos2.x, this.pos2.y, 6, 20);
 this.pos1.add(this.vel);
 this.pos2.add(this.vel);
 **// Removed y resets—handled by array now!**
 }
}

class Obstacle { /* unchanged */ }

Test it. Road dashes forever? Check. Smooth? Yes. Array <20? Always.

Best Practices for p5.js Performance

Separate update() and display() in classes for big games—display() pure drawing, update() moves/checks. Here? Minimal keeps it simple.

millis() for precise timers over frameCount if fps varies. Randomize spawn x-pos for weave effect.

From Happy Coding’s p5.js arrays guide, arrays shine for particles/enemies. Profile with console.log(roadLines.length)—should hover 10-15.

Newbie tip: p5.js editor auto-saves. Exam nerves? Practice spawn tweaks now.

Sources

1. Stack Overflow: How to delete an element from an array - JavaScript p5
2. Meadowbrook p5js: Adding and Removing Objects in an Array
3. Happy Coding: Arrays in p5.js
4. Stack Overflow: Spawn objects that grow independently in Processing/p5.js

Conclusion

Master p5.js array object management with spawning via frameCount, backward splice() for off-screen removal, and a 20-element cap—you’ll ace that exam with lag-free road markings. These changes are beginner-proof, performant, and scalable to full games. Tweak spawnRate or vel, run it, and watch the highway come alive.