Jinhee Lee; Project-05

jinheel1_project-05

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-05

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

function draw() {
	background(20);

	var scale = Math.sqrt(3)/2; //helps make equilateral triangle
	var triDistX = 60; //increments triangle on x-axis
	var triDistY = 60 * scale; //increments triangle on y-axis
	var triOffset = 30; //for making bottom vertices of triangles

	var fro = color(100,20,100); //color for stripes
    var to = color(150,20,150);

    var fro2 = color(20,20,100); //color for triangles
    var to2 = color(20,20,255);

	for (var y = 0; y < height; y += 2 * triDistY) { //for each row
		var amt = map(y,0,height,0,1);
		var col = lerpColor(fro,to,amt);

		fill(col); //fills the stripes
		stroke(col); 

		rect(0,y + triDistY,width,triDistY); //draws the stripes
		for (var x = 0; x < width; x += triDistX) { //for each "column"
			var amt2 = map(x,0,width,0,1);
			var col2 = lerpColor(fro2,to2,amt2);

			fill(col2); //fills the triangles
			stroke(col2);
			
	    	triangle(x + triOffset, y, //each line is a coordinate pair
	    		x, y + triDistY,
	    		x + 2 * triOffset, y + triDistY);
	    }
	}
	noLoop(); //as per instructions
}

I wanted to go for cooler colors on the color spectrum, to give more of a subdued tone to the wallpaper. Drawing nested for() loops is, in itself, not difficult, but it did present a bunch of restrictions I wasn’t aware of. I previously tried to use variables defined locally, before the for() loop, for incrementation. However, with such a configuration I ended up with only a single row of triangles that I had intended to repeat down the canvas. I had to change it later so that the variables for incrementation were defined inside the for() loop arguments.

P.S., if this were a shirt, I would NOT wear this in public.