Month: September 2017

Davewall

////Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 05 - Wall Paper
function setup() {
    createCanvas(480, 480);
    background(0); //set back ground to black

}
 
function draw() {
	noStroke(); // removing Stroke from the petals
    for (var p = 0;p < 12; p ++){ // setting for loop for patter
    	for (var j = 0; j <12; j ++){
    		var red = map(p*200,0,height,0,255);  //color set for red
            var green = map(j*200,0,width,0,255); //color set for green 
    		petal(p*200+90,j*200+90,red,green,random(0,255)); //execute petal 
    		stroke(255,4); //set stroke color
    		line(p*40,0,p*40,height); //vertical stroke
    		line(0,p*40,p*40,0); // diagonal stroke
    		line(width,p*40,p*40,height); // diagonal stroke
    		noStroke(); // no stroke for the petal

    	}
   }
   noLoop(); //only run once
}

function petal(x,y,r,g,b){ //petal function
	push(); // setting geomety
	scale(0.45); //scale down whole thign by 0.45 too big initially
	fill(r,0,b); // set color of petals
	rectMode(CENTER); // settting center to middle
	translate(x,y); //translate to x, y coordinate given at execution
	for (var i = 0; i < 6; i ++){ //for loop for petal rotation
	push(); 
	scale(1.1) //scale petals up by 1.1
	rotate(TWO_PI*i/6); //make them rotate around the center 
	translate(50,0); //translate them 50 from the cente 
	rotate(180); //rotate the single petals by 180 to create form intended
	beginShape(); //half of petal
	vertex(40,20);
	bezierVertex(70,30,40,50,40,60);
	endShape();
	beginShape(); //another half of petal
	vertex(40,20);
	bezierVertex(-10,35,40,50,40,0);
	endShape();
	pop();// pop the form 

	}
	pop(); //pop the whole 
	}

For this project I started with a flower initially to create a wall paper pattern. I started to modify the form from there and transformed the petals into irregular petal shapes. I have populated them by giving 6 petals a center. I had to scale the petal sizes down because they were too big initially. I have used the color to give random variation through out the wall paper. I have used for loop and random variable for the color lies inside of the loop. After the placement of the petals, it needed extra color of form to contrast with. I decided to put white transparent thin lines to give emphasis on the petals and contrast through out whole wall paper pattern.

sketch

function setup() {
    noLoop();
    createCanvas(480, 600);
    background(255);
    //fill the canvas with a gradient color
    bgColor();

    //riandrop length
    var dLen = 10;

    noStroke();
    //fill the canvas with raindrop, set raindrop x and y equal 10
    for(var dy = 10; dy < height-dLen; dy += 40 ){
        for(var dx = 10; dx < width - dLen; dx += 40){
            stroke(144, 197, 242);
            strokeWeight(3);
            line(dx, dy, dx+dLen, dy+dLen);
        };
    };
    
    //umbrella size 
    var size = 80;

    //fill the canvas with umbrellas, set umbrella x and y equal 60
    for ( var y = 60; y < height-size/2; y += 95){
        for (var x = 60; x < width-size/2; x += 90){

            //blue umbrellas
            if((x+y)%7==0){
                    
                push();
                translate(x,y);
                rotate(radians(-45))
                //umbrella handle 
                noStroke();
                fill(57,130,158);
                rectMode(CENTER);
                rect(0, 0, 4, 80)

                noFill();
                stroke(71,165,200)
                strokeWeight(4);
                arc(0-size/12, 0+40, size/6, size/6, 0, PI)

                //umbrella top                   
                noStroke();
                blueUmbre(0,0);
                //small triangles of umbrella
                var tx=0;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, 0, tx-size/2+(size/6), 0, tx-size/2+size/12, 0+size/12);
                    tx += size/6;
                };
                pop();
            } else {//red umbrellas
                //umbrella handle 
                noStroke();
                fill(234, 145, 145);
                rectMode(CENTER);
                rect(x, y, 4, 80)

                noFill();
                stroke(230,80,80)
                strokeWeight(4);
                arc(x-size/12, y+40, size/6, size/6, 0, PI)

                noStroke();
                //umbrella top
                redUmbre(x,y);
                //arc(x, y, size, size, PI, 2*PI)
                //small triangles of umbrella
                var tx=x;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, y, tx-size/2+(size/6), y, tx-size/2+size/12, y+size/12);
                    tx += size/6;
                };
            };
        };
    };
    
}

function draw() {
}

function bgColor(){
    //create a gradient color from green to blue
    colorMode(RGB);
    noStroke();
    from = color (179, 222, 213);
    to = color (179, 209, 222);
    interA = lerpColor(from, to, .20)
    interB = lerpColor(from, to, .40)
    interC = lerpColor(from, to, .60)
    interD = lerpColor(from, to, .80)
    fill(from);
    rect(0,0,width,height/6);
    fill(interA);
    rect(0,height/6,width,2*height/6);
    fill(interB);
    rect(0,2*height/6,width,3*height/6);
    fill(interC);
    rect(0,3*height/6,width,4*height/6);
    fill(interD)
    rect(0,4*height/6,width,5*height/6);
    fill(to);
    rect(0,5*height/6,width,height);
}

//create gradient red color for red umbrellas
function redUmbre(x,y){
    var r = 230;
    for (var size=80; size > 0; size -= 2){
        fill(r,80,80)
        arc(x, y, size, size, PI, 2*PI)
        r -=1; 
    };
}

//create gradient blue color for blue umbrellas
function blueUmbre(x,y){
    var g = 165;
    for (var size=80; size > 0; size -= 2){
        fill(71,g,200)
        arc(x, y, size, size, PI, 2*PI)
        g -=1; 
    };
}

To start with the project, I drew out the sketch to have a sense of how the layout should look like.

At first, I only wanted the umbrella all looked like the same. When I created the all-umbrella wallpaper, I found if some of the umbrellas can be changed would be interesting. Therefore, I thought about how to make only some of the umbrellas change but not in a “boring” pattern. Later I found out if I ply around with the variables for the umbrella’s x and y, this design maybe can work! I tried to use modulo related to x and y, and it worked. What’s more, because the color looked “flat”, I thought maybe making the color become gradient can be more attractive, so I add gradient colors to umbrellas and the background.