Project-03-Dynamic-Drawing: Section B

My process for this project was to alter basic shapes and colors to create a kaleidoscope. I used transformations so I could draw the same images many times in different locations. Moving the mouse left and right shrinks, enlarges, and repositions different elements. Crossing the horizontal midpoint reverses the rotation. Vertical motion with the mouse speeds and slows the rotation. Clicking changes colors.

From my sketchbook.
sketch
// 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;
}

Leave a Reply