Project-03-Dynamic Drawing

 


function setup() {
    createCanvas(640, 480);
    rectMode(CENTER)

}

function draw() {
    // background color change
    R = (mouseY/ width) * 200;
    G = (mouseX/ height) * 200;
    var clr = color(R, G, 150);
    background(clr);

    //line and its increase in size and color
    stroke(R,G, 200 );
    strokeWeight(20);
    line(mouseX, mouseY, mouseX+ 20, mouseX+ 20);
    //ellipse
    strokeWeight(0);
    ellipse(mouseY-10, mouseX-10,50,50);
    //rotating rectangle
    push()
    translate(mouseX+5, mouseY+5);
    rectMode(CENTER);
    rotate(radians(frameCount*1.2));
    rect(mouseX,mouseY, 40, 40, 10);
    pop()
    //change color and transparency of circles
    if (mouseX<160, mouseY>240)
    fill(255,0,0, 127);
    if (mouseX<320, mouseY<240)
    fill(255, 0,0,191);


}

In this drawing, the color of the background and the line change inversely and the circles change transparency. I like how simplistic and clean it looks.

Leave a Reply