lee chu – project 04 – string art

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 04

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var xSpacing;
var ySpacing;
var offset = 5;

function setup() {
    createCanvas(400, 300);
    fill(100);
    strokeWeight(0.25);
    xSpacing = width / 100;
    ySpacing = height / 100;
}

function draw() {
    background(50);
    triangle(0, 0, width, 0, width, height);

    // mouse control
    if (height / 2 < mouseY & mouseY < height) {
        offset = (mouseY - height / 2) / (height / 2) * 30;
    }
    if (height / 2 > mouseY & mouseY > 0) {
        offset = (mouseY - height / 2) / (height / 2) * 30;
    }

    // see functions below
    whiteLines();
    orangeLines();
    cyanLines();
}


function whiteLines() {
    stroke('lightGray');
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // left
    for (var y1 = 0; y1 < height + offset * ySpacing; y1 += ySpacing) {
        line(x1, y1, width + x2, height + y2);
        x2 -= xSpacing;
        y2 -= ySpacing;
    }
    x2 = xSpacing * -offset;
    y2 = ySpacing * -offset;

    // right
    for (var y1 = height; y1 > -offset * ySpacing; y1 -= ySpacing) {
        line(width, y1, x2, y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = 0;
    y2 = 0;
}


function orangeLines() {
    stroke('orange');

    // left
    for (var y1 = 0; y1 < height; y1 += ySpacing) {
        line(x1, y1, width - x2, height - y1);
        x2 += xSpacing;
    }
    x2 = 0;

    // right
    for (var y1 = height; y1 > 0; y1 -= ySpacing) {
        line(width, y1, x2, height - y1);
        x2 += xSpacing;
    }
    x2 = 0;
}

function cyanLines() {
    stroke('cyan');
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // left
    for (var y1 = 0; y1 < height - offset * ySpacing; y1 += ySpacing) {
        line(x1, y1, width - x2, height - y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // right
    for (var y1 = height; y1 > offset * ySpacing; y1 -= ySpacing) {
        line(width, y1, x2, y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = 0;
    y2 = 0;
}

I wanted to create a sense of depth by offsetting line functions and including contrasting yet complementary colors. An interesting aspect is that the colors seem to shift as the lines change in overlap.