Project 6: Abstract Clock

(The illustration file wasn’t loading properly so I had to embed it twice!)

Since Nintendo recently announced that Hyrule Warriors: Age of Calamity is coming out soon, I decided to create a clock inspired by The Legend of Zelda’s Breath of the Wild. The sky changes color depending on the hour, the clouds move across the sky every minute, and pink sparkles appear every second.

breath of the wild
var dusk;
var dawn;
var sparkleX = [];
var sparkleY = [];
var randomW = [];
var randomH = [];
let yPerl = 0.0;

function preload() {
    mySon = loadImage("link_illustration.png");
}

function setup() {
    createCanvas(480, 300);
    //angleMode(DEGREES);

    greenDusk = color(162, 219, 202); //dusk sky color
    yellowDawn = color(252, 246, 211); //dawn sky color
    mountainColor = color(56, 116, 150); //color of the mountains
    cloudColor = color(225, 223, 184); //colod of the clouds
    ledgeColor = color(19, 68, 97); //color of Link's ledge
    ledgeShadow = color(4, 42, 50, 75); //color of ledge shadow
    hyrulePink = color(255, 145, 203); //color of the sparkles

    lerpValue = 0;
    dusk = "nightfall";
    dawn = "daybreak";
    sunlight = "sunrise";
    moonlight = "twilight";

    //sparkles
    for (i = 0; i < 60; i++) {
        sparkleX[i] = random(width);
        sparkleY[i] = random(175, 300);
        randomW[i] = random(3, 6);
        randomH[i] = random(3, 6);
    }
}

function draw() {
    background(0);
    noStroke();
    sky(); //sky incremently changes color based on hour

    push(); //clouds move across sky based on minute
    var m = minute();
    driftingCloud = map(m, 0, 60, 0, width);
    translate(driftingCloud, 0);
    clouds();
    pop();

    mountains(); //randomly generated mountains
    castle(); //castle in the distance

    //sparkles in the horizon
    fill(hyrulePink);

    for (i = 0; i < second(); i++) {
        rect(sparkleX[i], sparkleY[i], randomW[i], randomH[i]);
    }
    
    //ledge that Link stands on
    ledge();

    //illustration of Link
    scale(0.2);
    image(mySon, 1100, 350);

}

//sky incremently changes color each hour
function sky() {
    var h = hour();

    if (dawn === "daybreak") {
        lerpValue = map(h, 23, 0, 0, 1);
    }
    else {
        lerpValue = map(h, 0, 23, 0, 1);
    }

    if (h < 12) {
        lerpValue = map(h, 0, 11.5, 0, 1);
    } else {
        lerpValue = map(h, 11.5, 23, 1, 0);
    }
    
    var skyChange = lerpColor(greenDusk, yellowDawn, lerpValue);
    fill(skyChange);
    rect(0, 0, width, height);
}

//mountain horizon
function mountains() {
    fill(mountainColor);
    beginShape();
    let xPerl = 0;

    for (let x = 0; x <= width; x += 10){
        let y = map(noise(xPerl), 0, 1, 150, 200);
        vertex(x, y);
        xPerl += 0.2;
    }

    yPerl += 0.2;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

//clouds based on minute
function clouds() {
    fill(cloudColor);
    var m = minute();

    for (var c = 0; c <= m; c++) {

        //top left middle cloud
        push();
        scale(0.75);
        translate(0, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //middle cloud
        push();
        translate(150, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top left small cloud
        push();
        scale(0.5);
        translate(-70, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //bottom left large cloud
        push();
        scale(1.25);
        translate(-90, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top right cloud
        push();
        scale(0.75);
        translate(320, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top middle cloud
        push();
        scale(0.5);
        translate(50, -110);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //far left middle cloud
        push();
        translate(-250, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();
    }
}

//ledge where Link is standing
function ledge() {
    push();
    fill(ledgeColor);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-30, -50);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    vertex(-60, 50);
    endShape(CLOSE);
    pop();

    push();
    fill(ledgeShadow);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-10, -75);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    endShape(CLOSE);
    pop();
}

//castle in the horizon
function castle() {
    fill(mountainColor);
    rect(125, 110, 30, 100); //castle tower
    rect(102, 150, 75, 100); //castle building
    rect(90, 165, 100, 50); //castle ledge
    rect(122.5, 125, 35, 10); //lower level of castle
    triangle(120, 110, 140, 50, 160, 110); //main spire
    triangle(100, 150, 107.5, 110, 115, 150); //left spire
    triangle(165, 150, 172.5, 110, 180, 150); //right spire
    triangle(85, 200, 92.5, 130, 100, 200); //bottom left spire
    triangle(180, 200, 187.5, 130, 195, 200); //bottom right spire

    //windows
    fill(greenDusk);
    rect(135, 110, 5, 10);
    rect(130, 110, 2, 10);
    rect(135, 140, 10, 10);

    //jagged rocks from mountain
    push();
    fill(mountainColor);
    rectMode(CENTER);
    translate(450, 225);
    rotate(PI/1.2);
    rect(0, 0, 50, 250);
    rotate(PI/4.0);
    rect(415, -150, 40, 250);
    rect(200, -50, 35, 250);
    pop();
}
Sketch of the clock’s features.
Quick sketch of Link I drew for this project.

Looking Outwards 06: Randomness

Robbie Barrat’s Neural Network Balenciaga series is a fascinating
amalgamation of AI, fashion, and the fine line between creativity
and mimicry. Barrat utilized new neural network processing methods
to analyze the similarities in thousands of images from Balenciaga
runway shows and lookbooks and pushed this data to another one of
his neural networks, prompting the system to interpret what makes
Balenciaga Balenciaga. The results are random but creative
mishmashes of what the AI learned from thousands of images and
is trained to think Balenciaga looks like.

I was especially drawn to this work because of how it throws the whole
concept of randomness into question – the AI may generate random iterations
of Balenciaga outfits, but the iterations look so similar to each other
that it makes the viewer ponder about the original source material itself.
I additionally was interested in this glimpse into how generative algorithms
really work – the AI doesn’t know what Balenciaga or fashion really is, yet
tries to replicate these foreign concepts to its best approximation and
succeeds quite well.

Looking Outwards-06: Random Art

One randomly generated work I like is Bogdan Soban’s “Abstract 11”. It looks like a landscape and assumes a painterly quality, but was randomly drawn by code. Soban states that he utilizes innovative image processing that hides the computer origin of pictures, combined with multi-level algorithms, to create the most original works. His definition of generative art describes design that is composed in a random manner. He finds interesting, aesthetic precedents, and develops his own generative designed software that randomly draws new images based on those precedents. Once the program is running, Soban does not interfere with it, rather lets it run its course regardless of its outcome.
His pieces have no outside intervention nor predefined result. I really appreciate Soban’s process because he uses software that he creates on his own, not using existing programs available online.

Project – 06 – Abstract Clock

sketchDownload
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

 var x = []; 
 var y = []; 

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

    // For the random placement of the stars
    for (i = 0; i < 60; i++){
    	x[i] = random(10,390); 
    	y[i] = random(10,200); 
    }

}

function draw() {
    noStroke(); 

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

    // Background color gets darker as seconds pass by 
	background (83 - (2*s), 143 - (2*s), 213 - (2*s));

    // Drawing static hills
    fill(122,172,136); 
    ellipse(80,435,300,440);    
    fill(122,172,136); 
    ellipse(width-80,435,300,440);  
    fill(161,206,148); 
    ellipse(200,440,500,400);

    // New star appearing every minute 
    for(i = 0; i < m; i ++){
    	fill(252,255,149); 
    	ellipse(x[i],y[i],7,7); 
    }

    // Moon increasing size every second  
    var s1 = map(s, 0, 60, 0,200); 

    // Drawing Moon 
 	stroke(242, 242, 242,40);
  	strokeWeight(10);
  	fill(220,220,220,50);
  	ellipse(50, 50, s1, s1);

    // Drawing Sheep 
	noStroke(); 
    // Legs
    fill(92); 
    ellipse(175,315,15,50);
    ellipse(225,315,15,50); 
    // Body 
    fill(255);
    ellipse(200,310,50,50); 
    ellipse(170,280,50,50); 
    ellipse(200,270,50,50); 
    ellipse(230,280,50,50); 
    ellipse(170,300,50,50); 
    ellipse(230,300,50,50); 
    // Fur texture 
    fill(152); 
    ellipse(220,290,15,15); 
    fill(255); 
    ellipse(222,290,15,15); 

    fill(152); 
    ellipse(190,305,15,15); 
    fill(255); 
    ellipse(188,305,15,15); 

    fill(152); 
    ellipse(193,315,8,8); 
    fill(255); 
    ellipse(191,315,8,8); 

    fill(152); 
    ellipse(170,282,15,15); 
    fill(255); 
    ellipse(172,282,15,15);   

   	// Face 
    fill(92);  
    ellipse(240,270,40,40);

    // Making the eye close or open every hour  
    var eyeDiam = 20; 
    if ((h%2)>0){
    	eyeDiam = 20; //closed 
    }else if((h%2)==0){
    	eyeDiam = 0.1; //opened 
    }
    // Ear 
    ellipse(220,275,20,10);
    // Eye 
    fill(0); 
    ellipse(240,270,15,15); 
    fill(92);
    ellipse(235,265,eyeDiam,eyeDiam); 

    // Tail 
    fill(255); 
    ellipse(140,290,20,10); 

    // Fence 
    fill(175,140,117);
    rect(0,350,15,height); 
    rect(385,350,15,height); 
    rect(0,360,width,10); 
    rect(0,380,width,10); 

  }




























For this project, I thought of how I used to try counting sheep to fall asleep when I was younger. Unfortunately, it usually didn’t work too well. As a result, I was inspired to create an abstract clock that depicts a sheep trying to sleep but waking up every hour. The moon expands and the night sky gets darker every second. A new star also appears every minute.

Looking Outwards 06: Randomness

“Spectrum Colors Arranged by Chance” is an abstract piece of artwork created by Ellsworth Kelly. Rather than the focus on a particular style or personal artistic preferences, his artwork hones in on randomization and chance. This particular piece consists of eight collages plastered with hundreds of colored squares. Through the use of a mathematical system, colored paper slips were randomly numbered. These numbers correlated to eighteen different color hues that were then put on the canvas grid. Squares were placed on the collage in a systematic manner, removing himself and his judgement from the process.

Ellsworth Kelly, Spectrum Colors Arranged by Chance, 1951-1953

Kelly’s artistic sensibilities manifest in this piece with his experimentation and belief that any color could go with any other color. Inspired by expressive artistic freedom, Kelly used a unique approach for each collage of squares by working with one color at a time. This particular piece is interesting to me because it seems like the collage of colored squares are strategic, but it was created purely off of randomization.

Ellsworth Kelly, Spectrum Colors Arranged by Chance, 1951-1953

Project 06: Abstract Clock

sketch
var y = 430 //start y position of house
var c = []; //random colors for balloons
var bx = []; //balloon random x coordinate
var by = [];//balloon random y coordinate
var dy = []; // cloud random x coordinate
var dx = []; //cloud random y coordinate
var tx = []; // star random x coordinate
var ty = []; //star random y coordinate

function setup() {
  createCanvas(480, 480);
 //for every minute, randomly colored and located balloon will pop up
 for (i=0; i<= 60; i++){
  c[i] = color(random(255), random(255), random(255))
  bx[i] = random(160, 320)
  by[i] = random((y-30), (y-175))
 }
 //during the daytime, for every hour randomly located cloud will pop up
   for (d = 0; d<=23; d++){
     dx[d] = random(25, width-25)
     dy[d] = random(25, height-25)
   }
 //during nighttime, for every hour randomly located star will pop up
  for (s=0; s<=23; s++){
    tx[s] = random(75, 3*width-25)
    ty[s] = random(75, 3*height-25)
  }  
}
function draw() {
//during nighttime, use dark sky and stars
  if (hour() < 12){      
  background(7, 46, 110);
    star();
  }
 // during daytime, use day sky and clouds
  else {
    background(111, 165, 252)
    cloud();
  }
 //for every second, house will move up four units
translate(0, -4*second()) 
house();   
} 

function house(){ 
  //base house
  noStroke();
  fill(61, 58, 50)
    rect(width/2-28, y-20, 60, 20)
  fill(209, 203, 88)
  noStroke();
    rect(width/2 - 25, y, 25, 50)
  fill(240, 240, 144)
    square(width/2, y, 50)
    triangle(width/2, y, width/2+50, y, width/2 + 25, y-20)
  strokeWeight(10)
  stroke(84, 84, 66)
    line(width/2, y, width/2 +25, y-20)
    line(width/2 +50, y, width/2+25, y-20)
  rect(width/2 + 22, y+25, 5, 15) 
  //for each minute, balloon tied to house will pop up
  for (i=0; i< minute(); i++){
    push();
    //balloon string
    stroke(255)
    strokeWeight(1)
    	line(width/2, y-20, bx[i], by[i])
    //balloons
   	fill(c[i]);
    noStroke()
  		ellipse(bx[i], by[i], 20)
    print(i)
    pop();
  }
}
function cloud(){
//for each hour, cloud will pop up
  for (var d = 0; d<hour(); d++){
  fill(255);
  strokeWeight(3)
    stroke(200)
  ellipse(dx[d], dy[d], 100, 20);
    ellipse(dx[d] + 20, dy[d] - 10, 40, 15)
  }
}

function star(){
//for each hour, star will pop up
  for (var s = 0; s<hour(); s++){
    push();
    stroke(255, 223, 107)
    strokeWeight(3)
    fill(255, 255, 217)
    beginShape();
    scale(0.3)
      vertex(tx[s]+35, ty[s]+3)
      vertex(tx[s] +46, ty[s]+22)
      vertex(tx[s]+68, ty[s]+28)
      vertex(tx[s] + 54, ty[s] +45)
      vertex(tx[s] + 56,ty[s] + 67)
      vertex(tx[s]+35, ty[s]+58)
      vertex(tx[s] + 14, ty[s]+67)
      vertex(tx[s] + 16, ty[s]+45)
      vertex(tx[s]+2, ty[s]+28)
      vertex(tx[s]+24, ty[s]+22)
    endShape(CLOSE);
pop()
  }
}

Over quarantine, I rewatched a bunch of Pixar movies, and was inspired by the movie “Up” for my clock. The house moves upwards for every second, the balloons show the minutes, and the clouds or stars in the background show the hour. In general, I had difficulty making the arrays refresh with the time.

Project-06: Abstract Clock

treeDownload
/// <reference path="../TSDef/p5.global-mode.d.ts" />

var lineLength = 75;
var x = 120;
var y = 240;
var branchAngle = 0;
var strokeGreenColor = 255;
var branchThickness = 10;
var bailout = 10;
var cloudScale=[0.5, 0.75, 1, 1.25, 1.5];
var move;
var b=25;
var h;

function setup() {
    createCanvas(480, 480);
    stroke(0, strokeGreenColor, 0);
    strokeWeight(branchThickness);
}

function draw() {
    //the color of the sky changes depending on what hour it is, if it's before noon, the color turns bluer and after noon it gets darker
    h=hour();
    if (h<12){
        background(51, 15, 20.8*h);
    } else {
        background(51, 15, 255-20.8*(h-12));
    }
    push();
    //the clouds are the minute hand, they move to the left depending on what minute it is
    move = map(minute(), 0, 60, 0, width);
    translate(move, 0)
    drawClouds();
    pop();
    push();
    translate(width / 2, height);
    translate(0, 120-2*second());
    //makes the tree spread out with seconds
    branchAngle = map(second(), 0, 60, 1, 100);
    drawTree(lineLength);
    pop();
}

function drawClouds(){
    //smallest cloud--cloud 1
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[0]);
    translate(500,100);
    cloud();
    pop();

    //cloud 2
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[1]);
    translate(100, 250);
    cloud();
    pop();

    //cloud 3
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[2]);
    translate(400, 350);
    cloud();
    pop();

    //cloud 4
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[3]);
    translate(0, 50);
    cloud();
    pop();

    //cloud 5
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[4]);
    translate(-50, 250);
    cloud();
    pop();
}

function cloud(){
    ellipse(30, 10, 60, 40);
    ellipse(40, 40, 90, 50);
    ellipse(0, 40, 100, 50);
    ellipse(0, 15, 55, 35);
}

function drawTree(lineLength) {
    //Coloring leaves
    if (lineLength < 15) {
        strokeGreenColor = map(lineLength, 0, 150, 1, 255);
        stroke(0, 150, 0, 150);
        strokeWeight(9);
    }
  //Coloring the branch
    if (lineLength > 15) {
        strokeGreenColor = map(lineLength, 0, 150, 1, 255);
        stroke(139, 69, 19, strokeGreenColor+100);
        branchThickness = map(lineLength, 0, 150, 0, 25);
        strokeWeight(branchThickness);
    }
    if (lineLength >= bailout) {
        line(0, 0, 0, -lineLength * 2);
        translate(0, -lineLength * 2);

        //Right branch 1
        push();
        rotate(radians(branchAngle));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.65);
        pop();

        //Left branch 1
        push();
        rotate(radians(-branchAngle));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.65);
        pop();

        //Right branch 2
        push();
        rotate(radians(branchAngle * 0.5));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.5);
        pop();

        //Left branch 2
        push();
        rotate(radians(-branchAngle * 0.5));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.7);
        pop();

      }
}

For my project I decided to use a tree, clouds, and the sky as my clock. The tree grows and spreads out with what second it is, and I used the map function to change the angle proportionally to the seconds. The clouds move from left to right based on what minute it is, and at each hour the sky changes color. I wanted to use something organic like a plant to represent my clock but I originally sketched a vine, not a tree.

I decided to use a tree after seeing what someone made on GitHub. I was researching how to make plants that show growth in p5.js and found a tree which uses recursion to add branches. I used the same technique and changed the colors so it looked like how I wanted it to.

Project-06 Abstract Clock

abstract flower clock
function setup() {
    createCanvas(480, 480); 
    background(240, 213, 214);
}

function draw() {
	background(240, 213, 214);
	noStroke();

	push();
	rectMode(CENTER); 
	//dark pink shadow
	fill(208, 186, 187);    
	ellipse(240, 435, 165, 30);

	//plant pot 
	fill(186, 107, 60); 
	rect(240, 405, 75, 65);
	rect(240, 360, 88, 20);
	
	//plant pot shading 
	fill(165, 95, 52);
	rect(240, 372, 75, 4);

	pop();

	//soil filling up represents seconds
	fill(146, 85, 46);
	var s = second();
	rect(205, 435, 70, -s);

	//ombre of pink tracking 10 minute intervals 
	//0 - 10 minute mark
	fill(243, 209, 210);
	rect(0, 245, 480, -20); 
	
	//10 - 20 minute mark
	fill(238, 206, 208);
	rect(0, 225, 480, -20); 
	
	//20 - 30 minute mark
	fill(234, 202, 204);
	rect(0, 205, 480, -20);
	
	//30 - 40 minute mark
	fill(230, 198, 201);
	rect(0, 185, 480, -20);
	
	//40 - 50 minute mark
	fill(224, 194, 196);
	rect(0, 165, 480, -20); 
	
	//50 - 60 minute mark
	fill(220, 190, 195);
	rect(0, 145, 480, -20); 

	//resetting the background past the 60 minute mark
	fill(216, 187, 190);
	rect(0, 125, 480, -150);

	//plant stem growing represents minutes
	fill(30, 71, 42);
	var m = minute();
	rect(237, 350, 5, -50-m*3);

	//plant leaves
	push();
	fill(30, 71, 42);
	translate(224, 320);
	rotate(radians(-60));
	ellipse(0, 0, 18, 43);
	pop();

	push();
	fill(30, 71, 42);
	translate(256, 320);
	rotate(radians(60));
	ellipse(0, 0, 18, 43);
	pop();

	//flower petals represents hours
	var h = hour();
	var hours = map(m, 0, 60, 260, 390);

    if (h < 24 & h > 12){
        h -= 12;
    }
    if (h == 0){
        h = 12;
    }

    for (var i = 0; i < h; i++){
        push();

        translate(240, height - 0.9*hours);
        rotate(radians(30*i));
        //flower petals
        fill(233, 160, 167);
        ellipse(0, 30, 20, 55);
        
        //flower center 
        fill(249, 213, 139);
        ellipse(0, 0, 30, 30);

        pop();
    }
	
}
Initial illustrator sketch
Screenshots of clock at 1:00, 3:30, 9:20, and 12:59

I wanted to create an abstract clock based on a plant growing over time. The pot filling up with soil represents seconds, the plant stem growing represents minutes, and the number of petals represents hours. The ombre of pink rectangles in the background track the minutes based on the position of the yellow center in 10 minute intervals. I had to make a few changes to the design based on where the center landed, which was challenging but once I figured out the map function it was fun to create!

Looking Outwards 06: Randomness

Linyi Dai was an architecture student at RISD in 2015. Their piece, which was featured in Fast Company’s article “The Value of Randomness in Art and Design” uses architectural rendering and I admire how they manipulated the random function to create a 3-dimensional shape. I think the way artists can use computers to make shapes is really cool, especially 3-D ones. Dai restricted the random values to a certain parameter and used the value of each register over 50 steps to generate the rungs of a sphere. Dai is an architect and I think this piece demonstrates the ability to render 3-D shapes in a way that is necessary for their field.

Linyi Dai

LookingOutwards-06

The controversial website, https://thispersondoesnotexist.com/, generates portraits of seemingly real people with different features with just a page refresh. If told these are real people it is easily believable, however, they are computer-generated images from artificial intelligence. Phillip Wang is the software engineer which created this website. There is a randomness on how these “people” will be generated because there are theoretically, countless possibilities. And depending on the scale, millions of facial features. 

The controversy of this project is because of the realistic properties of each generated face. The sheer amount of people on the planet is difficult to keep on record who is who and if someone that is generated is truly a fake person. The concern is if a false human can be easily generated at a refresh of a page, then how can we trust one of our more basic senses, sight. Despite not being a so-called artistic project, I found this to be quite refreshing because of the limits of this project. Saying something looks alike is subjective between any two people but not with our developing technology, the randomness created from this AI can be used to create an identity or mimic an existing one. It is interesting the capabilities of a randomly generated face. It can be unlocking a phone using facial recognition or playing a character with an avatar which is not even real.

Fake Person 1
Fake Person 2
Fake Person 3