Month: September 2017

elizabew – looking outwards – 05 – SectionE

“The Race Day” is a 2D image using 3D computer graphics made by Peter Nowacki that was based off of the concept art “Old Back Street” by Gary Tonge. The image was created using software such as Maya, Photoshop, 3ds Max, V-Ray, and After Effects. According to the artist, “First I used Maya, then I exported the whole scene to 3ds Max and used V-Ray. Textures were done in Photoshop and final composition and post – work in After Effects”.

What I really love about it is not only how realistic the image looks, but how visually interesting it is. The shadows that cascade over a multitude of objects while the light shines through where the canopy doesn’t cover almost creates a story. The attention to detail is inspiring. It was almost hard to believe it wasn’t a photo. The artist themselves talked about how they enjoyed adding details to the image day by day and how they were inspired by the the world and music around them. 

For more information about this project and to see more of his work — click here to visit his behance page. 

myoungsh-project05-wallpaper

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    var tile = 50; //each tile is 50x50
    for (var y = 0; y < 8; y++) { //8 columns
        for (var x = 0; x < 8; x++) { //and 8 rows
            var py = 25 + y * tile; //move px and py into the grid spots
            var px = 25 + x * tile;
              noStroke();
              fill(256); //draw white parts
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10); 
                //only once
              push();
              translate(-25, 0); //but copy and translate them 
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10);
              pop();
              if (x % 2 == 0) { //if its an even column
                fill(256, 256, 0); //draw in yellow
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, py - 10, 
                  px + 12.5, py, px, py + 10); 
                //similarly expressing triangles 
                //and copying+translating them all over the place
              } else { //if odd row do the saem in pink
                fill(256, 0, 256);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, 
                  py - 10, px + 12.5, py, px, py + 10);
              }
        }
    }
    noLoop();
}

I started this project making small edits to the dot code from  assignment b, making the tiles all line up and fit into the smaller canvas without a border. Then I started imagining what could be drawn over and over in the small boxes I created. Luckily my friend was looking at patterns on her computer and this seemed like the perfect challenge. I used a sketch I made, finding  way to replete the pattern and used that to play each triangle and quadrangle within the variable defined plane of a single tile.

eeryan-Project05-wallpaper

sketch

//Erin Ryan
//lab c
//eeryan@andrew.cmu.edu
//project-05-wallpaper
var offset = 0;

function setup() {
  createCanvas(480,380);
  angleMode(DEGREES);
}

function draw() {
  background(193,222,229);
  matchstick()
}
//draws match
function matchstick(){
     var stickW;
     var stickH;
     var tipX;
     var tipY;
     var tipW;
     var tipH;
     var row = 5;
     for(var y = 0; y < 3; y++){//nested foor loop creates a grid
      if(y%2==0){//offsets even rows by 50
         offset = 50;
       }
       else{
         offset = 100;
       }
       for(var x = 0; x < row; x++){
         stickW = 7;
         stickH = 85;
         tipX = x*90 + 3.5;
         tipY = y*100 + 40;
         tipW = 11;
         tipH = 15;
        //match tip
         noStroke();
         fill(225,61,38);
         ellipse(tipX + offset, tipY, tipW, tipH);
         triangle(tipX - tipW/2 + offset, tipY, tipX + tipW/2 + offset, tipY, tipX- 0.5 + offset, tipY + 30);
        //shade match tip
         noStroke();
         fill(231,82,40);
         ellipse(tipX - .75 + offset, tipY + .25, tipW - 5, 12);
         //draw match stick
         noStroke();
         fill(190,169,130);
         rect(x * 90 + offset, y * 100 + 50, stickW, stickH,0,0,45,45);
         //shade match stick
         noStroke();
         fill(219,191,149);
         rect(x * 90 - 1 + offset, y*100 + 50, stickW-1.5,stickH,0,0,45,45);
     }
    }
}

I started by making my match image in Illustrator, and I took the dimensions of the graphic from that. I enjoyed coming up with the artwork for this project, but I had a lot of difficulty implementing it into a pattern. I originally had my nested for loop in my draw function, but when I called it it wouldn’t produce a grid, like it would if I just drew a rectangle in the loop, which I think was because of the way some of my variables were defined in the function. I eventually figured out how to tweak my code within my matchstick function to create the pattern I wanted.

dayoungl Looking Outwards -05

I wasn’t very familiar with 3d graphic artists so I had to do some google search to look for interesting artworks. Among the artists I found Daniel Aristizabal’s artworks most intriguing. Aristizabal is a Colombia-based artist who describes his works as “pop surrealism”. He is a fan of bold colour contrasts, scientific references, and geometric shapes. He makes use of everyday objects and turns them into something surreal and interesting. Aristizabal explains that he considers sketching process in his notebook the most important part of his art-making process; despite the 3d tools he can take advantage of, Aristizabal states that he likes the feeling of brainstorming with paper and pencil. Then, the artist use a computer program, Cinema 4D, to visualize his sketches.

I think 3D in the same way I think illustration. I start to doodle around a concept. Words, sketches, random thoughts. Whatever pops into my mind, I draw it on my notepads. After that I know what elements I need to create on Cinema 4D. A lot of the stuff I use is based on imagery and objects that I had when I was a little kid—finally I’m able to get that out into the world.

jamieh-project-05-wallpaper

I first started with picking the colour palette for the background triangles, then took inspiration from cherry blossom trees and its changes over time with blue representing winter and pink representing summer.

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 5
*/

var SIZE = 50;
var c1x = 0; 	//top L (TL) corner X
var c1y = 0;	//top L (TL) corner Y
var c2x = 50;	//top R (TR) corner X
var c2y = 0;	//top R (TR) corner Y
var c3x = 0;	//bottom L (BL) corner X
var c3y = 50;	//bottom L (BL) corner Y
var c4x = 50;	//bottom R (BR) corner X
var c4y = 50;	//bottom R (BR) corner Y
var ratio = 0.5;
var ratio2 = 2/3;
var snow = 5;
var petal = 6;

function setup() {
    createCanvas(400, 350);
    background(0);
    
    noLoop();
}

function draw() {
	
	for(var h = 0; h < width/SIZE; h++){
		for(var v = 0; v < height/SIZE; v++){
			r = map(h, 0, width/SIZE, 155, 255);
  			b = map(v, 0, height/SIZE, 155, 255);

  			fill(r, b, b);
  			strokeWeight(0.5);
  			if(h < 4){									//Left half
	  			if(v%2 == 0){							//odd rows
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c3x+h*SIZE, c3y+v*SIZE);	
					stroke(255);
					triangle(c2x+h*SIZE, c2y+v*SIZE,	//Right angle @ corner 4 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);
					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x*ratio*ratio+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow, snow);
					
					//snow pile
					bezier(c3x+h*SIZE, c3y+v*SIZE,
						   c1x+c2x*ratio2*ratio+h*SIZE, c4y-ratio*ratio*ratio+v*SIZE,
						   c1x+c2x*ratio*ratio+h*SIZE, c4y-c4y*ratio*ratio2+v*SIZE,
						   c4x+h*SIZE, c4y+v*SIZE);
					pop();	

				} else {
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 2 (TR)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);	
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);

					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x*ratio*ratio+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					pop();
				}		


			} else {										//Right half
				if(v%2 != 0){								//odd rows						
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 4 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);
						line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+(c4x-c4x*ratio*ratio)+h*SIZE, c4y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

						//flower (EVEN)
						noStroke();
						fill(255, 102, 140);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);

						pop();

					} else {
						stroke(255);
						triangle(c3x+h*SIZE, c3y+v*SIZE,	//Right angle @ corner 2 (TR)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c2x+h*SIZE, c2y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);						
						line(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+h*SIZE, c3y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE)

					//flower
						noStroke();
						fill(255, 102, 140);
						//centre flower (ODD)
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						//on line flower
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal, petal/ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal/ratio, petal);
						//edge line flower
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal/ratio, petal);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal*ratio, petal*ratio);
						pop();
					}		
				}
			}
	}
}

One of my challenges was trying keeping track of my variables, especially for the x and y coordinates of the corners that help me generate each triangle/square. I also had difficulty trying to shorten the code, which I know I can create my own function and call it, but I couldn’t figure out how to make sure it wouldn’t confuse my corner variables.

Project 5 – Wallpaper

sketch

function setup() {
    createCanvas(480, 440);
    background(169,201,203);

    //First level of diamond
    var y0 = 0;
    var quaSize = sqrt(1.5)*width/8
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x0 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (117,180,208);
            strokeWeight (3);
            noFill();    
            quad (x0, y0, x0-width/8, y0+quaSize, x0, y0+quaSize*2, x0+width/8, y0+quaSize);    
            x0 += width/4;
        }
        y0 += quaSize*2;  
    }

    //Secondary diamond
    var y1 = quaSize/3;
    var quaSize1 = quaSize/3*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x1 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (208,208,117);
            strokeWeight (5);
            noFill();    
            quad (x1, y1, x1-width/12, y1+quaSize1, x1, y1+quaSize1*2, x1+width/12, y1+quaSize1);    
            x1 += width/4;
        }
        y1 += quaSize*2;  
    }
    
    //Fourth level diamond
    var quaSize4 = quaSize/3*2;
    var y4 = 0 - quaSize4;
    for (var quaCol=0; quaCol<6; quaCol++) {
        var x4 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (124,186,112);
            strokeWeight (3);
            quad (x4, y4, x4-width/12, y4+quaSize4, x4, y4+quaSize4*2, x4+width/12, y4+quaSize4);
            x4 += width/6 + width/12;
        }
        y4 += quaSize4*3;
    }

    //Thirdary diamond
    var quaSize2 = quaSize/3;
    var y2 = quaSize2*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x2 = width/12 + width/24;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (230,230,75);
            strokeWeight (3);
            quad (x2, y2, x2-width/24, y2+quaSize2, x2, y2+quaSize2*2, x2+width/24, y2+quaSize2);
            x2 += width/4;
        }
        y2 += quaSize*2;
    }
    var y3 = 0 - quaSize/3;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x3 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            strokeWeight (4);
            quad (x3, y3, x3-width/24, y3+quaSize2, x3, y3+quaSize2*2, x3+width/24, y3+quaSize2);
            x3 += width/4;
        }
        y3 += quaSize*2;
    }

    

    //Decorated dots
    //vertical ones
    var sizeC = width/64;
    var yC = quaSize - sizeC*2;
    for (var cCol=0; cCol<8; cCol++) {
        var xC = 0;
        for (var cRow=0; cRow<6; cRow++) {
        noStroke();
        fill (124,186,112);
        ellipse (xC, yC, sizeC);
        xC += width/4;
        }
        if (cCol % 2 == 0) {
            yC += sizeC*4;
        } else {
            yC += quaSize*2 - sizeC*4;
        }
    }

    //horizontal ones
    var yC1 = quaSize;
    for (var cCol=0; cCol<8; cCol++) {
        var xC1 = sizeC*2;
        for (var cRow=0; cRow<8; cRow++) {
            ellipse (xC1, yC1, sizeC);
            if (cRow % 2 == 0) {
                xC1 += width/4 - sizeC*4;
            } else {
                xC1 += sizeC*4;
            }
        }
        yC1 += quaSize*2;   
    }
    

    noLoop();
}

function draw() {
}

This wallpaper that I design has a vintage feel. I used yellow green and blue as the swatch. The geometries that I used are circles and diamonds, which are simple but timeless.

akluk-Project5-Section-A-Wallpaper

sketch
My art is inspired by a logo that i quite like and it was fun recreating it as a wallpaper. It was a challenge to create complex and organic/natural pattern using simply a double for loop and little hard coding for each one specific cell. Creating a if statement that was able to create a pattern with the colors was also interesting to think about.

//Alvin Luk
//Section A
//akluk@andrew.cmu.edu
//Assignment-05-B

var total; //variable that controls the number of circles at current row
var w = 90;
var sx = w/2;
var sy = w/2;

function setup() {
    createCanvas(450, 450);
    background(color(119,221,170));

    for (var y = 0; y < height/w; y++) {
        for (var x = 0; x < width/w; x++) {

            //determines color of the heart
            if ((y*5+x)%2 == 0){
                fill(color(255,20,20));
            }
            else if (x%2 == 1){
                fill(color(255,105,180));
            }
            else {
                fill(color(255,215,0));
            }
            noStroke();

            //draws heart outline
            ellipse(sx+x*w-10, sy+y*w-10,20,20);
            ellipse(sx+x*w+10, sy+y*w-10,20,20);
            triangle(sx+x*w-20,sy+y*w-7,sx+x*w+20,sy+y*w-7,sx+x*w,sy+y*w+18)

            //draws eye whites
            fill(255);
            ellipse(sx+x*w-9, sy+y*w-7,10,6);
            ellipse(sx+x*w+9, sy+y*w-7,10,6);

            //draws pupils
            fill(0);
            ellipse(sx+x*w-9, sy+y*w-7,5,6);
            ellipse(sx+x*w+9, sy+y*w-7,5,6);
        }
    }


    //draws line grid
    for (var i = 0; i < 4 ; i++){
        stroke(0);
        strokeWeight(2);
        line(w*(i+1)-3,0,w*(i+1)-3,height);
        line(w*(i+1)+3,0,w*(i+1)+3,height);
        line(0,w*(i+1)-3,width,w*(i+1)-3);
        line(0,w*(i+1)+3,width,w*(i+1)+3);
    }

    //draws purple loops around intersection
    for (var j = 0; j < 4 ; j++){
        for (var k = 0; k < 4; k++){
            noFill();
            stroke(106,90,205);
            strokeWeight(4);
            ellipse(w*(j+1),w*(k+1),20,20);
        }   
    }
    noLoop();
}


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

NatalieKS-Project-05

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-05

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 480);
    background(102, 159, 166);
}

function draw() {

    for (var y = -460; y < height - 35; y += 140) {
        for (var x = -50; x < width - 50; x += 130) {
            leaf(x, y);
            push();
            fill(191, 158, 57);
            triangle(x + 5, y + 55, x + 18, y + 40, x + 30, y + 55);
            triangle(x + 5, y + 55, x + 18, y + 70, x + 30, y + 55);
            noFill();
            stroke(191, 158, 57);
            strokeWeight(2);
            triangle(x, y + 55, x + 18, y + 35, x + 35, y + 55);
            triangle(x, y + 55, x + 18, y + 75, x + 35, y + 55);
            pop();
        }
    }
    noLoop();

}

function leaf(x, y) {
    stroke(47, 87, 53);
    strokeWeight(1);
    fill(65, 121, 73);
// top leaf 1 - right
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 35, y + 403);
    curveVertex(x + 45, y + 408);
    curveVertex(x + 50, y + 420);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
//top leaf 1 - left
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 23, y + 406);
    curveVertex(x + 23, y + 409);
    curveVertex(x + 26, y + 420);
    curveVertex(x + 30, y + 425);
    curveVertex(x + 35, y + 428);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
// top leaf 2 - right
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 55, y + 391 - 8);
    curveVertex(x + 65, y + 396 - 8);
    curveVertex(x + 70, y + 408 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
//top leaf 2 - left
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 43, y + 394 - 8);
    curveVertex(x + 43, y + 397 - 8);
    curveVertex(x + 46, y + 408 - 8);
    curveVertex(x + 49, y + 413 - 8);
    curveVertex(x + 55, y + 416 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
// top leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 61 + 9, y + 391 - 29);
    curveVertex(x + 71 + 9, y + 396 - 29);
    curveVertex(x + 76 + 9, y + 408 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
//top leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 49 + 9, y + 394 - 29);
    curveVertex(x + 49 + 9, y + 397 - 29);
    curveVertex(x + 52 + 9, y + 408 - 29);
    curveVertex(x + 55 + 9, y + 413 - 29);
    curveVertex(x + 61 + 9, y + 416 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
// top leaf 4 - right
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 61 + 24, y + 391 - 52);
    curveVertex(x + 71 + 24, y + 396 - 52);
    curveVertex(x + 76 + 24, y + 408 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
//top leaf 4 - left
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 49 + 24, y + 394 - 52);
    curveVertex(x + 49 + 24, y + 397 - 52);
    curveVertex(x + 52 + 24, y + 408 - 52);
    curveVertex(x + 55 + 24, y + 413 - 52);
    curveVertex(x + 61 + 24, y + 416 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
// bottom leaf 1 - right
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 61 + 49, y + 391 - 25);
    curveVertex(x + 71 + 49, y + 396 - 25);
    curveVertex(x + 76 + 49, y + 408 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
//bottom leaf 1 - left
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 49 + 49, y + 394 - 25);
    curveVertex(x + 49 + 49, y + 397 - 25);
    curveVertex(x + 52 + 49, y + 408 - 25);
    curveVertex(x + 55 + 49, y + 413 - 25);
    curveVertex(x + 62 + 49, y + 416 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
// bottom leaf 2 - right
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 61 + 33, y + 391 - 1);
    curveVertex(x + 71 + 33, y + 396 - 1);
    curveVertex(x + 76 + 33, y + 408 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
//bottom leaf 2 - left
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 49 + 33, y + 394 - 1);
    curveVertex(x + 49 + 33, y + 397 - 1);
    curveVertex(x + 52 + 33, y + 408 - 1);
    curveVertex(x + 55 + 33, y + 413 - 1);
    curveVertex(x + 62 + 33, y + 416 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
// bottom leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 61 + 15, y + 391 + 18);
    curveVertex(x + 71 + 15, y + 396 + 18);
    curveVertex(x + 76 + 15, y + 408 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
//bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 49 + 15, y + 394 + 18);
    curveVertex(x + 49 + 15, y + 397 + 18);
    curveVertex(x + 52 + 15, y + 408 + 18);
    curveVertex(x + 55 + 15, y + 413 + 18);
    curveVertex(x + 62 + 15, y + 416 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
// bottom leaf 4 - right
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 61 - 2, y + 391 + 35);
    curveVertex(x + 71 - 2, y + 396 + 35);
    curveVertex(x + 76 - 2, y + 408 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    //bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 49 - 2, y + 394 + 35);
    curveVertex(x + 49 - 2, y + 397 + 35);
    curveVertex(x + 52 - 2, y + 408 + 35);
    curveVertex(x + 55 - 2, y + 413 + 35);
    curveVertex(x + 62 - 2, y + 416 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    fill(73, 135, 82);
    stroke(191, 158, 57);
    strokeWeight(1);
//center line for leaf
    push();
    noFill();
    stroke(47, 87, 53);
    strokeWeight(3);
    beginShape();
    curveVertex(x + 30, y + 310);
    curveVertex(x + 30, y + 435);
    curveVertex(x + 100, y + 360);
    curveVertex(x + 50, y + 360)
    endShape();
    pop();
}

I really wanted to do something with plant leaves and gold, and started at first to sketch out what I wanted. That ended up changing quite a lot, as I couldn’t for the life of me figure out how to write a loop that would loop the leaf shape rather than having to figure out the coordinates for each one individually. I asked multiple people for help, including a TA and some students in other CS courses, but none of us could really make it work. I wish I could’ve figured that out and implemented it for this project, because it would’ve saved a lot of time. Otherwise, figuring out how to loop the whole plant was relatively easy, since we had learned a version of how to do so in class.

The original ideas for my wallpaper. I wanted to do some sort of fern, and did a rough sketch of what that might look like.

 

 

Trying to figure out coordinates for the leaves. Figuring out the first leaf took most of my time, as I was pretty new to using curveVertex().

 

A friend (from another CS course) tried to help me figure out how to write a loop for the leaves by drawing it out on paper. In the end, we couldn’t figure it out.

Ziningy1 – Section C – Project 05 – Wallpaper

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-05



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

function draw() {

    background(40,40,40,40);


    //set intervals for spacings 
    var vinterval=100
    var hinterval=150

    
    //start for loop for grids 
     for (var y = 0; y < 7; y++) {

        if(y%2){  //if statement determine the even number row 

            for (var x = 0; x < 7; x++){ 

               //set variable for triangle three vertexs' position
                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                //draw the overlapping three triangles(mountains) with offsets 
                triangle(tx1+hinterval/2,ty1,tx2+hinterval/2,ty2,tx3-10+hinterval/2,ty3);
                stroke(170,170,30);  
                triangle(tx1+hinterval/2+30,ty1+10,tx2+20+hinterval/2,ty2+10,tx3+20+hinterval/2,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40+hinterval/2,ty1-10,tx2+60+hinterval/2,ty2+5,tx3+hinterval/2,ty3+5);


                
                //set variables for the ellipse(sun）and draw the ellipse on the top left of the mountain 

                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,120,80,70);
                stroke(200,200,50);
                ellipse(ex+hinterval/2, ey-10, 30, 30);
            }

        } else {

            for (var x = 0; x < 7; x++){


                //for odd number rows, again set variable for triangle three vertexs' position

                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                triangle(tx1,ty1,tx2,ty2,tx3-10,ty3);
                stroke(170,170,30);  
                triangle(tx1+30,ty1+10,tx2+20,ty2+10,tx3+20,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40,ty1-10,tx2+60,ty2+5,tx3,ty3+5);
                

                //set variable for sun position and draw the sun
                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,50,80,60);
                noStroke();
                ellipse(ex,ey-10,30,30);

                // draw the ellipses(clouds like)
                fill(200,200,200,60);
                strokeWeight(2);
                ellipse(ex+20,ey,60,20);
                ellipse(ex+50,ey+5,50,10);


            }

            
        }




    }




}

In this project, i was inspired by the strong geometric shapes in some clothing patterns. I also think that using the neon primary color will be a interesting choice against a black background. Building on top of what I learned from the Assignment b, my foundation pattern is a mountains with sun scenery constructed by mostly outlines.

LookingOutwards-05-sjahania

The Graphics Codex is a website and app I found that teaches people how to make basic graphics using programming. It has a series of “courses” with projects that allow people to practice the skills they learn. The project I was the most interested in is called “Meshes.” It involves using geometrical shapes (mostly triangles) to create three-dimensional pictures. The course explains how to think topographically, and gives the ins and outs of using algorithms to program the actual displays.


This is an example of how one would use triangles to create 3D shapes in computer graphics. The triangles are left in to show a map, and to get the people seeing the image to “think topographically.”

One thing I found interesting is the course’s definition of topography. It explains that topography is the connectedness of the points on a two-dimensional surface in three-dimensional space. I learned that while the “mesh” part animates in graphics, the actual connectedness stays the same, and this is an important point in computer graphics.

website link: http://graphicscodex.com/projects/meshes/index.html