Category: Project-04-String-Art

Random Lines Spin Art

I spent a good amount of time trying to decide what to make. I ended up moving certain variables to fit between my triangular sides to make a star or compass shape. To keep it more simple for myself to move between to points I made it so I was not changing all of the line points. I think this helped a lot to understand the movement of the lines better. I tried to condense my code as much as I could.

file

var dx1; //variables for each triangle 1= triangle 1, 2= triangle 2
var dy1;
var dy2;
var dx3;
var dy3;
var dx4;
var numLines = 35;
function setup() {
    createCanvas(400, 400);
    background(200);
    dx1 = (100 - 50) / numLines; //x2-x1/number of lines(thick or thin)
    dy1 = (300 - 100) / numLines; //makes line lenght shorter or longer(higher,lower)
    dy2 = (100 - 300) / numLines; //some of the movement could stay the same or be switched
    dx3 = (250 - 50) / numLines;
    dy3 = (100 - 150) / numLines;
    dx4 = (50 - 250) / numLines;
}
    
function draw() { //per 1 line stroke
    strokeWeight(.5);
    var x1 = 200; //variables for each line, every triangle has 2
    var y1 = 0; //must have different variables or will not run correctly
    var x2 = 150;//even if numbers are the same
    var y2 = 200;
    var x3 = 200;
    var y3 = 400;
    var x4 = 150;
    var y4 = 200;
    var x5 = 0;
    var y5 = 200;
    var x6 = 200;
    var y6 = 250;
    var x7 = 200;
    var y7 = 250;
    var x8 = 400; 
    var y8 = 200;

    for (var i = 0; i <= numLines; i += 1) { 
        line(x1, y1, 150, 200); //top tri, left line
        x1 += dx1;
        y1 += dy1;
        line(x2, y2, 250, 200); //top tri right line
        x2 += dx1;
        y2 += dy2;
        line(x3, y3, 150, 200); //bottom tri, left line
        x3 += dx1;
        y3 += dy2;
        line(x4, y4, 250, 200); //bottom tri right line
        x4 += dx1;
        y4 += dy1;
        line(x5, y5, 200, 250); //left tri, bottom line
        x5 += dx3;
        y5 += dy3;
        line(x6, y6, 200, 150); //right tri, top line
        x6 += dx3;
        y6 += dy3;
        line(x7, y7, 200, 150); //left tri, top line
        x7 += dx4;
        y7 += dy3;
        line(x8, y8, 200, 250); //right middle tri, bottom line
        x8 += dx4;
        y8 += dy3;
    }
    noLoop();
 }

To make/ find my shape points I had to make some circles and lines first as a preliminary canvas

Project-04: String Art

string art
// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;

var numLines=20;
function setup() {
    createCanvas(400,300);
    background(224,255,255);
    dy1 = 150 / numLines;
    dx2 = 200 / numLines;
    dy3 = -150 / numLines;
    dx4 = -200 / numLines;
    da1 = 200 / numLines;
    ds2 = -150 / numLines;
    ds3 = 150 / numLines;
    da4 = -200 /numLines;
}

function draw() {
    var x1 = 200;
    var y1 = 0;
    var x2 = 200;
    var y2 = 150;
    var x3 = 200;
    var y3 = 300;
    var x4 = 200;
    var y4 = 150;

    var a1 = 0;
    var s1 = 0;
    var a2 = 0;
    var s2 = 150;
    var a3 = 400;
    var s3 = 150;
    var a4 = 400;
    var s4 = 300; 

    //right up string section, section 1
    stroke(127,255,0);
    for (var i = 0; i <= numLines; i += 1 ) {
        line(x1,y1,x2,y2);
        y1 += dy1;
        x2 += dx2;
    }
    //left down string section, section 2
    stroke(75,0,130);
    for (var i = 0; i <= numLines; i += 1) {
        line(x3,y3,x4,y4);
        y3 += dy3;
        x4 += dx4;
    }

    //right up corner
    stroke(255,192,203);
    for (var a = 0; a <= numLines; a += 1) {
        line(a1,s1,a2,s2);
        a1 += da1;
        s2 += ds2; 
    }
    //left down corner
    stroke(255,99,71);
    for (var a = 0; a <= numLines; a += 1) {
        line(a3,s3,a4,s4);
        s3 += ds3;
        a4 += da4;
    }
    noLoop();
}

While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.

Project 4: String Art

sketch
//Anthony Pan
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4; 
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14; 

var numLines = 30;


function setup() {
    createCanvas(400, 300);
    background(0);

    //left of circle change in x/y
    dx1 = (280)/numLines;
    dy1 = (70)/numLines;
    dx2 = (120)/numLines;
    dy2 = (150)/numLines;

    //top of circle change in x/y
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;

    //top right of circle change in x/y
    dx5 = (250)/numLines;
    dy5 = (20)/numLines;
    dx6 = (40)/numLines;
    dy6 = (150)/numLines;

    //bottom of circle change in x/y
    dx7 = (70)/numLines;
    dy7 = (120)/numLines;
    dx8 = (20)/numLines;
    dy8 = (300)/numLines;

    //right of circle change in x/y
    dx9 = (220)/numLines;
    dy9 = (120)/numLines;
    dx10 = (80)/numLines;
    dy10 = (150)/numLines;

    //bottom right of circle change in x/y
    dx11 = (240)/numLines;
    dy11 = (10)/numLines;
    dx12 = (105)/numLines;
    dy12 = (60)/numLines;

    //bottom left of circle change in x/y
    dx13 = (80)/numLines;
    dy13 = (140)/numLines;
    dx14 = (20)/numLines;
    dy14 = (300)/numLines;


}

function draw() {
    //ellipse(width/2, height/2, 120, 120) //ellipse for reference

    //left of circle start points
    var x1 = 130;
    var y1 = 5;
    var x2 = 130;
    var y2 = 230;

    //top of circle start points
    var x3 = 0;
    var y3 = 100;
    var x4 = 250;
    var y4 = 85;

    //top right of circle start points
    var x5 = 273;
    var y5 = 5; 
    var x6 = 273;
    var y6 = 230;

    //bottom of circle start points
    var x7 = 125;
    var y7 = 210;
    var x8 = 400;
    var y8 = 210;

    //right of circle start points
    var x9 = 220;
    var y9 = 40;
    var x10 = 280;
    var y10 = 180;

    //bottom right of circle start points
    var x11 = 240;
    var y11 = 10;
    var x12 = 270;
    var y12 = 210;

    //bottom left of circle start points
    var x13 = 160;
    var y13 = 200;
    var x14 = 230;
    var y14 = 220;


    for (var i = 0; i <= numLines; i += 1) { 
        stroke(220, 20, 0);

        //creating red vortex around a circle

        line(x1, y1, x2, y2); //left of circle
        x1 += dx1;
        x2 -= dx2;
        y1 += dy1;
        y2 -= dy2;

        line(x3, y3, x4, y4); //top of cirlce
        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        line(x5, y5, x6, y6); //top right of circle  
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;

        line(x7, y7, x8, y8); //bottom of circle
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;

        line(x9, y9, x10, y10); //right side
        x9 += dx9;
        y9 -= dy9;
        x10 -= dx10;
        y10 += dy10;

        line(x11, y11, x12, y12); //bottom right
        x11 += dx11;
        y11 -= dy11;
        x12 -= dx12;
        y12 += dy12;

        line(x13, y13, x14, y14); //bottom left
        x13 -= dx13;
        y13 -= dy13;
        x14 += dx14;
        y14 += dy14;

    }

    noLoop();

}

Creating a vortex around an ellipse using string art

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.