Jihoonp_Project_03

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-03

var x = 0;
var y = 0;
var dirL = 1;
var dirC = 1;
var speedL = 1;
var speedC = 1;
var w = 30; // size of big squares
var v = 10; //size of intermittent squares
var s = 30; //space between squares
var r = 0;
var g = 100;
var b = 200;


function setup () {
	createCanvas(640, 480);
}

function draw () {
	background(r,g,b);
	r+=dirC*speedC;
	g+=dirC*speedC;
	b+=-dirC*speedC;
	if (r>255||r<0) {
		dirC=-dirC;
	}
	if (g>255||g<0) {
		dirC=-dirC;
	}
	if (b>255||b<0) {
		dirC=-dirC;
	}
	//sets colors for squares, that periodically change

    for (var i=0 ;i < 10; i++) {
    	var yPos = ((s*2)*i)+(w/2);

    	for (var j=0; j<13;j++){
    		var xPos = ((s*2)*j)+(w/2);
    		noStroke();
    		fill(g,b,r);
    		rectMode(CENTER);
			rect(xPos,yPos,w,w);
	//creates primary squares
		}

    }
    
    fill(g,b,r);
    strokeWeight(20);
    line(0,0,0,640);

    for (var l=0; l<10 ; l++) {
    	var Ypos = ((s*2)*l)-(.5*s);

    	for (var k=0;k<13;k++) {
    		var Xpos = ((s*2)*k)-(.5*s);
    		noStroke();
    		fill(b,r,g);
    		rectMode(CENTER);
    		rect(Xpos, Ypos,v,v);
    //creates secondary squares	
    	}
    }
    


	stroke(g,b,r);
   	strokeWeight(w/2);
    line(x,y,x,height);
    line(x+(w*2),y,x+(w*2),height);
    line(x+(w*4),y,x+(w*4),height);
    line(x+(w*6),y,x+(w*6),height);
    line(x+(w*8),y,x+(w*8),height);
    line(x+(w*10),y,x+(w*10),height);
    line(x+(w*12),y,x+(w*12),height);
    line(x+(w*14),y,x+(w*14),height);
    line(x+(w*16),y,x+(w*16),height);
    line(x+(w*18),y,x+(w*18),height);
    line(x+(w*20),y,x+(w*20),height);
    line(x+(w*22),y,x+(w*22),height);
    line(x+(w*24),y,x+(w*24),height);
    line(x+(w*26),y,x+(w*26),height);
    line(x+(w*28),y,x+(w*28),height);
    line(x+(w*30),y,x+(w*30),height);

    line(x-(w*2),y,x-(w*2),height);
    line(x-(w*4),y,x-(w*4),height);
    line(x-(w*6),y,x-(w*6),height);
    line(x-(w*8),y,x-(w*8),height);
    line(x-(w*10),y,x-(w*10),height);
    line(x-(w*12),y,x-(w*12),height);
    line(x-(w*14),y,x-(w*14),height);
    line(x-(w*16),y,x-(w*16),height);
    line(x-(w*18),y,x-(w*18),height);
    line(x-(w*20),y,x-(w*20),height);
    line(x-(w*22),y,x-(w*22),height);
    line(x-(w*24),y,x-(w*24),height);
    line(x-(w*26),y,x-(w*26),height);
    line(x-(w*28),y,x-(w*28),height);
    line(x-(w*30),y,x-(w*30),height);
    speedL = mouseX/50;
    x += dirL*speedL;
    //makes lines move


    if (x>width) {
    	x=0;
    //makes lines repeat
	}
	
}

function mouseDragged() {
	v = (mouseX+mouseY)/s;
	w = s-v;
	//changes square sizes when mouse dragged
}
	
	

I figured out a way to draw multiple objects in different location with one function called for loop. I incorporated it to draw squares that change according to the location of the mouse when clicked.