Month: September 2017

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 05

var space1=10; 
var space2=40; 
var space3=30; 
var area=80; 
var area2=5
var px; 
var py; 

function setup () {
	createCanvas(400, 400); 
	background(255, 201, 227);
	noStroke(); 
	}

function draw() {
for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
		
		//plate shadows
		px=space1+x*area;
		py=space1+y*area; 
		fill(102, 20, 79); 
		rect(px, py, space3*2+7, space3*2+7); 
		
		//plates  
		fill(255, 128, 159); 
		rect(px, py, space3*2, space3*2); 
		
		//egg white circle 1
		px=space3+x*space2*2;
		py=space3+y*space2*2; 
		fill(255); 
		ellipse(px, py, space3, space3); 
		
		//egg white circle 2
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(255); 
		ellipse(px, py, space2+3, space2+3); 
		
		//egg white circle 3
		px=space3+3+x*area;
		py=space3+3+y*area; 
		fill(255); 
		ellipse(px, py, space3+2, space3+2); 
		
		//yolk shadows 
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(203, 141, 15); 
		ellipse(px, py, 3+area2*4, 3+area2*4); 
		
		//yolk
		px=space2+3+x*area;
		py=space2+3+y*area; 
		fill(255, 181, 75); 
		ellipse(px, py, area2*4, area2*4); 
		
		//yolk shine 
		px=space2+x*area;
		py=space2+y*area; 
		fill(255); 
		ellipse(px, py, area2, area2); 
		
		}
	}
}

For this project, I wanted to make patterns with one of my favorite foods: eggs. I first sketched out a basic grid design I wanted to use as plates for the eggs (as seen in the image above). I was also inspired by the theme for this week’s Looking Outwards and wanted to give a 2-D image a more 3-D look. I did this using some simple shadows to also add a 3-D element and am quite happy with the repeated pattern overall.

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Assignment-01
function setup() {
    createCanvas(480, 480);
    pixelDensity(3.0);
}

function draw() {
    background(51, 116, 173); //pale blue
    drawGrid(); //diagonal grid of black and white lines
    for(x = 120; x < width + 240; x += 240) { //spacing to fit within gridwork givin
        for(y = 0; y < height + 120; y += 120) {
        push();
            if((y+120)%240 == 0 ) {
                translate(-120, 0); //acounts for the alternating horizontal positions among rows
            }
        drawTile(x, y); // draws image in tile with givin x, y coordinates as center
        rectMode(CENTER);
        noStroke();
        rect(x-120, y, 20, 20); //black blocks between tiles
        pop();
        }
    }
    noLoop();
    
    
}

function drawGrid() {
    for(x = 0; x < width + 480; x+= 120) { //lines spaced 120 pixels apart horizontally
        if(x%240 == 0 || x == 0) {
            stroke(0); //black lines every other line
            } else {
            stroke(220); //whitish grey lines otherwise
            }
        line(x, 0, x-480, height); //positive 45 degree slope lines
        line(x-480, 0, x, height); //negative 45 degree slope lines
    }
}

function drawTile(x, y) {
    push();
    translate(x, y); //move center of tile
    fill(255);
    stroke(0);
    strokeWeight(1);
    for(j = 0; j < 4; j++){ //rotates long diamonds 90 degrees 4 times
        push();
        rotate(j*PI/2);
        fill(230);
        quad(-100, 0, -50, -12, 15, 0, -50, 12); //long horizontal diamond shape
        stroke(0);
        strokeWeight(1);
        line(-70, 0, -40, 0); //line detail on horizontal diamond
        pop();
    }


    strokeWeight(1.5);
    rectMode(CENTER);
    fill(179, 91, 141); //darker lilac purple
    rect(0, 0, 65, 65); //underlying square
    fill(175, 162, 208); // light lilac
    for(i = 0; i < 4; i++) {
        push();
        rotate(i*PI/2);
        translate(-25, 0);
        quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
        pop();
    }
    // push();
    // translate(-25, 0);
    // quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
    // pop();
    // push();
    // translate(25, 0);
    // quad(-20, 0, 0, -20, 25, 0, 0, 20); //righthand diamond
    // pop();
    // push();
    // translate(0, 25);
    // quad(-20, 0, 0, -20, 20, 0, 0, 25); //lower central diamond
    // pop();
    // push();
    // translate(0, -25);
    // quad(-20, 0, 0, -25, 20, 0, 0, 20); // upper central diamond
    // pop();
    fill(255, 220, 80); //pollen yellow
    quad(-25, 0, 0, -25, 25, 0, 0, 25); //central diamond
    pop();
    
}

The original inspiration for this paper was the old victorian floral wallpaper style… I tried to work in an organic subject and organic style with distinctly computer generated graphics (using geometric, sharp lines).

My first sketches were playing with overlapping diamond shapes, and feeling out what could be feasible to accomplish with my code.

As I started trying to implement these sketches and concepts into practice, I had to cut out some details I originally wanted to be a part of the wallpaper. The canvas I was working with was a 480×480 block, not a wall, and quickly became cluttered. So, my artistic direction for the project quickly adapted to a simpler aesthetic.

To be honest, the bulk of the work in this project for me was deciding what details to keep, and what to get rid of… I think I was moderately successful. I think this is a project I will return to, and see if I can keep it from being cluttered, but still improve the aesthetics of it. Currently, I think the color scheme and horizontal vs. diagonal lines are what carry the appeal of this wallpaper.

SaveSaveSaveSave