Crystal-Xue-Project-04

sketch-298.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-04

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(0);
    stroke(255);

    //set constrain to the mouse location
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    //set up color gradient palette
    let from = color(102, 153, 161);
    let to = color(180, 129, 187);
    let interA = lerpColor(from, to, 0.15);
    let interB = lerpColor(from, to, 0.3);
    let interC = lerpColor(from, to, 0.45);
    let interD = lerpColor(from, to, 0.6);
    let interE = lerpColor(from, to, 0.75);

    //draw string geometries
    for (var i = 0; i <= width; i = i + 5 ) {

        //background dynamic grid change along mouse indicator
        stroke(from);
        strokeWeight(0.7);
        line(i, 3 / 4 * i, i, y);
        stroke(interA);
        line(i, 3 / 4 * i, x, 3 / 4 * i);

        //first pair of curves controlled by mouse location
        stroke(interB);
        line(i, 3 / 4 * i, width - i, y);
        stroke(interC);
        line(i, 3 / 4 * i, x, height - 3 / 4 * i);

        //second pair of curves opposite of the first pair
        stroke(interD);
        line(i, height - 3 / 4 * i, width - i, y);
        stroke(interE);
        line(i, height - 3 / 4 * i, x, 3 / 4 * i);

        //drawing the mouse indicator
        stroke(to);
        strokeWeight(2);
        line(x, y, width - i, y);
        stroke(to);
        strokeWeight(2);
        line(x, y, x, height - 3 / 4 * i);

     }
}

For this project, I was trying to mimic the abstract motion of the weaving process. The mouse indicator is the shuttle of a loom which shows the x and y coordinate positions. The background grid is the unwoven warp yarn showing the parallel lines. And the curves are the woven pieces. I also experimented with the gradient colors in p5js.