Drivr: CODE

Small Beginnings

Like most things in ITP, the project was started with a simple p5.js sketch.

The first prototype was to test to see how smoothly DOM video objects were able to switch between each other. Without this functionality, the whole project would be invalid. Fortunately, the prototype (located here) showcased this perfectly by switching between a small array of clips with the left and right arrows. 

Unfortunately, the online p5.js editor is not very flexible with large file sizes. Since a huge amount of video clips are to be used in Drivr, there was no way to continue using the online editor. The next step was to move locally and figure out a sensible way to load a large collection of video files into the project.

Loading the Library

After editing around 100 video clips, there needed to be a way to categorize each clip into several categories, the two most important categories being SPEED (idle, cruising, speeding) and DIRECTION (left, straight, right). A CSV formatted file was used in order to structure all of this data. 

Data Structure

A data structure was then needed to store all of this data. A simple array was first used to store all of the data. However, because we needed to find a random video clip with very specific parameters, this was definitely not the most efficient structure to use. Since SPEED and DIRECTION were global properties that the car always had, we ended up on using a 3D array. The first dimension of the array are the three speeds. The second dimension, the three directions. And the final dimension contained all of the clips.

Building the rest of the car relied on the serial data coming in from the Arduino. Here is an example p5 sketch of the serial communication setup.


The following is the main logic for grabbing a new clip whenever the car state has changed.

function getNewIndices()
  currI = velocityIntoCategory();
  currJ = directionToInt(direction);

  var currLib = movieLib[currI][currJ];
  var currLibLength = currLib.length;
  var randomIndex = getRandomInt(0, currLibLength-1);

  while(currK != randomIndex)
    currK = getRandomInt(0, currLibLength-1);

After the speed and direction are obtained, the clip is randomly retrieved.

The other components of the car were simpler to code and are found here:



All of the code for the project can be found here: