Final Project – Brandon Yi

sketch
ptx = [];
pty = [];
ptx2 = []; 
pty2 = [];
numberx = [];
numbery = [];
var d;
var angle;
var pieceNum;
var trapAngle = 360/17;
var r1 = 280;
var r2 = 180;
var bool = false;
var table;
var numRows;
var pages = {   
                title1: [], 
                minititle1: [],
                goal1: [],
                goal2: [],
                goal3: [],
                goal4: [],
                goal5: [],
                r: [0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],
                g: [72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],
                b: [108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],
            };
var logo;

function preload() {
    table = loadTable("17goalsdata.csv", "header");
    logo = loadImage("logo.png");
}

function setup() {
    createCanvas(1000,600);
    numRows = table.getRowCount();
    angleMode(DEGREES);
    imageMode(CENTER);

    for (var i = 0; i < 19; i++) {
        ptx[i] = r1*cos(7*trapAngle+((i+1)*trapAngle));
        pty[i] = r1*sin(7*trapAngle+((i+1)*trapAngle));
    }
    for (var i = 0; i < 19; i++) {
        ptx2[i] = r2*cos(7*trapAngle+((i+1)*trapAngle));
        pty2[i] = r2*sin(7*trapAngle+((i+1)*trapAngle));
    } 
    for (var i = 0; i < 19; i++) {
        numberx[i] = ((r1+r2)/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
        numbery[i] = ((r1+r2)/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
    }   

    for (var i = 0; i < numRows; i++) {
        pages.title1[i] = table.getString(i,"Title");
        pages.goal1[i] = table.getString(i,"Goal1")
        pages.goal2[i] = table.getString(i,"Goal2")
        pages.goal3[i] = table.getString(i,"Goal3")
        pages.goal4[i] = table.getString(i,"Goal4")
        pages.goal5[i] = table.getString(i,"Goal5")
        pages.minititle1[i] = table.getString(i,"MiniTitle");
    }
}

function draw() {
    push();
    translate(width/2,height/2);
    strokeWeight(10);
    noFill();
    background(220);
    image(logo,0,-20,1024*r1/879,r1);
    
    if (!bool) {
        for (var i = 0; i < 19; i++) {
            drawTrapezoid(i);
        }
        angle = atan2(mouseY - height/2,mouseX - width/2);
        pieceNum = 8+ceil(angle/(trapAngle));
        d = dist(width/2,height/2,mouseX,mouseY);
        menuSelector(d);
    }
    else {
        pop();

        if (d<r1 & d>r2) {
            if (pieceNum==0) {
                pieceNum=17;
            }
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);
            drawTitle(pages.title1[pieceNum-1],col);
            drawGoals(pages,60);
        }
        drawExitButton();
    }
}

function drawExitButton() {
    stroke(0);
    fill(200,0,0);
    rect(width-105,height-105,100,100,20);
    fill(0);
    strokeWeight(1);
    text("Back",width-75,height-50)
    noStroke();
}

function drawTitle(title1,col) {
    background(col);
    strokeWeight(10);
    stroke(0);
    line(5,5,width-5,5);
    line(5,5,5,height-5);
    line(5,height-5,width-5,height-5);
    line(width-5,height-5,width-5,5)
    strokeWeight(2);
    fill(255);
    rect(5,5,100,100,20);
    fill(0);
    strokeWeight(2);
    textSize(50);
    textAlign(CENTER)
    rectMode(CORNER);
    text(pieceNum, 50,65);
    textSize(40)
    noStroke();
    text(title1,120,25,840,300);
}

function drawGoals(pages,spacing) {
    fill(0);
    textAlign(LEFT)
    strokeWeight(2);
    textSize(30);
    text("By 2030:", 100,200-spacing,800);
    textSize(20);
    for (var i = 0; i < 5; i++) {
        text("Goal " + (i+1) + ":", 50, (i*spacing)+215);
    }
    text(pages.goal1[pieceNum-1],120,200,800);
    text(pages.goal2[pieceNum-1],120,200+spacing,800);
    text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);
    text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);
    text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);
}

function drawTrapezoid(i) {
    stroke(0);
    beginShape();    
    vertex(ptx2[i],pty2[i]);
    vertex(ptx2[i+1],pty2[i+1]);
    vertex(ptx[i+1],pty[i+1]);
    vertex(ptx[i],pty[i]);
    endShape(CLOSE);
    rectMode(CENTER);
    noStroke();
    if (i<18 & i>0) {
        fill(0);
        textSize(17);
        textAlign(CENTER);
        rectMode(CENTER);
        text(i,numberx[i],numbery[i])
        noFill();   
    }
    
    //rect(numberx[i],numbery[i],10,10);
    rectMode(CORNER);
}

function mousePressed() {
    if (d<r1 & d>r2) {
        bool = true;
    }
    if (mouseX>895 & mouseY>485) {
        bool = false;
    }
}

function menuSelector(d) {
    if (d<r1 & d>r2) {
        for (var i = 0; i <= 18; i++) {
            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])
            fill(col);
            ellipse(0,0,(2*r2)-5);
            noStroke();
            fill(0);
            //rectMode(CENTER);
            textSize(30)
            text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);
            fill(col);
            drawTrapezoid(pieceNum); 
        }
    }
}

Steps to Run Project:

  1. Go into “Final Project” folder
    a. Location: handin-14-finalproject –> btyi-14-project –> Final Project
  2. Navigating to this location in your console/commandprompt/etc.
  3. Run local host by typing [php -S localhost:8000] (may be different for non-Windows users)
  4. Type in localhost:8000 into your Google Chrome URL bar

Description:
My program is a simplified display of the 17 Sustainable Development Goals of the United Nations. Essentially, I have created a summary of all 17 Goals, which 5 of the sub-targets of each of these goals and created a display of all that information.
Inside the Brainstorming folder, I put different drafts and other ideas I had made prior to completing my final draft. I also put all the information that I collected from the UN website into separate notes sheets before I converted to Excel, so those are located in the brainstorming folder as well.

Inspiration:
Up until a couple of years ago, I had never heard of the 17 Sustainable Development Goals. Then when I learned about them, it surprised me that these goals weren’t more readily available and advertised worldwide. But when I looked into these 17 goals, I realized that there was so much content that was put on the website, that I had no idea where to start. Therefore, for this project, I wanted to create a summarized/simpler version of the UN’s website, with the basic and important information consolidated into one place.
If I had more time, I would probably have wanted to add a little more information to the display, as well as make the transitions smoother and make the appearance look more professional. Functionality-wise, if I had more time I think I would have liked to add more user interaction, such as different operations using different keys on the keyboard, or maybe some sliders and other user-oriented devices.

Window Gazing – Generative Landscape

sketch
var trunks = [];
var hills = [];
var mountains = [];
var noiseParam = 0;
var noiseStep = 0.01;
var clouds = [];
function setup() {
    createCanvas(640, 240); 

    //Trunks
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trunks[i] = makeTrunk(rx);
    }

   //Hills
    for (var i = 0; i <= width; i ++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height*1.5);
        hills.push(value-10);
        noiseParam += noiseStep;
    }

    //Mountains
    for (var i = 0; i <=width/5+1; i++) {
        var n = noise(noiseParam);
        var value = map(n,0,1,height*1/5,height*4/5);
        mountains.push(value);
        noiseParam += noiseStep;
    }

    //Clouds
    for (var i = 0; i < 10; i ++) {
        var cloudX = random(width);
        var cloudY = random(height/2, height);
        clouds[i] = makeClouds(cloudX, cloudY);
    }

    frameRate(60);
}


function draw() {
    background(191,234,255); 

    drawMountains();

    updateAndDisplayClouds();
    removeClouds();
    addNewClouds(); 

    drawHills();

    updateAndDisplayTrunks();
    removeTrunks();
    addNewTrunks(); 

    drawWindow();
}

function drawWindow() {
    //simple code used to draw window that viewer is looking through
    var border = 40
    stroke(141,171,223);
    noFill();
    strokeWeight(border);
    rect(border/2,border/2,width-border,height-border);
    stroke(220);
    strokeWeight(border/2)
    rect((border/2)+20,(border/2)+20,(width-border)-40,(height-border)-40,20);

}

//Updating position and displaying clouds
function updateAndDisplayClouds() {
    for (var i = 0; i < clouds.length; i ++) {
        clouds[i].move();
        clouds[i].display();
    }
}

//if the clouds reach the end of the screen, remove and replace in new array
function removeClouds() {
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

//based on set probability, add new cloud into array
function addNewClouds() {
    var newCloudLikelihood = 0.07; 
    if (random(0,1) < newCloudLikelihood) {
        var newcloudX = 640;
        var newcloudY = random(200);
        clouds.push(makeClouds(newcloudX, newcloudY));
    }
}

function makeClouds(CLOUDX, CLOUDY) {
    var cld = {x: CLOUDX,
             y: CLOUDY,
             speed: -5,
             move: cloudMove,
             display: cloudDisplay}
    return cld;
}

//moving clouds
function cloudMove() {
    this.x += this.speed;
}

//drawing of cloud
function cloudDisplay() {
    fill(255); // cream color
    noStroke();
    ellipse(this.x, this.y, 20, 30);
    ellipse(this.x, this.y, 20, 30);
    ellipse(this.x, this.y, 30, 10);
    ellipse(this.x, this.y, 10, 20);
    ellipse(this.x, this.y, 40, 20);
}

//hill drawing using Begin and End Shape
function drawHills() {
    noStroke();
    fill("green");
    
    beginShape();
    vertex(0, height);
    for (i = 0; i <= width/5 + 1; i += 1) {
        vertex(i*5, hills[i]);
        vertex((i+1)*5, hills[i+1]);
    }
    vertex(width, height);
    endShape();

    hills.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    hills.push(value);
    noiseParam += noiseStep;

}

//Mountains is variantion of hill code
function drawMountains() {
    noStroke();
    fill(161,178,158);
    
    beginShape();
    vertex(0, height);
    for (i = 0; i <= width/5 + 1; i += 1) {
        vertex(i*5, mountains[i]);
        vertex((i+1)*5, mountains[i+1]);
    }
    vertex(width, height);
    endShape();

    mountains.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    mountains.push(value);
    noiseParam += noiseStep;

}

//trunks in front of window being moved and displayed here
function updateAndDisplayTrunks(){
    for (var i = 0; i < trunks.length; i++){
        trunks[i].move();
        trunks[i].display();
    }
}

//if trunk leaves screen, remove and replace with another
function removeTrunks(){
    var trunksToKeep = [];
    for (var i = 0; i < trunks.length; i++){
        if (trunks[i].x + trunks[i].breadth > 0) {
            trunksToKeep.push(trunks[i]);
        }
    }
    trunks = trunksToKeep; 
}

//small probability of adding new trunk
function addNewTrunks() {
    var probability = 0.08; 
    if (random(0,1) < probability) {
        trunks.push(makeTrunk(width));
    }
}


// moving trunk along window as if "passing"
function TrunkMove() {
    this.x += this.speed;
}
    

// drawing of trunks
function TrunkDisplay() {
    noStroke();
    var tHeight = 0
    fill(102,60,11);  
    push();
    translate(this.x, height);
    rect(0, 0, this.breadth, -height);
    stroke(200); 
    pop();
}

function makeTrunk(birthLocationX) {
    var trnk = {x: birthLocationX,
                breadth: 40,
                speed: -7,
                move: TrunkMove,
                display: TrunkDisplay}
    return trnk;
}

This is my project on Generative landscapes. Using what I learned from class, I created an artistic interpretation of what it feels like to look out of the window of a moving vehicle.

Looking Outwards – 11

In this article, the reading introduces how AI addressed the skin color and hairstyles of African American people, and how new algorithms and programs are needed to better display their physical features. I think that after reading this article, I have realized the importance of addressing ethics and inclusion in modern-day technology. As the tech industry becomes more and more advanced, we have begun to develop new programs that can tackle problems similar to that of a human. Things like facial recognition and computer generative art begin to create and interpret different races in different ways. There are many different races in this world, all with unique characteristics, and we should do everything we can to ensure that there is no bias or subjectivity in our technology that has a bias towards any one race.

Article: AI & Creativity: Addressing Racial Bias in Computer Graphics

Project 09 – Portrait

sketch
//Brandon Yi
//btyi@andrew.cmu.edu
//Section A


//Initialization
var img;
var counter = 0;

//preload image
function preload() {
  img = loadImage('https://i.imgur.com/ox0pEHV.jpg');
}


function setup() {
  img.resize(img.width/5, img.height/5); //Resizing image
  createCanvas(img.width, img.height); //Canvas size based on image size
  imageMode(CENTER);
  rectMode(CENTER);
  textAlign(CENTER);
  noStroke();
  background(255);
  img.loadPixels(); 
}

//drawing shapes based on mouse position to imitate loaded image
function draw() {
  if (counter == 0) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY); //point color based on mouse position and image
    fill(pointcolor);
    rect(mouseX, mouseY, 15, 15); //draw rectangle in mouse position
  }
  else if (counter == 1) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    ellipse(mouseX, mouseY, 15, 15); //draw circle in mouse position
  }
  else if (counter == 2) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    rect(mouseX, mouseY, 30, 30);
  }
  else if (counter == 3) {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    ellipse(mouseX, mouseY, 30, 30);
  }
  else {
    settingNumber();
    var pointcolor = img.get(mouseX, mouseY);
    fill(pointcolor);
    rect(mouseX, mouseY, 50, 50);
  }
  
}

//Changing setting number and resetting canvas
function mousePressed() {
  counter++;
  counter = counter % 5;
  print(counter);
  background(255);
}

//Setting number in label
function settingNumber() {
    textSize(30);
    fill(0);
    rect(350, 590, 150, 50)
    fill(255);
    text("Setting " + (counter+1), 350, 600);
}

Looking Outwards – Week 9

Out of all the women artists in the list that was provided, the one the caught my attention the most was Milica Zec and her work in VR filmmaking. I watched some of her work and was hypnotized by the beautiful shots and imagery that she created in her work. I was fascinated by her work because I had never thought that VR could extend its way into the film industry. I have a VR setup at home, and I feel like the future of video games and media is flowing in the direction of Virtual reality, so to see Zec’s interesting work with VR film makes me excited to see where the future of VR will take us.

Milica Zec’s Work

Assignment-08-A: Mixies

sketch
//Brandon Yi
//btyi@andrew.cmu.edu
//Section A

// loading all links
var bodyLinks = [
    "http://i.imgur.com/5YM2aPE.jpg",
    "http://i.imgur.com/oKtGXfd.jpg",
    "http://i.imgur.com/Kvg75bG.jpg",
    "http://i.imgur.com/0FGzErn.jpg",
    "http://i.imgur.com/MJmlPt5.jpg",
    "http://i.imgur.com/VvX0k8e.jpg",
    "http://i.imgur.com/rLIOBoG.jpg",
    "http://i.imgur.com/q03Gko3.jpg",
    "http://i.imgur.com/BWpN5SP.jpg",
    "http://i.imgur.com/ft10TV3.jpg",
    "http://i.imgur.com/CGCZliN.jpg",
    "http://i.imgur.com/qrlc4dK.jpg"]
    
var feetLinks = [
    "http://i.imgur.com/oNSO0T6.jpg",
    "http://i.imgur.com/OWGETX7.jpg",
    "http://i.imgur.com/Zp29aVg.jpg",
    "http://i.imgur.com/AXLWZRR.jpg",
    "http://i.imgur.com/wgZq717.jpg",
    "http://i.imgur.com/sGVMEMw.jpg",
    "http://i.imgur.com/hfbrynH.jpg",
    "http://i.imgur.com/OOASUMM.jpg",
    "http://i.imgur.com/aqtIXi0.jpg",
    "http://i.imgur.com/Eu6ruPo.jpg",
    "http://i.imgur.com/mTSipwg.jpg",
    "http://i.imgur.com/1GzC4Zz.jpg"]
    
var headLinks = [
    "http://i.imgur.com/gBCZVuM.jpg",
    "http://i.imgur.com/YLOXAdH.jpg",
    "http://i.imgur.com/my3TqY7.jpg",
    "http://i.imgur.com/lvtIB9s.jpg",
    "http://i.imgur.com/gvDBfhO.jpg",
    "http://i.imgur.com/JEuJ2ER.jpg",
    "http://i.imgur.com/SbBOG1V.jpg",
    "http://i.imgur.com/cuJ5Ao1.jpg",
    "http://i.imgur.com/dqHjjig.jpg",
    "http://i.imgur.com/mcFUcHf.jpg",
    "http://i.imgur.com/0XKU9Dx.jpg",
    "http://i.imgur.com/sD1ArAR.jpg"]


//initializing arrays in problem

var headImages = [];
var bodyImages = [];
var feetImages = [];

var head = [];
var body = [];
var feet = [];

//loading links into images array 
function preload() {
    for (var i = 0; i <= 11; i++) {
        img = loadImage(headLinks[i]);
        headImages.push(img);
        img = loadImage(bodyLinks[i]);
        bodyImages.push(img);
        img = loadImage(feetLinks[i]);
        feetImages.push(img);
    }
}


function GenerateRandoms() {
    //loop for different "people"

    for (var i = 0; i <= 2; i++) {

        //generate random head image 
        r = int(random(0,11));
        head.push(headImages[r]);

        //check for repeats
        while (head[i] == head[i-1] || head[i] == head[i-2]) {
            head.pop();
            head.push(headImages[int(random(0,11))]);
        }

        //generate random body image
        r = int(random(0,11));
        body.push(bodyImages[r]);

        //check for repeats
        while (body[i] == body[i-1] || body[i] == body[i-2]) {
            body.pop();
            body.push(bodyImages[int(random(0,11))]);
        }

        //generate random feet image
        r = int(random(0,11));
        feet.push(feetImages[r]);

        //check for repeats
        while (feet[i] == feet[i-1] || feet[i] == feet[i-2]) {
            feet.pop();
            feet.push(feetImages[int(random(0,11))]);
        } 
    }

}

//setup canvas
function setup() {
    createCanvas(600, 450);
    background(220);
    GenerateRandoms();
}

function mousePressed() {

    //clearing different arrays based on different mouseY positions
    //generating new images for particular position
    if (mouseY<(height/3)) {
        head = [];
        GenerateRandoms();
    }
    else if (mouseY>=(height/3) & mouseY <=(2*height/3)) {
        body = [];
        GenerateRandoms();
    }
    else {
        feet = [];
        GenerateRandoms();
    }

    
}


//display new images in positions based on i
function draw() {
    for (var i = 0; i <= 2; i++) {
        image(head[i],i*200,0,200,150);
        image(body[i],i*200,150,200,150);
        image(feet[i],i*200,300,200,150);
    }
}

Looking Outwards – Adam Harvey

My speaker was Adam Harvey, who is an American artist and researcher based in Berlin. For college, he studied at Penn State for his bachelor’s in mechanical engineering, and at NYU for his master’s in computational photography and technology. Currently, he works in computer vision, digital imaging, facial recognition, and counter surveillance. His main work involves finding biases in facial recognition algorithms and working backwards to discover flaws in those various algorithms. While it sounds very simple, Adam’s work is incredibly important for our digital safety. Facial recognition is becoming extremely cheap to implement and combining that with the digital world producing so much free information, there is a wealth of data that is at the access of anyone at any time. Through Adam’s work, if he is able to better control and predict the way in which facial recognition will act, it will better protect us in the digital world.

In his presentation, he does a great job of connecting his pictures with his speech so that it doesn’t overload the listener with information. In addition, he does a great job of simplifying the content he is explaining, that makes it clear that he deeply understands what he is talking about, but he is giving just enough information to not overcomplicate it but make it simple enough to understand.

Link to the speaker’s website:  https://ahprojects.com/

Lecture video: https://vimeo.com/channels/eyeo2019

One of their projects that I admire: https://ahprojects.com/megapixels/

Project – Cardioid Visualization

sketch
//Brandon Yi
//btyi@andrew.cmu.edu
//Section A

// Cardioid Function

var points = 200; // number of points on circle
var rate; // coefficient
var r = 180; // radius of big circle
var count = 0;

function setup(){
  createCanvas(400, 400);
  frameRate(200);
  rate = 2;
}

function draw() {
  //basic settings 
  background(0);
  translate(width/2, height/2);

  //  Large White Circle
  stroke(255);
  fill(0);
  ellipse(0, 0 , r * 2, r * 2);

  // drawing lines based on cardioid shape 

  for(var i = 0; i < count; i++){

    var x = r * cos(i * TWO_PI/points);
    var y = r * sin(i * TWO_PI/points);

    var x2 = r * cos(i*rate * TWO_PI/points);
    var y2 = r * sin(i*rate * TWO_PI/points);

    //color gradient based on rate

    if (rate % 3 == 0) {
      stroke(i, 0, 255-i);
    }

    else if (rate%3 == 1) {
      stroke(0, i, 255-i);
    }

    else {
      stroke(i, 255-i, 0);
    }
    // drawing line
    line(x, y, x2, y2);
  }  

  //counter increases until count of 200 lines
  if(count <= points) {
    count += 1;
    frameRate(200);
  }

  //counter hits 200 -- cardioid coefficient increases + counter reset
  else {
    rate++;
    count = 0;
  }

  // coefficient reset
  if (rate >= 12) {
    rate = 2;
  }

  // brief pause 
  if(count == points) {
    frameRate(1);
  }

  
}

I wanted to combine what we did with the line drawings and the new curves that we were trying to draw. Though it took some thinking, I think my project turned out really well.

Looking Outwards

One of the projects I found very interesting has to be the ones done by “Martin Wattenberg” to help better visualize the information being processed by machine learning. One of the scariest things about machine learning is the idea of separating the human from the machine. In a way, the concept of “self-learning” machines is a scary one too many people, and often is portrayed as the end of humanity in various movies and TV shows. However, using the visualizations by Wattenberg, we are able to better understand what goes on inside the machine learning code and what kinds of decisions are being made. On top of helping us better understand the inner workings of machine learning code, Wattenberg also created a way for engineers and scientists to learn about machine learning systems. The future of automation and the tech industry seems to revolve around machine learning; however, it takes a lot of prior computer science knowledge to fully understand it. With this visualization, Wattenberg has made it much easier to visualize and conceptualize the powers of machine learning.

Machine Learning Visualization
“Tensorflow Playground” – allows users to play with a neural network and understand machine learning

Looking Outwards – 06

I have always been very interested in quantum computers. Out of all the quantum projects that are in progress right now, one of the most interesting is probably the quantum processor being built at Google. Their goal is to use this quantum processor to create “pure randomness”. The main idea around this randomness is derived from the fundamental concept in quantum physics, known as superposition. In quantum physics, superposition is referred to when the Qbits (quantum particles) exist in a state of being both 0 and 1 at the same time. While you are able to use quantum theory to calculate the probability of the bit being either 0 or 1, ultimately the particles in superposition are fundamentally random. With this level of pure randomness, it can help us make big strides in cybersecurity and encryption. In a world basically run by technology, it is important that we have a way of protecting ourselves from cyberattacks, and quantum processors may be the answer.

Google’s Quantum Computer