Looking Outwards 07: Information Visualization

Chris Harrison – Amazon Book Map (2008)

I really admired Chris Harrison’s project named Amazon Book Map. Which is basically a synthesis of the type of book data available on amazon. Every genre of book is color coded and displayed in a map format which looks more or less like a gradient. I really like the fact that the data is clustered on the map in the form of many small mosaics. I also enjoyed reading about the various approaches Harrison took in order to get to his final form, like making mosaics of the book covers. The fact that the map took 140 hours to be generated on wikiviz is also astonishing as it managed to map out more than 700,000 books on Amazon’s interface. The books began to cluster together because of their respective color codes, turning them into clusters of similar natured color dots and binding the entire map together.  I do not know much about the algorithms that generated this synthesized piece of art representing a particular data set, but I do admire the intricate details it depicts. In my opinion, the artist himself is confused whether the piece manifested his ideals and motives as he claimed it to be ‘hard to read’ however, I feel that it is a wonderful piece to look at which amalgamates an unconventional data set.

Link

Looking Outwards 07

This week I looked at CMU alum Chris Harrison’s project Search Clock. He created an algorithm that mapped what people use the internet for the most during every hour of the day. This stood out to me because we just made clock looking devices with code, this is just way cooler. I also have just spent the semester in an intense mapping class and am impressed by his visual simplification and efficiency in descriving multiple changing factors so consicely. He somehow found hourly data on average time spent on certain websites and generalized them into catagories, and converted the scale to years. I think it’s super visually stunning and am impressed with how innovative this representation of data is.

https://www.chrisharrison.net/index.php/Visualizations/SearchClock

week 6 blog

The article I ended up finding the most interesting wasn’t about a particular artist, it instead talked a bit about the history of randomness and then the application of randomness in art among other things now. One example that was given was in the field of architecture, randomness is used for things that are unimportant like blades of grass. But in other cases the randomness can be used to reveal patterns that were previously unnoticed or not given enough attention. Another example uses randomness to generate randomness which creates intrigue and surprise in designs. An example that I can think of is a website called coloors which uses random generation to create color palettes and when you save a color you like it bases the next colors off of that one. Although it isn’t completely random, it still is to some extent even if it does have limitations. I guess it’s more like a gaussian random function because it has some limitations that can be incorporated.

Week 5 blog

Roger Magrini is an artist that uses programs as well as manual correction to generate human faces that look insanely realistic. I was first introduced to his work by one of my friends in high school when they asked me to guess which of the people out of a set of pictures was a real person. The people are so fully rendered that it’s impossible to tell the difference between them and an actual person’s picture. I assume that the programs he runs have something to do with facial proportions and to get the final result he runs randomizers to combine traits, coloring, and proportions. I’m not sure how he is able to make the people look like people and take into account traits that usually come together like pale skin and freckles with lighter eyes etc because there are obviously exceptions to these groupings but I guess that’s all stuff that is much more complicated and stuff that is learned later on if I choose to continue to pursuing computing stuff related to rendering.

https://www.artstation.com/rogermagrini

Project 06: Abstract Clock

I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse’s beam rotates each minute and the lighthouse beam flashes each second.

sketch
//amyhu
//amhyhu@adrew.cmu.edu
//section d 

var h;  //hour
var m;  //minute
var s;  //second
var theta = 6; //angle to increase by each minute
var r = 500;    //radius of light beam

function setup() {
    createCanvas(450,450);
    background(220);
}

function draw() {
    background("lightblue");

    let h = hour();
    let m = minute();
    let s = second();

    //water level is hour 
    fill("blue");
    h = map(h,0,24,0,height);
    rect(0, height-h, width, height);


    //lighthouse object
    drawLighthouse();

    //island object
    drawIsland();

    //light beam speed is what minute it is
    push();
    translate(125,135);
    var x = r*cos(radians(theta*m));
    var y = r*sin(radians(theta*m));

    //light beam flashing every second
    if(s % 2 == 0){
        stroke("yellow");
        strokeWeight(18);
        line(0,0,x,y);   
    }else{
        stroke("white");
        strokeWeight(18);
        line(0,0,x,y);
    }
    pop();
}

function drawIsland(){
    fill("lightyellow");
    //noStroke();
    ellipse(0,height,500);
}

function drawLighthouse(){
    //rectMode(CENTER);
    //stroke(1);
    fill("white");
    rect(110,120,30,50);    //top white bit
    fill("red");
    rect(100,150,50,200);   //red
    fill("white");
    rect(100,170,50,20);    //white stripe
    fill("yellow");
    circle(125,135,20);      //light circle
}

SydneyCha-LookingOutwards-06

Colorful Randomness 1 by Dizzyline

Dizzyline is a freelance graphic design and illustration brand based in Montpellier, France.

This piece not only has a refreshing color palette, but also a “randomized” pattern that is equal parts chaotic and structured. Though it has elements that appear to be placed randomly, there is an underlying grid that gives the piece somewhat of a finished look.

The generated elements are confined by pseudo-random numbers that limit their maximum size. For example, the medium-sized circles and crescent shapes are limited to the squares within the grid, while smaller circles are aligned in straight rows.

LO 06: Randomness

The project Sprawl by Mark J. Stock intrigues me with the correlation between randomness and naturalistic inspired art. Mark J. Stock is a generative artist who combines nature and computation in his work. In this project, he creates an organic branching structure growing on a regular array of blocks. The algorithm used sets particles at specific points and uses a random walk algorithm to let them grow until they strike a part of the existing block structure. The generated art creates a natural like growth pattern but it is interesting to see how randomness can contrast and interact with regulated forms such as the block array. I find it intriguing that some parts of the grown pattern can become restrained and seem not random but other parts are chaotic and sparatic. Stock claims that “this contrast refers to the creeping growth of our built environment”.

Link

Looking Outwards 06: Randomness

For my blog I chose to look at Rami Hammour’s “A Text of Random Meaning.”

A text of Random Meaning (2015)

According to Hammour: “This text-like visualization is a mapping of a “Register and Taps” random number generator in action. The drawing compares three registers: 9, 11 and 13. It shows the difference in values, and counting of the generated numbers while highlighting the taps.”

As a person who loves orthography and considerations of language, this idea of a meaningless or random meaning text is fascinating. Semantics being such an important part of the way we understand language, how can we confront the randomness of meaning to a computer? How do we subconsciously assign meaning to these things? I think these questions are interesting to ponder, and while looking at this piece I found myself thinking quite a bit about that. It reminds me of similar pieces which attempt to recreate “language” in random forms. For instance the Library of Babel project, or Vulgarlang. Similarly, the use of random number generation (while not present in the Library of Babel or Vulgarlang) creates a sense of interconnected forms from which one might attempt to derive meaning. That is perhaps the most interesting part of randomness to me, to try to derive meaning from the noise, because undoubtedly what you find will never be the same twice. 

lo: randomness

Rather than a specific project or artist, I took interest in the random generator tools at the disposal to artists. One great example that I’ve used many times before is coolors.co . It randomly generates color palettes, with the ability to make palettes based on certain colors, color modes, and gradients. Tools like this strike a balance between true randomness and useful brainstorming in the creative process. Obviously, some colors are visually and mathematically better palettes than other, but within that bias there’s still an element of randomness, which can help with things like creative block and monotony in work. Other similar tools I’m familiar with as a design student are AI generated image and typography services, which strike a similar balance. I find all of these tools to be more interesting than truly random pieces of art, because they can be amazing aids in making new, but purposeful, art.

project 6: abstract clock

I chose to make a clock that signifies time visually with the symbols of the 12 constellations. I entertained the idea of a similar 12 hour system, but rather than using numbers, it aligned with what people see in the sky over the course of a year. I also switched what moved (the counters rotate over time vs a traditional clock where the hands do) just for fun.

astral clock
// isis berymon section D

function setup() {
    createCanvas(480, 480);
    background(55, 56, 87); //dark blue
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    push();
    translate(240, 240);
    if(h > 11){ //12 hour clock
        h = h-12;
    }
    rotate(radians((m+1)/-2+(-30*h))); //moves ccw every minute
    background(55, 56, 87); //dark blue
    clock();
    pop();
    if(s%2==0) { //pointer blinks every second
        noStroke();
        fill(240, 222, 91); // pale gold
        triangle(240, 30, 250, 0, 230, 0);
    }
}

function clock(){
    var angle = 0;
    stroke(240, 222, 91) //pale gold
    noFill();
    circle(0, 0, 480);
    for(var i = 0; i < 12; i++) { //12 spokes
        push();
        angle +=30;
        rotate(radians(angle));
        line(0, 0, 240, 0);
        pop();
    }
    //aries symbol
    push();
    rotate(radians(-315)); //center in between spokes
    beginShape();
    vertex(-10, -200);
    vertex(-20, -210);
    vertex(-10, -210);
    vertex(0, -200);
    vertex(0, -180);
    vertex(0, -200);
    vertex(10, -210);
    vertex(20, -210);
    vertex(10, -200);
    endShape();
    pop();
    //taurus
    push();
    rotate(radians(-285));
    circle(0, -190, 20);
    beginShape();
    vertex(-15, -210);
    vertex(-10, -210);
    vertex(0, -200);
    vertex(10, -210);
    vertex(15, -210);
    endShape();
    pop();
    //gemini
    push();
    rotate(radians(-255));
    beginShape(LINES);
    vertex(-10, -210);
    vertex(10, -210);
    vertex(-10, -190);
    vertex(10, -190);
    vertex(-4, -210);
    vertex(-4, -190);
    vertex(4, -210);
    vertex(4, -190);
    endShape();
    pop();
    //cancer
    push();
    rotate(radians(-225));
    circle(-10, -195, 10);
    circle( 10, -185, 10);
    line(-10, -200, 10, -200);
    line(10, -180, -10, -180);
    pop();
    //leo
    push();
    rotate(radians(-195));
    circle(-10, -190, 10);
    beginShape();
    vertex(-5, -190);
    vertex(-8, -210);
    vertex(5, -210);
    vertex(0, -185);
    vertex(10, -195);
    endShape();
    pop();
    //virgo
    push();
    rotate(radians(-165));
    beginShape();
    vertex(-20, -210);
    vertex(-15, -205);
    vertex(-15, -190);
    vertex(-15, -205);
    vertex(-10, -210);
    vertex(-5, -205);
    vertex(-5, -190);
    vertex(-5, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    endShape();
    beginShape();
    vertex(5, -200);
    vertex(10,-195);
    vertex(0, -185);
    endShape();
    pop();
    //libra
    push();
    rotate(radians(-135));
    line(-10, -190, 10, -190);
    beginShape();
    vertex(-10, -195);
    vertex(-2, -195);
    vertex(-8, -205);
    vertex(0, -210);
    vertex(8, -205);
    vertex(2, -195);
    vertex(10, -195);
    endShape();
    pop();
    //scorpio
    push();
    rotate(radians(-105));
    beginShape();
    vertex(-20, -210);
    vertex(-15, -205);
    vertex(-15, -190);
    vertex(-15, -205);
    vertex(-10, -210);
    vertex(-5, -205);
    vertex(-5, -190);
    vertex(-5, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    vertex(10, -190);
    endShape();
    pop();
    //sagittarius <3
    push();
    rotate(radians(-75));
    line(-10, -190, 10, -210);
    line(-5, -205, 5, -195);
    line(0, -208, 10, -210);
    line(10, -210, 10, -200);
    pop();
    //capricorn
    push();
    rotate(radians(-45));
    beginShape();
    vertex(-15, -210);
    vertex(-10, -205);
    vertex(-10, -190);
    vertex(-10, -205);
    vertex(0, -210);
    vertex(5, -205);
    vertex(5, -190);
    vertex(10, -190);
    vertex(7, -195);
    vertex(0, -190);
    endShape();
    pop();
    //aquarius
    push();
    rotate(radians(-15));
    beginShape();
    vertex(-10, -200);
    vertex(-5, -210);
    vertex(0, -200);
    vertex(5, -210);
    vertex(10, -200);
    endShape();
    beginShape();
    vertex(-10, -190);
    vertex(-5, -200);
    vertex(0, -190);
    vertex(5, -200);
    vertex(10, -190);
    endShape();
    pop();
    //pisces
    push();
    rotate(radians(15));
    line(-10, -210, 0, -200);
    line(0, -200, -10, -190);
    line(5, -200, 15, -190);
    line(5, -200, 15, -210);
    line(-5, -200, 10, -200);
    pop();
}