Category: SectionA

LO 2: My Admiration

The art piece “Into the Trees” published on September 8th, 2010 by Robert Hodgin and Zoë Keating mixes code and keyboard commands with music, to create a stunning video of redwoods. When I first saw this piece, I found it eye catching, aesthetically pleasing, and quite simply, beautiful. After reading about it, I saw it was modeled after the redwoods of northern California, home of the composer, Zoë. I admired this, because I’ve always wanted to live in a redwood house when I first learned of how huge they are. Also, I love listening to instrumental music and I believe the cello is a beautiful instrument. I admire all of these elements, including how the piece operates, because they resonate with me and my likes. Robert normally makes a simple beat, but was inspired by Zoë’s music, and expanded his senses to create code that matched the haunting and somber beat of Zoë’s cello. The code was more extensive than creating basic 3D objects (e.g a table or shapes), so Robert had to invest in additional tech to get the granular aspects of the trees, etc. The extra care and articulation makes this a wonderful collaboration.

Here’s the link for more information: http://roberthodgin.com/project/into-the-trees

And a short clip of the artwork:

LO-2: Marius Watz’s Probability Lattice

I selected Marius Watz on the basis that he was not an American, but was intrigued immediately upon seeing his work. The work of his I chose to focus on was his Probability Lattice installation, which are printed figures from a Makerbot 3D printer. I was drawn to these as they seem to have ordered randomization, where the patterns change, but there is continuity that stems from the change. Finding where the change occurs is fascinating. Watz does not explain his process or algorithm, so I did some research regarding the work’s title. Lattice theory, to put briefly, deals with order theory in regards to abstract and advanced algebra. I assume that the algorithm used by Watz randomizes probabilities with equations that produce these lattice diagrams, as he has other probability series that create other shapes with different algorithm titles. Watz is known for his bold style, ranging from sharp lines, boxy shapes, and bright colors. The algorithms I am assuming he uses must come through in this nature.

Probability Lattice, Marius Watz, May 9, 2012
Marius Watz’s Probability Lattice, May 9, 2012

Project 1: Self Portrait

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

function draw() {
    background(50, 31, 23);
    strokeWeight(0);
    fill(215, 188, 185);
    rect(150, 400, 300, 300);
    fill(230, 188, 180);
    circle(303, 150, 400);
    quad(125, 380, 480, 380, 500, 125, 105, 125);
    quad(125, 380, 480, 380, 350, 490, 255, 490);
    fill(230, 178, 175);
    quad(290, 195, 265, 340, 340, 340, 315, 195);
    triangle(265, 340, 250, 320, 300, 320);
    triangle(340, 340, 355, 320, 300, 320);
    triangle(225, 385, 263, 370, 300, 385);
    triangle(300, 385, 337, 370, 375, 385);
    fill(50, 31, 23);
    triangle(125, 195, 210, 180, 250, 195);
    triangle(350, 195, 390, 180, 480, 195);
    fill(250, 250, 250);
    ellipse(200, 225, 100, 50);
    ellipse(400, 225, 100, 50);
    fill(50, 31, 23);
    rect(25, 0, 600, 80);
    triangle(300, 90, 325, 80, 275, 80);    
    fill (50, 31, 23);
    circle (200, 225, 40);
    circle(400, 225, 40);
    fill(0, 0, 0);
    quad(150, 450, 210, 600, 0, 600, 0, 500);
    quad(450, 450, 390, 600, 600, 600, 600, 500);
    arc(300, 395, 150, 120, 0, PI);
    circle(200, 225, 15);
    circle(400, 225, 15);
    fill(250, 250, 250);
    rect(225, 385, 150, 15);
    //fill(250, 0, 0)
    //arc(300, 415, 150, 100, 0, PI)
} 

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

function draw() {
    background(50, 31, 23);
    strokeWeight(0);
    fill(215, 188, 185);
    rect(150, 400, 300, 300);
    fill(230, 188, 180);
    circle(303, 150, 400);
    quad(125, 380, 480, 380, 500, 125, 105, 125);
    quad(125, 380, 480, 380, 350, 490, 255, 490);
    fill(230, 178, 175);
    quad(290, 195, 265, 340, 340, 340, 315, 195);
    triangle(265, 340, 250, 320, 300, 320);
    triangle(340, 340, 355, 320, 300, 320);
    triangle(225, 385, 263, 370, 300, 385);
    triangle(300, 385, 337, 370, 375, 385);
    fill(50, 31, 23);
    triangle(125, 195, 210, 180, 250, 195);
    triangle(350, 195, 390, 180, 480, 195);
    fill(250, 250, 250);
    ellipse(200, 225, 100, 50);
    ellipse(400, 225, 100, 50);
    fill(50, 31, 23);
    rect(25, 0, 600, 80);
    triangle(300, 90, 325, 80, 275, 80);    
    fill (50, 31, 23);
    circle (200, 225, 40);
    circle(400, 225, 40);
    fill(0, 0, 0);
    quad(150, 450, 210, 600, 0, 600, 0, 500);
    quad(450, 450, 390, 600, 600, 600, 600, 500);
    arc(300, 395, 150, 120, 0, PI);
    circle(200, 225, 15);
    circle(400, 225, 15);
    fill(250, 250, 250);
    rect(225, 385, 150, 15);
    ellipse((width / 2), (height / 2), 60, 60);
    //fill(250, 0, 0)
    //arc(300, 415, 150, 100, 0, PI)
}

Project 1 – Self Portrait

portrait
//Rouann Self-portrait
function setup() {
    createCanvas(600, 600);
    background(255, 211, 216);
    text("I AM A LAZY PIGGY UNICORN", 10, 15);
}

function draw() {
	fill(255);
	noStroke();
	quad(291, 398, 440, 333, 526, 600, 221, 600);	//body1
	ellipse(298, 300, 450, 319);	//head2
	fill(253, 245, 206);
	triangle(230, 30, 250, 210, 360, 200);	//horn3
	stroke(0);
	strokeWeight(3);
	noFill();
	arc(270, 280, 99, 30, 0, PI);	//sleepyeye4
	noStroke();
	fill(255, 66, 133);
	ellipse(350, 340, 89, 33);	//blush5
	stroke(255, 150, 157);
	strokeWeight(6);
	line(290, 330, 280, 350);
	line(310, 325, 300, 345);
	line(330, 320, 320, 340);
	line(350, 315, 340, 335);
	line(370, 310, 360, 330);	//blush678910
	noStroke();
	fill(255, 169, 179);
	circle(170, 405, 53);	//mouth11
	fill(187, 218, 236);
	rect(323, 120, 110, 51, 53);
	rect(380, 160, 110, 49, 33);
	rect(420, 190, 110, 53, 33);
	rect(460, 230, 110, 50, 33);
	rect(470, 270, 110, 53, 33);
	rect(460, 310, 110, 53, 33);
	rect(440, 350, 110, 53, 33);
	rect(420, 390, 110, 53, 33);	//hair12
	stroke(253, 245, 206);
	strokeWeight(29);
	point(366, 120);
	point(443, 167);
	point(433, 210);
	point(500, 230);
	point(543, 280);
	point(480, 320);
	point(500, 350);
	point(550, 390);
	point(447, 440);	//dressing
	

}

LO – My Inspiration

3D Printing & Lasers was the class that first introduced me to creating digital artworks. Our professor Sidney created a virtual gallery to put our digital sculpture works in it. His design made our critique more interesting and interactive.
The sculpture works were created by students, but the gallery program was solely developed by him. The time period for him to create the gallery was short, only couple days between the deadline for our submission and our critique. The reason why I admire it so much is that he didn’t have to do all those work, but he had the passion to make our online class experience more fun and real (since it’s designed to be first-person view and u can move freely in the program) during the whole pandemic.
I’m not sure about the whole process as I’m not super knowledgeable about game design. I think he used unity to create the framework and it was released on itch.co platform.
I believe the setup for the gallery was inspired by the movie “The Shining”. It also has a hallway with rooms on both sides. When the viewer enter each room, he/she would see different artworks, some room have traps in it so you might fall into another world within the room.


This project showed how we can communicate art ideas as if we do not have those constraints.

Project 1 : Self Portrait

Week 1

sketch-self portraitDownload
function setup() {
  createCanvas(650, 650);
}

function draw() {
  background(107,116,145);
  
  //hair
  fill(132, 117, 82);
  noStroke();
  beginShape();
  curveVertex(width/2-140,290);
  curveVertex(width/2-130,230);
  curveVertex(width/2-120,350);
  curveVertex(width/2-130,550);
  curveVertex(width/2+130,550);
  curveVertex(width/2+120,350);
  curveVertex(width/2+140,250);
  endShape(CLOSE);
  
  //main body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 390);
  vertex(width/2-35, 430);
  vertex(150, 470);
  vertex(100, 550);
  vertex(100, 650);
  vertex(550, 650);
  vertex(550, 550);
  vertex(500, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 390);
  endShape(CLOSE);
  
  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,250,320)
  //ears
  ellipse(width/2-110,320,20,40)
  ellipse(width/2+110,320,20,40)
  
  
 //hats
  fill(0);
  noStroke();
  beginShape();
  curveVertex(width/2-200,300);
  curveVertex(width/2-200,320);
  curveVertex(width/2-100,100);
  curveVertex(width/2,50);
  curveVertex(width/2+100,100);
  curveVertex(width/2+200,320);
  curveVertex(width/2+200,300);
  endShape();
  
  
  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-35,350);
  curveVertex(width/2-30,360);
  curveVertex(width/2,370);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,350);
  endShape();
  
  beginShape();
  curveVertex(width/2-35,370);
  curveVertex(width/2-30,360);
  curveVertex(width/2,355);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,370);
  endShape();
  
  //nose
  fill(239, 217, 192);
  noStroke();
  beginShape();
  vertex(width/2-8, 320);
  vertex(width/2-10, 335);
  vertex(width/2+10, 335);
  vertex(width/2+8, 320);
  endShape(CLOSE);
  noLoop();
  
  fill(239, 217, 192);
  noStroke();
  beginShape();
  curveVertex(width/2-10, 335);
  curveVertex(width/2-10, 335);
  curveVertex(width/2, 340);
  curveVertex(width/2+10, 335);
  curveVertex(width/2+10, 335);
  endShape();
  
  //garment with transparency
  fill(150,190);
  stroke(220);
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(150, 460);
  curveVertex(100, 550);
  curveVertex(120, 650);
  curveVertex(520, 650);
  curveVertex(550, 550);
  curveVertex(500, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();
  
  //accessories*line
  stroke(2);
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-110,330,width/2-110,385);
  line(width/2+110,330,width/2+110,385);
  noLoop();
  
  fill(249,239,80);//the spherical structure
  ellipse(width/2-110,385,50,50);
  ellipse(width/2+110,385,50,50);
  
  
  }

Project 1: My Self Portrait

This is my project.

sketch_selfportrait-SL
function setup() {
    createCanvas(800, 720);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(247, 221, 235)
    noStroke()

    // hair
    fill(38, 23, 8)
    ellipse(400, 450, 500, 650)

    // face
    fill(235, 190, 143)
    ellipse(400, 420, 300, 400)

    // ears
    circle(250, 400, 50)
    circle(550, 400, 50)

    // neck
    rect(358, 600, 90, 300)

    // nose
    stroke(255, 222, 179)
    strokeWeight(4)
    triangle(382, 475, 400, 420, 418, 475)

    // ear holes
    noStroke()
    fill(0, 0, 0)   
    circle(245, 400, 12, 12) 
    circle(555, 400, 12, 12)

    // earrings
    fill(175, 23, 104)   
    circle(246, 420, 5, 5) 
    circle(554, 420, 5, 5)

    // eyebrows
    noFill()
    stroke(38, 23, 8)
    arc(330, 377, 80, 70, (5 * PI) / 4, (7 * PI) / 4)
    arc(470, 377, 80, 70, (5 * PI) / 4, (7 * PI) / 4)

    // bangs
    fill(38, 23, 8) 
    arc(270, 230, 240, 250, -.18, HALF_PI + QUARTER_PI, OPEN)
    arc(480, 240, 200, 180, QUARTER_PI, -2.5, OPEN)

    // mouth
    fill(255, 255, 255)
    stroke(255, 0, 0)
    strokeWeight(6)
    arc(400, 510, 75, 75, 0, PI, CHORD)
    stroke(0)
    strokeWeight(1.5)
    line(370.2, 526.5, 429.8, 526.5)
	
    // eyes (outer)
    arc(330, 385, 48, 48, PI, 0, CHORD)
    arc(470, 385, 48, 48, PI, 0, CHORD)

    // upper body    
    fill(102, 0, 51)
    square(250, 660, 300)

    //eyeballs
    fill(75, 45, 14)
    circle(330, 373, 20, 20)
    circle(470, 373, 20, 20)
    noStroke()
    fill(0, 0, 0)
    circle(330, 373, 8.5, 8.5)
    circle(470, 373, 8.5, 8.5)
    fill(255, 255, 255)
    circle(333, 375, 4, 4)
    circle(473, 375, 4, 4)
}

Project 1 : Self Portrait

sketchDownload
//Aadya Bhartia
//Section A
//Project 1 
function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(40,200,200);
		if(mouseIsPressed){ //Background chnages colour if mouse is pressed 
			background(220,20,60);
		}
	//hair background 
    stroke(200,200,120);
    fill(0);
    ellipse(width/2,height/2.3,350,400);  
    //neck
    noStroke(); 
    fill(224,175,120);//fill tan colour 
    rect(252,350,90,80);   
    //face 
    noStroke(); 
    fill(236,180,120);//fill tan colour 
    ellipse(width/2,height/2.5,250,300);
    //hair fringe
    fill(0);
    arc(240,90,180,130,220,40);
    arc(342,93,180,130,120,60);
    ellipse(400,220,55,240);
    //eyes
    fill(0);
    ellipse(250,240,20); // black
    fill(0);
    ellipse(355,240,20); // black
    fill(255);
    ellipse(245,240,4); //white
    fill(255);
    ellipse(350,240,4); //white
    //cheeks
    fill(250,154,120,120); // chnaging opacity in 4th parameter
    ellipse(250,275,40,10);
    fill(250,154,120,120);
    ellipse(355,275,40,10);
    //nose
    noStroke(); 
    fill(185,130,70); 
    ellipse(305,285,40,17); 
    fill(236,180,120);
    ellipse(305,283,43,15);  
    //lips
    noStroke(); 
    fill(140,60,50); 
    ellipse(300,325,70,30); 
    fill(236,180,120);
    ellipse(300,317,76,17); 
    //glasses
    stroke(200,110,120);
    strokeWeight(3);
    noFill();
    ellipse(250,240,60); 
    ellipse(355,240,60); 
    arc(302,248,47,40,PI,TWO_PI);
    //earrings 
    fill(160,50,73);
    noStroke();
    ellipse(182,282,28);
    triangle(180,295,170,315,190,315);
    triangle(180,310,170,325,190,325);
    fill(150);
    ellipse(175,284,8); //white
}

Project 01: Self-Portrait

project-01-selfPortrait 
function setup() {
    createCanvas(400, 450);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //background
    fill(244, 203, 195);
    noStroke();
    rect(0, 0, 400, 400);

    //shirt (bottom)
    fill(0);
    rect(100, 380, 200, 20);

    //arms
    fill(214, 179, 161);
    beginShape();
    vertex(108, 320);
    vertex(108, 360);
    vertex(85, 390);
    vertex(250, 410);
    vertex(240, 435);
    vertex(55, 410);
    vertex(50, 395);
    endShape(); //left

    fill(214, 179, 161);
    beginShape();
    vertex(300, 320);
    vertex(300, 360);
    vertex(300, 390);
    vertex(150, 410);
    vertex(155, 435);
    vertex(310, 410);
    vertex(320, 395);
    endShape(); //right
    
    //shirt (top)
    fill(0);
    rect(100, 280, 200, 100, 80, 80, 0, 0);


    //neck
    fill(214, 179, 161);
    rect(180, 220, 40, 80, 20);

    //hair
    fill(51, 26, 16);
    rect(120, 95, 160, 140, 80, 80, 0, 0);

    //face
    fill(214, 179, 161);
    ellipse(200, 180, 130, 150);    //background for face
    fill(193, 154, 138);
    ellipse(200, 230, 40, 10);  //mouth
    fill(51, 26, 16)
    rect(157, 165, 30, 3);
    rect(213, 165, 30, 3);  //eyebrows
    fill(255);
    rect(162, 175, 25, 8, 10);
    rect(213, 175, 25, 8, 10);  //eyes
    if (mouseX <= 200) {
        noStroke();
        fill(51, 26, 16);
        ellipse(165, 180, 6, 6);
        ellipse(215, 180, 6, 6);
    }
        else if (mouseX >= 200) {
            noStroke();
            fill(51, 26, 16);
            ellipse(185, 180, 6, 6);
            ellipse(235, 180, 6, 6);    //pupils
    }

    fill(193, 154, 138);
    quad(192, 205, 197, 180, 203, 180, 208, 205);
    ellipse(200, 205, 16, 10);
    ellipse(192, 203, 8, 8);
    ellipse(208, 203, 8, 8);    //nose
    stroke(255);
    strokeWeight(1);
    line(208, 203, 208, 208);   //nosering
    fill(51, 26, 16);
    noStroke();
    ellipse(225, 220, 2, 2);    //mole
    fill(214, 179, 161);
    ellipse(142, 195, 30, 30);
    ellipse(258, 195, 30, 30);  //ears

    //bangs
    noStroke();
    fill(51, 26, 16);
    arc(200, 155, 110, 120, PI, TWO_PI);


    //earrings
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipse(140, 230, 30, 50);
    ellipse(260, 230, 30, 50);

}

Project 1: Portrait

Portrait!

sketch – portraitDownload
//Thomas Chen
// 15-104 section A

function setup() {
    createCanvas(600,600);
    background(255, 230, 250);
}

function draw() {
        noStroke();
        //noFill
        rectMode(CENTER);
        //hoodie
        fill(190, 209, 230)
        ellipse(291,387,198,173);
        //body
        rect(296,615,353,399,100);   
        //hat 
        fill(177,230,215);
        ellipse(311,267,144,133);
        fill(190, 230, 218)
        beginShape()
        curveVertex(268,273);
        curveVertex(323,238);
        curveVertex(373,233);
        curveVertex(404,244);
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        endShape(CLOSE);
        fill(132, 171, 160)
        beginShape()
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        curveVertex(268,273);
        curveVertex(327,258);
        curveVertex(404,258);
        endShape(CLOSE);
        //shadow
        beginShape();
        curveVertex(242,312);
        curveVertex(374,358);
        curveVertex(379,399);
        curveVertex(305,461);
        curveVertex(226,334);
        endShape(CLOSE);
        //face
        fill(232,199,155);
        beginShape();
        curveVertex(383,258);
        curveVertex(383,344);
        curveVertex(356,392);
        curveVertex(334,399);
        curveVertex(306,392);
        curveVertex(267,344);
        curveVertex(267,334);
        curveVertex(244,322);
        curveVertex(238,293);
        curveVertex(253,288);
        curveVertex(267,300);
        curveVertex(268,273);
        curveVertex(327,258);
        endShape(CLOSE);
        //neck
        quad(267,344,343,396,305,461,267,403);
        //lines
        strokeWeight(3);
        stroke(124, 139, 156);
        beginShape(LINES)
        vertex(199,420);
        vertex(226,441);
        vertex(226,441);
        vertex(254,461);
        vertex(254,461);
        vertex(287,503);
        endShape();
        line(200,555,200,600);
        line(400,555,400,600);
        stroke(196, 168, 130);
        line(350,306,350,340);
        line(350,340,340,338);
}