Month: October 2018

Flight Visualizations over 24 Periods, Institution: NATS (2014)

NATS is an air traffic control services provider and in this particular video, they visualized the air traffic coming and going to European airspace over the course of 24 hours on a summer day in 2014. Despite the fact that there is not much information available on it, I chose this work because after I graduated high school, my parents moved to Germany for 3 years. During those 3 years, I had the privilege of making many trips to, from, and within Europe. Throughout the countless delayed flights, time spent on the runway, and in the air, I became increasingly aware of the sheer number of flights that there are in a day and wondered how air traffic was managed and controlled.

It is particularly fascinating and meaningful to me to see this visualization. In terms of creating this visualization, I image that NATS has access to all of the flight routes of any given day and they carefully compiled these routes onto a 3D model of the Earth. I really like that they used a dark background for the Earth and used an eye-catching neon color while also making it slightly opaque — so that we can see places where many of the routes overlap.

(* Note: This assignment was submitting using one grace day.)

Project-07

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-07

var nPoints = 100;
var colorR = 167;
var colorG = 168;
var colorB = 212;
var div = 0;
var w = 0;
var h = 0;

function setup() {
  createCanvas(480,480);
}

function draw() {
  background (240);
  push();
  translate(0,0);
    for (var c = 0; c < 6; c ++) {
      h = c * 96; // shifts height of flower
      for (var d = 0; d < 7; d ++) {
        w = d * 80; // shift width of flower
        drawEpitrochoidCurve(colorR, colorG, colorB, div, w, h);
      }
    }
    if (mouseY > 0){
        div = (mouseY / 15.0) + 5; // flower size scales to mouseY position
    }
  pop();
}

function drawEpitrochoidCurve(colorR, colorG, colorB, div, w, h) {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html    
  var x;
  var y;
    
  var a = 80.0;
  var b = a / 2.0;
    
  fill(colorR, colorG, colorB);
  beginShape();
  for (var i = 0; i < 100; i++) {
    var t = map(i, 0, nPoints, 0, TWO_PI);
    x = a * (6 * cos(t) - cos(6 * t)) / div + w;
    y = a * (6 * sin(t) - sin(6 * t)) / div + h;
    vertex(x, y);
  }
  endShape(CLOSE);
    
}

function mouseClicked() { // petal color changes upon mouseClick
  var colNum = int(random(1,4));
    if (colNum == 1) {
      colorR = 167;
      colorG = 168;
      colorB = 212;
    }
    else if (colNum == 2) {
      colorR = 207;
      colorG = 61;
      colorB = 160;
    }
    else if (colNum == 3) {
      colorR = 90;
      colorG = 76;
      colorB = 181;
    }
}

For this week’s project, I first thought of flower petals when I was looking at the possible curves. I looked up flower petals and liked the colors and shapes of these, so I used ranuncloid curves to create them. Ranuncloid curves are essentially epicycloids with 5 cusps. For interactivity, I thought it would be interesting to make the flower “grow” using the mouseY position as well as randomly alternate between the flower colors depicted above with mouse clicks. I purposely had the flowers overlap with each other at its largest size because I thought that it formed an interesting pattern.