GraceSimmons-Project-03-DynamicDrawing

sketch-137.js

var mainRec =0; //main rectangle color
var diam =100; //diameter of main green circle
var blkdiam =100; //diameter of main black circle
var diamSmall =80; //upper left & lower right circle diameters
var diamSmall2 =80; //upper right & lower left circle diameters
var leftCorner1 =10; //x point of white square
var leftCorner2 =10; //y point of white square
function setup() {
    createCanvas(640, 480);
}

function draw() {
	var newBackground=map(mouseY,0,height,0,255);
	background(newBackground); 

	var firstColor = map(mouseY, 0, height, 151, 255); //sets bounds for first red value
	var secondColor = map(mouseY, 0, height, 230,51); //sets bounds for green value
	var thirdColor = map(mouseY, 0, height, 0, 210); // sets bounds for blue value

	background(firstColor,secondColor,thirdColor);

	if ((mouseX > 170) & (mouseX < 470) && //allows for the change of middle rectangle color
		(mouseY > 50) && (mouseY < 430)) {
			mainRec = mainRec + 1;
		}

    fill(mainRec);
    noStroke();
    rect(170,50,300,380); //main long rectangle in center

    fill('Aqua');
    noStroke();
    ellipse(170,50,diamSmall,diamSmall); //upper left corner circle
    
    fill('Aqua');
    noStroke();
    ellipse(470,430,diamSmall,diamSmall); // lower right corner circle
    
    if (mouseY>height/2) { //this is for upper left & lower right circles
    	diamSmall -= (diamSmall-1) >= 10; //shrink when mouse < halfway down
    } else {
        diamSmall += (diamSmall+1) <= 80; //grow when mouse is > halfway down
    } 

    fill('Aqua');
    noStroke();
    ellipse(470,50,diamSmall2,diamSmall2); //upper right corner circle

    fill('Aqua');
    noStroke();
    ellipse(170,430,diamSmall2,diamSmall2); //lower left corner circle

    if (mouseY<height/2) {
        diamSmall2 -= (diamSmall2-1) >= 10; //shrink when y is < halfway down
    } else {
        diamSmall2 += (diamSmall2+1) <= 80; //grow when y is > halfway down
    }


    push(); //spinning pink ellipse
    translate(width/2, height/2);
    rotate(millis()/1000);
    translate(-width/2, -height/2);
    fill('pink');
    noStroke();
    ellipse(width/2,height/2,450,50);
    pop();

    push(); //spinning purple ellipse
    translate(width/2, height/2);
    rotate(-millis()/mouseX); //slightly different rate of speed & opposite directin
    translate(-width/2, -height/2);
    fill('purple');
    noStroke();
    ellipse(width/2,height/2,550,50);
    pop();

    push(); //spinning orange ellipse
    translate(width/2, height/2);
    rotate(-millis()/1000); //-direction 
    translate(-width/2,-height/2);
    fill('orange');
    noStroke();
    ellipse(width/2,height/2,450,50);
    pop();

    push(); //spinning dark pink ellipse
    translate(width/2, height/2);
    rotate(millis()/mouseX); //slower speed
    translate(-width/2,-height/2);
    fill('DeepPink');
    noStroke();
    ellipse(width/2,height/2,550,50);
    pop();

    fill('Aquamarine'); //middle circle
    noStroke();
    ellipse(width/2,height/2,diam,diam);

    if (mouseX > width/2) { // grows diameter if mouse is < half width
    	diam += (diam+3) <= 200;
    } else {
        diam -= (diam-3) >= 100; //shrinks diameter if mouse is > half width
    }

    fill('black');
    noStroke();
    ellipse(width/2,height/2,blkdiam,blkdiam);

    if (mouseX > width/2) {
        blkdiam -= (blkdiam-3) >=30; // shrinks diameter if mouse is < half width
    } else {
        blkdiam += (blkdiam+3) <=100; //grows diameter if mouse is > half width
    }

    fill('white'); //rect in upper right corner
    noStroke();
    rect(leftCorner1,leftCorner2,30,30);

    if (mouseX > width/2) { //mouse towards right, rect = lower right 
        leftCorner1 = 600;
    } else {
        leftCorner1 =10;
    }

    if (mouseX > width/2) { //mouse towards left, rect = upper left
        leftCorner2 = 440;
    } else {
        leftCorner2 =10;
    }


    





}

I wanted to make a piece that would overlap with lots of rotating parts. I wanted to use mostly circles and have them grow or shrink depending on mouse position. I tried to keep within a color scheme of oranges, greens, and pinks.