Month: September 2022

Project 01

this is my project 1

sketch 

function setup() {
    createCanvas(350, 405);
    background(224, 179, 179);
    text("Xinran Yu, Section A");
}

function draw() {
    strokeWeight(0);

    //hair    
    if(mouseX < (width/2)) {
        fill(79, 62, 53); 
        ellipse(170, 190, 200, 200);
        rect(70, 200, 200, 250)
    } else if(mouseX > (width/2)) {
        fill(35, 35, 35);
        ellipse(170, 190, 200, 200);
    rect(70, 200, 200, 250);
    }  

    //ear
    fill(210, 159, 137);       
    ellipse(95, 220, 20, 40);
    ellipse(245, 220, 20, 40);
    fill(245, 208, 155);
    rect(91, 232, 5, 40);
    rect(245, 232, 5, 40);
    
    //neck
    fill(177, 156, 144);       
    triangle(135, 280, 205, 280, 170, 370);
    
    //face
    fill(240, 221, 210);       
    ellipse(170, 210, 150, 170);
    
    //eyes
    fill(0)                    
    ellipse(140, 200, 20, 30);
    ellipse(200, 200, 20, 30); 
    fill(255, 255, 255, 150);
    ellipse(136, 203, 10, 15);
    ellipse(196, 203, 10, 15);

    //clothes
    fill(85, 112, 142);        
    rect(95, 330, 150, 200);
    ellipse(95, 405, 159, 150);
    ellipse(255, 405, 150, 150);
    fill(122, 163, 208);
    triangle(95, 330, 245, 330, 170, 380);

    //eyebrows
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(125, 177);
    curveVertex(125, 177);
    curveVertex(135, 175);
    curveVertex(145, 175);
    curveVertex(153, 177);
    curveVertex(153, 177);
    endShape();
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(185, 177);
    curveVertex(185, 177);
    curveVertex(195, 175);
    curveVertex(205, 175);
    curveVertex(213, 177);
    curveVertex(213, 177);
    endShape();
       
    //nose
    strokeWeight(0);
    fill(210, 159, 137);       
    triangle(160, 225, 180, 225, 170, 250);

    //mouth
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(150, 260);
    curveVertex(150, 260);
    curveVertex(165, 270);
    curveVertex(175, 270);
    curveVertex(190, 260);
    curveVertex(190, 260);
    endShape();
}

My Inspiration

A project that inspired me a lot is Walt Disney Pictures and Pixar Animation Studio’s collaboration movie “Up”. Released in 2009, the movie took the team 5 years to create. Besides the touching plot line of the movie, I also admire the movie’s stunning animation, including the thousands of balloons, the character’s realistic and detailed looks, and the beautifully illustrated landscape views. To animate the movie, the studio uses their unique software “Presto”. It is developed and used in-house by Pixar Animation Studios in the animation of its features and short films. Presto is not available for sale and is only used by Pixar. According to the movie director Pete Docter, the movie’s animation style took inspiration from “Toy Story”. New programs were made to simulate the cloth and other textures. These new designs would bring animation to new levels in the future.

Up ( 2009 film) The Balloon House

Favour -Looking Outwards 02

This project by Michael Hansmeyer is called The White Tower, and is a 29-meter tall tower which is entirely 3D printed. Things I admire about the project apart from its monumentality, is how the patterns were coded to create a spatial atmosphere. I enjoy that the shape was generated by code, because you can see how perfect each pattern is, how incredibly symmetrical each pair of pillars are, as they wrap perfectly around the structure, forming different kaleidoscope-like patterns. The White Tower will be 3D printed using a concrete extrusion process. In this new-age fabrication process, a robot applies 5mm thin layers of soft concrete through a nozzle. For the design process, digital technologies are used. It is not mentioned what the specific software is called but it is a generative modeling software which likely runs with Python as language. Without custom software, precise geometrical definition would not be possible. Michael’s artistic abilities manifest through the types of patterns used and how many are used at a certain time. The scale of these patterns also impact the design, as well as how the architect planned the pillar placements, bevels and embellishments to create different types of pillars on one project.

The White Tower- render

Looking Outwards -02

Hannah Wyatt

I admire Luluixixix’s art pieces because they exude a sense of humanity and beauty, yet are entirely Ai-generated. The color palettes are vibrant, and contrast well with the subject matter, creating an abstract human-like form/gesture. LuluxxX is a generative artist and software developer specializing in vibrant, feminine works and controversial statement pieces. 

Transformative Work by LuluxxX
“Not Minted”

Luluixixix works as a CGI/3d artist in the Paris Visual Effects industry, and started experimenting with Artificial intelligence technology in 2015. Her art combines the “glitch and pixel sorting” aesthetics using optical flow analysis tools to capture motion and convert to moving footage.

The creator’s artistic sensibilities manifest through the use of several different algorithms with “infinite combinations” as she states on her website. She also notes her attention to color manipulation in this piece, applying the technique to her other projects. Luluixixix uses a cli workflow, final compositing with Gimp Linux, and lastly, she builds all her own tools using open-sourced and custom code

Link to her work and website

https://www.luluixixix.com/pixsort#!

anabelle’s project 01

this is my project

sketch
// anabelle lee < 3
// section c

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

function draw() {
    //pink heart side
    background(255);

    if ((mouseX < 400 & mouseY > 300) ||
        (mouseX < 400 && mouseY < 300) ||
        (mouseX > 400 && mouseY < 300)) {
        
        // pink background
        fill(235, 192, 194);
        square(50, 50, 500);
        
        // back hair
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75); 
        rect(100, 250, 400, 220); 

        // face
        noStroke();
        fill(255, 238, 222);
        circle(300, 300, 300);

        // neck
        rect(260, 400, 80, 150);

        // ears
        circle(160, 300, 70);
        circle(440, 300, 70);

        // side bangs
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75);
        triangle(160, 250, 140, 400, 180, 400)
        triangle(440, 250, 420, 400, 460, 400)

        // top hair
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(300, 390, 450, 600, (7*PI/6), (11*PI/6), CHORD);

        // forehead
        noStroke()
        fill(255, 238, 222);
        triangle(300, 164, 245, 280, 360, 280);

        // front bangs
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(100, 150, 400, 400, 0, HALF_PI, CHORD);
        arc(527, 25, 500, 650, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // eyes
        stroke(92, 64, 51); 
        strokeWeight(5);
        noFill()
        arc(370, 320, 80, 45, radians(200), 0)
        arc(230, 320, 80, 45, radians(185), radians(340))

        // mouth
        happyMouth(300, 370, 120, 90);

        // cheeks
        fill(171, 95, 97);
        circle(200, 350, 25);
        circle(220, 350, 25);
        triangle(187, 354, 233, 354, 210, 380);

        circle(385, 350, 25);
        circle(405, 350, 25);
        triangle(372, 354, 418, 354, 395, 380);

        // shoulders
        fill(231, 208, 208);
        ellipse(300, 650, 420, 300);

        // heart follows mouse
        noStroke()
        fill(231, 84, 128);
        circle(mouseX - 12, mouseY, 30);
        circle(mouseX + 12, mouseY, 30);
        triangle(mouseX - 28, mouseY - 2, mouseX + 28, mouseY - 2, mouseX, mouseY + 45);

    // gray scale side
    } else {
        background(0);
        fill(150);
        square(400, 400, 50);

        //shoulders
        fill(20);
        rect(408, 440, 36, 10);

        //back hair
        fill(100); 
        stroke(80);
        rect(410, 420, 30, 20);

        // face
        fill(200);
        noStroke();
        circle(425, 425, 20); 

        //neck
        fill(200);  
        rect(423, 420, 5, 20);

        //ears
        circle(415, 425, 5);
        circle(435, 425, 5);

        //side hair
        fill(100);
        stroke(80);
        strokeWeight(1);
        triangle(415, 420, 412, 435, 418, 435);
        triangle(435, 420, 432, 435, 438, 435);

        //top hair
        arc(425, 433, 40, 50, (7*PI/6), (11*PI/6), CHORD);

        // front bangs
        arc(410, 410, 25, 35, 0, HALF_PI, CHORD);
        arc(440, 405, 30, 40, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // spotlight
        noStroke()
        fill(255, 150);
        circle(mouseX, mouseY, 200); 

    }
}

function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(255, 183, 210, 150);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 

}

Project 02

This is my self portrait

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

function draw() {
    //backgrond
    if(mouseX<width/2){
        background(186,197,62);
        stroke(112,106,41);
        fill(112,106,41);
    } else{
        background(200,170,161);
        stroke(167,118,94);
        fill(167,118,94);
    }
    
    //stars! left side
    quad(40,30,30,50,40,70,50,50);
    quad(65,55,55,75,65,95,75,75);
    quad(40,80,30,100,40,120,50,100);
    //stars! right side
    quad(350,340,340,360,350,380,360,360);
    quad(350,280,340,300,350,320,360,300);
    quad(320,305,310,325,320,345,330,325);
    
    //left face area
    stroke(158,193,210);
    fill(158,193,210);
    arc(150,130,150,150,15.3,17.8,HALF_PI); //top left area
    fill(158,193,210);
    rect(75,130,40,120);//left hair

    //right yellow area
    stroke(240,216,102);
    fill(240,216,102);
    arc(220,120,90,90,16.9,13.4,HALF_PI);
    fill(240,216,102);
    rect(235,120,30,130);//right hair

    //right dak blue area
    stroke(44,112,171);
    fill(44,112,171);
    arc(200,120,90,90,16.9,13.4,HALF_PI);
    fill(44,112,171);
    rect(215,120,30,130);//right hair

    //eye and noise
    stroke(240,216,102);
    fill(240,216,102);
    circle(125,140,60);
    stroke(240,216,102);
    fill(240,216,102);
    circle(200,140,60);
    stroke(158,193,210);
    fill(158,193,210);
    circle(200,140,55);
    stroke(194,227,245);
    fill(194,227,245);
    circle(200,140,40);
    stroke(0);
    fill(0);
    rect(163,170,5,15);
    rect(158,185,10,3);

    //horizontal lines  From top to the bottom
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,75,50,15);
    stroke(255);
    fill(255);
    rect(235,95,60,10);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,110,70,7);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,120,75,13);
    stroke(255);
    fill(255);
    rect(235,139,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,153,75,8);
    stroke(255);
    fill(255);
    rect(235,167,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,181,75,8);
    stroke(255);
    fill(255);
    rect(235,195,75,8);
    rect(235,209,75,8);

    //clothes
    stroke(240,216,102);
    fill(240,216,102);
    rect(140,230,50,20);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(110,270,90,270,60,390);
    stroke(240,216,10);
    fill(240,216,102);
    triangle(150,270,120,270,90,390);
    triangle(180,270,210,270,240,390);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(220,270,235,270,270,390);

    //button
    stroke(44,112,171);
    fill(44,112,171);
    circle(165,300,20);
    circle(165,330,20);
    circle(165,360,20);
    
    //jaw
    stroke(255);
    fill(255);
    arc(165,170,130,130,7,2.4,HALF_PI); 

    
}

Looking Outwards-02

Section A

Project Website:

http://www.thewildernessdowntown.com/

Vimeo Sample:

While looking through different generative artists, I came across the work of Aaron Koblin, who’s project “The Wilderness Downtown,” caught my eye immediately. The project involves using google street view, as well as google maps in general, to extract data which influences a short film based off of a particular city. From the different alterations displayed on his website, each of the short films are incredibly distinct and personal to the locations they are “set” in. This concept is absolutely fascinating to me, as growing up I always wanted to watch a movie set in my hometown, a sentiment I’m sure that many others felt. Now, with the technology that Koblin has created for us, this dream is starting to become a reality, albeit in small steps. Despite the short length of the film (somewhere around 30 seconds), simply seeing a single artistic representation of a personal location must be thrilling for us viewers. Although the locations of these short films are being produced from the data on a computer, they still give off the illusion that skilled artists have both visited and cared for our homes, enough to make a movie out of it.

Project 1: My Self Portrait

The most interesting about the project is using simple elements to create a meaningful drawing.

sketch
//Elmy Chen Section D

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

function draw() {
    fill (255,160,122);
    ellipse(250,250,350,410);

    fill(0,0,0);
    ellipse(150,200,40,40);
    ellipse(320,200,40,40);

    fill(255,0,0);
    triangle(220,400,280,400,250,420);

    fill(139,69,19);
    rect(50,45,90,400);
    rect(350,45,90,400);
    rect(140,45,110,100);
    rect(250,45,110,100);

}

LO: My Inspiration

Soungwen Chung is a multidisciplinary artist and in the artwork Gestures of Becoming-With, she explored a future with the communication between humans and machines. This project is super interesting for me because the author was brave enough to use groundbreaking technologies in a different field such as art. She used a robot hand to create the artwork which took her about 3 months. The artwork was created during the COVID-19 quarantine lockdown. The robot imitated her brush/marker strokes while she was painting with her hand, which interests me the most. To my knowledge, the author did not develop any custom software. Instead, she used some commercial software that was available in the market.

Reference
Chung, Soungwen. Gestures of Becoming-With. 2021, Brooklyn.

project 1

this is my project

sketch

The most interesting part of this project was finding ways to creatively layer shapes to make new ones.

function setup() {
    createCanvas(200, 200);
    angleMode(DEGREES);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(195, 216, 212); //LIGHT MINT
    noStroke(); //apply to all bellow 
    fill(70, 45, 45); //DARK BROWN 
        rect(35, 50, 130, 130); //background hair 
    fill(100, 169, 150); //DARK MINT 
        ellipse(100, 200, 170, 150)//shirt
    fill(200, 162, 146); //MEDIUM FACE
        triangle(60, 125, 140, 125, 100, 175); //neck
        ellipse(50, 93, 45, 45); //ear left
        ellipse(150, 93, 45, 45); //right ear
    fill(225, 196, 183); //LIGHT FACE 
        ellipse(100, 90, 100, 120);//face
    fill(195, 216, 212); //forhead cover (hide top of head poking out of bangs)
        ellipse(100, 50, 100, 50)
    fill(130, 90, 70); //MEDIUM BROWN  
        ellipse(70, 64, 85, 55); //left hair Bang
        ellipse(130, 64, 85, 55); //right hair Bang
        ellipse(100, 130, 30, 5); //mouth
    fill(200, 162, 146); //MEDIUM FACE 
        ellipse(75, 106, 25, 25); //left eye
        ellipse(125, 106, 25, 25); //right eye
    fill(230, 130, 130); //PINK
        ellipse(100, 115, 15, 10); //nose?
    fill(195, 216, 212); //LIGHT MINT
        ellipse(75, 103, 20, 20); //left eye
        ellipse(125, 103, 20, 20); //right eye
    fill(70, 45, 45); //DARK BROWN
        ellipse(75, 102, 13, 13); //left eye
        ellipse(125, 102, 13, 13); //right eye
    //fill(225, 196, 183); //LIGHT FACE
        //rect(55, 92, 90, 7); //brow 
}