Month: September 2021

Dorfelt works on Grief

I found Matthais Dorfelt’s work interesting because of how real it looked compared to a human hand. Specifically in his computer-generated drawings of grief, which reminds me of art from the show Adventure Time. All the works kept the same style and crying aspect with an open mouth, but all were still different. I found it spooky that it looked human-made and not coded. I would assume that whatever algorithm was used had a lot of if-then statements because I would think they ran the same code multiple times to get all the images. Perhaps they had if the body is pink then the mouth has these measurements and colors, etc. I feel that the artists are present in the algorithm because all of his work is displayed with a certain art style that is very contemporary, none of it seems to stray too far from that path. I like the way he specifies spontaneity as a part of his process.

https://www.mokafolio.de/works/Grief

Looking Outwards 02: Generative Art

Person standing in front of GITEX project of Dubai

GITEX is a project created by Marek Bereza and Felix Faire (of Marshmallow Laser Feast, an experiential collective based in London) that visualizes sets of urban data from Dubai in an interactive and immersive experience for the user. The 3D visualization and interaction software was written from scratch in C++.

Data is often hard to comprehend, especially for those unfamiliar with how to read data, yet it’s relevant to all our lives and the decisions we make. By turning sets of urban data into a visual, interactive experience, this project allows a resident of Dubai (or anyone else) to explore the city in perspectives that otherwise wouldn’t be accessible. I particularly admire this project because it both enables the average person to make more informed decisions about their own city, while also being a beautiful work of art in itself.

3D visualization of Dubai

I don’t know much about the algorithm that generated the work, since it was built in scratch in C++. I do know that it must have incorporated a large variety of sets of data (traffic collisions, topographical data, geographic data, types of locations, etc).

Because the creators wrote the program from scratch, they would’ve implemented their own way of visualizing the city. It’d be fascinating if different people were to create their own version of this program: each person could convey which aspects of the city they find most important. For someone environmentally focused, they could emphasize green space and natural life in their visualization. For someone culturally focused, they could highlight the different cultures, ethnicities, and neighborhoods within a city.

While this is an amazing piece of work on its own, it’d be ideal if the concept could be transformed into a program where non-coders could upload their own sets of data and create personal maps of cities. This would enable people to communicate much more effectively in regards to any urban issues to want to advocate for.

LO: My Inspiration

The project “Burger King” by Yixuan Cheng is something I admire because of the coherence and smoothness in the stop motion animation. Even though these are actual physical objects, she made them seem as if they are actually moving through her computational skills. The amount of time and effort put into this to make the illusion of motion through the cute characters she physically made is something I admire. Her meaning through this animation relayed the idea that Burger King is cheap, and she is showing this through the extreme actions of the burger onto the small creature. She created this project by using Adobe Illustrator and Dragonframe Stop Motion. Her works in illustration and animation could have been inspired by Tim Burton who is also a great artist that works with stop motion animation and illustration.

https://www.behance.net/gallery/64126683/BURGER-KING

Project 1: My Self-Portrait

luca-portrait

function setup() {
    createCanvas(1000, 1000);
    background(180);
}

function draw() {
    background(171,130,130)
    text("Luca's portrait",15,20)

    //hoodie
    fill(61,64,91)
    ellipse(500,700,500,200)
    fill(229,229,229)
    ellipse(500,700,450,200)


    //body
    fill(244,241,222)
    rect(450,765,100,245)//shirt
    fill(61,64,91)
    rect(280,765,200,245)//bodyr
    fill(61,64,91)
    rect(550,765,200,245)//bodyl
    fill(61,64,91)
    ellipse(270,840,150,150)//shoulderr
    fill(61,64,91)
    ellipse(738,840,150,150)//shoulderl
    fill(61,64,91)
    rect(210,850,120,200)//armr
    fill(61,64,91)
    rect(730,780,190,120)//upperarm
    fill(61,64,91)
    rect(800,500,120,290)//arm
    fill(255,215,215)
    rect(800,400,100,100)//hand
    fill(34,19,17)
    rect(580,900,100,10)//pocket
    fill(224,122,95)
    rect(600,850,10,50)//pen

     //facefeatures
    fill(34,19,17)
    ellipse(500,420,500,400)//hair1
    fill(255,215,215)
    ellipse(500,520,450,470)//head
    fill(255,255,255)
    ellipse(400,525,100,50)//eyeright
    fill(34,19,17)
    ellipse(380,525,40,30)//pupilright
    fill(255,255,255)
    ellipse(600,525,100,50)//eyeleft    
    fill(34,19,17)
    ellipse(580,525,40,30)//pupilleft
    fill(34,19,17)
    rect(345,455,100,20)//browr
    fill(34,19,17)
    rect(550,440,100,20)//browl
    fill(255,210,218)
    rect(480,510,50,100)//noseb
    fill(255,210,218)
    ellipse(506,600,60,55)//nose

    fill(34,19,17)//hair
        ellipse(500,310,60,60)
        ellipse(480,330,60,60)
        ellipse(530,310,60,60)
        ellipse(560,320,60,60)
        ellipse(600,300,60,70)
        ellipse(460,300,60,60)
        ellipse(430,300,60,60)
        ellipse(400,310,60,60)
        ellipse(370,300,60,60)
        ellipse(320,360,60,60)
        ellipse(340,330,60,60)
        ellipse(600,330,60,60)
        ellipse(620,330,60,60)
        ellipse(630,340,60,60)
        ellipse(650,330,60,60)
        ellipse(680,350,60,60)
        ellipse(690,370,60,60)
        ellipse(700,400,60,60)
        ellipse(710,420,60,60)
        ellipse(300,400,60,60)

    fill(34,19,17)
    stroke(0)
    strokeWeight(5)
    line(450,700,550,700)
    noloop();

}

Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “//” to label each graphic element.

Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.

Project 1: My Self Portrait

camel_self_portrait

function setup() {
    createCanvas(670, 750);
    background(232,228,130);
}

function draw() {
    noStroke();

    fill(0,0,0);
    rect(70,50,450,480,200); //back hair

    fill(255,160,122);
    rect(140,150,310,350,150); //head

    fill(188,143,143);
    rect(0,550,600,800,150); //body

    fill(255,160,122);
    rect(255,450,90,150,80); // neck

    fill(0,0,0);
    rect(110,65,200,200,100); //left bang

    rect(280,65,200,200,100); //right bang

    rect(120,230,40,300,30); //left stroke

    rect(430,230,40,300,30); //right stroke

    rect(480,200,100,200,70); //clip

    ellipse(520,170,80); //clip piece

    ellipse(237,330,30); // left eye

    ellipse(355,328,30); // right eye

    fill(255,127,80);
    rect(280,330,30,70,30); //nose

    fill(220,20,60);
    ellipse(300,430,50); //mouth

    fill(255,160,122);
    rect(250,400,120,20);

    fill(240,128,128,100);
    ellipse(200,400,100); // left blush
    ellipse(395,400,100); // right blush

    fill(255,160,122);
    rect(500,510,150,160,50); //palm
    rect(542,600,80,210); //wrist
    //rect(450,590,80,40,50); //thumb
    rect(510,420,32,130,50); //index finger
    rect(550,410,32,130,50); //middle finger
    //rect(580,410,32,130,50); //ring finger
    //rect(615,450,32,100,50); //little finger


    strokeWeight(5);
    stroke(218,165,32);
    fill(255,255,255,50);
    ellipse(230,330,100); // left frame
    ellipse(365,328,100); // right frame
    line(280,330,310,330); // frame connector

    noLoop();
}

Project 1: My Self Portrait

Self-Portrait Code

function setup() {
    createCanvas(600, 700);
    background(245);
}
function draw() {
//hair
     strokeWeight(0);
    fill(226, 194, 121);
    ellipse(300, 230, 310, 285);
    rect(145, 230, 310, 500);    
//head
    fill(245, 224, 204);
    ellipse(300, 290, 290, 340);
//cheeks
    fill(238, 158, 158);
    ellipse(225, 300, 80, 43);
    ellipse(375, 300, 80, 43);
//nose
   fill(245, 189, 173);
   circle(300, 310, 30);
   fill(245, 224, 204);
   rect(270, 280, 60, 30);
//eyes
    noFill();
    strokeWeight(5);
    stroke(100)
    arc(230, 255, 55, 30, PI, 0);
    arc(370, 255, 55, 30, PI, 0);
//mouth
    arc(300, 370, 45, 30, 0, PI);
    strokeWeight(0);
//shirt
    //(how the cords of quad ordered) top left, top right, bottom right, bottom left
    fill(187, 209, 153);
    quad(90, 540, 250, 510, 250, height, 90, height);
    rect(250, 510, 100, 240);
    quad(350, 510, 510, 540, 510, height, 350, height);
//neck
    fill(245, 224, 204);
    rect(250, 440, 100, 70);
    circle(300, 500, 100);
}

What was most challenging was just planning out the drawing and deciding what coordinates I wanted and how I wanted to approach the code.

Project-01-My Self Portrait

handin-01_heejins-01-project_sketch

//Heejin Son Section D
function setup() {
    angleMode(DEGREES); //set up the code to work in degrees
    createCanvas(910, 717);
    background(96, 96, 96);
}

function draw() {
    strokeWeight(1);
    fill(173, 195, 232); //murky blue
    rect(245, 293, 466, 426); //smaller background rectangle
    ellipse(280, 506, 405, 323); //background ellipse left
    ellipse(667, 506, 405, 323); //background ellpise right
    ellipse(457, 538, 252, 161); //ellipse for the face
    fill(36, 26, 26); //brown
    ellipse(419, 524, 11, 25); //left eye
    ellipse(485, 524, 11, 25); // ight eye
    fill(150, 22, 22); //red
    ellipse(451, 539, 10, 10); // nose
    ellipse(416, 626, 35, 46); //left hand
    ellipse(502, 624, 35, 46); //right hand
    ellipse(389, 640, 12, 12); //paws for left hand
    ellipse(410, 660, 13, 13); //paws for left hand
    ellipse(440, 650, 12, 12); //paws for left hand
    ellipse(476, 641, 12, 12); //paws for right hand
    ellipse(499, 660, 14, 14); //paws for right hand
    ellipse(526, 652, 10, 10); //paws for right hand
    line(292, 506, 376, 536); //left whiskers
    line(299, 582, 379,554); //left whiskers
    line(520, 537, 627, 478); //right whiskers
    line(518, 554, 629, 575); //right whiskers
    rect(414, 401, 44, 56); //rectangle for the hat
    fill(24, 159, 10); //green
    triangle(458, 401, 489, 354, 512, 406); //triangle for the hat
    fill(150, 22, 22); //red
    triangle(512, 406, 552, 409, 535, 445); //end triangle for the hat
    ellipse(343, 489, 42, 42); //circle for the bubbles
    fill(196, 177, 50); //yellow
    ellipse(347, 447, 20, 20); //circle for the bubbles
    fill(31, 50, 85); //navy
    ellipse(319, 418, 24, 24); //circle for the bubbles
    fill(181, 85, 21); //orange
    ellipse(106, 350, 40, 40); //outer bubbles
    fill(31, 85, 48); //green
    ellipse(79, 266, 70, 70); // outer bubbles
    fill(196, 177, 50);
    ellipse(139, 192, 40, 40); // outer bubbles
    fill(31, 85, 48);
    ellipse(627, 116, 50, 40); //butterfly
    fill(31, 50, 85);
    ellipse(645, 172, 70, 60); //butterfly
    fill(150, 22, 22);
    ellipse(682, 105, 30, 20); //butterfly
    fill(181, 85, 21);
    ellipse(717, 147, 70, 60); //butterflys
    line(653, 95, 635, 72); //butterfly
    line(660, 95, 667, 58); //butterfly
    fill(31, 85, 48);
    fill(31, 50, 85);
    rect(350, 208, 160, 102); //house
    fill(150, 22, 22); //red
    triangle(325, 210, 530, 210, 432, 140); //house
    rect(0,700, 910, 20); //bottom rectangle




    
}

Project 1: Self Portrait

project-01

project-01

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

function draw() {
    background(2, 3, 200);
    fill(255);
    triangle(400, 650, 475, 850, 325, 850);
    rect(50, 50, 500, 600);
    stroke(0);
    strokeWeight(5);
    noFill();
    triangle(400, 850, 450, 900, 350, 900);
    curve(70, 220, 100, 170, 250, 165,  280, 222);
    curve(270, 222, 300, 165, 450, 170,  480, 220);
    fill(0);
    arc(150, 170, 60, 40, 0, 3);
    arc(350, 170, 60, 40, 0, 3);
    fill(255);
    arc(150, 170, 60, 40, .5, 1);
    arc(350, 170, 60, 40, .5, 1);
    fill(255, 173, 226);
    noStroke();
    ellipse(175, 300, 50, 100);
    ellipse(375, 300, 50, 100);
    fill(250, 160, 210);
    ellipse(175, 300, 40, 40);
    ellipse(375, 300, 40, 40);
    stroke(0);
    strokeWeight(5);
    fill(0);
    curve(200, mouseY/2, 225, 400, 325, 400,  350, mouseY/2);
    noFill();
    curve(70, 100-(mouseY/2), 120, 100, 220, 100,  280, 100+(mouseY/2));
    curve(270, 100+(mouseY/2), 320, 100, 420, 100,  480, 100-(mouseY/2));

}

Tweaking the numbers to get object into the right place on the canvas was pretty tedious and unintuitive at first, but once I had a couple shapes down for reference it got much easier.

Project 1: My Self Portrait

renee-portrait

function setup() {
    createCanvas(975, 1133);
}

function draw() {
    background(0);
    fill(59, 84, 106);
    rect(0, 0, 975, 1133);
    fill(236, 229, 215);
    circle(893, 592, 738);
    fill(98, 118, 108);
    rect(736, 433, 213, 31);
    fill(198, 132, 47);
    rect(739, 464, 210, 68);
    fill(98, 118, 108);
    rect(947, 435, 30, 286);
    fill(98, 118, 108);
    rect(446, 335, 219, 795)
    fill(241, 209, 195);
    circle(727, 699, 199);
    fill(98, 118, 108);
    rect(448, 96, 526, 237);
    fill(241, 209, 195);
    rect(0, 0, 120, 1133);
    fill(221, 165, 111);
    rect(120, 0, 64, 1130);
}

(the portrait is cut off because the dimensions of the canvas does not fit word space)

This project was interesting because it was the first time I made a self portrait out of shapes, so it was fun to get creative.

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(400, 600);
  }
  
function draw() {
    
    background(54, 47, 117);
    
    // print(mouseX, mouseY);
    
    // hair
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(0);
    curveVertex(40, 600);
    curveVertex(40, 600);
    curveVertex(63, 358);
    curveVertex(108, 255);
    curveVertex(198, 216);
    curveVertex(288, 255);
    curveVertex(334, 358);
    curveVertex(360, 600);
    curveVertex(360, 600);
    
    endShape();
    
    
    
    // shoulder and neck
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(253, 236, 231);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(184, 490);
    curveVertex(216, 490);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // face
    beginShape();
    
    strokeWeight(4);
    stroke(0)
    curveVertex(199, 500);
    curveVertex(199, 500);
    curveVertex(135, 466);
    curveVertex(120, 369);
    curveVertex(159, 334);
    curveVertex(198, 300);
    curveVertex(218, 334);
    curveVertex(280, 369);
    curveVertex(265, 466);
    
    curveVertex(199, 500);
    curveVertex(199, 500);
    
    endShape();
    
    
    
    // clothes
    beginShape();
    
    fill(253, 151, 156);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(201, 546);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // eyes
    fill(0);
    circle(160, 400, 26);
    circle(240, 400, 26);
    
    
    
    // eyelids
    strokeWeight(8);
    noFill();
    arc(160, 393, 34, 16, PI + PI/24, - PI/6);
    arc(240, 393, 34, 16, PI + PI/6, - PI/24);
    
    
    
    // eyebrows
    arc(160, 380, 52, 20, PI + PI/16, - PI/6);
    arc(240, 380, 52, 20, PI + PI/6, - PI/16);
    
    
    
    // mouth
    strokeWeight(8);
    stroke(0)
    line(192, 450, 210, 450);
    
    
    
    // nose
    arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
    
    
    
    // stars
    noStroke();
    fill(251, 255, 5);
    
    triangle(112, 54, 120, 24, 128, 54);
    triangle(112, 56, 120, 86, 128, 56);
    triangle(90, 56, 120, 48, 120, 64);
    triangle(120, 48, 120, 64, 150, 56);
    
    triangle(312, 154, 320, 124, 328, 154);
    triangle(312, 156, 320, 186, 328, 156);
    triangle(290, 156, 320, 148, 320, 164);
    triangle(320, 148, 320, 164, 350, 156);
    
    circle(50, 80, 8);
    circle(170, 150, 16);
    circle(230, 50, 12);
    circle(360, 100, 12);
    
    
    
    /* when mouse is on canvas, 
    the circle stars will start blinking, 
    and the character will open her mouth */
    
    if ((mouseX > 0) & (mouseX < width) &&
        (mouseY > 0) && (mouseY < height)) {
      
      // add rings for blinking effect
      let starR1 = random(8, 16);
      let starR2 = random(16, 24);
      let starR3 = random(12, 18);
      noFill();
      strokeWeight(1);
      stroke(251, 255, 5)
      circle(50, 80, starR1);
      circle(170, 150, starR2);
      circle(230, 50, starR3);
      circle(360, 100, starR3);
      
      // open mouse
      strokeWeight(6);
      stroke(0);
      fill(254, 97, 97);
      arc(201, 451, 22, 30, 0, PI);
  
    } 
      
    
  }