Project 3

sketch

var radius=40;
var shape="cir";
var startX = 120;
var startY = 40;
var coorX = 0;
var coorY = 0;
var radChange = 0;
var shade = 255;

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

function draw() {
	background(0);
	//rectangle mode
	if (shape == "rect"){
		//make a grid
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
   				coorX=startX+radius*col
           		coorY=startY+radius*row
           		//the mouse inside control the size and the color of the rectangle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
   				rect(coorX,coorY,radChange,radChange);
           	}
        }
    //circle mode
    }else{
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
           		coorX=startX+radius/2+radius*col
           		coorY=startY+radius/2+radius*row
           		//the mouse inside control the size and color of the circle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
 				ellipse(coorX, coorY,radChange);
 			}
 		}
 	}
}
    

function mousePressed() {
	//mouse press control the shape of the objects
    if (shape != "rect"){
        shape = "rect";
    } else{
        shape = "cir";
    }
}

I was inspired by the grasshopper plug-in in rhino that we are learning right now in architecture generative modeling class. Therefore, I made this interactive drawings.