Category: SectionE

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project-04 

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

function draw(){
    background("black");

    //blue lines on bottom left
    for(var i = 0; i < 300; i += 1.5) {
        stroke(161, 236, 255);
        strokeWeight(0.3);
        line(0, i * 5, i * 5, height);
    }

    //blue lines on top right
    for(var i = 0; i < 400; i += 1.5) {
        stroke(161, 236, 255);
        strokeWeight(0.3);
        line(width, i * 5, i * 5, 0);
    }

    //pink lines which turns in the middle
    for(var i = 0; i < 400; i += 1.5) {
        stroke(255, 201, 244);
        strokeWeight(0.3);
        line(height, -i * 4, i * 4, width - 100);
    }

    //yellow lines in the very front
    for(var i = 0; i < 600; i += 5) {
        stroke(207, 207, 145);
        strokeWeight(0.3);
        line(i * 4, height, -i * 4, 0);
    }

}

During the project, I wanted to experiment with the contrast between the dark color of the background and the lighter colors of the lines. I wanted to also look at the how the lines interact with each other in both form and color. Looking at the final product, it reminds me a little bit of laser beams in the dark.

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 4 String Art
 */

function setup() {
    createCanvas(400, 300);
    background("black");
}

function draw() {
    spacing1 = 40;
    spacing2 = 10;
    spacing3 = 5;
    red = mouseX;
    green = mouseX;
    blue = mouseY

    // LOOP FOR OUTERMOST STRINGS
    // the strings span the boundary of the canvas
    for(var a = 0; a <= 400; a += spacing1){
        // left bottom strings
        stroke(red, 0, 162);
        line(0, a, a, 300);

        // right top strings
        stroke(153, green, 0);
        line(400, a, a, 0);
    }

    // LOOP FOR GREEN, BLUE STRINGS
    // the strings are contained by the outermost strings 
    for(var b = 0; b <= 200; b += spacing2){
        stroke(0, 187, mouseY);
        // left top strings
        line(100 + b, 50, 100, 250 - b);
        // right top strings
        line(100 + b, 250, 300, 250 - b);
    }

    // LOOP FOR INNERMOST SQUARE
    // the strings are contained within a box 
    // the box specs: rect(150, 100, 100, 100)
    for(var a = 0; a <= 100; a += spacing3){
        // bottom left
        stroke(red, green, 162);
        line(150, 100 + a, 150 + a, 200);

        // top left
        stroke(150, green, blue);
        line(150 + a, 100, 150, 200 - a);

        // top right
        stroke(red, 150, blue);
        line(150 + a, 100, 250, 100 + a);

        // bottom right
        stroke(red, 100, blue);
        line(250, 100 + a, 250 - a, 200);

    }


}

For this project, I wanted to make a composition that had a fixed form but some element that was controlled by the user. I stuck to a strict geometry that relied on square and rectangle boundaries but allowed the colors of the strings to change based on the users’ mouse position.

sketch

Using string art, I wanted to create a shell-like formation. I used multiple lines in the for() statement to create a swirling visual. Mouse tracking was implemented to add depth as it served as a frame into the shell.

// Yoshi Torralva
// Section E
// yrt@andrew.cmu.edu
// Project 04
function setup() {
    createCanvas(300, 400);
}

function draw() {
    background(0, 191, 255);
    /* for loop making 40 lines
    which allows for 10px spacing */
    for(var i = 0; i < 40; i++) {
    /* mouseX and Mouse Y move the string art */
    strokeWeight(1);
    stroke(255);
    //moving string art
    line(mouseX, i * 10, 0 + i * 10, mouseY);
    // flipped mouseX and mouse Y to create opposite scaling
    line(mouseY, i * 10, 0 + i * 10, mouseX);
    strokeWeight(0.2);
    //string art starting at top x height 
    // 10 px width between each line
    // increments of 50
    line(i * 10, 0, 300, 0 + i * 10);
    line(i * 10, 0, 250, 0 + i * 10);
    line(i * 10, 0, 200, 0 + i * 10);
    line(i * 10, 0, 150, 0 + i * 10);
    line(i * 10, 0, 100, 0 + i * 10);
    line(i * 10, 0, 50, 0 + i * 10);
    //string art at bottom x height
    // 10 px width between each line
    // increments of 50
    line(250, i * 10, 0 + i * 10, 400);
    line(200, i * 10, 0 + i * 10, 400);
    line(150, i * 10, 0 + i * 10, 400);
    line(100, i * 10, 0 + i * 10, 400);
    line(50, i * 10, 0 + i * 10, 400);
    }
}
 

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104          Section E        Project 4

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

function draw(){
    background(0);

    //random number variable to assign value for colors and coordinate location
    var x = 100;
    var y = 170;
    var z = 50;

    //variable newX and newY to constrain mouseX and mouseY movement to the canvas
    var newX;
    newX = constrain(mouseX, 0, width);
    var newY;
    newY = constrain(mouseY, 0, height);

    //lines for the string art -- are color & mouse location-sensitive
    for (var i = 0; i < width; i+= 8){

        stroke(mouseY, mouseX, x); //central 2 curves that go from top to bottom
        strokeWeight(0.5);
        line(i, newX, newX, i);
        line(i, newY, y, i);

        stroke(mouseX, y, mouseY); //central 3 curves that go from left to right
        line(newX, i, i, z);
        line(i, newY, newX, i);
        line(i, y, newY, i);

        stroke(z, mouseY, mouseX); //bottom left corner lines that overlap
        line(y * 5, i, i, newX);
        line(i, newY, x * 5, i);

        stroke(mouseX, x, y); //top left corner lines that overlap
        line(-x, i, i, newY);
        line(newX, i, i, newX);

        stroke(z, y, mouseY); //very central subtle curve
        line(newY, i, i, y * 2);

        stroke(mouseX, mouseX, y); //top right coner line
        line(i, newX, newY, i);

        stroke(mouseX, mouseY, mouseY); //very left stroke that goes across the width of the canvas
        line(x, i, i, newY);
    }
}

Initially, I was a bit confused with how I should be coding this project. But I became confident after visiting Office Hours and talking to my friends. I added some fun to my code by manipulating colors and location of the curves based on mouseX and mouseY.