Project-03 Dynamic Drawing

sketch-dynamic – square

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var r = 0;
var g = 0;
var b = 0;
var angle = 0 ;
var w = 0;
var dir = 1;
var clickNumber = 0;

 
function setup() {
    createCanvas(600,450);
    frameRate(15);
    background(100);
    
}
 
function draw() {
    
    fill(r,g,b);
    stroke(0);
    push();

    // make the rectangle rotate around mouse
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rect(mouseX/3, mouseY/3, min(mouseX/2,mouseY/2), min(mouseX/2,mouseY/2));

    //change the color and size of the second rectangle, and make it rotate anticlockwise
    fill(r,g+30,b+w);
    rect(mouseX,mouseY,w,w);
    rotate(radians(-angle));

    pop();
    angle = angle + 10;

if ( clickNumber == 15){
    noloop();
}



   
}


function mousePressed() {

     clickNumber = clickNumber + 1;

    // change red everytime mouse pressed and make it repeatable

    if (r >= 255){
        r = 0;
    } else {
        r = r + 50;
    }
    
   
   // controle the size of the second rectangle and make it change between 0- height/2
   
    if (w >= height/2){
        dir = -1 ;
    } 

    if ( w < 0){ 
        dir = 1 ;
    }

    w = w + dir*20;
    }

In this painting, you can control the circulation center by the position of your mouse and the size of the second square by your click number. You can click 15 times then the code will stop running and you will have your own painting.Enjoy.