Project 04: String Art

sketch

//Tim Nelson-Pyne
//tnelsonp
//Section C

//shape 1
var ax1;
var ay1;
var ax2;
var ay2;

//shape 2
var by1;
var bx1;
var by2;
var bx2;

//shape 3
var cy1;
var cx1;
var cy2;
var cx2;

var numLines = 2;
var angle = 0;

//controls green value
var g = 0;
var gMod = 0;

//controls blue value
var b = 0;
var bMod = 0;

function setup() {
    createCanvas(400, 300);
    background(0);
    
    //shape 1
    ax1 = (100)/numLines;
    ay1 = (0)/numLines;
    ax2 = (100)/numLines;
    ay2 = (0)/numLines;

    //shape 2
    bx1 = (0)/numLines;
    by1 = (0)/numLines;
    bx2 = (0)/numLines;
    by2 = (0)/numLines;

    //shape 3
    cx1 = (100)/numLines;
    cy1 = (0)/numLines;
    cx2 = (0)/numLines;
    cy2 = (0)/numLines;
    
}

function draw() {

    //if you hold down the mouse it makes the canvas rotate around your mouse position
    if (mouseIsPressed == true){
        translate(mouseX, mouseY);
        rotate(radians(angle));
        angle += 1;
    }
    

    //brings green levels up and down based on sin() graph
    //maped between zero and 255
    gMod += 0.01;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);

    //brings blue levels up and down based on cos() graph
    //maped between zero and 255
    bMod += 0.01;
    b = cos(bMod);
    b = map(b, -1, 1, 0, 255);


    //set stroke color and weight
    stroke(255, g, b);
    strokeWeight(.25);

    var x1 = min(mouseX, width);
    var y1 = min(mouseY, 246);
    var x2 = 0;
    var y2 = 0;

    //shape 1
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    }


    //green to zero for shape 2
    g = 0;
    stroke(255, g, b);

    var x1 = width;
    var y1 = map(mouseY, 0, height, 250, height);
    var x2 = 0;
    var y2 = map(mouseY, 0, height, 250, height);

    //shape 2
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    }

    
    //set blue to zero for shape 3 and return green to sin() based value
    b = 0;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);
    stroke(255, g, b);

    var x1 = min(mouseX, width);
    var y1 = constrain(mouseY, 150, 246);
    var x2 = width;
    var y2 = 150;

    //shape 3
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    }
    


}

I chose to make some interactive string art. Moving the cursor around changes the drawing and clicking and dragging changes it even more. I also decided to incorporate shifting colors to make the drawing change a bit more over time.