John Legelis – Project-03: Dynamic Drawing

``````// 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) {

// 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.