Category: SectionD

//Julianna Bolivar
//jbolivar
//Section D
//Program: String Art


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 numLines = 50;

function setup() {
    createCanvas(300, 400);
    background(244, 235, 232);
    //hot pink
    stroke(222, 49, 99);
    //right most lines
    line(300, 300, 350, 300); 
    dx1 = (250)/numLines;
    dy1 = (290)/numLines;
    dx2 = (100)/numLines;
    dy2 = (290)/numLines;
    //left most lines
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;
    //overlapping lines
    dx5 = (150)/numLines;
    dy5 = (320)/numLines;
    dx6 = (90)/numLines;
    dy6 = (90)/numLines;
}

function draw() {
    //right most lines
    var x1 = 50;
    var y1 = 10;
    var x2 = 200;
    var y2 = 200;
    //left most lines
    var x3 = 0;
    var y3 = 200;
    var x4 = 220;
    var y4 = 350;
    //overlapping lines
    var x5 = 40;
    var y5 = 200;
    var x6 = 220;
    var y6 = 350;

    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        line(x3, y3, x4, y4);
        line(x5, y5, x6, y6);

        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;

        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        x5 -= dx5;
        y5 -= dy5;
        x6 += dx6;
        y6 += dy6;   
    }

    noLoop();
}

Mine is quite simple, I wanted to have an interaction or at least have a variety of colors but I couldn’t get it to work in time. I knew I wanted the strings to work vertically, and the overlapping strings was a mistake I ended up liking.

sketch

//Catherine Liu
//jianingl
//Section D

var strokeColorR = 255
var strokeColorG = 165
var strokeColorB = 0

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 numLines = 50;

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

    //draws line that curves downward
    line(0,0,width/2,height);
    line(width/2,height,width,0);
    dx1 = (width/2-0)/numLines;
    dy1 = (height-0)/numLines;
    dx2 = (width-width/2)/numLines;
    dy2 = (0-height)/numLines;

    //draws line that curves upward
    line(0,height,width/2,0);
    line(width/2,0,width,height);
    dx3 = (width/2-0)/numLines;
    dy3 = (0-height)/numLines;
    dx4 = (width-width/2)/numLines;
    dy4 = (height-0)/numLines;

    //draws line that curves left
    line(0,0,width,height/2);
    line(width,height/2,0,height);
    dx5 = (width-0)/numLines;
    dy5 = (height/2-0)/numLines;
    dx6 = (0-width)/numLines;
    dy6 = (height-height/2)/numLines;

    //draws line that curves right
    line(width,0,0,height/2);
    line(0,height/2,width,height);
    dx7 = (0-width)/numLines;
    dy7 = (height/2-0)/numLines;
    dx8 = (width-0)/numLines;
    dy8 = (height-height/2)/numLines;
}

function draw() {
    background(0);
    stroke(strokeColorR, strokeColorG, strokeColorB);

    //draws line that curves downwards
    var x1 = 0;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //draws line that curves upward
    var x3 = 0;
    var y3 = height;
    var x4 = width/2;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    //draws line that curves left
    var x5 = 0;
    var y5 = 0;
    var x6 = width;
    var y6 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    //draws line that curves right
    var x7 = width;
    var y7 = 0;
    var x8 = 0;
    var y8 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
}

function mousePressed() {

    //checks for R value of color and switches
    if (strokeColorR == 255) {
        strokeColorR = 0
    } else {
        strokeColorR = 255
    }

    //checks for G value of color and switches
    if (strokeColorG == 165) {
        strokeColorG = 191
    } else {
        strokeColorG = 165
    }

    //checks for B value of color and switches
    if (strokeColorB == 0) {
        strokeColorB = 255
    } else {
        strokeColorB = 0
    }
}

It took me a while to figure out how to use the string to create patterns but once I had a good idea of what I wanted to create it was relatively easy to add strings. I also included the ability for the string to change color when you press the mouse.

Yash string art

// Yash Mittal
// Section D

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 numLines = 30;

function setup() {
    createCanvas(400, 300);
    background (0);
    stroke (255);
    line (70, 200, 180, 10); // reference line 1 
    line (330, 180, 290, 70); // reference line 2
    strokeWeight (0);
    line (150, 290, 250, 260); // reference line 3
    line (100, 100, 200, 200); // reference to line 4 
    stroke ("white");
    line (30, 70, 290, 110); // reference to line 5
    strokeWeight (1);
    line (20, 20, 110, 10); // reference to line 6


    dx1 = (180 - 70) / numLines;
    dy1 = (10 - 200) / numLines;
    dx2 = (290 - 330) / numLines;
    dy2 = (70 - 180) / numLines;
    dx3 = (250 - 150) / numLines;
    dy3 = (260 - 290) / numLines;
    dx4 = (200 - 100) / numLines;
    dy4 = (200 - 100) / numLines;
    dx5 = (290 - 30) / numLines;
    dy5 = (110 - 70) / numLines; 
    dx6 = (110 - 20) / numLines;
    dy6 = (10 - 20) / numLines;

}

function draw() { 

    var x1 = 70;
    var y1 = 200;
    var x2 = 330;
    var y2 = 180;
    var x3 = 150;
    var y3 = 290;
    var x4 = 100; 
    var y4 = 200;
    var x5 = 30;
    var y5 = 290;
    var x6 = 20;
    var y6 = 20;
    var x7 = 110;
    var y7 = 10;

    for (var i = 0; i <= numLines; i = i + 0.9) { // center lines (left to right)

        line (x1, y1, x2, y2);
       
        x2 = x2+ dx2;
        y2 = y2 + dy2;
        
    }

    stroke ("yellow");

    for (var i2 = 0; i2 <= numLines; i2 = i2 + 3) { // bottom lines (bottom left to top)

        line (x2, y2, x3, y3);
        x2 = x2 + dx3;
        y2 = y2 + dy3;
        x3 = x3 + dx3;
        y3 = y3 + dy3;

    }


    stroke ("white");

    for (var i5 = 0; i5 <= numLines; i5 = i5 + 0.5) {

        line (x4, y4, x5, y5);

        x5 = x5 + dx5;
        y5 = y5 + dy5;
    }


 stroke ("red");

    for (var i3 = 0; i3 <= numLines; i3 = i3 + 1) { // top lines (top right to top center)

        line (x2, y2, x1, y1);
        x2 = x2 + dx3;
        y2 = y2 + dy3;
        x1 = x1 + dx1;
        y1 = y1 + dy1;
    }

    for (var i4 = 0; i4 <= numLines; i4 = i4 + 0.1) { 

        line (x3, y3, x2, y2);

        x3 = x3 + dx3;
        y3 = y3 + dy3;
        x2 = x2 + dx2;
        y2 = y2 + dy2;
        
}

    stroke ("yellow");
    strokeWeight (0.4);

    for (var i6 = 0; i6 <= numLines; i6 = i6 + 0.8) {

        line (x1, y1, x3, y3);

        x1 = x1 + dx1 / 2;
        y1 = y1 + dx1 / 2;
        x3 = x3 + dx3 / 2;
        y3 = y3 + dy3 / 2;
    }

    stroke ("red");

    for (var i7 = 0; i7 <= numLines; i7 = i7 + 0.5) {

        line (x6, y6, x4, y4);
        x4 = x4 + dx4;
        y4 = y4 + dy4;
    }

    strokeWeight (0.3);
    stroke ("red");

    for (var i8 = 0; i8 <= numLines; i8 = i8 + 0.1) {

        line (x7, y7, -x4, y4);
        x7 = x7 + dx6;
        y7 = y7 + dx6;
       
    }

noLoop();

}

I had fun working on this project. At first, I struggled to understand the mathematics behind the code but once I got the hang of it, it became pretty easy to draw new patterns on different parts of the canvas.