ShanWang-Project-03-Dynamic-Drawing

Slide the mouse left to right to change the color and the size of the circles.

Slide the mouse up and down to change the speed of the rotation.

In this project I created a series of circles that rotates around the previous one.

The color, size and therefore position of the circles are controlled by the change in x coordinate of the mouse.
The speed of rotation is controlled by the the change in y coordinate of the mouse.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-03-Project



var radius1 = 200
var angle1 = 0
var angle2 = 0
var angle3 = 0
var angle4 = 0
var angle5 = 0
var angle6 = 0
var angle7 = 0
var angle8 = 0
var angle9 = 0
var angle10 = 0
var speed = 128
var fillColor = 0


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

function mousePressed(){
    if (width/2-radius1 <= mouseX <= width/2+radius1){
        bgColor = 255-bgColor
    }
}
 
function draw() {
    background(255);
    noStroke();

    //control the speed of spining with the change in y coordinate of the mouse
    speed = map(mouseY,0,height,64,192);

    //control the color of circles with the change in x coordinate of the mouse
    bgColor = map(mouseX,0,width,0,255);

    //control the size of all the circles with the change in x coordinate of the mouse
    radius1 = map(mouseX,0,width,100,200);

    //position of first big circle
    var cenX1 = width/2;
    var cenY1 = height/2;
    fill(bgColor);
    ellipse(cenX1, cenY1, radius1*2, radius1*2);

    //draw second circle
    translate(cenX1,cenY1);
    fill(255-bgColor);
    angle1 += PI/speed;
    var radius2 = 2/3*radius1;
    var dis2 = radius1 - radius2;
    var cenX2 = dis2*cos(angle1);
    var cenY2 = dis2*sin(angle1);
    ellipse(cenX2, cenY2,radius2*2, radius2*2);

    //draw third circle
    translate(cenX2,cenY2);
    fill(bgColor);
    angle2 += PI/(0.5*speed);
    var radius3 = 2/3*radius2;
    var dis3 = radius2 - radius3;
    var cenX3 = dis3*cos(angle2);
    var cenY3 = dis3*sin(angle2);
    ellipse(cenX3, cenY3, radius3*2,radius3*2);

    //draw 4th circle
    translate(cenX3,cenY3);
    fill(255-bgColor);
    angle3 += PI/((0.5*speed));
    var radius4 = 2/3*radius3;
    var dis4 = radius3 - radius4;
    var cenX4 = dis4*cos(angle3);
    var cenY4 = dis4*sin(angle3);
    ellipse(cenX4, cenY4, radius4*2,radius4*2);

    //draw 5th circle
    translate(cenX4,cenY4);
    fill(bgColor);
    angle4 += PI/(0.4375*speed);
    var radius5 = 2/3*radius4;
    var dis5 = radius4 - radius5;
    var cenX5 = dis5*cos(angle4);
    var cenY5 = dis5*sin(angle4);
    ellipse(cenX5, cenY5, radius5*2,radius5*2);


    //draw 6th circle
    translate(cenX5,cenY5);
    fill(255-bgColor);
    angle5 += PI/(0.375*speed);
    var radius6 = 2/3*radius5;
    var dis6 = radius5 - radius6;
    var cenX6 = dis6*cos(angle5);
    var cenY6 = dis6*sin(angle5);
    ellipse(cenX6, cenY6, radius6*2,radius6*2);

    //draw 7th circle
    translate(cenX6,cenY6);
    fill(bgColor);
    angle6 += PI/(0.25*speed);
    var radius7 = 2/3*radius6;
    var dis7 = radius6 - radius7;
    var cenX7 = dis7*cos(angle6);
    var cenY7 = dis7*sin(angle6);
    ellipse(cenX7, cenY7, radius7*2,radius7*2);

    //draw 8th circle
    translate(cenX7,cenY7);
    fill(255-bgColor);
    angle7 += PI/(0.125*speed);
    var radius8 = 2/3*radius7;
    var dis8 = radius7 - radius8;
    var cenX8 = dis8*cos(angle7);
    var cenY8 = dis8*sin(angle7);
    ellipse(cenX8, cenY8, radius8*2,radius8*2);

    //draw 9th circle
    translate(cenX8,cenY8);
    fill(bgColor);
    angle8 += PI/(0.125*speed);
    var radius9 = 1/2*radius8;
    var dis9 = radius8 - radius9;
    var cenX9 = dis9*cos(angle8);
    var cenY9 = dis9*sin(angle8);
    ellipse(cenX9, cenY9, radius9*2,radius9*2);

    //draw 10th circle
    translate(cenX9,cenY9);
    fill(255-bgColor);
    angle9 += PI/(0.125*speed);
    var radius10 = 1/2*radius9;
    var dis10 = radius9 - radius10;
    var cenX10 = dis10*cos(angle9);
    var cenY10 = dis10*sin(angle9);
    ellipse(cenX10, cenY10, radius10*2,radius10*2);

    //draw 11th circle
    translate(cenX10,cenY10);
    fill(bgColor);
    angle10 += PI/(0.25*speed);
    var radius11 = 1/2*radius10;
    var dis11 = radius10 - radius11;
    var cenX11 = dis11*cos(angle10);
    var cenY11 = dis11*sin(angle10);
    ellipse(cenX11, cenY11, radius11*2,radius11*2);

}