Sean Meng – Dynamic Drawing

In this drawing, there are four aspects that change when the mouse moves: color, size, angle and position of the geometry. The rectangles represent the outer-space and the “UFO” in the middle rotates by itself and changes its orbit as the mouse moves.

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project-03

var interv = 50
var angle = 0
var degree = 0

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


function draw() {
    
    background(0)
    noStroke()
    
    
    //horizontal set of rectangles
    


    fill(mouseX/2, mouseY/3, mouseY)
    
    rect(640-mouseX, mouseY+interv, 640-mouseX, mouseY*0.05)
    
    rect(640-mouseX, mouseY+interv*2, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*3, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*4, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*5, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*6, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*7, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*8, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*9, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*10, 640-mouseX, mouseY*0.05)

    //vertical set of rectangles

    fill(mouseX, mouseY/2, mouseX)

    rect(640-mouseX-interv*1, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*2, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*3, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*4, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*5, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*6, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*7, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*8, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*9, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*10, 640-mouseY, mouseX*0.05, 640-mouseY)

    //the "UFO" in the middle
    push()
    fill(640-mouseX, 640-mouseY, 200)
    translate(320, 320);
    rotate(radians(degree));
    rectMode(CENTER);
    ellipse(mouseX - 320, mouseY - 320, 50, 50);
    ellipse(mouseX - 340, mouseY - 340, 20, 20);
    ellipse(mouseX - 360, mouseY - 360, 20, 20);
    ellipse(mouseX - 380, mouseY - 380, 20, 20);
    ellipse(mouseX - 300, mouseY - 300, 20, 20);
    ellipse(mouseX - 280, mouseY - 280, 20, 20);
    ellipse(mouseX - 260, mouseY - 260, 20, 20);

    degree = degree + 6
    pop();
    
}