Week 3: OOP Light Cycles

Overview

My assignment this week builds upon my concept from last week, introducing objects that interact with each other–inspired by light cycles as seen in the 1982 film, Tron. In my p5.js work, 5 light cycles are drawn on the board, each with a light trail that follows behind it. Upon running into another light train–whether it be it’s own or another cycle’s trail–the cycle will disappear and respawn elsewhere.

Code a Light Cycle arcade minigame | Wireframe #47 - Raspberry Pi

Discussion

One of the interesting coding patterns I used in this work is the use of a global array to track all trails in a single array, rather than including a trail array in each cycle object. This is helpful in two key ways: 1) It makes it simple to perform a check to see if a cycle has crashed into a trail. 2) It optimizes for spacial locality in cache memory, to provide better performance.

I named the array of trails

garbageCollector
garbageCollector as a reference to garbage collection mechanisms in programming languages, that analyze memory usage and automatically cleanup unused memory by tracking references. Similarly, we decrement counter on every call to
draw()
draw() until it is negative, at which point we remove it from the list.

A problem I ran into was figuring out how to efficiently check for collisions. While I could have used the dot product from linear algebra to detect whether two lines are perpendicular (and actually colliding), I instead opted to align all light cycles to multiples of 10, and just test whether the latest point is identical to any points currently in the garbage collector.

The trail code in reference is shown below:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let garbageCollector = [];
// ....
function draw() {
// ...
// Tail management
let nextDel = 0;
for (let i = 0; i < garbageCollector.length; i++) {
// decrement the point value
point = garbageCollector[i];
point.counter -= LINE_DECREMENT;
// First draw black to erase
stroke(0);
strokeWeight(2);
line(point.x1, point.y1, point.x2, point.y2);
strokeWeight(1);
// Draw the colored line with opacity
let c = color(point.color);
c.setAlpha(point.counter);
stroke(c);
line(point.x1, point.y1, point.x2, point.y2);
// garbage collect
if (point.counter <= 0) {
nextDel = i;
}
}
// trim negative counters
if (nextDel > 0) {
garbageCollector.splice(0, nextDel);
}
let garbageCollector = []; // .... function draw() { // ... // Tail management let nextDel = 0; for (let i = 0; i < garbageCollector.length; i++) { // decrement the point value point = garbageCollector[i]; point.counter -= LINE_DECREMENT; // First draw black to erase stroke(0); strokeWeight(2); line(point.x1, point.y1, point.x2, point.y2); strokeWeight(1); // Draw the colored line with opacity let c = color(point.color); c.setAlpha(point.counter); stroke(c); line(point.x1, point.y1, point.x2, point.y2); // garbage collect if (point.counter <= 0) { nextDel = i; } } // trim negative counters if (nextDel > 0) { garbageCollector.splice(0, nextDel); }
let garbageCollector = [];

// ....
function draw() {
  // ...

  // Tail management
  let nextDel = 0;
  for (let i = 0; i < garbageCollector.length; i++) {
    // decrement the point value
    point = garbageCollector[i];
    point.counter -= LINE_DECREMENT;
    
    // First draw black to erase
    stroke(0);
    strokeWeight(2);
    line(point.x1, point.y1, point.x2, point.y2);
    strokeWeight(1);
    
    // Draw the colored line with opacity
    let c = color(point.color);
    c.setAlpha(point.counter);
    stroke(c);
    line(point.x1, point.y1, point.x2, point.y2);
    
    // garbage collect
    if (point.counter <= 0) {
      nextDel = i;
    }
  }

  // trim negative counters
  if (nextDel > 0) {
    garbageCollector.splice(0, nextDel);
  }

 

Code

 

Leave a Reply