Author: Rock

Project 05: Wallpaper

sketchDownload
function setup() {
    createCanvas(600, 400);
    background(250, 220, 137);
}

function draw() {  
    noStroke();
    for(i = -1; i < 3; i++) {
        fill(250, 162, 137);
        rect(70 + i * 210, 0, 50, 400);
        for(j = 0; j < 2; j++) {
            fill(202, 227, 152);
            arc(200 + i * 210, 70 + j * 250 - (i % 2) * 50, 140, 120, radians(80), radians(250));
            fill(250, 220, 137);
            arc(210 + i * 210, 70 + j * 250 - (i % 2) * 50, 140, 120, radians(80), radians(250));
            fill(204, 112, 138);
            circle(200 + i * 210, 45 + j * 250 - (i % 2) * 50, 17);
            circle(213 + i * 210, 55 + j * 250 - (i % 2) * 50, 17);
            circle(213 + i * 210, 70 + j * 250 - (i % 2) * 50, 17);
            circle(200 + i * 210, 75 + j * 250 - (i % 2) * 50, 17);
            circle(187 + i * 210, 55 + j * 250 - (i % 2) * 50, 17);
            circle(187 + i * 210, 69 + j * 250 - (i % 2) * 50, 17);
            fill(209, 158, 71);
            circle(200 + i * 210, 61 + j * 250 - (i % 2) * 50, 20);
            circle(165 + i * 210, 90 + j * 250 - (i % 2) * 50, 18);
            circle(180 + i * 210, 105 + j * 250 - (i % 2) * 50, 12);
        }
        for(j = 0; j < 2; j++) {
            fill(202, 227, 152);
            arc(200 + i * 210, 200 + j * 250 - (i % 2) * 50, 140, 120, radians(280), radians(100));
            fill(250, 220, 137);
            arc(190 + i * 210, 200 + j * 250 - (i % 2) * 50, 140, 120, radians(280), radians(100));
            fill(204, 112, 138);
            circle(200 + i * 210, 175 + j * 250 - (i % 2) * 50, 17);
            circle(213 + i * 210, 185 + j * 250 - (i % 2) * 50, 17);
            circle(213 + i * 210, 200 + j * 250 - (i % 2) * 50, 17);
            circle(200 + i * 210, 205 + j * 250 - (i % 2) * 50, 17);
            circle(187 + i * 210, 185 + j * 250 - (i % 2) * 50, 17);
            circle(187 + i * 210, 199 + j * 250 - (i % 2) * 50, 17);
            fill(209, 158, 71);
            circle(200 + i * 210, 191 + j * 250 - (i % 2) * 50, 20);
            circle(230 + i * 210, 220 + j * 250 - (i % 2) * 50, 18);
            circle(215 + i * 210, 235 + j * 250 - (i % 2) * 50, 12);
        }

    }
    noLoop();
}

This project was very difficult, yet I enjoyed making a repetitive 2D design. I originally made it on Adobe Illustrator to get an idea of what I wanted, and the final outcome is very similar to what I wanted it to be. I used three different for loops for the rectangles and the two different columns of flowers.

LO: Computer Graphics

After looking through many different types of 3D computer graphic artworks, my personal favorite is Game Buildings by Gustavo Henrique. I really admire this artwork because I think it’s so interesting how Henrique manipulates his photographs of cubes to make them look softer and rounder. I feel that using computer graphic techniques create an interesting mood to his artworks. When I first saw the artwork, I didn’t recognize it was originally a photograph because the objects looked so smooth and soft. Henrique uses different programs to render the original photographs he takes. The creator’s artistic sensibilities are manifested in the final form by working with geometric shapes and models to create a building that has a soft atmosphere to it. 

Game Buildings by Gustavo Henrique

Project 04: String Art

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;
var ex1;
var ey1;
var ex2;
var ey2;
var enumLines = 30;
var fx1;
var fy1;
var fx2;
var fy2;
var fnumLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    line(10, 10, 10, 100); //top left shape
    line(10, 55, 100, 55); 
    dx1 = (10 - 10)/numLines;
    dy1 = (100 - 10)/numLines;
    dx2 = (100 - 10)/numLines;
    dy2 = (55 - 55)/numLines;
    line(130, 150, 200, 200); //bottom shape
    ex1 = (200 - 130)/enumLines;
    ey1 = (200 - 150)/enumLines;
    ex2 = (130 - 200)/enumLines;
    ey2 = (200 - 150)/enumLines;
    line(250, 50, 250, 150); //top right shape
    fx1 = (250 - 250)/fnumLines;
    fy1 = (150 - 50)/fnumLines;
    fx2 = (300 - 200)/fnumLines;
    fy2 = (100 - 100)/fnumLines;

}

function draw() {
    var x1 = 10 //top left shape
    var y1 = 10
    var x2 = 100
    var y2 = 55
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    var eex1 = 130 //bottom shape
    var eey1 = 150
    var eex2 = 200
    var eey2 = 200
    for (var i = 0; i <= enumLines; i += 1) {
        line(eex1, eey1, eex2, eey2);
        eex1 += ex1;
        eey1 += ey1;
        eex2 += ex2;
        eey2 += ey2;
    }
    var ffx1 = 250
    var ffy1 = 50
    var ffx2 = 250
    var ffy2 = 150
    for (var i = 0; i <= fnumLines; i += 1) {
        line(ffx1, ffy1, ffx2, ffy2);
        ffx1 += fx1;
        ffy1 += fy1;
        ffx2 += fx2;
        ffy2 += fy2;
    }
    noLoop();
}

I thought this project was very difficult, but I am happy with my outcomes.

LO: Sound Art

While looking through many different computational sound projects, the one that stood out to me the most was the Algorithmic Drive – Spectacular car(au)tonomy. The project uses a dash cam on a car to synchronize the information such as location, altitude, orientation, speed, engine RPM, stability, and the temperature of various sensors. I admire this project the most because they turn into everyday noises during a car ride to a beautiful artwork based on the sound. The system has a custom-built interface with illuminated rotary encoders and a monitor installed on a road case that contains a subwoofer. The artist’s artistic sensibilities manifest in the final form by being able to translate sound into digital components that people can view.

Algorithmic Drive – Spectacular car(au)tonomy, François Quévillon

Project 3: Dynamic Drawing

sketchDownload 

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

function draw() {
    background(79, 88, 161); //dark blue
    noStroke();
    fill(252, 243, 199); //light yellow
    ellipse(300, 225, 100, 100); //main center circle

    // restricing the x and y coords of the mouse
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 450), 0);
    var d = dist(x, y, 300, 225);
    var size = 60 - 0.16 * d;

    fill(255 - 0.65 * d, 204, 204); //pink   

    ellipse(300, 150 - 0.5 * d, size, size); //circles in clockwise order
    ellipse(350 + 0.5 * d, 170 - 0.5 * d, size, size);
    ellipse(375 + 0.5 * d, 217, size, size);
    ellipse(362 + 0.5 * d, 267 + 0.5 * d, size, size);
    ellipse(320 + 0.1 * d, 297 + 0.5 * d, size, size);
    ellipse(268 - 0.3 * d, 293 + 0.5 * d, size, size);
    ellipse(232 - 0.6 * d, 257 + 0.4 * d, size, size);
    ellipse(228 - 0.5 * d, 205, size, size);
    ellipse(255 - 0.5 * d, 165 - 0.5 * d, size, size);
}

I thought this project was really fun because I got to be super creative with it. The circles move away from the big circle when you move your cursor as well as the size and color.

LO: Computational Fabrication

While looking through the different projects of digital fabrication, one specific project from Marius Watz caught my attention. I really admire Chainmail by Watz because it looked so complex I had to really look into it to see how it was made. When I looked carefully at the artwork, it was basically made out of many chains that were connected by hollow rectangles. I think it’s interesting how Watz created an artwork that looks very complex, but the artwork itself is just chains connected together. I suppose the artwork is a parametric object because it is made out of repetitive shapes. Watz’s artworks are mostly geometric shapes that repeat each other to create something very complex. I feel that Watz really captured his artistic sensibilities in this artwork because he repeats a simple rectangular shape to create a very organic shape. The artwork itself is very round, however, it is made out of rectangular shapes.

Chainmail by Marius Watz

Project 2: Variable Faces

sketchDownload
var eyeSize = 35;
var faceWidth = 250;
var faceHeight = 290;
var face = 1; //1 = happy, 2 = surprised, 3 = sad

function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(200);
    strokeWeight(0);
    fill(231, 198, 142);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25
    var noseLx = width / 2 - faceWidth * 0.15;
    var noseRx = width / 2 + faceWidth * 0.15;
    var nosey = height / 2 + faceWidth * 0.25;
    var cheekL = width / 2 - faceWidth * 0.3;
    var cheekR = width / 2 + faceWidth * 0.3;
    var hairL = width / 2 - faceWidth * 0.75;
    var hairR = width / 2 + faceWidth * 0.45;
    var earLx = hairL + faceWidth * 0.27; 
    var earLy = height / 2;
    var earRx = hairL + faceWidth * 1.23;
    var earRy = height / 2;
    fill(250); //left eye
    ellipse(pupilLX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(250); //right eye
    ellipse(pupilRX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(0); //left eye
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize);
    fill(0); //right eye
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize);
    fill(202, 176, 131); //nose
    triangle(width / 2, height / 2 - faceWidth * 0.1, noseLx, nosey, noseRx, nosey);
    if (face == 1 || face == 2) {
        fill(250, 148, 178); //cheeks
        ellipse(cheekL, height / 1.8, eyeSize * 1.4, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 1.4, eyeSize *1.4);
    } else {
        fill(95, 175, 211); //tears
        ellipse(cheekL, height / 1.8, eyeSize * 0.5, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 0.5, eyeSize *1.4);
    }  
    fill(77, 48, 26); //hair
    rect(hairL, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairR, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairL, height/3.8, faceWidth * 1.5, faceHeight * 0.3);
    fill(231, 198, 142); //ears
    ellipse(earLx, earLy, faceWidth * 0.1, faceHeight * 0.15);
    ellipse(earRx, earRy, faceWidth * 0.1, faceHeight * 0.15);
    if (face == 1) {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.35, 120, 70, 2 * PI, PI, OPEN);
    } else if (face == 2) {
        fill(250, 148, 178); //mouth
        ellipse(width/2, height /2 + faceWidth * 0.4, eyeSize * 2, eyeSize * 1.4);
    } else {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.45, 120, 70, PI, 2 * PI, OPEN);
    }
}

function mousePressed() {
    if (face == 1) {
        face = 2;
    } else if (face == 2) {
        face = 3;
    } else {
        face = 1;
    }
}

I really enjoyed making this because it was the first time using variables and the mousepressed function. I was really satisfied when I got the function to work.

LO: Generative Art

After looking at many different artists and artworks, I was very fond of Jessica Rosenkrantz’s generative art. Something that I really admired and stood out to me about her artworks is that the shapes she makes are very organic. It almost seems like they didn’t use an algorithm and that Rosenkrantz created the shapes herself. The way that she gets inspired from natural phenomena and uses technology to create computer simulations is an interesting juxtaposition. Another thing that I admire about her artworks is that the artworks Rosenkrantz creates come in many different forms such as digital art, product design, puzzles, accessories, and statues. The algorithm that she uses combines scientific research, computer graphics, mathematics, and digital fabrication. Rosenkrantz crafts computational systems that create a myriad of unique patterns and shapes instead of just designing them. She translates scientific theories and models of pattern formation into algorithms that eventually create an interesting design.

Jessica Rosenkrantz, Floraform, 2014

Floraform

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.

LO: My Inspiration

There was an interactive project at the Cooper Hewitt Museum in New York where people were able to draw on a big touch screen, and the technology transferred those simple lines to a piece of artwork. The drawings that people made were made out of very simple lines, but because the technology was so advanced, it was able to transfer the rough drawings into beautiful artworks. I really admired this project because it was appreciated by all ages from kids to adults doodling their works. I think it’s astounding how the software can change people’s drawings into something amazing and something so high tech. People were also able to save the artwork they made and take it home, and I think it’s much more meaningful to take a souvenir that they made rather than buying something from the museum store. Because of technology, people can take away experiences rather than consume art. This project points to how museums are developing their softwares to make it more interactive for people, thus creating more memorable experiences for people.

Video Link (18:35)

Cooper Hewitt Museum