Xiaoying Meng-Project-03-Dynamic-Drawing

sketch

var redlineend= -20;
var redlinestart= 0;
var R=[237,247,193,176];
var G=[194,240,204,196];
var B=[200,220,221,177];
var index = 0;
var angle = 0;
var R1=[198,237,159,134];
var G1 =[143,220,173,168];
var B1 =[151,173,196,136];
var a =4;



function setup(){
    createCanvas(640,480);
    background(R[index],G[index],B[index]);
}


function mousePressed(){
    //if click mouse inside canvas
    if (mouseY < height & mouseY >0 && mouseX < width && mouseX > 0 && redlinestart >= 0){
        //in first quater
        if(mouseX < width/2 && mouseY < height/2) {
            //line gap 35
            redlineend = redlineend +35;
            redlinestart = redlinestart + 35;
        } 
        //in second quater
        if (mouseX > width/2 & mouseY < height/2) { 
            //line gap 20
            redlinestart = redlinestart + 20;
            redlineend = redlineend +20;
        }
        //in third quater
        if(mouseX < width/2 & mouseY > height/2) { 
           //line and background color change
            index = index - 1; 
            if (index <= 0 ){
               index = 0;
            }
            // heavier strokeweight 
            a = a+1;
            if (a >= 6 ){
               a = 6;
            }
        }
        //in fourth quater
        if(mouseX > width/2 & mouseY > height/2) { 
            //line and background color change
            index = index + 1; 
            if (index ===4){
               index = 0;
            }
            // lighter strokeweight
            a = a-1
            if ( a <= 1 ){
               a = 1;
            } 
        }
    }
}

function draw(){
    stroke(R1[index],G1[index],B1[index]);
    strokeWeight(a);

    redlineend = redlineend+1;
    redlinestart = redlinestart+1;
   //restart line 
   if (redlineend >= 641){
        redlineend = -20;
        background(R[index],G[index],B[index]);   
        
    }
    if (redlinestart >= 661){
        redlinestart = 0;
        background(R[index],G[index],B[index]);
    }
    //rotating canvas
       push();
       translate(width/2,height/2);
       rotate(radians(angle));
       line(redlineend,height/5,redlinestart,height/5);
       pop();
       angle = angle+15;  
       
}

I created a line drawing controlled by the clicking of the mouse. The mouse can control the following:

1. line gap 35/20 (1st quarter/2nd quarter)
2. color of line and background (3rd quarter/4th quarter)
3. line weight (3rd quarter/4th quarter)