keuchuka proj 5

//Fon Euchukanonchai
//15-104 SECTION A
//keuchuka@andrew.cmu.edu

function setup() {
    createCanvas(480, 480);
    background(255);
    var angle1 = 0;
    var angle2 = 2;

// setting up for loops for x and y values
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 6; x++) {
        	// if the row is even then angle of arc, the circle poxition changes
       		if (x % 2 == 0){
    			angle1 = 3;
    			angle2 = 5;
    			pop=60
    			arcStroke=(50);
    			circleX = -30

    		// conditions if row is odd
   			} else {
    			angle1 = 0;
    			angle2 = 2;
    			arcStroke=(0);
    			circleX =0
    		}

    		// array of arcs
        	stroke(255, arcStroke, 255);
        	strokeWeight(5);
        	noFill();
        	arc(90+x*60, 50+ y*120, 80, 80, angle1, angle2);

        	// array of circles with gradient
        	var circstrokeMap = map(x, pop+90+x*105, width, 230, 255);
        	stroke(255, circstrokeMap, 0);
        	strokeWeight(4);
        	ellipse(x*90+190, y*120+circleX+30, 50, 50);

        	// array of rectangles with gradient
        	var rectstrokeMap = map(x, x*100+240, width, 220, 230);
        	strokeWeight(6);
        	stroke(0, rectstrokeMap, 255);
        	rect(x*100+240, y*94+80, 50, 30, 3);
        	}
        }
    noLoop();    
}

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

I wanted to experiment with how different arrays of shapes interacting with each other would look with different colors and gradients in a minimal setting.