Emma N-M-Project-04(String Art)

stringArt1

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-04
String Art
*/

var x1StepSize = 4;
var y1StepSize = 1;
var x2StepSize = -2;
var y2StepSize = -20;
var x1;
var x2;
var y1;
var y2;


function setup() {
    createCanvas(400, 300);
    background("black");
    x1 = 0;
    y1 = 0;
    x2 = width/3 + 100;
    y2 = height/3 + 50;
    
    

}
 
function draw() {
    
    for (var i = 0; i < 350; i += 5) {
        push();
        translate(width/2, height);
        stroke(23, 233, 250);
        line(x1, y1, x2, y2);
        x1 += x1StepSize;
        y1 += y1StepSize;
        // x2 += x2StepSize;
        // y2 += y2StepSize;
        pop();

        stroke("hotpink");
        push();
        translate(width, height/2);
        rotate(degrees(90));
        line(x1, y1, x2, y2);
        // x1 += x1StepSize;
        // y1 += y1StepSize;
        x2 += x2StepSize;
        y2 += y2StepSize;
        pop();

        push();
        translate(0, 0);
        rotate(degrees(10));
        stroke("yellow");
        line(x1, height, width, y2);
        x1 += x1StepSize;
        pop();

        if (i % 25 === 0) {
            stroke("limegreen");
            line(0, y1, width-x2*2, height);
        }
    

    }

    
}

I started with playing around with different x and y positions, but then I didn’t like how static and boring it looked. So I moved to making circles with only lines.

stringArt2

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-04
String Art
*/


var midpoinX;
var midpointY;
var r;
var ai;
var slope;
var b;
var x3;
var y3;
var x4;
var y4;
var k; 
var cosAg;
var sinAg;
var sinAi;
var scaledR;


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

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

    var maxInc = 90; // maximum step increase in the for loop
    var minInc = 3; // minimum step increase in the for loop
    var d = (maxInc - minInc)/width; // value to change mouse position to a smaller value

    // keeps the mouse value inside the canvas
    if (mouseX >= width) {
        mouseX = width;
    }
    else if (mouseX < 0) {
        mouseX = 0;
    }

    if (mouseY > height) {
        mouseY = height;
    }
    else if (mouseY < 0) {
        mouseY = 0;
    }

    var r1 = mouseY/6 + 50; // as mouseY increases, radius increases (max radius = 100, min radius = 50)
    var r2 = 100 - mouseY/6; // as mouseY increases, radius decreases (max radius = 100, min radius = 50)
    var change1 = int(d * mouseX) + minInc; // mouseX changes the amount of lines to make the cirlce (max lines = 120, min lines = 4)
    var change2 = maxInc - int(d * mouseX); // mouseX changes the amount of lines to make the cirlce (max lines = 120, min lines = 4)
    
    // draws pink circle
    push();
    translate(width/3, height/2);
    circles(r2, 8, change1, "hotpink");
    pop();

    // draws light green circle
    push();
    translate(2 * width/3, height/2);
    circles(r1, 8, change2, "lightgreen");
    pop();

    // draws yellow circle
    push();
    translate(width/6, height - change1);
    circles(r1, 8, change1, "yellow");
    pop();

    // draws blue circle
    push();
    translate(width - change2, height/6);
    circles(r2, 8, change2, "aqua");
    pop();

} 


function circles(r, k, inc, hue) {
    for (var ag = 0; ag <= 360; ag += inc) {
        angleMode(DEGREES);
        ai = 90 - ag; // 3rd angle in the triangle created from the tangent line and x axis
        cosAg = cos(ag);
        sinAg = sin(ag);
        sinAi = sin(ai);
        scaledR = k * r; // makes the line longer (or shorter)
        midpointX = r * cosAg; // line's midpoint x position
        midpointY = r * sinAg; // line's midpoint y position

        if ((ag === 0) || (ag === 180)) { // verticle lines
            x3 = r * cosAg;
            y3 = -scaledR;
            x4 = r * cosAg;
            y4 = scaledR;
        }

        else if ((ag === 90) || (ag === 270)) { // horizontal lines
            x3 = -scaledR;
            y3 = r * -sinAg;
            x4 = scaledR;
            y4 = r * -sinAg;
        }

        // not a verticle or horizontal line
        // uses geometry, law of sines, and unit circle to get end points of line
        else {
            slope = ((r * -sinAg) / (r * cosAg - (r / sinAi)));
            b = -slope * (r / sinAi);
            x3 = r * cosAg - scaledR;
            y3 = (slope * x3) + b;
            x4 = r * cosAg + scaledR;
            y4 = (slope * x4) + b;
        }

        stroke(hue);
        line(x3, y3, x4, y4);
    }
}

It took a while to get the lines to move around tangential to the circle. There was a lot of math and geometry that I needed a refresher on to get the lines to make a circle. Once the circles were drawn statically, I then used the mouse position to make the circle change in various ways.