sketch

/*
Victoria Reiter
vreiter@andrew.cmu.edu
Section B
Final Project
*/

var mapImage; // loads map background
var toggledOn; // makes country bio appear
var countryVicinity; // maximum distance possible between mouseX/Y and country position
var countries = []; // array to contain all countries
var whichSelected; // array value of selected country

// preloads map image background
function preload() {
    mapImage = loadImage("https://i.imgur.com/z6ty1Bi.png");
}

// creates each country as an object and pushes them into an array
// each country has a color, location, and image it will pop up with
function setup() {
    createCanvas(1300, 659);
    background(220);

    var america = {
        color: color(255, 255, 191),
        x: 120,
        y: 200,
        img: loadImage("https://i.imgur.com/8SMqOU4.jpg2")
    }
    countries.push(america);

    var argentina = {
        color: color(8, 104, 172),
        x: 360,
        y: 550,
        img: loadImage("https://i.imgur.com/Nk7xX52.jpg")
    }
    countries.push(argentina);

    var chile = {
        color: color(8, 64, 129),
        x: 320,
        y: 570,
        img: loadImage("https://i.imgur.com/WxdaXfL.jpg")
    }
    countries.push(chile);

    var uruguay = {
        color: color(43, 140, 190),
        x: 420,
        y: 544,
        img: loadImage("https://i.imgur.com/tp7dzBB.jpg")
    }
    countries.push(uruguay);

    var peru = {
        color: color(78, 179, 211),
        x: 340,
        y: 455,
        img: loadImage("https://i.imgur.com/sielvnG.jpg")
    }
    countries.push(peru);

    var germany = {
        color: color(33, 102, 172),
        x: 620,
        y: 200,
        img: loadImage("https://i.imgur.com/FVOB4HK.jpg")
    }
    countries.push(germany);

    var france = {
        color: color(54, 144, 192),
        x: 550,
        y: 230,
        img: loadImage("https://i.imgur.com/ha2K51p.jpg")
    }
    countries.push(france);

    var italy = {
        color: color(166, 189, 219),
        x: 640,
        y: 230,
        img: loadImage("https://i.imgur.com/HNDsgLP.jpg")
    }
    countries.push(italy);

    var britain = {
        color: color(5, 112, 176),
        x: 565,
        y: 175,
        img: loadImage("https://i.imgur.com/D7O2fRO.jpg")
    }
    countries.push(britain);

    var australia = {
        color: color(190, 186, 218),
        x: 1105,
        y: 530,
        img: loadImage("https://i.imgur.com/CgUYnxQ.jpg")
    }
    countries.push(australia);

    var newZealand = {
        color: color(142, 56, 142),
        x: 1235,
        y: 595,
        img: loadImage("https://i.imgur.com/yxATqNk.jpg")
    }
    countries.push(newZealand);

    var cameroon = {
        color: color(129, 15, 124),
        x: 650,
        y: 400,
        img: loadImage("https://i.imgur.com/emVJlxl.jpg")
    }
    countries.push(cameroon);

    var nicaragua = {
        color: color(2, 56, 88),
        x: 300,
        y: 363,
        img: loadImage("https://i.imgur.com/4A0bQxr.jpg")
    }
    countries.push(nicaragua);

    var canada = {
        color: color(4, 90, 141),
        x: 260,
        y: 125,
        img: loadImage("https://i.imgur.com/y1fFIh0.jpg")
    }
    countries.push(canada);

    var moldova = {
        color: color(158, 80, 170),
        x: 715,
        y: 220,
        img: loadImage("https://i.imgur.com/fJimQz7.jpg")
    }
    countries.push(moldova);

    var spain = {
        color: color(116, 169, 207),
        x: 585,
        y: 250,
        img: loadImage("https://i.imgur.com/KXOKjpW.jpg")
    }
    countries.push(spain);

    var china = {
        color: color(146, 197, 222),
        x: 975,
        y: 265,
        img: loadImage("https://i.imgur.com/Tjr5PL6.jpg")
    }
    countries.push(china);

    var haiti = {
        color: color(141, 10, 135),
        x: 220,
        y: 330,
        img: loadImage("https://i.imgur.com/VhYa9Fp.jpg")
    }
    countries.push(haiti);

    var hongKong = {
        color: color(74, 126, 195),
        x: 975,
        y: 330,
        img: loadImage("https://i.imgur.com/jvpeMbE.jpg")
    }
    countries.push(hongKong);

    var indonesia = {
        color: color(152, 78, 163),
        x: 1040,
        y: 430,
        img: loadImage("https://i.imgur.com/rdBJk16.jpg")
    }
    countries.push(indonesia);

    var nepal = {
        color: color(140, 107, 177),
        x: 910,
        y: 300,
        img: loadImage("https://i.imgur.com/HOfUeU2.jpg")
    }
    countries.push(nepal);

    var ecuador = {
        color: color(158, 188, 218),
        x: 300,
        y: 430,
        img: loadImage("https://i.imgur.com/gEO6bcG.jpg")
    }
    countries.push(ecuador);
}

function draw() {
    image(mapImage, 0, 0);
    
    // rectangle pop up of information will pop up if toggledOn is turned on
    if (toggledOn) {
        image(countries[whichSelected].img, 200, 25, width - 400, height - 25);

    }
}

// based on location and pixel color, the specific country will be identified
function mousePressed() {
    toggledOn = false;
    countryVicinity = 200;
    var colorAtMouseX = mapImage.get(mouseX, mouseY);
    var transformedColorAtMouseX = color(colorAtMouseX[0], colorAtMouseX[1], colorAtMouseX[2], colorAtMouseX[3]); 
    //whichSelected = what? your if statement is essentially going to check which item in the array of countries is the right one!
    for(var i = 0; i < countries.length; i++) {
        if ((dist(countries[i].x, countries[i].y, mouseX, mouseY) < countryVicinity)) {
            // print((countries[i].color).toString());
            // print((transformedColorAtMouseX).toString());
            if ((countries[i].color).toString() == transformedColorAtMouseX.toString()) {
                whichSelected = i;
                toggledOn = true;
            }
        }

    }
}

My final project! An interactive map of places I’ve been and places where I know people from. Click a country and explore what I’ve explored!

For my final project I’d like to do something that would be personally intimate to me and that I can add onto throughout time and go back to and reminisce on.

That’s why for my final project I would like to design an interactive personalized map of the places I’ve been!

In my room I have a map with little pins sticking out in different colors– yellow for my “home bases” (Pittsburgh and Rochester), blue for the countries I’ve been, purple for places where I have friends, green for weird places my plane has made emergency stops haha, and red for the destination I will go to next.

I want to create something colored in a similar but simplifies way, where when the mouse clicks on a certain region it will pop up with a picture from when I was there and a description of when I went/the place/etc. // a picture and description written by a friend from that place.

I think this would be a cool way to share with people where I’ve been, as well as serve as a small ribbon connecting the people all over the world who I’ve met.

In this Looking Outward post I investigated some interactive maps that exist.

Nancy Milholland’s San Francisco Public Art Map

Something I’ve recently spent some time learning and thinking about is that geography and cartography are not static things — they are fluid and can be utilized to show more than just topography and physical location, but culture and thoughts.

I found this in the San Francisco Public Art Map designed by Nancy Milholland.

Milholland uses a combination of official sources, such as the municipal planning department and arts commission, the SF Mural Arts program, and unofficial sources like Flickr, Instagram and YouTube. This allows her to document not only art officially recognized by the government, that was perhaps governmentally or privately funded, but also art erected more casually and personally.

I think what makes this project so powerful is the community-aspect of it. People within the community can contribute to finding and updating where there is art in the city, creating a richer knowledge-base than a more formal assessment that would exclude many less officially created art pieces. In this way, the map can grow and develop and reflect the people who live within its geographic area.

Ai Wei Wei’s Good Fences Make Good Neighbors interactive map

The second project I took inspiration from was Ai Wei Wei’s Good Fences Make Good Neighbors interactive map.

This map allows viewers to explore Ai’s New York City-wide exhibition online by clicking around to the different art pieces he has set up around the city. After selecting one, you can read more about where the inspiration for the piece is from (each piece represents a portrait of an immigrant or refugee who came to America at different points in history and from different places). The map also links to directions so you can physically go and see the piece in person.

This map is very personal also, because the pieces reflect the stories and experiences of individuals. Each place is not just a physical location, but a story.

I like the idea of personalizing a map, and having it reflect something about yourself, your community, etc., and I hope to use this inspiration for my final project.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Assignment-10-b
*/

// makes turtle
var turtle;
// angle for the pretty plant design thing!
var chooseAngle = 200;

//makes plus shape
function plus() {
        turtle.penDown();
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
}

function setup() {
    createCanvas(600, 400);
    background(80, 0, 255);
    // makes turtle at center of canvas
    turtle = makeTurtle(width / 2, height / 2);
    turtle.setColor(color(202, 255, 112, 80));
    turtle.setWeight(.25);
    turtle.penUp();    
}

function draw() {
    plus(20, 30);
    for (var i = 0; i < 100; i++) {
        var distt = mouseX / 7;
        turtle.penUp();
        turtle.forward(distt);
        plus();
        turtle.penUp();
        // returns turtle to center so it progressively moves greater distances
        turtle.back(distt);
        // rotates by golden angle
        turtle.left(chooseAngle);
    }

}


// --------------------------------
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

///GRACE DAY TAKEN///

For this week’s project I took inspiration from the “golden angle” and natural angles of plants and things in nature from last week. I wanted to know what it would be like if I manipulated it to work through an angle of my choosing, and other aspects of my choosing, such as a plus shape instead of hexagons. I made the stroke weight very fine and the opacity more sheer to add added effects. I also introduced animation by incorporating variation with mouseX.

I think this design is interesting because as you move the mouse, it looks as though there is a flower itself in the middle rotating around and around, but really it’s just the shapes building on themselves. How interesting!

((This is unrelated but I went to the Children’s Museum today and saw the Letter Rain mentioned in the Deliverables for the week and that wE. cOdED. so I thought that was cool! Here’s a quick picture just for fun hehehe))

Kling Klang Machine

This week in my Looking Outwards post I am investigating an interactive app created by British electronic pop group Kraftwerk. The app is called “Kling Klang Machine No1”, a reference to the elusive and undisclosed studio where the group produces their music.

The app’s map registers which time zone the user is in, and uses algorithms to make a custom tune based on this location and timezone, meaning that the same song with never be heard at a different time or place. Users can also tweak aspects such as volume, echo, and tune, or even choose a different region in which to listen to a composition.

Example video of “Kling Klang Machine No1”

I think this app is cool because of how specific it is to each region and time. I love travelling hehehe…so it would be cool to have another way to experience different places, by experiencing the different custom music generated there!

Kraftwerk’s website found here, and

Kling Klang Machine details found here.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project 10 - Generative Landscape
*/

// array that holds flower objects
var flowers = [];
var terrainSpeed = 0.0005;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.005;
var image0;
var image1;
var image2;


function preload() {
    image0 = loadImage("https://i.imgur.com/qqE2J0x.png?1");
    image1 = loadImage("https://i.imgur.com/4xXEj18.png");
    image2 = loadImage("https://i.imgur.com/j45lLa7.png");
}

function setup() {
    createCanvas(480, 480); 
    // creates an initial collection of flowers
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        flowers[i] = makeFlowers(rx);
    }
    frameRate(10);
}


function draw() {
    // loads image as background
    image(image2, 0, 0, width * 2, height * 2);
    // start mountains
    push();
    noStroke();
    //purpl-ish color
    fill(51, 0, 51); 
    beginShape(); 
    for (var mx = 0; mx < width; mx++) {
        var t = (mx * terrainDetail) + (millis() * terrainSpeed2);
        var my = map(noise(t), 0,1, height / 10, height - 90);
        vertex(mx, my); 
    }
    // includes bottom corners of canvas to fill in the color of the shape
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop();
    //end mountains

    // begin grass
    push();
    noStroke();
    fill("green"); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height - height / 4, height - 80);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop()
    //end grass


    // drawing flowers
    updateAndDisplayflowers();
    removeflowersThatHaveSlippedOutOfView();
    addNewflowersWithSomeRandomProbability(); 

    // V flying on a turtle (eh why not?)
    flyingV(mouseX, mouseY);
}

// draws me flying on a turtle hehehe
function flyingV(x, y) {
    imageMode(CENTER);
    image(image1, x, y, 100, 80);
    image(image0, x - 15, y - 20, 200, 250);
}

// makes flowers appear on the grassy area
function updateAndDisplayflowers() {
    for (var i = 0; i < flowers.length; i++){
        flowers[i].move();
        flowers[i].display();
    }
}

    // If the flowers drop off the left edge, remove them from the array
function removeflowersThatHaveSlippedOutOfView(){
    var flowersToKeep = [];
    for (var i = 0; i < flowers.length; i++){
        if (flowers[i].x + flowers[i].breadth > 0) {
            flowersToKeep.push(flowers[i]);
        }
    }
    flowers = flowersToKeep; // remember the surviving flowers
}

function addNewflowersWithSomeRandomProbability() {
    // with a small probability add a new flower to the end.
    var newFlowersLikelihood = 0.8; 
    if (random(0, 1) < newFlowersLikelihood) {
        flowers.push(makeFlowers(width));
    }
}

// method to update position of flowers every frame
function flowersMove() {
    this.x += this.speed;
}
    
// draw the flowers baseed on my design from the wallpaper project!
function flowersDisplay() {
    push();
    translate(this.x, this.y);
    scale(.25);
    flowerStem(0, 0);
    flowerPetals(0, 0);
    stem(0, 0);
    leaves(15, -15);
    pop();
}

function makeFlowers(birthLocationX) {
    var flwr = {x: birthLocationX,
                y: random(height - 80, height),
                breadth: 50,
                speed: -8.0,
                nFloors: round(random(2,8)),
                move: flowersMove,
                display: flowersDisplay}
    return flwr;
}

// function to draw the stem
function stem(x, y) {
   strokeWeight(7);
    stroke(0, 155, 0);
    line(x, y, x + 85, y - 35);
}

// function to draw the leaves
function leaves(x, y) {
    noStroke();
    // leaf color
    fill(0, 190, 0);
    // actual leaves
    ellipse(x, y - 1, 24, 10);
    ellipse(x + 25, y + 9, 24, 10);
    ellipse(x + 21, y - 10, 24, 10);
    strokeWeight(2);
    // leaf vein color
    stroke(100, 230, 100);
    // each leaf also has a little line to represent its veins
    line(x - 12, y - 1, x + 12, y - 1);
    line(x + 13, y + 9, x + 37, y + 9);
    line(x + 9, y - 10, x + 33, y - 10);
}

// function to draw the stems branching to the petals
function flowerStem(x, y) {
    strokeWeight(4);
    stroke(0, 190, 0);
    // actual stem
    line(x + 56, y - 27, x + 46, y - 43);
    // each stem also has a little bulb
    ellipse(x + 46, y - 43, 7, 7);
    line(x + 55, y - 18, x + 72, y + 2);
    ellipse(x + 72, y + 2, 8);
    line(x + 70, y - 33, x + 78, y - 60);
    ellipse(x + 78, y - 60, 8);
    line(x + 79, y - 28, x + 100, y - 3);
    ellipse(x + 100, y - 3, 10);
    line(x + 85, y - 35, x + 105, y - 57);
    ellipse(x + 105, y - 57, 11);
}

// function to draw flower petals
function flowerPetals(x, y) {
    noStroke();
    // main petal color
    fill(255, 125, 165);
    // petal 1
    ellipse(x + 43, y - 55, 23);
    //petal 2
    ellipse(x + 75, y + 12, 25);
    //petal 3
    ellipse(x + 74, y - 70, 20);
    // petal 4
    ellipse(x + 104, y + 10, 21);
    // petal 5
    ellipse(x + 108, y - 70, 27);
    fill(255, 65, 105);
    // sub-petal 1
    ellipse(x + 39, y - 45, 13);
    ellipse(x + 52, y - 55, 11);
    // sub-petal 2
    ellipse(x + 67, y + 6, 13);
    ellipse(x + 81, y + 4, 10);
    ellipse(x + 64, y + 15, 11);
    // sub-petal 3
    ellipse(x + 70, y - 61, 16);
    // sub-petal 4
    ellipse(x + 100, y + 5, 12);
    ellipse(x + 112, y + 8, 9);
    // sub-petal 5
    ellipse(x + 97, y - 63, 14);
    ellipse(x + 109, y - 58, 10);
    ellipse(x + 119, y - 64, 13);
    // detail color in petals
    fill(185, 0, 25);
    // sub-sub-petal 1
    ellipse(x + 32, y - 50, 9);
    ellipse(x + 48, y - 50, 8);
    // sub-sub-petal 2
    ellipse(x + 64, y + 2, 8);
    ellipse(x + 74, y + 4, 10);
    ellipse(x + 60, y + 9, 8);
    //sub-sub-petal 3
    ellipse(x + 78, y - 65, 13);
    ellipse(x + 62, y - 67, 8);
    // sub-sub-petal 4
    ellipse(x + 92, y + 9, 8);
    ellipse(x + 108, y + 5, 9);
    // sub-sub-petal 5
    ellipse(x + 102, y - 60, 9);
    ellipse(x + 90, y - 65, 10);
    // other detail color in petals
    fill(255, 205, 205);
    // many sub petals 1
    ellipse(x + 40, y - 67, 11);
    ellipse(x + 52, y - 60, 8);
    // many sub petals 2
    ellipse(x + 64, y + 16, 8);
    ellipse(x + 77, y + 9, 10);
    ellipse(x + 67, y + 23, 7);
    // many sub petals 3
    ellipse(x + 78, y - 79, 10);
    ellipse(x + 66, y - 71, 8);
    // many sub-petals 4
    ellipse(x + 94, y + 18, 12);
    ellipse(x + 114, y + 14, 9);
    // many sub-petals 5
    ellipse(x + 103, y - 69, 9);
    ellipse(x + 90, y - 64, 8);
    ellipse(x + 121, y - 74, 10);
}

In this project I decided to represent a sort of dream-sequence. I am riding on a turtle’s back…..for whatever reason, flying through a trippy dream-scape. I incorporated my flower design from the wallpaper project because I really like it, it represents some sentimental value, and for these reasons seems quite fitting in a personal dream-world. I love the mountains so flying through the mountains would be a dream of mine.

I had a lot of other plans for things I wanted to include in this project, and I spent a bunch of hours trying to figure it all out and work things out, but I just hit obstacle after obstacle when I couldn’t find where I was committing errors, and had to abandon some of my plans.

Kristin Neidlinger Augmented Fashion Designer

This week I chose the augmented fashion designer Kristin Neidlinger as the focus for my Looking Outwards post. I thought that her work was really interesting, because it combines a lot of different sectors that may not seem like they relate to each other.

Kristin is no doubt a fashion designer, as you can see by the elegant design of her clothes, but she also makes use of code and scientific technology. This “Goosebump Poof” is embedded with biosensors that track mood through heart rate, excitement (GSR), and breath. Thus, Neidlinger also utilizes elements of the human body, itself a complex system albeit a natural when compared to computing and technology.

Furthermore, Neidlinger’s projects really contribute something to their wearers. This project allows people to intimately self-reflect, and be in touch with their own emotions, feelings, and memories, also something that may seem to be juxtaposed with technology. Another one of her projects is a corset that detects stress levels and constricts in order to relax its wearer.

What’s even more is that her projects are made out of recycled materials!

Full info on the project can be found here!

This week I looked at the Looking Outwards post of my classmate Samantha (October 5th, 2018), from her Week 6 Looking Outwards post. In this post, she reviews the Randomly Generated Insect Species project created by Chaotic Atmospheres, specifically Geneva-based artist Istvan.

Istvan created several species with distinct characteristics, such as a certain number of legs, wings, etc. as the basis for his insects, then adjusted parameters on deformers to allow for the variations between species.

I think his project is interesting because all his insects, although distinct, follow a similar aesthetic style, making them look like they really do all come from some like alternate planet…or DIMENSION.

I also found out that he posts his insects as trade-able art trading cards on the website NeonMob, which I thought was really cool!

A bio on Istvan can be found here.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-09-Portrait
*/

var img;

// preoloads photo of my friend Shirley!
function preload() {
    var myImgURL = "https://i.imgur.com/n0vEZ2z.png?2";
    img = loadImage(myImgURL);
}


function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    background(89, 10, 201);
    imageMode(CENTER);
    img.loadPixels();
}

function draw() {
    // chooses a random x value located near the cursor
    var randomX = floor(random(mouseX - 15, mouseX + 15));
    // chooses a random y value located near the cursor
    var randomY = floor(random(mouseY - 15, mouseY + 15));
    // selects the color from a pixel at a random point near the cursor
    fill(img.get(randomX, randomY));
    // draws a flower at that point
    flower(randomX, randomY);
}

// creates flower shape
function flower(x, y) {
    push();
    noStroke();
    translate(x, y);
    ellipse(0, 2, 2, 6);
    rotate(45);
    ellipse(5, 0, 2, 6);
    rotate(90);
    ellipse(5, 0, 2, 6);
    rotate(135);
    ellipse(-8, 5, 2, 6);
    rotate(180);
    ellipse(8, 4, 2, 6);
    rotate(225);
    ellipse(-6, 11, 2, 6);
    rotate(270);
    ellipse(-6, -11, 2, 6);
    rotate(-45);
    ellipse(0, -13, 2, 6);
    pop();
}

这个周末我决定了创造我的朋友Shirley的画像。因为她很艺术的，所以我觉得可能是最好的题材。她很优雅的，所以我决定了创造花来代表这个她的性格的方面。她是我在上海留学的时候的语伴，现在在墨尔本，澳大利亚上大学。你好Shirley！！

This week I decided to make a portrait of my friend Shirley. She is very artistic, so I thought she would be the perfect subject for the project. She is very pretty and elegant, so I decided to create flowers to represent this aspect of her personality. She was my language partner when I studied abroad in Shanghai, and now she attends school in Melbourne, Australia. Hi Shirley!!

I added an aspect where you use the mouse to “paint” the flowers on the screen, and thus be able to control how the portrait is revealed. I think this is interesting, because it allows you to decide how you explore the portrait, and makes the process feel a little more intimate. You can also draw with the mouse in the earlier frames and create swirls and shapes on the screen by revealing the colors of the portrait below.

Moritz Stefaner “Truth and Beauty”

Moritz Stefaner is a German data visualization specialist. He used to work in the weapons industry, before changing careers to work in cognitive science. He now focuses on data visualization. Among his notable projects is creating a data visualization for nations of the OECD. He focuses on how to best represent how people interact with and can better understand data.

I am very interested in Moritz’s contributions to the Better Life Index, which helps to visually demonstrate which countries are the most livable in the world based upon 11 criteria. I think this is interesting particularly in contrast to his background in weaponry. For one thing, “Better Life” just sounds like a peaceful thing. For another thing, design conceptually draws heavily upon art and aesthetics as well as functionality, which to me, in such design as data visualization which is intangible and thus not physically destructive, I think these aspects juxtapose his background work.

I like Stefaner’s demeanor in his presentation, as he seems very comfortable and friendly with the crowd. He seems very humble, and took time to think about what aspects of his work the audience would be most interested in hearing about, rather than just praising his own accomplishments on stage. I think it is important to remember to let your work speak for itself when you are presenting it.

You can find more information on Stefaner at his website here.

Full video of his lecture below:

Stefaner presenting at Eyeo “Truth and Beauty”