Category: Project-03-Dynamic-Drawing

// Evan Stuhlfire
// estuhlfi, section B
// Project-03: Dynamic Drawing

var angle = 0; // Angle to increment for rotation
var angleInc = 2; // Controls speed of rotation
var rotateDir = 1; // Direction of rotation
var centerX; // Center of original canvas
var centerY;
var shapeSpace = 30; // Space between shapes
var rectSize = 20;
var startSize = 10;
var circleStart = 10;
var littleCircle = 10;
var colorScheme = 1; // standard = 1, switched = -1

function setup() {
    createCanvas(600, 450);

    centerX = width/2;
    centerY = height/2;
}

function draw() {
    background(50);

    // If the mouse is left of center set rotation counterclockwise
    if(mouseX < centerX){
        rotateDir = -1;
    } else {
        rotateDir = 1; // Set rotation clockwise
    }

    // Translate the canvas origin to the center
    translate(centerX, centerY);

    // Save the current settings
    push();

    // Rotate the canvas for the shape redraw
    rotate(radians(angle * rotateDir));

    // Draw background circle
    fill(120, 88, 111);
    stroke(120, 88, 111);
    ellipse(0, 0, height, height);

    // Draw center rectangle
    fill(230, 199, 156);
    stroke(230, 199, 156);
    rectMode(CENTER); // Center rect around (0,0)
    rect(0,0, rectSize, rectSize);
    rect(0, 0, rectSize * mouseX/15, rectSize * mouseX/15);

    // Draw center crossing rectangles
    if(colorScheme == 1){
        fill(123, 158, 168); // grey blue
        stroke(123, 158, 168);
    } else {
        fill(111, 208, 140); // green
        stroke(111, 208, 140);
    }
    
    rect(0, 0, 25, width * 1.5);
    rect(0,0, width * 1.5, 25);

    // Draw little circle
    fill(120, 88, 111);
    stroke(120, 88, 111);
    ellipse(0, 0, littleCircle * mouseX/15, littleCircle * mouseX/15);

    // Draw four spokes of ellipses and diamonds 
    // at 90 degree intervals
    drawEllipse();
    drawRects();
    
    rotate(radians(90));
    drawEllipse();
    drawRects();

    rotate(radians(90));
    drawEllipse();
    drawRects();

    rotate(radians(90));
    drawEllipse();
    drawRects();

    // Return to saved settings
    pop();

    angle = angle + mouseY/100;
}

function drawEllipse(){
    // Set color of ellipses
    if(colorScheme == 1){
        fill(111, 208, 140); // green
        stroke(111, 208, 140);
    } else {
        fill(123, 158, 168); // grey blue
        stroke(123, 158, 168);
    }
    

    var circleSize = circleStart;
    var circleInc = 5;

    circleSize = circleSize * (width - mouseX)/150;
  
    // Draw a line of ellipses
    ellipse(shapeSpace, shapeSpace, circleSize, circleSize);
    // Draw first row dots
    var dotSize = 4;
    push(); // Save settings
    fill(205, 223, 160); // yellow
    stroke(0);
    rect(shapeSpace, shapeSpace, circleSize/dotSize, circleSize/dotSize);
    pop(); // restore settings
    
    circleSize += circleInc;
    ellipse(2 * shapeSpace, 2 * shapeSpace, circleSize, circleSize);
    // Draw second row dots
    push(); // Save settings
    fill(120, 88, 111); // purple
    rect(2 * shapeSpace, 2 * shapeSpace, circleSize/dotSize, circleSize/dotSize);
    pop(); // restore settings

    circleSize += circleInc;
    ellipse(3 * shapeSpace, 3 * shapeSpace, circleSize, circleSize);
    // Draw third row of dots
    push(); // Save settings
    fill(205, 223, 160); // yellow
    stroke(0);
    rect(3 * shapeSpace, 3 * shapeSpace, circleSize/dotSize, circleSize/dotSize);
    pop(); // Restore settings

    circleSize += circleInc;
    ellipse(4 * shapeSpace, 4 * shapeSpace, circleSize, circleSize);
    // Draw fourth row of dots
    push(); // Save settings
    fill(120, 88, 111); // purple
    rect(4 * shapeSpace, 4 * shapeSpace, circleSize/dotSize, circleSize/dotSize);
}

function drawRects(){
    // Draws a line of rectangles 

    // Set color of rectangles
    fill(205, 223, 160); // yellow
    stroke(120, 88, 111); // purple

    // Save current settings
    push();

    // Rotate canvase so rectangles craw as diamonds
    rotate(radians(45));

    rectMode(CENTER); // draw rects from center
    var sqSize = startSize * mouseX/100;
    var sqInc = 5;
    // Draw first rectangle
    rect(shapeSpace, shapeSpace, sqSize, sqSize);

    // Draw second rectangle
    sqSize += sqInc;
    rect(shapeSpace + 2 * sqSize, shapeSpace + 2 * sqSize, sqSize, sqSize);

    // Draw third rectangle
    sqSize += sqInc;
    rect(shapeSpace + 3 * sqSize, shapeSpace + 3 * sqSize, sqSize, sqSize);

    // Draw fourth rectangle
    sqSize += sqInc;
    rect(shapeSpace + 4 * sqSize, shapeSpace + 4 * sqSize, sqSize, sqSize);

    // Draw dots
    stroke(0);
    fill(111, 208, 140); // green
    var dotSize = 3;
    ellipse(shapeSpace + 4 * sqSize, shapeSpace + 4 * sqSize, sqSize/dotSize, 
        sqSize/dotSize);

    // third row dots
    fill(120, 88, 111); // purple
    sqSize -= sqInc; // Set sqSize to third square
    ellipse(shapeSpace + 3 * sqSize, shapeSpace + 3 * sqSize, sqSize/dotSize, 
        sqSize/dotSize);

    // second row dots
    fill(111, 208, 140); // green
    sqSize -= sqInc;
    ellipse(shapeSpace + 2 * sqSize, shapeSpace + 2 * sqSize, sqSize/dotSize, 
        sqSize/dotSize);

    // first row dot
    fill(120, 88, 111); // purple
    ellipse(shapeSpace, shapeSpace, sqSize/dotSize, 
        sqSize/dotSize);

    // Return to saved settings
    pop();
}

function mousePressed(){
    colorScheme = -colorScheme;
}