John Legelis – Project-03: Dynamic Drawing

houndstooth

// John Legelis
// Section D
// jlegelis@andrew.cmu.edu
// Project-03

// Canvas dimensions
var w
w = 480
var h
h = 640

// Houndstooth color variables
var dark
dark = 0
var light
light = 255

// Houndstooth square dimensions
var hsW
hsW = 70
var hsH
hsH = 70

// Create Canvas
function setup() {
    createCanvas(w, h);
    background(255);
}

function draw() {
    // Vary color based on mouse Y coordinate
    // Middle of canvas Y = all grey
    dark  = min(mouseY/h * 255, 255)

    // Rotate pattern based on mouse X coordinate
    rotate(mouseX/w * PI/2)

    // Translate pattern based on mouse Y coordinate
    translate(0, (mouseY/w * 100))

    // Draw rows and colomns of houndstooth squares
    //draw houndstooth pattern much larger than canvas so rotation doesnt make pattern leave
    for(hsY = hsH/2 - 2000; hsY < 2000; hsY = (hsY + hsH)) {
        for(hsX = hsW/2 - 2000; hsX < 2000; hsX = (hsX + hsW)) {
    
            hTooth(hsX, hsY)
        }
    }
    console.log(mouseX)
}

// When mouse is pressed down the color of the top left quadrant changes from standard to a greyscale value based on mouse X
function colordark() {
    if (mouseIsPressed){
        return( (min(255,(max(100, mouseY)))) )
    }
    else {
        return(dark)
    }
}


// function that takes Center X and Center Y and draws one houndstooth square
function hTooth(cX, cY) {

//TOP LEFT QUADRANT--------------------------------------------------------------
    // Larger section of pattern
    fill(colordark());
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 6
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 7
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 8
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 9
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 3
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 4
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 6
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 7
    vertex((cX - (36/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM LEFT QUADRANT ------------------------------------------------------------

    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(dark)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);

// TOP RIGHT QUADRANT
    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
 
    fill(dark)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM RIGHT QUADRANT-------------------------------------------------------

    // Larger section of pattern
    fill(dark);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);
}


    

This project was open ended in a creative sense and after looking at a few examples, I was drawn to the idea of varying a pattern. One of my favorite patterns is houndstooth as it uses negative and positive space interchangeably. I broke the pattern into the smallest replicable modules and then iterated it onto the canvas in rows and columns. I then added user inputs to vary the gradient, rotation, translation by mouse position, and click to toggle the color of a segment of the pattern.