Yoshi Torralva – Project 03 – Dynamic – Drawing

sketch

// Yoshi Torralva
// Section E
// yrt@andrew.cmu.edu
// Project 03

var x = 40; //  x height of plaid
var y = 40; //  y height of plaid
var dx = 0; //diagonal var / width
var dy = 40; //diagonal var / height 

function setup() {
    createCanvas(480, 640);
}
function draw() {
    background(mouseX, mouseY, 0); // changes color
//thread to the left and right 
//conditional reactive to the mouse 
if(mouseX > 0) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseX < 200) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseY > 0) {
    y = mouseY;
}
//conditional reactive to the mouse 
if(mouseY < 200) {
    y = mouseY;
}
var bxscale = constrain(mouseX, 40, 100); // scale of ellipse
var byscale = constrain(mouseY, 40, 100); // scale of ellipse 
// plaid banners — layered 
    push();
    noStroke();
    fill(187, 0, 0);
    rect(0, 40, x, 40);
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(0, 136, 85);
    rect(40, 0, 40, y); 
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 100, x, 40);
    fill(187, 0, 0);
    rect(0, 160, x, 40);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 220, x, 40);
    fill(34, 68, 51);
    rect(220, 0, 40, y);
// thin gold layering 
    fill(170, 102, 0);
    rect(0, 40, x, 10);
    fill(170, 102, 0);
    rect(40, 0, 10, y); 
    pop();
// push and pop used for strokeWeight only
    push();
    stroke(color(255));
    strokeWeight(10);
    line(mouseX, mouseY, 0, 0); // top left line 
    line(mouseX, mouseY, 480, 640); // bottom right line 
    fill("white");
    ellipseMode(CENTER);
    noStroke();
    ellipse(mouseX, mouseY, bxscale, byscale); // ellipse that moves to mouseX/Y
    pop();
}

With this project, I wanted to use the interaction of the mouse to create a plaid pattern. The rectangles react to the mouse and the white lines serve as a visual guide to imply that the mouse is weaving the plaid together. The background alternates color and the cursor shifts scale diagonally.