SectionB – Page 14 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO 7 – Information Visualization

“Multiplicity” by Moritz Stefaner

With an increase in use of technology, people’s city experiences have been collectively and continuously been documented on social media platforms, shaping a virtual city image. Designed and implemented by Moritz Stefaner in 2018, “Multiplicity” is a collective photographic city portrait that provides an immersive dive into the image space spanned by hundreds of thousands photos taken across Paris.

Collective photographic city portrait of Paris in 2017

Using machine learning techniques, “Multiplicity” is based on a sample of 6.2m geo-located social media photos posted in Paris in 2017, and it organizes images by similarity and content, allowing the audience to visually explore niches and microgenres.

Images organized by similarity and content

The projection spans three 1080p squares arranged in a slightly angled triptych structure, which allows for a more immersive experience, and visitors can navigate the manually annotated map using a touch device as well as a physical joystick. Overall, Stefaner intended to portray the city by using an arrangement of qualitative contents, encouraging viewers to explore and interpret on their own terms.

Immersive experience created by slightly angled triptych structure

Zooms portrayed in “Multiplicity” by Moritz Stefaner

LO-07 Computational Visualization

“Flight Patterns” Brightness increases as more flights fly out of that region

White represents low altitude and blue high altitude

“Flight Patterns” was developed by Aaron Koblin, Scott Hessels, and Gabriel Dunne as part of a series of experiments for the project “Celestial Mechanics” initially created in August 2005. The artists parsed and plotted data using the Processing Programming Environment. The frames were then composited on Adobe After Effects and Maya.

I admire the artist’s ability to convey so much information through the different variations and avoids overcrowding the piece. Each element provides a new detail, the brightness increases as flight density increases, color represents type of aircrafts and altitude. I also admire the way he is able to create visual interest out of mundane data; each flight pattern looks like a mini firework.

The creator’s artistic sensibilities manifest in the final form through the story the piece tells. In Koblin’s Ted Talk he talks about how collecting data can make us more human and how he humanizes data through his work. For example, with this specific piece, you can see when people depending on their region are the busiest based on how bright that part of the piece is.

Looking Outwards-07: Computational Visualization

One piece of work that I admire is Jer Thorp’s “138 Years of Popular Science.” The data compiled is from Pop Science magazine’s past publications. The chart illustrates how different scientific terms have come into and out of popular usage over the years in scientific reports. As somewhat of an homage to the content, the data is visualized in a molecular chain format, with different atoms delineating distinct year clusters, further demarcated with different colors. Thorp developed a “simple, space-filling algorithm” that places the different molecules around the chain, and stacking them deliberately to create a neat flow. Further deepening the study is layered histograms in the background, showing the usage from different issues of specific terms. I like this work because it shows the artist’s personal design style with whimsical coloring and visualization, while also respecting the client for whom they are producing for with logic and thorough analysis. Every detail was clearly thought out. Furthermore, not only is it aesthetic but intellectually intriguing as it shows a progression and shift of technology and academic focus.

In a somewhat unrelated note, in the reddit app there is a subreddit that is interesting called r/dataisbeautiful which features data visualizations by anyone (ie regular people!) who chooses to submit a post. The content ranges from “Daily Polar Sea Ice Area with Monthly Ice Extent” to “The distribution of Minecraft Biomes in the overworld.”

Abstract Clock-Candy shop

I want to design a dreamy, childish candy shop that displays time in an interesting way. I sketched out the candy shop and decorated it with colorful candies and lollipops. I painted the candy shop in pastel colors. The lollipops placed on the candy box represent the 60 seconds in a minute, and the lollipop that corresponds with the current second in local time will pop out. The background of the candy shop represents morning, noon, and night. It changed color three times a day according the changing hours. The stripes on the table stand for minute. The white stripe moves downwards as time passes.

sketch

var cx=[];
var cy=[];



function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(5);
    
}

function draw() {
    //the background changes with the hours
    if(0<h<8){
        background(179, 179, 255);
    }
    else if(8<h<16){      
        background(255, 191, 216);
    }
    else if(16<h<24){
        background(2, 3, 82)
    }
    var d = new Date();
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds(); 

    //draw the candy shop
    console.log(s);
    fill(3, 252, 202);
    drawRoof();
    drawPillars();
    drawBox();
    drawTable(m);
    drawCandy();
    
   
 
    //draw the 60 lollipops that represent seconds. 
    //The lollipop that represents the current second will pop up as the special lollipop
    for (i=0;i<60;i++){
        cx.push(random(95,385));
        cy.push(random(250,280));
        if (i==s){
            drawSpecial(cx[s],cy[s]-50)
        }
        else{
            drawCircle(cx[i],cy[i]);
        }
        
       
        }
        
       
 
     }
      
function drawSpecial(x,y){
    fill(random(0,255),random(0,255),random(0,255));
    triangle(x,y,x-20,y-10,x-20,y+10);
    triangle(x,y,x+20,y-10,x+20,y+10);
    fill(200, 252, 86)
    line(x,y,x,300);
    circle(x,y,30);
   
 }  
 
 //the decoration candy
function drawCandy(){ 
    line(240,100,240,20);
    line(240,100,440,150);
    line(240,100,40,150);
    fill(255, 252, 194);
    triangle(260,100,290,80,290,120);
    triangle(220,100,190,80,190,120);
    fill(200, 252, 86)
    ellipse(240,100,60,40);
    fill('white');
    ellipse(240,100,50,10);
    fill(0);
    ellipse(240,100,10,10)
}


function drawCircle(x,y){
    line(x,y,x,300);
    fill(random(0,255),random(0,255),random(0,255));
    circle(x,y,20);
}

function drawPillars(){
    fill('white');
    rect(50,150,20,200);
    rect(410,150,20,200);
}

function drawRoof(){
    triangle(240,20,40,150,440,150);
}

//the stripes on the table correspond the minutes
function drawTable(m){
    fill(190, 157, 245);
    for (i=0;i<60;i++){
        if(i==m){
            fill('white');
            rect(20,350+i*2,440,2);
        }
        else{
            fill(117, 140, 255)
            rect(20,350+i*2,440,2);
        }
        
    }

}
function drawBox(){
    fill(134, 240, 234)
    rect(90,300,300,100);
}

Randomness

Aaron Tobey, https://www.brandknewmag.com/the-value-of-randomness-in-art-and-design/

The artist divides the screen to 36 panels which each displays beautiful transformation of lines. The directions, curvatures, and the compositions of the lines are based on geometric operations and logical rules that build random sequences.

Each panel has a very different outcome as they followed different rules and algorithms. The randomness creates a sense of surprise as the viewers have no idea what the picture will look like in the next second. While lacking order, the piece does not seem to be in chaos. The lines are constrained in those clear, definite rectangles, which have a sense of logic and order that makes interesting contradiction to the movements of the lines. I enjoy the liveliness and the sense of movement in this piece. The artist explores the concept of shapes, randomness, order, space, and constraints, making the piece both aesthetically pleasing and thought-provoking.

Project 6 – Abstract Clock

sketch

var angle = 0;

function setup() {
    createCanvas(480, 410);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0, 5, 50);
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(6) * second());
    earth();
    pop();
    scale(0.3);
    translate(0, 300);
    for (var m = 0; m < hour(); m ++) {
        translate(60, 0);
        star();
    }
}

function earth() {
    //earth
    translate(-240, -480);
    fill(188, 255, 255);
    noStroke();
    circle(240, 480, 300);
    //summer tree
    noStroke();
    fill(95, 58, 0);
    rect(230, 280, 20, 50);
    fill(71, 191, 12);
    circle(250, 240, 30);
    circle(233, 285, 30);
    fill(23, 139, 0);
    circle(255, 265, 40);
    circle(222, 249, 40);
    fill(164, 202, 156);
    circle(250, 290, 20);
    fill(140, 223, 123);
    circle(220, 270, 30);
    fill(37, 98, 25);
    circle(240, 260, 30);
    //fall tree
    fill(95, 58, 0);
    rect(390, 470, 50, 20);
    fill(255, 166, 13);
    circle(450, 460, 40);
    circle(440, 500, 20);
    circle(470, 490, 30);
    fill(255, 230, 160);
    circle(430, 480, 30);
    fill(246, 236, 64);
    circle(470, 470, 30);
    fill(201, 79, 60);
    circle(455, 500, 20);
    fill(255, 102, 0);
    circle(450, 480, 30);
    //winter tree
    fill(95, 58, 0);
    rect(230, 630, 20, 50);
    fill(255);
    circle(225, 673, 30);
    circle(250, 685, 40);
    circle(210, 690, 30);
    circle(260, 710, 30);
    circle(230, 710, 50);
    //spring flower
    fill(35, 169, 8);
    rect(40, 475, 50, 10);
    circle(75, 475, 10);
    circle(75, 485, 10);
    fill(204, 153, 255);
    circle(15, 480, 30);
    circle(30, 460, 30);
    circle(30, 500, 30);
    circle(50, 468, 30);
    circle(50, 493, 30);
    fill(245, 255, 149);
    circle(35, 480, 25);
}

function star() {
    fill(240, 255, 135);
    frameRate(10);
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
    }
    endShape(CLOSE);
}

My inspiration for this clock is earth! A full rotation will occur every minute, and a star will appear every hour!

Project-06-Abstract-Clock

sketch

  // Xander Fann xmf Section B

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

function draw() {
    var s = second()*10;
    var m = minute()*10;
    var h = hour()/2;
    background(190, 210, 255);//sky
    noStroke()
    //human
    push();
    translate(m,0)
    fill(0)
    circle(0,390,20) //head
    ellipse(0,430,30,50) // body
    pop();
    //sun
    fill(255,255,0,150); // yellow, lowered opacity
    circle(width/2,height/2,h*30);
    if (h>= 12) {circle(width/2,height/2,h/30); //when past 12 the sun shrinks
    }
    //cloud
    push();
    translate(s,0);
    for(x = 25;x<=145;x+=40){ // three clouds changing arch height and opacity
      fill(255,255,255,x/1.5);arc(x,200,200,x*1.5,PI,0)
    }
    pop();
    //bridge and ground
    fill(142, 224, 137);
    stroke(176, 147, 91);
    strokeWeight(7);
    line(0,450,600,450);
    noStroke();
    arc(0,height,400,300,PI,0);//ground
    arc(width,height,400,300,PI,0);

}

Back then the daylight outdoors was the only way to tell when it was time to work or sleep. My abstract clock is determined by the movement of the sky, the movement of the human doing work and the size of the sun. The sun is getting larger as time increases towards the day and the man will always be moving to do work.

Project-06-Abstract-Clock

For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.

sketch

//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//Project-06

function setup() {
    createCanvas(480, 480);
    background(95, 201, 247); 

}
function draw() {
	var h = hour(); 
	var s = second();


	if (h < 18 & h > 6) { 
	//if it is morning time, background = light color
		background(95, 201, 247);
	}
	else {
	//if it is night, background = dark color
		background(20, 25, 68);
	}
	//yellow ovals in background
	fill(220, 137, 20);
	stroke(180, 107, 40);
	ellipse(5, 360, 60, 100); //shape
	line(0, 320, 23, 320); //lines on air balloons
	line(0, 330, 28, 330);
	line(0, 340, 32, 340);
	line(0, 350, 34, 350);
	line(0, 360, 35, 360);
	ellipse(100, 350, 90, 130);
	line(100, 315, 138, 315);
	line(100, 330, 142, 330);
	line(100, 345, 144, 345);
	line(90, 360, 140, 360);
	line(90, 375, 140, 375);
	ellipse(240, 345, 80, 90);
	line(207, 320, 273, 320);
	line(200, 345, 280, 345);
	line(207, 370, 273, 370);
	ellipse(275, 380, 60, 110);
	line(245, 380, 305, 380);
	line(240, 365, 303, 365);
	line(242, 360, 302, 360);
	line(244, 355, 301, 355);
	line(246, 350, 300, 350);
	line(246, 345, 297, 345);
	line(255, 340, 294, 340);
	ellipse(470, 370, 70, 85);
	line(445, 340, 480, 340);
	line(443, 345, 480, 345);
	line(441, 350, 480, 350);
	line(439, 355, 480, 355);
	line(437, 360, 480, 360);
	line(435, 365, 480, 365);
	line(437, 370, 480, 370);
	line(437, 375, 480, 375);
	line(437, 380, 480, 380);
	line(437, 385, 480, 385);
	ellipse(400, 390, 100, 110);
	line(350, 390, 450, 390);
	line(352, 375, 449, 375);
	line(361, 355, 445, 355);

    //trees in background
	fill(75, 165, 75);
	noStroke();
	rect(0, 400, 480, 80);
	circle(10, 400, 80);
	circle(8, 360, 30);
	circle(75, 400, 40);
	circle(105, 400, 30);
	circle(135, 400, 70);
	circle(113, 380, 30);
	circle(135, 370, 40);
	circle(160, 380, 30);
	circle(165, 400, 40);
	circle(195, 400, 50);
	circle(260, 400, 80);
	circle(245, 370, 40);
	circle(260, 360, 40);
	circle(275, 370, 40);
	circle(315, 400, 30);
	circle(350, 400, 60);
	circle(400, 400, 40);
	circle(450, 400, 60);

	//clouds
	fill(250, 130); //half transparent alpha
	noStroke();
	ellipse(40, 60, 100, 28);
	ellipse(240, 190, 190, 40);
	ellipse(350, 15, 130, 20);
	ellipse(420, 100, 180, 30);

    //** MARIO **
    //the ground of the scene
    noStroke();
    fill(250, 220, 103); //orange-yellow layer
    rect(0, 445, 480, 35);
    orangecircles(); //call for orange curtain pattern
    fill(108, 220, 68);
    rect(0, 430, 480, 17); //green layer
    greencircles(); //call for green curtain pattern

    //Mario's left shoe
    fill(105, 67, 45); //brown color
    circle(33, 407, 32); //heel of shoe
    circle(80, 415, 36); //mid of shoe
    circle(89, 416, 39); //toe of shoe
    quad(33, 422, 80, 432.5, 80, 400, 33, 400); //sole of shoe

    //Mario's left leg that is planted on the ground
    fill(31, 73, 180);
    quad(60, 300, 130, 300, 80, 395, 25, 390); //leg
    ellipse(53, 395, 61, 27); //hem of pants
    stroke(31, 73, 180); //filling in spaces for the shape
    line(78, 370, 80, 395);

    //Mario's left arm 
    fill(244, 44, 42); //red
    noStroke();
    quad(148, 235, 110, 205, 155, 140, 180, 150); //arm
    fill(255); //white glove
    ellipse(162, 140, 60, 50); //glove

    //visor part of hat
    fill(147, 42, 43); //red
    ellipse(158, 118, 140, 30);
    
    //Mario's head
    fill(248, 217, 191); //skin tone
    ellipse(125, 115, 95, 110);
    ellipse(124, 148, 85, 90);
    rect(70, 105, 50, 100); //neck

    //Mario's nose
    fill(248, 217, 191); //skin tone
    ellipse(175, 152, 30, 25); //tip of nose
    ellipse(160, 162, 45, 10);

    //Mario's hair
    fill(74, 45, 32); //brown hair
    rect(60, 65, 35, 100);
    ellipse(90, 155, 20, 25); //behind ear
    circle(63, 158, 20);
    circle(75, 160, 30);
    triangle(135, 100, 130, 150, 100, 100); //sideburn
    ellipse(122, 135, 15, 30);
    ellipse(123, 140, 15, 23);
    circle(128, 144, 14);
    triangle(133, 145, 135, 100, 125, 125);

    //red Mario hat
    fill(224, 44, 42); //red
    noStroke();
    rect(60, 75, 120, 40);
    beginShape(); //connecting shape to make rounded top
    curveVertex(80, 98);
    curveVertex(80, 98);
    curveVertex(80, 58);
    curveVertex(105, 43);
    curveVertex(130, 42);
    curveVertex(150, 41);
    curveVertex(160, 39);
    curveVertex(170, 38);
    curveVertex(179, 60);
    curveVertex(177, 70);
    curveVertex(177, 70);
    endShape();
    line(175, 30, 180, 30);
    noStroke();
    ellipse(177, 73, 60, 75);
    ellipse(67, 85, 50, 60);

    //white Mario logo on hat
    fill(255); //white circle
    stroke(255);
    ellipse(197, 80, 20, 40);
    //red M letters
    stroke(224, 44, 42);
    strokeWeight(4);
    line(195, 70, 193, 92);
    line(195, 70, 198, 80);
    line(198, 81, 201, 68);
    line(201, 68, 203, 89);

    //Mario's ear
    fill(248, 217, 191);
    stroke(208, 177, 151);
    strokeWeight(1);
    ellipse(100, 128, 30, 40); 
    stroke(238, 207, 181); //inner ear crevice
    ellipse(100, 128, 15, 20);

    //Mario's eye
    fill(255); //white of his eye
    ellipse(160.5, 135, 14, 30);
    fill(105, 180, 255); //blue of eye
    noStroke();
    ellipse(163, 139, 8, 20);
    fill(0); //black of eye
    ellipse(164, 141, 5, 10);

    //Mario's eyebrow
    stroke(60, 50, 50);
    strokeWeight(3);
    noFill();
    arc(162, 128, 10, 25, PI + QUARTER_PI, 0);

    //darker red of visor part of cap
    fill(204, 2, 3);
    noStroke();
    arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
    triangle(155, 100, 195, 100, 227, 114);

	//drawing Mario's abdomen
	fill(41, 93, 200); //blue jean clothing color
	noStroke();
	ellipse(100, 250, 100, 130);
	circle(90, 210, 80, 50);
	circle(100, 225, 80);
	circle(80, 280, 70); //butt area

	//the following lines fill space to make smooth abdomen
	strokeWeight(10);
	stroke(41, 93, 200); 
    line(55, 250, 51, 270); 
	line(80, 310, 100, 310);
	line(55, 220, 55, 250);

	//Mario's right shoe in the air
	fill(105, 67, 45); //brown color
	noStroke();
	circle(164, 362, 32); //heel of shoe
	circle(201, 350, 36); //mid of shoe
	circle(207, 347, 39); //toe of shoe
    quad(165, 377, 205, 366.5, 195, 340, 165, 350); //sole of shoe

    //Mario's right leg that is in the air
    fill(41, 93, 200);
    noStroke();
    ellipse(125, 290, 120, 50);
    circle(165, 280, 50); //knee cap
    quad(140, 300, 190, 280, 201, 330, 150, 345); //calf
    quad(200, 329, 203, 328, 150, 355, 150, 344); //calf
    
    //pant hem
    beginShape(); //curve shape so the hem looks curved
    curveVertex(150, 354);
    curveVertex(150, 354);
    curveVertex(160, 352);
    curveVertex(180, 347);
    curveVertex(195, 335);
    curveVertex(200, 330);
    curveVertex(202, 327);
    curveVertex(202, 327);
    endShape();
    strokeWeight(10);
    stroke(41, 93, 200);
    line(165, 259, 145, 255); //line making thigh look filled
    
    //making jean lines
    stroke(31, 83, 170);
    strokeWeight(3);
    line(90, 200, 90, 270); //side seam
    line(118, 246, 149, 251); //line on top thigh
    line(145, 313, 163, 288); //line at knee
    line(172, 305, 180, 345); //line at right calf
    stroke(21, 63, 140); //darker line for darker leg
    line(90, 317, 50, 407); //left leg line
    noStroke();

    //Mario's right arm that goes off the screen
    fill(244, 44, 42);
    noStroke();
    ellipse(85, 200, 60, 50);
    quad(45, 160, 95, 180, 90, 225, 45, 210); //bicep area
    quad(45, 160, 0, 180, 0, 230, 45, 210); //forearm

    //yellow button on Mario's overalls
    fill(255, 253, 104);
    ellipse(135, 220, 10, 20);

    //Mario's mustache
    fill(35, 23, 17);
    //edge of mustache
    arc(145, 160, 20, 10, 0, PI + QUARTER_PI); 
    //inner part of mustache
    arc(158, 164, 15, 10, 0, PI + QUARTER_PI); 
    //Mario's smile
    stroke(100);
    noFill();
    strokeWeight(2);
    arc(158, 170, 20, 10, 0.5*PI, PI); 

    //PIRANHA PLANT MOVES WITH SECONDS

    //stem of plant growing with seconds
    stroke(79, 145, 45);
    strokeWeight(10);
    //line(425, 366, 425, 366 - s);
    quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);

    //piranha red head
    fill(215, 15, 15);
    noStroke();
    circle(425, 330 - s, 80); //red circle
    fill(255);
    circle(423, 360 - s, 13); //white spots on piranha head
    circle(395, 325 - s, 13);
    circle(405, 345 - s, 15);
    circle(435, 340 - s, 13);
    circle(457, 325 - s, 10);
    circle(455, 345 - s, 10);

    //making the mouth of piranha open
    if (h < 18 & h > 6) {
    	//using light blue color to match background
    	fill(95, 201, 247); 
    }
    else {
    	//using dark blue color to match bckground
    	fill(20, 25, 68);
    }
    triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);
    
    //teeth of piranha mouth
    stroke(220); //outline color = grayish
    fill(245); //white teeth
    strokeWeight(1);
    triangle(418, 320 - s, 416, 340 - s,  408, 330 - s); 
    triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
    triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
    triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);

    //white lips of piranha mouth
    fill(245);
    noStroke();
    circle(382, 315 - s, 15);
    triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); //left lip
    circle(468, 315 - s, 15);
    triangle(463, 309 - s, 425, 345 - s, 473, 320 - s); //right lip

    //pot for the plant
    fill(75, 118, 68);
    noStroke();
    rect(400, 380, 50, 50); //base of pot
    stroke(55, 98, 48);
    strokeWeight(1);
    rect(390, 370, 70, 20); //top part of pot

    //draws coin for each minute
    for (m = 0; m < minute(); m ++) {
    	row = Math.floor(m / 4);
    	//15 rows of coins, 4 columns of coins
    	coins(240 + (m - 4 * row) * 28, 19 + (29 * row)); 
    }
    //draws boxes for each hour
    for (h = 0; h < hour(); h ++) {
    	row1 = Math.floor(h / 6);
    	//3 rows of boxes,
    	//4 columns in each row
    	boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
    }

    //MUNCHKIN stomach
    fill(143, 121, 91);
    noStroke();
    ellipse(210, 429, 18, 11);
    ellipse(210, 426, 16, 4);

    fill(134, 80, 50); //brown body color
    //munchkin feet
    ellipse(202, 433, 13, 8);
    ellipse(218, 433, 13, 8);
	noStroke();
	//layering body shaper
	ellipse(210, 400, 30, 40); 
	circle(203, 410, 30);
	circle(217, 410, 30);
	rect(203, 410, 14, 15);
	triangle(200, 385, 190, 403, 210, 400);
	triangle(220, 385, 230, 403, 210, 400);
	// munchkin eyes
	fill(255); //white of eyes
	stroke(230);
	ellipse(204, 400, 6, 13);
	ellipse(217, 400, 6, 13);
	fill(0); //black of eyes
	ellipse(205, 399, 5, 8);
	ellipse(216, 399, 5, 8);
	fill(255); //white dot in eyes
	circle(205, 398, 1);
	circle(216, 398, 1);
	//munchkin mouth
	fill(255);
	stroke(210);
	strokeWeight(1);
	triangle(197, 414, 199, 408, 202, 412); //teeth
	triangle(223, 414, 221, 408, 218, 412); //teeth
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(210, 415, 25, 4, PI, 0); //frown line
	
	//munchkin left eyebrow
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(193, 384)
	curveVertex(193, 384);
	curveVertex(195, 383);
	curveVertex(197, 383);
	curveVertex(199, 384);
	curveVertex(202, 387);
	curveVertex(203, 389);
	curveVertex(205, 392);
	curveVertex(207, 394);
	curveVertex(207, 394);
	endShape();
    //munchkin right eyebrow
	beginShape();
	curveVertex(213, 394);
	curveVertex(213, 394);
	curveVertex(215, 392);
	curveVertex(217, 389);
	curveVertex(219, 387);
	curveVertex(221, 384);
	curveVertex(223, 383);
	curveVertex(225, 383);
	curveVertex(228, 384);
	curveVertex(228, 384);
	endShape();
}

function coins(x, y) { 
	fill(242, 220, 95); //yellow color
	stroke(222, 200, 75); //darker yellow to highlight shape
	ellipse(x, y, 13, 25); //shape of coin
	fill(222, 200, 75);
	rect(x - 1, y - 10, 3, 21); //vertical line on coin
}

function boxes(x, y) {
	fill(151, 88, 53); //brown color
	strokeWeight(2); //outline of box
	stroke(0); 
	square(x, y, 24); //size of each box
	strokeWeight(1); //thickness of brick lines
	line(x, y + 8, x + 24, y + 8); //lines to make bricks
	line(x, y + 16, x + 24, y + 16);
	line(x + 12, y, x + 12, y + 8);
	line(x + 8, y + 8, x + 8, y + 16);
	line(x + 16, y + 8, x + 16, y +16);
	line(x + 12, y + 16, x + 12, y + 24);
}

function greencircles() { //will "curtain" the green grass
	for (var a = 0; a < 485; a += 20) {
		fill(108, 220, 68); //green color
		circle(a, 445, 20);
	}
}

function orangecircles() { //layer that will "curtain" yellow grass
    for (var b = 0; b < 485; b += 25) {
        fill(238, 117, 40); //dark orange color
        ellipse(b, 463, 35, 17);
        fill(250, 220, 103); //orange-yellow color
        ellipse(b, 457, 35, 17);
        
    }
}

Here is the first progress picture I had, which somewhat highlights the difficulty I had in creating Mario from scratch.

Here is a progress pic as I started layering shapes to create Mario’s body. I had the easiest time making the piranha plant because it was based on simpler shapes.

This is the image I was referring to as I made my project. It was not very easy because I was limiting myself to a smaller canvas, and had to leave out some details that I really wanted to include. (Such as the Toad Mushrooms).

LookingOutwards-06

The work is called “e4708” by Mark Wilson. This is a random computer generated artwork. I admired how there are aspects of randomness and some aspects of organized arrays and shapes in the artwork. It is very unique because it was randomly generated, but it also is unique in the sense that it looks like a colorful PCB board for computers. I think this was really eye-catching because the artwork is random but still reminds me of something tangible and real. The artist supposedly used layers that helped produce some of the calculated repetition in the artwork, but most of the aspects were “left to chance” and were randomly chosen by the computer. Mark Wilson’s artistic sensibilities are manifested in this final form, because based on his previous works, a lot of his works use repetition of circles and squares in rows and columns, and all seem to look somewhat like machinery/computer parts.

https://www.widewalls.ch/magazine/computer-generated-art-10-artworks

This is “e4708” by Mark Wilson, in which he combined both randomly generated pieces of art and his own calculated repetitions.

Project-06-Abstract Clock

For this project I wanted to create a hospital scene to demonstrate time, and how lucky we are to experience time and have a beating heart. The IV drip represents minutes with markers indicating mid and quarter points. The heart monitor represents seconds, and the window scene outside indicates if it is morning or evening. Additionally, I threw in some moving clouds and spinning stars to make the window view more dynamic! Below are also pictures of how it looks during day and night time.

graanak-06

//Graana Khan
// Section B
// graanak@andrew.cmu.edu
// Porject-06

/* Seconds is shown by the heart monitor, minutes are shown by the blood bag IV decreasing,
and hours are shown by whether the window displays a nighttime or daytime scene. */

function setup() {
    createCanvas(480, 480);
    background(220);
    var x = 0;   
}

function draw() {
    let h = hour();
    let m = minute();

	background(237, 237, 239);
	noStroke();
	fill(56, 46, 35);
	rect(0, 407, 481, 73);

	//window frame 
	noStroke();
	fill(190, 195, 198);
	rect(164, 268, 258, 20);
	rect(175, 30, 235, 241);

	//iv drip
	fill(216);
	rect(18, 457, 80, 5, 10);
	rect(56, 127, 5, 333, 10);
	rect(59, 134, 48, 5, 10);
	rect(103, 135, 4, 9, 10);

	//iv drip bag and wire  
	stroke(225, 224, 252);
	strokeWeight(2);
	noFill();
	rect(88.5, 144, 34, 62.5, 10);
	strokeWeight(1);
	fill(147, 6, 6);
	beginShape();
	curveVertex(103, 206);
	curveVertex(103, 206);
	curveVertex(103, 293);
	curveVertex(106, 322);
	curveVertex(128, 342);
	curveVertex(182, 357);
	curveVertex(291, 357);
	curveVertex(292, 353);
	curveVertex(182, 353);
	curveVertex(129, 338);
	curveVertex(109, 319);
	curveVertex(107, 293);
	curveVertex(107, 206);
	curveVertex(107, 206);
	endShape();

	//iv blood with changing minutes 
	noStroke();
	fill(147, 6, 6);
	rect(90, 145+m, 30, 60-m, 10);
   
    // iv bag lines showing mid points of the minutes
    stroke(225, 224, 252);
	strokeWeight(2);
	line(89, 160, 93, 160);
	line(89, 175, 99, 175);
	line(89, 190, 93, 190);

    //window appearance
	if(h < 18 & h > 5){
		daytime();
	} else{
		nighttime();
	}

	//table
	noStroke();
	fill(255);
	rect(92, 308, 6, 141, 10);
	rect(338, 308, 6, 141, 10);
	rect(92, 305, 252, 12, 10);

	//flower vase
	stroke(50, 132, 50);
	strokeWeight(2);
	line(312, 302, 312, 243);

	stroke(225, 224, 252);
	strokeWeight(1);
	noFill();
	rect(298, 263, 28, 46, 7);

    //water 
	fill(187, 201, 249, 100);
	noStroke();
	rect(298, 280, 28, 29, 7);

	//flower
	noStroke();
	fill(244, 132, 196);
	ellipse(307, 244, 11, 2);
	ellipse(318, 244, 11, 2);
	push();
	translate(308, 247);
	rotate(radians(-40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 247);
	rotate(radians(40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 249);
	rotate(radians(-70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(314, 249);
	rotate(radians(70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(308, 242);
	rotate(radians(20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 242);
	rotate(radians(-20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 239);
	rotate(radians(60));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(320, 260);
	rotate(radians(-60));
	ellipse(0, 0, 11, 2);
	pop();
	fill(255, 223, 87);
	ellipse(312, 244, 4, 3);    

	//heart monitor 
	fill(255);
	rect(143, 202, 135, 103, 20);
	fill(49, 49, 51);
	rect(147, 206, 128, 97, 20);
	fill(194, 255, 69);
	rect(240, 290, 19, 8, 10);
	fill(72, 72, 255);
	ellipse(233, 294, 8, 8);

	//hospital bed 
	fill(180, 178, 191);
	rect(73, 364, 310, 16, 20);
	rect(73, 331, 15, 45, 20);
	push();
	translate(450, 268);
	rotate(radians(45));
	rect(10, 0, 18, 134, 20);
	fill(199, 221, 239);
	rect(-17, 15, 27, 117, 40);
	pop();
	fill(199, 221, 239)
	rect(89, 337, 285, 27, 20);

	fill(180, 178, 191);
	rect(80, 368, 5, 93, 10);
	rect(378, 368, 5, 93, 10);
	
	stroke(216);
	strokeWeight(3);
	fill(255);
	ellipse(82, 461, 18, 18);
	ellipse(380, 461, 18, 18);

	//heart monitor seconds tracker
	let sec = map(second(), 0, 60, 0, 120);
	var x = sec;
	heartmonitor(x);

}

function daytime(){
	noStroke();
	fill(213, 231, 247);
	rect(186, 42, 211, 217);
	fill(255, 255, 255, 150);
	rect(210 + (mouseX/50), 55, 52, 21, 20);
	rect(238 + (mouseX/50), 68, 39, 21, 10);
	rect(331 + (mouseX/50), 86, 48, 28, 10);
	rect(261 + (mouseX/50), 168, 38, 21, 10);
	rect(244 + (mouseX/50), 179, 38, 21, 10);
    fill(247, 221, 109, 100);
    circle(292, 80, 63);
    fill(247, 221, 109);
    circle(292, 80, 50);
}

function nighttime(){
	noStroke();
	fill(12, 33, 48);
	rect(186, 42, 211, 217);
	noFill();
	stroke(234, 234, 139, 200);
	strokeWeight(2);
	push();
	translate(360, 75);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(357, 166);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(226, 121);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(292, 80);
	noStroke();
	fill(255, 255, 255, 100);
    circle(0, 0, 63);
    fill(255);
    circle(0, 0, 50);
    pop();
}

function heartmonitor(x){
	noStroke();
	fill(247, 8, 162);
	beginShape();
	curveVertex(149 + x, 255);
	curveVertex(149 + x, 255);
	curveVertex(148 + x, 254);
	curveVertex(147 + x, 255);
	curveVertex(149 + x, 258);
	curveVertex(151 + x, 255);
	curveVertex(150 + x, 254);
	curveVertex(150 + x, 254);
	endShape();
}