Ellan Suder – Project 04 – String Art

I first started with drawing several parabolic curves in function draw(). Then after making a shape I liked, I moved it over into its own function like the owl example and used another two for loops to replicate it with different x,y values.

string art

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-04
*/

//I first started with drawing several parabolic curves in function draw().
//Then after making a shape I liked, I moved it over into its own function 
//like the owl example and used another two for loops to replicate it with different x,y values.

var t = 0;

function setup() {
    createCanvas(400, 300);
    t = 0;
}

function draw() {
    background(0);
  
    //changes color based on mouseX, mouseY
    var r = map(mouseX, 0, width, 0, 230);
    var g = map(mouseY, 0, height, 0, 230);
    var b = 230 * noise(t+20);
    stroke(r,g,b);
    t = t + 0.05;
    
    //determines x and y of shapes. I made them overlap each other
    for (var y = -height/2; y < height*2; y += height/2){ 
        for (var x = -height/2; x < width*2; x += height/2) {
            shape(x, y);
        }
	}		
}

function shape(x,y) {
	var n = 20;
    var linespacing = height/(n*2);

    push();
    scale(.5);
    translate(x,y);

	for(var i = 0; i<n; i++)
  {
    strokeWeight(1);
    //stroke("red");
    line(0,0+linespacing*i, //x1, y1. begin at 0,0 and go down linespacing
         0+linespacing*i,height/2); //x2, y2. point goes right along height/2 linespacing each time

    //stroke("black");
    line(height,0+linespacing*i, //x1, y1. begin at height and go down
         height-linespacing*i,height/2); //x2, y2. begin at height,height/2 and go left

    //stroke("green");
    line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
         height-linespacing*i,height/2); //begin at height,height/2 and go left
 
    //stroke("purple");
    line(height/2,height/2+linespacing*i, //begin at height/2,height/2 and go down
         0+linespacing*i,height/2); //begin at 0,height/2 and go right

    //stroke("yellow");
    line(0,0+linespacing*i, //begin at 0,0 and go down
         height/2-linespacing*i,0); //begin at height/2,0 and go left

    //stroke("blue");
    line(height,0+linespacing*i, //begin at height,0 and go down
         height/2+linespacing*i,0); //begin at height/2,0 and go right

    //stroke("brown");
    line(height,height/2+linespacing*i, //begin at height,height/2 and go down
         height-linespacing*i,height); //begin at height,height and go left

    //stroke("orange");
    line(0,height/2+linespacing*i, //begin at 0,height/2 and go down
         0+linespacing*i,height); //begin at height/2 and go right
    }
    pop();
}