Project 04 String Art

String Art ProjectDownload

//Alana Wu
//ID: alanawu
//Project 04: String Art



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

function draw ()
{
    background (0);
    if (mouseIsPressed)
    {
        background(255);
    }
    var x = 100;
    var y = 100;
    var dist = 50;
    var num = 5;

    push();
    translate (100, 75);
//white lines
    for (y = 10; y <= 300; y += 5)
    {
        strokeWeight (4);
        rotate (radians (-num + 180));
        stroke (255);
        if (mouseIsPressed)
        {
            stroke(0);
        }
        line (x + dist, y + dist, min (mouseX, 300), y);
        strokeWeight (.5);
        dist -= 1;
    }

//purple lines
    for (y = 100; y <= 200; y += .5)
    {
        rotate (radians (num));
        stroke (76, 0, 153);
        if (mouseIsPressed)
        {
            stroke (179, 255, 102);
        }
        line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
        dist -= 5;
    }
//light blue lines
    for (y = 200; y <= 400; y += 1)
    {
        rotate (radians (num));
        stroke (0, 255, 255);
        if (mouseIsPressed)
        {
            stroke (255, 0, 0);
        }
        line (min (mouseX, 400), y, x + dist, y + dist);
    }
    pop();

//white string in larger black circle
    push ();
    translate (300, 200);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//big circle
    ellipse (0, 0, 250, 250);
    for (var k = 0; k < 100; k+= 1)
    {
        rotate (radians (num));
        stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
        if (mouseIsPressed)
        {
            stroke (0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (1));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            push ();
            translate (-100, -50);
            for (var a = 0; a < 40; a ++)
            {
                stroke (100, 255, 100);
                rotate (radians (4));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            pop();
            noFill();
            ellipse (0, 0, 220, 220);
            ellipse (0, 0, 180, 180);
            ellipse (0, 0, 140, 140);
        }
        line (25, 0, 25 + mouseY/5, 45);
    }
    pop ();

//string in smaller black circle
    push();
    translate (180, 275);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//smaller circle
    ellipse (0, 0, 100, 100);
    for (var i = 0; i < 100; i ++)
    {
        rotate (radians (num));
        stroke (204, 204, 255);
        if (mouseIsPressed)
        {
            stroke (51, 51, 0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (num));
                line (15, 25, 15 + min (mouseX/10, 20), 35);
            }
        }
        line (15, 5, mouseY/8, 30);
        line (10, 5, min (mouseY, 50), min (mouseY, 50));
    }
    pop ();

    if (mouseIsPressed)
    {
        push();
        translate (mouseX, mouseY);
//circle of red string circles
        for (var c = 0; c <= 8; c ++)
        {
            translate (20, 20);
            for (var b = 0; b < 80; b ++)
            {
                stroke (255, 0, 0);
                rotate (radians (num));
                line (8, 8, 20, 20);
                noStroke();
            }
        }
        pop();
    }
}

For this project, it was hard to figure out what I wanted to do, since I didn’t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.