Author: christyzo

Project 5: Wallpaper

czo-05-project
var x = 75;
var y = 75;
function setup() {
    createCanvas(600, 600);
    background(207, 241, 252);
    rectMode(CENTER);
    ellipseMode(CENTER);
}

function module(x, y) { //creating the individual circular modules
    noStroke();
    fill(255);
    ellipse(x, y, 150, 150);
    fill(207, 241, 252); //alternating fills of white and blue to create a visual pattern
    rect(x, y, (150/sqrt(2)),(150/sqrt(2)));
    fill(255);
    ellipse(x, y, 100, 100);
    fill(207, 241, 252);
    ellipse(x, y, 100, 50);
    ellipse(x, y, 50, 100);
    fill(255);
    ellipse(x, y, 80, 30);
    ellipse(x, y, 30, 80);
    fill(207, 241, 252);
    ellipse(x, y, 40, 40);
    fill(255);
    rect(x, y, (40/sqrt(2)),(40/sqrt(2)))
    fill(207, 241, 252);
    ellipse(x, y, 40, 10);
    ellipse(x, y, 10, 40);

}

function draw() {
    for (x = 75; x <= 725; x += 150) { // creating a grid to make a patterned wallpaper
        for (y = 75; y <= 725; y += 150){
            module(x, y);
        }
    }
}

I really like playing with geometry and colors, so I wanted to create something that can resemble a pattern or even a visual illusion when looked at from a distance.

Looking Outwards 05: 3D Computer Graphics

As soon as I read the prompt, I was reminded of the recent exhibition in the Miller ICA gallery by Jacolby Satterwhite.

Jacolby Satterwhite, Reifying Desire 6, 2014. HD digital video

Among many of his artworks in the gallery, the digital videos created by 3D computer graphics stood out to me the most. It was a very different experience from physical installations and 2D videos, because it seemed to be existing in its own world. The rotation of the camera angle and the individual movement of the characters and elements were really intriguing to me. I think the way lighting and shadow is programmed to be so natural is fascinating. I think this kind of 3D computer graphic medium is very appropriate for Jacolby Satterwhite’s work, as he as transforms existential uncertainty into a generative engine of resilience, reinvention, and celebration.

Project-04: String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 20;

function setup() {
    createCanvas(400, 300);
    background(0);

    //setting up star shaped template
    rectMode(CENTER);
    fill(50);
    noStroke();
    // stroke(255,0,0);
    push();

    translate(200, 150);
    rotate(radians(45));
    rect(0, 0, 200, 200);

    pop();
    translate(200, 150);
    rect(0, 0, 200, 200);

    //increments
    dx1 = (100-100)/numLines;
    dy1 = (250-200)/numLines;
    dx2 = (340-200)/numLines;
    dy2 = (151-291)/numLines;

}

function draw() {
    stroke(255);
    // reference: line(100, 50, 100, 250);
    // reference: line(200, 291, 340, 151);

    //line1_top left to bottom center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 291;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }

    //line 2_bottom left to right center
    var x1 = 100;
    var y1 = 250;
    var x2 = 340;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += -dx2;
        y2 += -dy2;
    }

    //line3_bottom right to top center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += -dy2;
    }

    //line 4_top right to left center
    var x1 = 300;
    var y1 = 50;
    var x2 = 60;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

     //line 5_top left to top center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += -dy2;
    noLoop();
    }

     //line 6_bottom right to bottom center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 290;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }


    
}

I really enjoy creating geometric patterns, so it was really intriguing for me to learn how I can modify the increments and number of lines to create a pattern.

Looking Outwards 04: Sound Art

The project that grabbed my attention immediately was FORMS–String quartet created by Playmodes. One of the reasons is because I come from a strings background, but as I skimmed through the articles the simple and geometric design really matched my eye, which seemed to be designed similarly with the aesthetic I have been exploring a lot recently.

I think it’s fascinating that the performance is both visual and sonic, and that the performer’s playing of the instrument is converted to a visual pattern in real time. The visuals also reminded me of the mobile instrument games I used to play, so it was even more entertaining. This program seem to use size, shape, and color as a variable to express the different instruments rhythm and dynamic, which I assume is taken into programming as the decibels and pitch is measured from the recording of the performance. I think the choice of using simple geometric shapes and gradient colors show the artist’s attempt to combine modern design aesthetics and classical music to invite a wider variety of audiences to this source of entertainment. 

Project-03: Dynamic Drawing

sketch
function setup() {
    createCanvas(600, 450);
    background(100);
    fade = 0;
}

function draw() {
    var xmousePos = max(min(mouseX, 600), 0);
    var ymousePos = max(min(mouseY, 450), 0);
    var color = dist(300, 225, xmousePos, ymousePos);


    stroke(255, color, 0);
    //strokeweight increases as cursor moves further away from center
    strokeWeight(dist(300, 225, (xmousePos), (ymousePos))); 
    //drawing line that follows the cursor
    line(300, 225, xmousePos, ymousePos);
    //
    line(300, 225, xmousePos, -ymousePos);




    





}

I wanted to work with gradually changing colors particularly in projects to create a smooth gradient brush effect. Next time I want to try making curved lines as well.

Looking Outwards 03: Computational Fabrication

I think it is particularly interesting to link computational and parametric objects to living matter; such as nature or human. After reading professor Levin’s, I was really intrigued by how they digitally visualized a human body with different levers to control the width and length of each body part.

bodyvisualizer

Parametric 3D Form

I was interested in how each feature was correlated and dependent to one another and not completely independent, to make it a more accurate and realistic depiction of the actual human body. I have seen programs like this before, but each input for each body part could be changed completely on its own, allowing me to create a very unrealistic version of myself. I think that using programs like this would very much enhance the human life, in fields like fashion, medication, etc. I interpret this project as more of a scientific and technical approach than an artistically free one, but I think it is very interesting in ways how it can be of help in those various fields. If these kind of dependent parametric objects were created for other existences like animals or plants, I think that it will be a great way to determine and help sustain the natural environment as well.

LookingOutwards-02

In high school, I would always have discussions about whether artificial intelligence can create original art in my Theory of Knowledge class. And as a design student, I still wonder where the line lies between human created art and soft-ware generated. I think the term “generative” is also very interesting, because it contrasts the “creative” nature of art. 

While exploring through the websites of different generative artists, I was intrigued by Marius Watz’ “Wall Exploder A”, because at a glance it just seemed like a regular mural. When I realized that it was a traced piece, I thought it was very interesting that it is a hybrid artwork that utilizes both software and manual work. 

Marius Watz | Wall Exploder A
Marius Watz, Wall Explore A, 2011

Project-02: Variable Faces; Face Variables.

sketch
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20
var noseHeight = 50;
var earSize = 20;
var hairStyle = 2;
var hairSize = 20;
var browSize = 10;

//colors
var faceR = 100;
var faceG = 150;
var faceB = 200;
var noseR = 100;
var noseG = 100;
var noseB = 100;

//

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

function draw() {
    //face
    background(180);
    noStroke();
    fill(faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); 

    //ears
    ellipse(((width / 2) - (faceWidth / 2)), (height / 2), earSize, earSize + 10);
    ellipse(((width / 2) + (faceWidth / 2)), (height / 2), earSize, earSize + 10);


    //eyes
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25; 
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //nose
    fill(noseR, noseG, noseB);
    triangle((width / 2), (height / 2), (width / 2 - 10) , (height / 2 + 10), (width / 2 + 10), (height / 2 + 10));

    //hair
    ellipse(width / 2, ((height / 2) - (faceHeight / 2) + 10), 60, 30);
    if (hairStyle > 1){
         ellipse((width / 2), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
       
    } else {
        ellipse((width / 2 - 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
        ellipse((width / 2 + 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
    }

    //brow
    rect(eyeLX - 15, height / 2 - 30, 30, browSize);
    rect(eyeRX - 15, height / 2 - 30, 30, browSize);


}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    //color
    faceR = random(0, 256);
    faceG = random(0, 256);
    faceB = random(0, 256);

    noseR = random(0, 256);
    noseG = random(0, 256);
    noseB = random(0, 256);

    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 20);
    earSize = random(20, 40);
    noseWidth = random(10, 20);
    noseHeight = random(40, 60);
    hairSize = random(30, 70);
    hairStyle = random(0, 2);
    console.log(hairStyle);
    browSize = random(10, 20);


}

Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(500, 400);
    background(0);
}

function draw() {
    noStroke();
    fill(255);
    ellipse(250,210,210,280);
    fill(252,192,210);
    ellipse(250,200,180,220);
    rect(225, 300, 50, 40);
    arc(250,320,100,100, 0, PI, CHORD);
    stroke(0);
    fill(255); 
    noStroke(); 
    arc(250, 250, 70, 40, 0, PI, CHORD); //mouth
    fill(0);
    stroke(0);
    circle(220, 200, 20);
    circle(280, 200, 20);
    noFill();
    arc(240, 200, 20, 50, 0, HALF_PI);
    arc(244, 230, 20, 10, 0, PI + QUARTER_PI); 
    noStroke();
    fill(184, 120, 138);
    ellipse(200, 230, 30, 20);
    ellipse(300 , 230, 30, 20);
    rect(200, 170, 40, 10);
    rect(260, 170, 40, 10);
    noFill();
    stroke(255);
    strokeWeight(5)
    line(250, 80, 250, 150);   
    line(230, 80, 230, 150);   
    line(210, 90, 210, 150);   
    line(270, 80, 270, 150);   
    line(290, 90, 290, 150);   


    noLoop();


}

LO: My Inspiration

2018 Seoul Mediacity Biennale

In 2018, I visited the Seoul Mediacity Biennale that was hosted in the Seoul City Art Museum. I remember the theme of the exhibition being “what defines a good life?” A philosophical question that has been raised by the Athens in the past. At the exhibit, I was able to encounter many digital installations and projects that utilizes interaction and computing to reflect the current nature of humanity. Amont them, there was an installation of countless printers installed in the ceiling forming a circle, that was endlessly printing twitter posts that were being posted in real time. If a viewer passes through the drapes of twitter receipts, they were met with two empty chairs facing each other. What really inspired me about this piece was not only the scale, but also the idea of using computing to reflect the over-usage of digital media in the current generation. I thought that the contrast of outer barrier of draping pieces of paper created with coding and the depiction of a serene, genuine human conversation that can occur once one goes beyond the surface layer of the printed drape into the space with chairs. I am not entirely certain what software was used to create the installation, but I am assuming that it would not be too difficult as the function of computing was used to just print twitter posts in real time. I think that this type of artwork provides a way for artwork and computation to be merged to criticize a real life problem and metaphorically suggest people what they are missing out on due to the excess of digitalization in society. As a design major myself, I wish to be able to learn computer science so that I can apply it to create creative projects or to solve problems through design thinking.