mmirho – Looking Outwards 5 – 3D Art

I’m very interested in the concept of rendering 3D water.

This is present in video games, yes, but I see it as a blockade in most 3D generation. It’s been a problem ever since 3D graphics were conceptualized; making rendered water realistic. I’ve seen only a few examples of legitimately fluid water, and here’s one such example.

The reason it’s so difficult is it required physics engines to calculate the positions of each piece and make the whole flow of the 3D water natural.

Unfortunately, liquids have so many individual points within them, that it’s nearly impossible to calculate them all.

I’m unaware of what artists dabble in this type of art, but I know it requires teams or animators and programmers to get even remotely right.

I think the processing engines we are creating now will be able to handle such types of programs, and 3D generation, in general, will improve.

juyeonk-project05-wallpaper

sketch

var x = 0;
var y = 0;
var THeight = 54.6;
var TBase = 63;


function setup() {
    createCanvas(441, 328.5);
    background (253, 226, 222);


//small white triangles in the furthermost back: odd-number rows
for (var x = 0; x <= width; x += TBase) {
        for (var y = 0; y < height; y += 2 * THeight) {
            noFill();
            stroke (255, 180);
            strokeWeight (2);
            triangle (x, y + THeight, x + TBase/2, y, x + TBase, y + THeight);
        }
}

//small white triangles in the furthermost back: even-number rows
for (var x = 0; x <= width; x += TBase) {
        for (var y = -THeight; y < height; y += 2 * THeight) {
            noFill();
            stroke (255, 180);
            strokeWeight (2);
            triangle (x - TBase/2, y + THeight, x, y, x + TBase/2, y + THeight);
        }

}
    
//orange hexagons: first and third rows
for (var x = -TBase/2*3; x <= width; x += 2 * TBase) {
        for (var y = -THeight; y < height; y += 4 * THeight) {
            fill(247, 148, 29,60);
            beginShape();
            vertex(x + TBase/2, y);
            vertex(x, y + THeight);
            vertex(x + TBase/2, y + 2 * THeight);
            vertex(x + TBase / 2 * 3, y + 2 * THeight);
            vertex(x + 2 * TBase, y + THeight);
            vertex(x + TBase / 2 * 3, y);
            endShape(CLOSE);
        }
}

//small white hexagons: even-number rows
for (var x = -TBase/3; x <= width; x += TBase) {
        for (var y = 0; y < height; y += 2 * THeight) {
            fill(255, 180);
            noStroke();
            beginShape();
            vertex(x, y  + THeight);
            vertex(x + TBase/6, y + THeight/3*4);
            vertex(x + TBase/2, y + THeight / 3 * 4);
            vertex(x + TBase / 3 * 2, y + THeight);
            vertex(x + TBase/2, y + THeight/3*2);
            vertex(x + TBase/6, y + THeight / 3 * 2);
            endShape(CLOSE);
        }
}
 
//small white hexagons: odd-number rows
for (var x = -TBase/6*5; x <= width; x += TBase) {
        for (var y = -THeight; y < height; y += 2 * THeight) {
            fill(255, 180);
            noStroke();
            beginShape();
            vertex(x, y  + THeight);
            vertex(x + TBase/6, y + THeight/3*4);
            vertex(x + TBase/2, y + THeight / 3 * 4);
            vertex(x + TBase / 3 * 2, y + THeight);
            vertex(x + TBase/2, y + THeight/3*2);
            vertex(x + TBase/6, y + THeight / 3 * 2);
            endShape(CLOSE);
        }
}

//orange hexagons: second and fourth rows
for (var x = -TBase/2; x <= width; x += 2 * TBase) {
        for (var y = THeight; y < height; y += 4 * THeight) {
            fill(247, 148, 29, 50);
            beginShape();
            vertex(x + TBase/2, y);
            vertex(x, y + THeight);
            vertex(x + TBase/2, y + 2 * THeight);
            vertex(x + TBase / 2 * 3, y + 2 * THeight);
            vertex(x + 2 * TBase, y + THeight);
            vertex(x + TBase / 2 * 3, y);
            endShape(CLOSE);
        }
}

    
//red triangles: first and third rows
for (var x = -2 * TBase; x <= width; x += 2 * TBase) {
        for (var y = 0; y < height; y += 4 * THeight) {
            fill(237,28,36,40);
            stroke(237, 28, 36, 90);
            triangle (x + TBase/2, y + 2 * THeight, x + TBase/2*3, y, x + TBase/2*5,y + 2 * THeight);
        }
}

    
//red triangles: second row
for (var x = -TBase; x <= width; x += 2 * TBase) {
        for (var y = 2 * THeight; y < height; y += 4 * THeight) {
            fill(237,28,36,40);
            stroke(237, 28, 36, 90);
            triangle (x + TBase/2, y + 2 * THeight, x + TBase/2*3, y, x + TBase/2*5,y + 2 * THeight);
        }
}

    
}

 

Since I wasn’t allowed to make a dynamic art for this project I decided to spice things up by increasing the complexity of the visual elements, or at least by attempting to do so.

First I drew out a pattern that uses hexagons and triangles as its primary visual elements and then transferred it into a code. While doing so, the nest for loops that I learned during the second part of the assignment came very useful.

One thing that I wish I could do was making a mirrored or a rotated array. In that way I could have created cool kaleidoscopic patterns, instead of having the same exact patterns laid out  side by side.

Looking Outwards 05

https://cdna.artstation.com/p/assets/images/images/000/189/312/large/stefan-morrell-cablecorner2.jpg?1443928214

I looked at the work of the concept artist Stefan Morrell. I admire this piece specifically for its homage to classic architecture, but then for his futuristic additions. As someone who frequently has to render my work for work in architecture, I am greatly impressed by his details and clean render. I would imagine he had to let his computer render for hours to get the level of detail it appears to show. I am even more impressed with his expert use of Photoshop to add a more realistic feel the his piece. He titled the work “Cable Corner” and it was created in 2014. He modeled and rendered the piece in 3Dsmax, then used Photoshop for final touches.

hschung-Project-05

sketch

// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-05

// (245, 185, 140) peach
// (200, 90, 90)


function setup() {
    createCanvas(400, 400);
    background(172, 234, 245);
}

function draw() {
    spaceBunnies();
}

function spaceBunnies() {
    var tw = 60;
    var th = 75;
    var oy = 50;
    var ox = 50;
    var amt = 10;

    for (var rows = 0; rows < 5; rows++) {
        for (var col = 0; col < amt; col++) {
            var py = 10 + oy + rows * th;
            var px = ox + col * tw; //th and tw = bounding box of circles
            noStroke();
            fill(255); //bun face // 255, 200, 200 medium pink
            ellipse(px-90, py + 5, 55, 50);

            fill(0); // both eyes
            ellipse(px-105, py +5, 7, 5);
            ellipse(px-140, py, 7, 5);

            fill(245, 185, 140); //nose
            ellipse(px-154, py, 7, 5);

            fill(255, 200, 200 ); // mouth
            ellipse(px-152, py + 12, 13, 15);

            fill(255); // both ears
            ellipse(px-105, py-25, 13, 25);
            ellipse(px-140, py-25, 13, 25);

            fill(255, 200, 200); // ear insides
            ellipse(px-105, py -25, 8, 18);
            ellipse(px-140, py-25, 8, 18);

        }
    }
}





I started out by sketching some doodles, and I thought I might do a pattern involving bunnies or space, and moon/star shapes. I decided to go with the bunnies because I thought it was cute and work well if it was repeated as a motif. I went for a simple, cute wallpaper, one that I could see being used for a phone background. If I were to do this again, I would like to try making some of the bunnies with different expressions for points of interest. Doing this project helped me strengthen my familiarity with for loops again- but I would like to solidly understand it inside and out, so I can manipulate them with more finesse.

mmirho – Project 5 – Wallpaper

Leaves!

I spent most of my time getting the construction of the leaf right, but after that, it was just making a simple alternating grid of them, like we’ve done in class before.

sketch

//Maxwell Mirho
//Section A
//mmirho@andrew.cmu.edu
//Project 5

function setup() {
    createCanvas(400, 400);
    background(10, 170, 260);
}

function drawLeaf(tipX, tipY) {

    fill(150,250,150);

    fill(10, 170, 260);
    arc(tipX + 30, tipY + 95, 60, 60, 1.5708 + 0.2, 3.14159, OPEN);
    fill(150, 250, 150);
    //Stem

    //Leaf tip
    triangle(tipX, tipY, tipX + 30, tipY + 70, tipX - 30, tipY + 70);

    //Leaf butt
    arc(tipX, tipY + 75, 60, 55, -0.3, 3.14159 + 0.3, OPEN);

    stroke(100,200,100);

    //1st (Top) leaf contour)
    arc(tipX, tipY + 51, 60, 60, 0.83, 2.3, OPEN);

    //2nd
    arc(tipX, tipY + 40, 50, 50, 0.83, 2.3, OPEN);

    //3rd
    arc(tipX, tipY + 29, 40, 40, 0.83, 2.3, OPEN);

    line(tipX, tipY + 88, tipX, tipY + 20);
    line(tipX - 1, tipY + 88, tipX - 1, tipY + 20);
    stroke(0);
    //Center leaf contour
    
}

function draw() {
    
    for (var x = 0 ; x < 6 ; x += 1) {
        for (var y = 0 ; y < 6 ; y += 1) {
            //Creates a grid

            push();
            translate(x*100, y*100);
            //Move the tip of the leaf to the grid

            if ((y%2) == 0) {
                rotate(-0.5);
            } else {
                rotate(0.5);
            }
            //Twists the leaf the opposite way if the row is an even number
            
            drawLeaf(0,0);
            //Draws an entire leaf!
            pop();

        }

    }
}

thlai-Project-05-Wallpaper

I wanted to create a pond-like wallpaper with fish and water ripples. At first, I had my fish going straight to the right, horizontally, but decided it looked too static. I rotated/translated instead, to make it seem like the fish were following each other in a stream.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(480, 480);
    noLoop();
    angleMode(DEGREES);
    ellipseMode(CENTER);
}

function draw() {
    background(245, 241, 219);

    var fx = 25;
    var fy = 10;
    var num = 7; // number of fish in each row
    var offset = 10;

    // CREATE ROWS OF FISH
    for (var y= 0; y < 9; y ++){
        for (var x = 0; x < num; x ++) {
            if(y%2==1){ // every other  row
                num = 3;
                offset = 100;
            } else {
                num = 4;
                offset = 10;   
        }
            translate(5, 0);
            rotate(x);
            fish(fx*5*x + offset, fy+60*y-20); // draw the fishes
        }
    }   

    // CREATE WATER DROPS
    var droplet = 100;
    for(var i = 0; i < 6; i++){
        push();
        stroke(255, 190);
        strokeWeight(2);
        noFill();
        ellipse(400, 10, 10+i*(5+i*10), 10+i*(5+i*10)); // right ripples
        ellipse(150, 200, i*40, i*40); // middle ripples
        ellipse(0, 50, droplet-i*20, droplet-i*20); // top ripples
        pop();
    }
}

// FISH FUNCTION
function fish(fx, fy) {

    push();
    translate(fx, fy);
    rotate(30);
    noStroke();

    fill(random(210, 255), 110, 74); // fill with random orange
    quad(20, 27, 38, 39, 28, 52, 53, 37); // tail
    triangle(71, 22, 78, 21, 83, 27); // top fin
    triangle(68, 51, 82, 42, 79, 49); // bottom fin

    fill(random(50,100), random(90,150), random(130,180)); // fill with random blue
    beginShape(); // body
        vertex(53, 37);
        vertex(78, 27);
        vertex(92, 29);
        vertex(100, 37);
        vertex(95, 43);
        vertex(77, 43);
    endShape();
    pop();
}

thlai-Looking-Outwards-05

Marpi’s installation named “The Wave” is an interactive, meditative touchscreen that uses 3D computer graphics to create an abstractive wave form. The installation is a large scale installation that allows users to touch the multiple screens and guide the water particles. The shapes of that particles that make up the wave are generative, and they are constantly evolving and moving. I admire its simplicity and its tendency not to overdo the project with crazy colors or movements, but Marpi’s installation is a flowy, slow-moving art. Just watching the video is incredibly soothing and satisfying as I follow each particle from its beginning point to its end.
Marpi’s simulation is built by using open source shaders powered by Three.js. In an interview, he says that he is inspired by the people he interacts with every day, and believes art is a way to show others his dreams and place people inside his art.

LookingOutwards-05

3D graphics generated from biometric facial data
mask

Facial weaponization suite is a project by Zach Blas in protest of biometric facial recognition that began with a series of 3D computer graphics generated from the biometric data of people’s faces. These graphics and the data that created them are then compounded to create “collective masks” that are too amorphous to be comprehended by facial recognition software. These masks protest things like the AI facial recognition technology that was recently developed to “detect gay people based on their facial features”, or to expose facial recognition technologies that do not recognize black people as racist. The intersection between political protest, computer science, and art is an area that I find to be really interesting, and an area that I would enjoy exploring further.

Here is a link to his website.

ctv-Looking Outward-05

https://www.behance.net/gallery/5126039/Structural-Surface-Experiments

This designer, Levente Gyulai,

made many sketches using a Rhino 3D model software and a plugin called Grasshopper. The plugin is a drag & drop-based programming software that allows creators to quickly make complex generative forms. In the program, parameters are used to tweak surfaces in three-dimensional space. Gyulai’s work is organically inspired, and appears to grow into a form. Grasshopper allows the surfaces to be manipulated on any scale, micro and macro. The type of control allows for complex (and interesting) 3D forms; in this piece, the designer uses large, sweeping curves to create the outside forms with fine tubes on the inside. Although I have not used the Grasshopper plugin, I have used a program structured similarly (Max/MSP) to create generative 3D video art. I love the visual nature, of drag and drop programming languages because it allows me to think about the logic of a program. Coding in P5.JS allows for more detail and complexity than Max/MSP. When coding, if I can’t figure out the logic of what I want to do, I will do a quick sketch in Max/MSP.

Matthew Erlebacher Project-05

Wallpaper

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-05

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

function draw() {
    background(0);
    for (var centerX1 = 25; centerX1 < width; centerX1 += 100) {
        for (var centerY1 = 25; centerY1 < height; centerY1 += 100) {
            // Creates pattern for upper left area
            fill(0, 0, 255);
            ellipse(centerX1, centerY1, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX1, centerY1, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX1, centerY1);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates green rotated square

            fill(0);
            ellipse(centerX1, centerY1, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX2 = 75; centerX2 < width; centerX2 += 100) {
        for (var centerY2 = 75; centerY2 < height; centerY2 += 100) {
            // Creates pattern for lower right area
            fill(0, 0, 255);
            ellipse(centerX2, centerY2, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX2, centerY2, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX2, centerY2);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates rotated green sqare

            fill(0);
            ellipse(centerX2, centerY2, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX3 = 75; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 25; centerY3 < height; centerY3 += 100) {
            // Creates pattern for upper right area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    for (var centerX3 = 25; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 75; centerY3 < height; centerY3 += 100) {
            // Creates pattern for lower left area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    noLoop();
}

Sketch

Doing this was a bit tricky for me. I don’t have a very good taste in decoration. In addition, I am bad at coming up with patterns. However, in the end I think that I did alright. I thought it would be interesting to give the background a chess board formation, as I find it to be aesthetically appealing. The coding itself wasn’t very difficult. I only needed to set the coordinates as variables in the for loops, and the rest of the assignment practically did itself. I didn’t have much of a sketching phase, mainly because it just feels more natural for me to start coding right away.