Month: September 2019

Aaron Lee – Project 05 – Wallpaper

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-05-Wallpaper
*/

function setup() {
    createCanvas(600, 600);
    background("grey");
    var d = 30;

    for (var y = 0; y < 660; y = y + 60) {
        for (var x = 0; x < 600; x = x + 60) {
          push();
          fill('#809DFF');
          beginShape();
          vertex(x, y);
          vertex(x + 10, y - 10);
          vertex(x + 20, y);
          vertex(x + 30, y - 10);
          vertex(x + 40, y);
          vertex(x + 20, y + 20);
          endShape(CLOSE); //the shape1
          pop();
          push();
          fill('#5A5B83');
          beginShape();
          vertex(x, y);
          vertex(x + 20, y + 20);
          vertex(x + 20, y + 80);
          vertex(x + 10, y + 60);
          vertex(x + 10, y + 30);
          vertex(x, y + 20);
          endShape(CLOSE); //the shape2
          pop();
          }
        }

    for (var y1 = -30; y1 < 660; y1 = y1 + 60) {
        for (var x1 = 0; x1 < 600; x1 = x1 + 60) {
          push();
          fill('#CCD8FF');
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 10  + d, y1 - 10);
          vertex(x1 + 20  + d, y1);
          vertex(x1 + 30  + d, y1 - 10);
          vertex(x1 + 40 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          endShape(CLOSE); //the shape3
          pop();
          push();
          fill("#7274CC");
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          vertex(x1 + 20 + d, y1 + 80);
          vertex(x1 + 10 + d, y1 + 60);
          vertex(x1 + 10 + d, y1 + 30);
          vertex(x1 + d, y1 + 20);
          endShape(CLOSE); //the shape4
          pop();
          }
        }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

This was a rather simple process. First, setting up a loop function for both x and y. Then I created shapes in rows that create illusion.

Chelsea Fan-Project-05


Wallpaper

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(400, 400);
    background(255, 250, 205);
}
var xCoord = 10; //x coordinate of rect
var yCoord = 10; //y coordinate of rect
var xRect = 10; //width of rect
var yRect = 50; //height of rect
var spacing = 20; //spacing between rect
var horiz = -16; //horiz spacing between rect
var r = 255; //red color 
var g = 220; //green color
var b = 220; //blue color

function draw() {
	for (var i = 0; i < 13; i++) {
		stroke(0); //stroke color black
		fill(r, g, b); //color of rect
	    rect((xCoord+spacing)*i+horiz*spacing, (yCoord+spacing)*i, xRect, yRect); //rectangles
	    stroke(255); //change stroke color to white
	    line(30*i, 0, 30*i, height); //vertical white stripes
	    }
	horiz = horiz + 3; 
	r = r - 3; //change in red color
	g = g + 3; //change in green color
	b = b + 3; //change in blue color

    for (var i = 0; i < 21; i++) { 
    	line(0, 20*i, width, 20*i); //horizontal white stripes
    }

}

Mihika Bansal – Project 05 – Wallpaper

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5

var diam = 66; //diameter
var Cdist = 198; //distance between 3 circles
var rad = 33; //circle radius 



function setup() {
    createCanvas(594, 582);
    background(255, 238, 173); // making my background canvas
    

    for(var i = 0; i < 10; i ++){ //determining # of rows 
        if(i % 2 == 0){ // determining if row is even or odd 
            for(var j = 0; j < 3; j ++){ // three of the first kind of ellipse in each row
                
                //first ellipse pattern 
                var posX1 = rad + Cdist * j; // determing x position of each of the 3 ellipses
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //determing y position of each of these ellipses
                //var posY1 = 33; 
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX1, posY1, diam, diam); //making blue ellipse
                fill(255, 204, 92);
                ellipse(posX1, posY1, 55, 55); //making yellow ellipse
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX1, posY1); //making center lines
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
            }
            for(var a = 0; a < 3; a ++){ // will be three of these ellipses

               //second ellipse pattern 
                var posX2 = (3 * rad) + Cdist * a; // the position of the second ellipse, which is 3 * radius
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 66, 66); //making the target like ellipses
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX2, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 15, 15);
                strokeWeight(0);
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern 
                var posX3 = (5 * rad) + Cdist * b; //the base distance is 5 times the radius
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX3, posY1, 66, 66); //making the ellipse bases
                fill(150, 206, 180);
                ellipse(posX3, posY1, 54, 54);


                push(); 
                strokeWeight(1); //making the rotated squares
                stroke("white"); 
                rectMode("center"); 
                translate(posX3, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX3, posY1, 34, 34); //center ellipse
            }
        }
        else{ //if row is odd 
            for(var j = 0; j < 3; j ++){
                
                //first ellipse pattern, which was the third pattern 
                var posX1 = 2 * rad + Cdist * j; //want to fit in the gaps between the circles
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //using the ratio to make the circles fit exactly with eachother 
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX1, posY1, 66, 66); 
                fill(150, 206, 180);
                ellipse(posX1, posY1, 54, 54);


                push(); 
                strokeWeight(1); 
                stroke("white"); 
                rectMode("center"); 
                translate(posX1, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX1, posY1, 34, 34); 
                
            }
            for(var a = 0; a < 3; a ++){

               //second ellipse pattern, which was actually the first ellipse 
                var posX2 = (4 * rad) + Cdist * a; //fits in between the gaps again
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX2, posY1, diam, diam); 
                fill(255, 204, 92);
                ellipse(posX2, posY1, 55, 55);
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX2, posY1); 
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
                
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern, which was actually the second
                var posX3 = (6 * rad) + Cdist * b;
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX3, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 15, 15);
                strokeWeight(0);

                //drawing first ellipse in the row for even rows, at the position 0 
                fill(255, 111, 105); 
                ellipse(0, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(0, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(0, posY1, 15, 15);
                strokeWeight(0);
            }

        }
    }

   
    noLoop(); 
}
   
  
function draw() {

  
}

This project was really fun to do. I really enjoyed coming up with distinct ellipse patterns to start with, then figuring out how to put them together to create a new pattern. I tried multiple iterations of what the circles would look like overlapped, but I realized it looked the cleanest in this manner.

Steven Fei-Project5-Wallpaper


sketch

 

This approach is to take advantage of the multiple nested loops to further my string art approach of creating the red “illusion” curves through repetition and more rigid layouts. The inspiration is still from the Sharingan in Naruto.


function setup() {
    createCanvas(600, 600);
    background("black");
    
    
}
var angle;//variables for the red fish curves
var radius = 8;//varaibles for the size of red curves

function draw() {
    
    
//   background lines
    for (var y = 0; y<height; y+=60){
        for (var x = 0; x<width; x+=60){
            stroke(35,41,54);
            strokeWeight(2);
            line(x, y, x+60, y+60);//rightward diagonal line
            stroke(148,148,148);
            line(x+40, y, x-40, y+60);//leftward light grey line
            stroke(77,78,80);
            line(x+30, y, x+90, y+60); //rightward dark gray line
        }
    }
    // yellow hex circles
    var radiusTwo = 12;
    for (var y = 0; y < height; y+=120){
        for(var x = 0; x < width; x+=100){
            push();
            translate(x+50, y+30+40);
            for (var i = 0; i<6; i++){
                push();
                rotate(radians(30));
                rotate(radians(i*360/6));
                noStroke();
                fill(255,255,102);
                circle(radiusTwo, 0, 5);
                pop();
            }
            pop();
        }
    }

// constructions of the red wheels    
    for(var y = 0; y < height; y += 120){
        for (var x = 0; x < width; x+= 100){
            push();
            translate(x+50, y+30); // spacing
            // top part of the red fish
            rotate(-PI/2);
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            // left part of the red fish
            rotate(PI/2); //return to the original angle coordinates
            translate(-30, 50);
            rotate(radians(30));
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            //right part of the red fish
            rotate(radians(-30)); //return to the original angle coordinates
            translate(60, 0);
            rotate(radians(-30));
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            pop();
        }
    }
   

}

Alec Albright – Project 05 – Wallpaper

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 5 - Wallpaper

var diamondH = 10; // height of the diamonds
var diamondW = 10; // width of the diamonds
var diaMargin = 5; // space between a diamond and its outline
var thickStripe = 20; // stroke weight of the thick stripe
var thinStripe = 3; // stroke weight of the thin stripe

function setup(){
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background("skyblue");

    // drawing the diamonds
    // controling rows
    for(x = 0; x < 550; x += 25){
        // controlling number of diagonal lines
        for(y = -500; y < 500; y += 175){
            drawDiamond(x + y , x);
        }
    }

    // drawing the stripes
    for(x = -100; x < 550; x += 175){
        for(y = 0; y < 500; y += 175){
            drawStripes(x, y);
        }
    }
    noLoop();
}

// draws one diamond and its outline
function drawDiamond(x, y){
    strokeWeight(1);
    stroke("black")
    push();
    translate(x, y);

    rotate(135);
    // diamond
    fill("orange");
    rect(diaMargin, diaMargin, diamondW, diamondH);

    // outline
    // makes the rectangle transparent
    fill(0, 0, 0, 0);
    rect(0, 0, diamondW, diamondH);

    pop();
}

// draws big and little stripes to fill gaps of the diamonds
function drawStripes(x, y){
    // drawing first big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x, y, x + 500, y + 500);

    // little stripe
    stroke("orange");
    strokeWeight(thinStripe);
    line(x + 30, y, x + 530, y + 500)

    // other big stripe
    stroke("white");
    strokeWeight(thickStripe);
    line(x + 60, y, x + 560, y + 500);
}

I originally sketched this to include less frequent diagonals of the diamonds, but upon creation I really liked the contrast between the horizontal positioning of the diamonds and the diagonal positioning of the stripes. I also wanted to implement a vibrant color palette, which manifested itself as light blue, orange, and white. My biggest difficulty in creating this wallpaper was dealing with replicating the diagonals. Particularly, the diamonds were difficult because I rotated them upon drawing them, so their coordinate system became harder to keep track of.

Below is my original sketch:

Original sketch

Taisei Manheim – Project 05 – Wallpaper


sketch

For this project I wanted the repetition to be a geometric pattern.  I chose this pattern because of the sense of three dimensionality it gave as well as the interesting relationship between positive and negative space.

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-05

function setup() {
    createCanvas(600, 600);
    background(128);
    var w = 50;
    for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width; x += 100) {
            //top quad
            stroke(255);
            fill(255,192,203);
            quad(x, y, x + w, y - sqrt(3) * w / 4,  x + 2 * w, y, x + w, y + sqrt(3) * w / 4); ;
            line(x + 2 * w - 10, y - 5, x + w - 10, y + sqrt(3) * w / 4 - 5);
            line(x + 2 * w - 20, y - 10, x + w - 20, y + sqrt(3) * w / 4 - 10);
            line(x + 2 * w - 30, y - 14, x + w - 30, y + sqrt(3) * w / 4 - 14);
            line(x + 2 * w - 40, y - 18, x + w - 40, y + sqrt(3) * w / 4 - 18);

            //left quad
            stroke(255);
            fill(255,162,233);
            quad(x, y, x + w, y + sqrt(3) * w / 4, x + w, y + sqrt(3) * w / 4 + 57, x, y + 57); 
            line(x, y + 11, x + w, y + sqrt(3) * w / 4 + 11);
            line(x, y + 22, x + w, y + sqrt(3) * w / 4 + 22);
            line(x, y + 33, x + w, y + sqrt(3) * w / 4 + 33);
            line(x, y + 44, x + w, y + sqrt(3) * w / 4 + 44);

            //right quad
            stroke(255);
            fill(255,132,255);
            quad(x + w, y + sqrt(3) * w / 4, x + 2 * w, y, x + 2 * w, y + 57, x + w, y + sqrt(3) * w / 4 + 57); 
            line(x + 2 * w - 10, y + 5, x + 2 * w - 10, y + 57 + 5);
            line(x + 2 * w - 20, y + 10, x + 2 * w - 20, y + 57 + 10);
            line(x + 2 * w - 30, y + 14, x + 2 * w - 30, y + 57 + 14);
            line(x + 2 * w - 40, y + 18, x + 2 * w - 40, y + 57 + 18);
        }
    }
    noLoop();
}

Chelsea Fan-Looking Outward-05

Chaotic Atmospheres creates 3D depictions of environments and landscapes. I admire that Chaotic Atmospheres creates illustrations from a wide variety of nature.

Chaotic Atmospheres’ Caustic Icebergs Illustration (n.d.)
Chaotic Atmospheres’ Eroded Leaves (n.d.)

Not only are there illustrations of scenery from far away, but Chaotic Images used a flow map on a personal project to create a series of up close images. Eroded Leaves is a vegetation flow map of the Sycamore Maple Acer Trees. This series includes 3D depictions of the Japanese Maple, the Silver Maple, the Cappadocian Maple, and more.

One critique that I have is that although Chaotic Images creates an abundance of different pieces, it does not seem as if there is any specific”style” that really represents “Chaotic Images’ Art”. Because the pieces are so different and diverse (up close vs far away, animals vs scenery, realistic vs animated) there isn’t any notable part of his art that tells viewers that a certain piece is created by Chaotic Images. This makes it less likely that the name and brand Chaotic Images has created will be widely known or spread.

Artwork by Chaotic Images can be viewed at this link: https://www.behance.net/chaotic_atmospheres/

Sean Meng-Looking Outwards-05

Miquela Sousa
video: https://www.youtube.com/watch?v=w1wjiQ0bqic

Miquela Sousa, better known as Lil Miquela machuca, is a fictional character and digital art project. Miquela is an Instagram model and music artist claiming to be from Downey, California. The project began in 2016 as an Instagram profile. By April 2018, the account had amassed more than a million followers by portraying the lifestyle of an Instagram it-girl over social media. The account also details a fictional narrative which presents Miquela as a sentient robot in conflict with other digital projects. The team engaged artificial intelligent 3D graphic  while creating and modeling this figure to Make it ultra realistic. Now, the project set a new trend for fashion field to start using fictional computational generated model for their campaign and lookbook. This is also the sign of the overlaps between technology and fashion. 

Steven Fei-Looking Outwards-05


With the advent of digital graphics, art has stepped into a new era with faster pace and more opportunities.

The 3D artist, Hirokazu Yokohara, has integrated 3D modeling techniques with computational renderings to produce photo-realistic scenes and images. Instead of directly drawing and painting 2D information onto canvas, the artist utilized the 3D modeling software called Blender to compose the objects. Such a process provides the artist with more details and considerations for every element of the forms. In his famous work the Golden Skull, the artist takes advantage of the software to first create the complex geometry and control each part of the skull and bones parametrically to get immediate results. Later, textures are selected and mapped freely onto the parts to give a general impression of how the 2D image of the specific scene should look like. Finally, by utilizing another real-time renderer EEVEE, the artist is able to see quick result of the photo-realistic image provided by the computer which calculates the lighting and compositions of the graph with tremendous speed.

Such a process strongly attracts me not only for its new, organic way of modeling forms which could hardly be achieved through pure handwork but also for the quick, human-interactive process of producing images through putting realistic factors and textures. Such a process indeed has shaped a more dynamic and innovative design strategy, and it also paves the way for quicker image presenting through computing and parametric controlling.

Organic 3D Modeling through Blender

Substance Painter
Organic 3D modeling with texture mapping

click here to see the original artwork

Mihika Bansal – Looking Outwards – 05

The artist that I want to look at for his computer 3D graphics is Peter Nowacki. The particular piece of his that I found to be interesting was his HBO – Home of the Original. The piece itself was made in 2014, and it was part of an ad campaign for an HBO series he was publishing in Asia. The process that he followed to create the piece itself was interesting as well because it focused on lighting and shading in a way that made it pop.

Peter works for a company that specifically creates these hyper-realistic looks for other companies. A lot of brands want this look because it is very eye-catching and the 3D graphics do a good job of conveying something that otherwise would not be conveyed well.

hbo_1200.jpg
hbo_clay.jpg