Section D – Page 19 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

ghou-Project-07-Curves

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 07


//global vars
var points;
var angle;


function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    frameRate(70);
}

function draw() {
    background(50);
    //curves changing w mouse
    points = map(mouseX, 0, width, 0, 300);
    angle = map((mouseX+mouseY/2), 0, width, 0, 360);
    
    
    //flickering colourful shadows
    stroke(random(230,255),random(230,255),random(230,255));
    drawCurve(width/2 + random(-5,5), height/2 + random(-5,5));
    
    stroke(random(200,240),random(200,240),random(200,240));
    drawCurve(width/2 + random(-10, 10), height/2 + random(-10, 10));
    
    stroke(random(180,220),random(180,220),random(180,220));
    drawCurve(width/2 + random(-15, 15), height/2 + random(-15, 15));
    
    stroke(random(150,200),random(150,200),random(150,200));
    drawCurve(width/2 + random(-20, 20), height/2 + random(-20, 20));
    
    stroke(random(100,180),random(100,180),random(100,180));
    drawCurve(width/2 + random(-30, 20), height/2 + random(-30, 20));
    
    stroke(random(80,150),random(80,150),random(80,150));
    drawCurve(width/2 + random(-30, 20), height/2 + random(-30, 20));
    
    //main shape
    stroke(255);
    noFill();
    drawCurve(width/2, height/2);
}

function drawCurve(posX, posY) {
  var x;
  var y;
  var b = map(mouseY, 0, 480, 60, 80);

  strokeWeight(1);
  noFill();

  push();
  translate(posX, posY);
  rotate(angle);
  //variation on fermat's spiral
  beginShape();
  for (var i = 0; i < points; i++) {
    x = 3*cos(2*i*.1*i)*b;
    y = 3*-sin(2*i*.1*i)*b;
    vertex(x, y);
      
  }
  endShape(CLOSE);
  pop();
}

After forgetting math I did in high-school I had to do a lot of studying and research on the different functions to create this interactive curve.

I was looking at spirals when I came across my concept. My variation generates lines to create a polygon in the shape of a circle and connects lines through the vertices through the polygon.

These are the “basic” shapes that my code generates. I created some shadow forms behind it to make it look more aesthetic.

Platts is a data visualization project created by U.K. designer Brendan Dawes in 2017 which visualizes “the journey of over 3000 ships created from five months of historical shipping data.”It was created for the Igloo 360 degree wrap-around projection system. The map of the world in this piece is created with little dots that grow over the course of the video. I find it fascinating to see how connected the world is in terms of the way we exchange products and exports, but also realize how disconnected I feel I am to that same world.

This project reminds me a lot of the travel and migration patterns of animals. I love this visualization of ship routes because it reduces human life to a simpler, objective level. The ship moves from Country A to Country B while experiencing some weather difficulties along the way. No opinion is needed with simple facts like these. And so I find it comforting to see the life in this way because it shows how insignificant and small humans are, even if we sometimes act like we’re the universe’s royalty.

danakim-LookingOutwards-07

eCLOUD (2007); Dan Goods

The eCLOUD is a permanent installation between gates 22 and 23 at the San Jose International Airport. It is a dynamic sculpture that mimics the volume and behavior of a cloud. The sculpture is made of polycarbonate tiles that change its transparency levels according to real time weather from around the world. A dynamic display shows which city the eCLOUD is displaying and it’s current weather data in real time.The eCLOUD was designed by Dan Goods, Nik Hafermaas and Aaron Koblin.

I admire the project’s sensitivity to it’s environment. The designers did a nice job of finding the right balance between simplicity and complexity to make sure that the installation relates back to its surrounding environment and is not obnoxious. I admire that the installation itself is informative and has a function within the space.

eCLOUD

creyes1-LookingOutwards-07

Back in 2016, design firm CLEVER°FRANKE and fashion brand Byborre collaborated with Red Bull on their “RedBull Playrooms” event in order to track and visualize various datapoints in a club setting. Wearing bracelets designed by Byborre that monitored clubgoers’ movement, temperature, and excitement, visualizations of that data were generated using Processing and the Adobe Creative Suite in order to create both live animations that were projected on screens throughout the night, as well as a personalized printed “Flight of the Night,” which showed how a particular clubgoer spent their night – which rooms they frequented, which songs got them the most excited, and so on.

<br><em>Samples of live visualizations during the event</em>

What I found interesting about this project was that clubgoers were receiving feedback as to how the night was going in real time, which is both interesting for the partygoer, and helpful in understanding what about an event is the most engaging and effective, allowing for better planning and overall better experiences. While it’s fun to see this in a recreational club setting, I’m curious to see what would come from applying the same technology and visualization practices to other settings, and if that data could be used to improve those spaces and experiences.

More work by CLEVER°FRANKE can be found on Behance or on their website.

yunzhous-LookingOutward-07

Swedish Morality

The is a project done by Skye Moret in 2017 to visualize 264 years of Swedish mortality. This is a unconventional yet visually pleasing and intuitionistic diagram. I particularity appreciate two aspects of it: it uses not only the conventional x, y axis, but also incorporate z-axis to make the chart 3D. Also, the visualization is not only a still image, but a motion that rotates the perspective, and shows the timeline step by step. With computers we can explore many ways to demonstrate and convey data. Moret’s choice of color, gradient, and the shadow effect, all demonstrate her artistic sensibility.

The software Moret used is Processing—a free and “flexible software sketchbook and language for learning how to code within the context of visual arts.” It has amazing mapping data to visual attributes that allow users to change aspects such as opacity, color, and perspective.

You can read more here

ghou-lookingoutwards-07

This week I will be looking at Rachel Binx and exploring the way she graphically represent data. She is also the author of Meshu, ManyMaps, Cliffs&Coasts, and Gifpop. Binx is currently working with the Content Science and Algorithms team in Los Angeles in Netflix.

Many of the projects she has led and produced before creatively interprets and represent data. Such as NASAJPL Vortex, Mapzen Metro Extracts, New York Times Internal Dashboard, Harvard Library Haystacks, Healthy Los Angeles, and many others.

For example, the Harvard Library Haystacks displays items in the Harvard Library by categories.

This is a graphical representation of the categories in the library displaying them in shapes and colours so it is easier to interpret.

The NASAJPL Vortex is a project that Rachel Binx lead including project and visual design and then later management.

This project, for example, is built in React and d3.js.

aranders-project-07

//Anna Anderson
//Section D
//aranders@andrew.cmu.edu
//project-07

var nPoints = 100;

function setup() {
  createCanvas(400, 400);
  frameRate(10);
}

function draw() {
  background(250, 250, 200);
  textSize(25);
  text("GOOD", width / 2 - 38, 40);
  text("LUCK", width / 2 - 33, 380);
  push();
  noStroke();
  translate(width / 2, height / 2);
  drawquadrifolium();
  pop();
}

function drawquadrifolium() {
  var x;
  var y;
  var r;
  var a = constrain(mouseX, 5, 230);

  fill(0, 153, 51);
  beginShape();
  for (var i = 0; i < nPoints; i++) {
    var t = map(i, 0, nPoints, 0, TWO_PI);
    r = a * sin(2 * t);
    x = r * cos(t);
    y = r * sin(t);
    vertex(x, y);
  }
  endShape(CLOSE);
}

I made this shape called a quadrifolium. I found it on the website which was given to us to look at curves. I knew what I wanted to do right when I saw it. It took me a while to get the hang of the different variables within the equation, but I ended up liking the project. The image is inspired by a four leaf clover for good luck. I could use some of that for the rest of this semester. Actually, for the rest of my life.

Jihee Kim_SectionD_Project-07-Curves

jiheek1_project7

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//Project 7 Curves
//section D

var backgroundRed;// Red value of background
var backgroundGreen = 245; // Green value of background
var backgroundBlue = 252;// Blue value of backgound

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

}


function draw(){
    background(backgroundRed, backgroundGreen, backgroundBlue);
    //The background color changes from light blue to light pink
    //when mouseY moves from top to bottom of canvas
    backgroundRed = map(mouseY, 0, height, 219, 255); //R value changes

    push();
    translate(width/4, height/3); //push over the generating point of curves
    for (var i = 1; i < 16; i++) { //loop from first to sixteenth value
        //show depth through color and lineweight
        stroke(map(i, 1, 5, 30, 120)); //the stroke turns from grey to lighter
                                       //grey as the curve moves away from
                                       //the focal point of curves
        strokeWeight(map(i, 1, 5, 0.3, 2)); //strokeWeight increases as curves
                                            //get further away from focal point
        //call the drawCurve function to draw curves
        drawCurve(i*2); //use 'i' as scale factor for spacing between curves
        rotate(PI/3); //rotate each time a curve is drawn
    }
    pop();
}


function drawCurve(scaleF) { //using 'i' as the scale factor (scaleF)
    var a = 15;
    var b = (map(mouseX, 0, width, -1, 1)); //the curves form a hypocycloid
                                            //when b(radius of rolling circle)
                                            //is negative, and a epicycloid
                                            //when the value is positive
    noFill();
    //start shape
    beginShape();

    for (var i = 0; i < 200; i++) { //a bigger max gives you a smoother curve
        var t = map(i, 0, 200, 0, 2*PI); //map 't' so that it only rotates
                                         //full circle once (2PI)
        var x = (a + b) * cos(t) - b * cos((a/b + 1) * t);
        var y = (a + b) * sin(t) - b * sin((a/b + 1) * t);
        vertex(scaleF*x, scaleF*y);
    }
    //end shape
    endShape(CLOSE); //this caps the beginning and the end
}

For this project, I created an interactive set of curves that were generated though a mathematical equation. I made it so that the shape that the curves form morphs from a hypocycloid to an epicycloid (left to right) depending on the position of the mouse.

Some other aspects that I manipulated so that the main theme, which is depth, is clear are lineweights, color, and spacing. Using for loops and mapping, I made it so that the stroke turns from grey to a lighter color on the greyscale as the curves move away from the focal point of curves. Moreover, the lineweight of these curves also increases as the curves get further away from the focal point.

The curves are supposed to look like a sky full of clouds when they are forming a hypocycloid, and a flower when they are forming a epicycloid. The background color varies with the y position of the mouse, adding to the intention behind incorporating both cyclodal curves, as well.

math equation source

Jihee Kim (Section D)– LookingOutwards-07

The Shadow Peace is a short film that presents the effects of nuclear war. Neil Halloran, one of the most brilliant data visualizers in the world created this video using custom software to quantify the consequences of nuclear war, as the possibility of it happening has been constantly increasing especially with tension building up between the US and North Korea. He compares trends like casualties in wars and bombing in the past with his software and depict them through visual elements.

scene from the short film that demonstrates data and its visualization

It is fascinating how Halloran communicates data through his short films so effectively. A lot of it has to do with the visually enticing elements of the video that are made possible by simple geometries that represent data, comparison (in this case Hiroshima bomb attack, etc.) and narration. More specifically, elements such as bar charts are thoughtfully used and placed (on timelines, globes, etc.) so that the viewers could put information and data into context. His approaches to data visualization show his focus on bestowing relevance to data sets that could have no meaning to some people.

Halloran certainly touches people’s senses through his data visualization so that global matters/issues like war do not feel so distant and irrelevant to people. He allows us to hear and see data -data that connects the people to the world through visualization.

For more information on The Shadow Peace, visit:
The Shadow Peace
An interview with the creator on the project can be found here:
The Shadow Peace Interview

daphnel-Looking Outwards-07

In 2014, the concept of creating an Atlas of Emotion through data visualization was created. Dalai Lama and Dr. Paul Ekman were inspired by their conversations with each other to create this Atlas. The concept for this was to create a map that would guide emotional travels and try to help them find their state of calm. The 5 main emotions considered are Anger, Sadness, Fear, Disgust and Enjoyment. I find this project very interesting and reflective of the creators themselves because although the map looks fairly simple, there was a lot of data put into this piece of work and it is a lot more meaningful than a regular map. I admire how much detail they put into the meaning of this map. Each of the five continents of emotion contain states which can lead to actions, triggers, moods and so forth. This project aims to bridge together the gap between the academic and personal.

Category: Section D