Project-04: String-Art

My Project

//allows for rotation
var rot = 0;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    lineSpread(400, 0, 0, 400, 10, 0, 0);
    lineSpread(0, 300, 0, 400, 10, 0, 0);
    lineSpread(0, 0, 0, 400, 10, 0, 0);
    lineSpread()
    fill(220);
    rect(300, 20, 80, 80);
    circle(75, 225, 75);
    if ((mouseX > 300 & mouseX < 380) && (mouseY < 100 && mouseY > 20) ){
        background(220);
        line(150, 100, 250, 100);
        line(150, 200, 250, 200);
        line(150, 100, 150, 200);
        line(250, 100, 250, 200);
        lineSpread(200, 0, 150, 250, 10, 0, 100);
        lineSpread(200, 300, 150, 250, 10, 0, 200);
        lineSpread(0, 150, 100, 200, 10, 150, 0);
        lineSpread(400, 150, 100, 200, 10, 250, 0);
        line(0, 150, 200, 0);
        line(200, 0, 400, 150);
        line(200, 300, 400, 150);
        line(0, 150, 200, 300);
    }
    else if (dist(mouseX, mouseY, 75, 225) < 40){
         background(220);
         fill(220);
         lineSpread(200, 150, 0, 300, 5, 112.5, 0);
         lineSpread(200, 150, 0, 300, 5, 287.5, 0);
         for (var i = 0; i < 300; i += 5){
              line(0, i, 112.5, i);
              line(287.5, i, 400, i);
         }
         stroke(20);
         circle(75, 225, 75);
         circle(75, 75, 75);
         circle(325, 75, 75);
         circle(325, 225, 75);
         lineSpread(200, 0, 150, 250, 10, 0, 60);
         lineSpread(200, 300, 150, 250, 10, 0, 240);
         lineSpread(200, 150, 150, 250, 10, 0, 60);
         lineSpread(200, 150, 150, 250, 10, 0, 240);
         push();
         translate(75, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(75, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();

         rot = rot += 2;

    }
    else {
        background(220);
        lineSpread(400, 0, 0, 400, 10, 0, 0);
        lineSpread(0, 300, 0, 400, 10, 0, 0);
        lineSpread(0, 0, 0, 400, 10, 0, 0);
        fill(220);
        rect(300, 20, 80, 80);
        circle(75, 225, 75);
    }

    
}

function lineSpread(x1, y1, startDegree, endDegree, lineSpace, sXNum, sYNum){
    if (sXNum == 0 & sYNum == 0){
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, degree);
    }
    }
    else if (sXNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, sXNum, degree);
    }
    }
    else if (sYNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, sYNum);
    }
}

}

I initially tried to do something more complex, but I settled for simpler things. I had fun writing the Function I used.

Leave a Reply