Project 04- String Art

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.