Category: Project-05-Wallpaper

sketch

var xSpacing = 125; //horizontal distance between elements
var ySpacing = 100; //vertical distance between elements

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

function draw() {

    var stripeHeight = height/5; //set height of horizontal stripes

    //draw black stripes
    fill(0); 
    rect(0, 0, width, stripeHeight);
    rect(0, 2 * stripeHeight, width, stripeHeight);
    rect(0, 4 * stripeHeight, width, stripeHeight);

    //draw blue stripes
    fill("deepskyblue");
    rect(0, stripeHeight, width, stripeHeight);
    rect(0, 3 * stripeHeight, width, stripeHeight);

    for (var y=0; y<5; y++) { //create 5 rows

        //even rows: draw moon & stars
        if (isEven(y)) {   
        for (var x=0; x<4; x++) {   //draw 4 columns
            var i = (x * xSpacing) + 50;  
            var j = (y * ySpacing) + 50;  
            moon(i, j);   //draw 
            starCluster(i + 25, j - 25);
        }
        
        //odd rows: draw sun
        } else {  
            for (var x=0; x<4; x++) {
                var a = (x * xSpacing) + 75;
                var b = (y * ySpacing) + 50;
                sun (a, b);
            }
        }
    }
}


//creates moon
function moon (x,y) {
noStroke();
fill("lemonchiffon");
arc (x,y,50,50,HALF_PI,(PI * 3/2));
fill(0);
arc (x,y,25,50,HALF_PI,(PI * 3/2))
}

//creates three stars
function starCluster (x,y) {
fill(255);
text ("*",x,y);
text ("*",x+10,y+10);
text ("*",x-5,y+18);
}

//creates sun
function sun (x,y) {
    noStroke();
    fill("yellow");
    ellipse(x,y,30,30);
    for (var angle=0; angle < 360; angle +=45) {
        stroke("yellow");
        strokeWeight(2);
        line(x, y, x + cos(radians(angle)) * 30, y - sin(radians(angle)) * 30);
        }
}

//tests for odd/even
function isEven (value) {
    return value % 2 == 0;
}

I am not a visual artist/designer and not the best at drawing, so I skipped straight to brainstorming shapes in code. I knew I wanted to work with some curved shapes since I didn’t entirely master the arc() function earlier in the semester. Playing around with arcs in p5.js led me to the moon shape, which gave me the idea of alternating day/night sky patterns. This week’s lessons on cos() and sin() came in handy when I was trying to draw the sun’s rays, as I was able to use these functions to create a simpler way of creating the circular lines than drawing each individually.

atreu-proj-05

//Austin Treu
//atreu@andrew.cmu.edu
//Section B
//Project-05

function setup() {
   	createCanvas(580, 580);
    background(0,0,int(random(255)));

    //set vars for circles
    var tw = 20, th = 20, offset = 20, 
    	circSize = 10, loops = 10, 
		backX = ((loops-1) * tw)/2, backY = ((loops-1) * th)/2,
		backSize = loops*circSize, 
		tileSizeX = (loops) * tw, tileSizeY = (loops) * th,
		//randomize color
		colorRandom = int(random(255));
		backColor = 'rgb(100,0,'+colorRandom+')',
		circColor = 'rgb('+colorRandom+',0,200)',
		lineColor = 'rgb(200, 0,'+colorRandom+')';

	//loop to draw multiple tiles
	stroke(lineColor);
	for(var i = 0; i < (height/tileSizeY); i++){
		for(var j = 0; j < (width/tileSizeX); j++){
			//draw big background circle
			fill(backColor);
			ellipse(backX + j*tileSizeX, backY + i*tileSizeY, backSize, backSize);
			//utilize honeycomb pattern for tile
			fill(circColor);
		    for (var y = 0; y < loops; y++) {
		        for (var x = 0; x < loops; x++) {
		            if(y%2 === 0){
		                var py = ( (y * th)) + i * tileSizeY;
		                var px = ( (x * tw)) + j * tileSizeX;
		                ellipse(px, py, circSize, circSize);
		            }
		            else{      
		                var py = ( (y * th)) + i * tileSizeY;
		                var px = ( (0.5 * offset + x * tw)) + j * tileSizeX;
		                ellipse(px, py, circSize, circSize);          
		            }
		        }
		    }
		    //draw lines around each tile
		    line(j*tileSizeX, i*tileSizeY, (j+1)*tileSizeX, i*tileSizeY);
		    line((j+1)*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th, j*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th);
		    line(j*tileSizeX, i*tileSizeY, j*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th);
		    line((j+1)*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th, (j+1)*tileSizeX, i*tileSizeY);
		}
	}

    noLoop();
}

When I started working on this project, I wanted to use the honeycomb code from Assignment B this week because of how interesting that ended up looking by itself. Ultimately I had to simplify it in order to make the math for the rest of the design work out a bit better, as adjusting everything to deal with the square root of three over two can become a difficult task. The shapes’ randomized fills and stroke correspond with each other and utilize the same random value in different ways.