trustTheProcess(2) – Time in Space

By loading the video, you agree to Vimeos’s privacy policy.
Learn more

Load video

Always unblock Vimeo

In this livestream from June 22, 2023, I used Processing to develop an interactive, three-dimensional timeline of exemplary historical data from the years between 1985 and 2000. This time, too, the input from the chat was particularly interesting. The data was inserted into this app via Google Sheets.

Related

• Basic Datastructures
• The Third Dimension
• Lifeline

Table table;
PFont font;

float pos = 0;

int[] years = {1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000};
String api = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-Wn5hiZD45kSIkODu84H6IHYoERl7UMQ7Qi0-RoqtQ7X8qifOUjrL4Im2fJQKWXZ3ATapi1J_LQTt/pub?gid=0&single=true&output=csv";

void setup() {

  table = loadTable(api, "header,csv");

  //table = loadTable("lifelinedata.csv", "header,csv");

  font = createFont("sans.otf", 1000);
  size(900, 900, P3D);

  for (TableRow row : table.rows()) {

    String title = row.getString("Title");
    int year = row.getInt("Year");

    println(title + " " + year);
  }

  textMode(SHAPE);
}

void draw() {
  background(0);
  perspective(PI/3.0, (float)width/height, 1, 100000);

  float eyeX = width/2.0 + map(mouseX,0,width,-400,400);
  float eyeY = height/2.0;
  float eyeZ =(height/2.0) / tan(PI*30.0 / 180.0);
  float centerX = width/2.0;
  float centerY = height/2.0;
  float centerZ = 0;
  float upX = 0;
  float upY = 1;
  float upZ = 0;
  camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);

  float margin = 150;

  textFont(font);
  textSize(30);
  textAlign(CENTER, CENTER);
  noStroke();

  translate(width/2, height/2 + height/4, pos);

  for (int i = 0; i < years.length; i++) {

    int y = years[i];
    push();
    translate(0, 0, i * margin);
    fill(#f1f1f1);
    text(y, 0, 0);

    fill(#ffff00);
    textAlign(LEFT, CENTER);

    int count = 0;
    for (TableRow row : table.rows()) {

      int year = row.getInt("Year");
      String title = row.getString("Title");

      if (y == year) {
        push();
        translate(0, -40 -(40 * count));
        circle(0, 0, 20);
        push();
        rotate(radians(-45));
        text(title, 20, 0);
        pop();
        pop();
        count++;
      }
    }
    pop();
  }

  if (keyPressed) {
    if (key == 'w') {
      pos+=20;
    }

    if (key == 's') {
      pos-=20;
    }
  }
}