Category: Project-04-String-Art

Project 4 : String Art

sketch 
//Aadya Bhartia
//Section A

var r = 250;
var g = 10;
var b = 140;
var bg = 80;
var change = 1;
var angle = 0;
function setup() {
    createCanvas(400, 300);
    background(200);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(bg);
	//contraining mouse within canvas
	var x = min(mouseX, width);
	var y = min(mouseY, height);
	//creating a mirror
	var mx = width - x;
	var my = height - y;
	for(var m = 0; m<=width; m+=15){ 
		stroke(170, 90, 100);
		//bottom left as a mirror image of the top right
		line(0,300 - m,400 - m,300);
		line(0,300 - m,400 - m/2,300);
		//top right 
		line(400,m,m,0);
		line(400,m,m/2,2);
		//creating 4 moveable string based on the mouse
		stroke(r+50, g+20, b+10);
		line(width-m,y, x,m);
		line(m,my, mx,300-m);
		line(width - m,my, x,300-m);
		line(m,y, mx,m);
	}
	//background shades as a gradient 
	bg = bg + change;
	if(bg>150){
		change = -change;
	}
	if (bg<=0) {
		change = -change;
	}
}

Project-04-String-Art

I used layered color and stroke width within one loop to create overlapping line intersections, so the overlapping create some dimensional ’rounded’ effects. I also didn’t want it to be only static, so I incorporated two mouse-activated line systems to make it more interactive.

lineartok

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(100);
    line(0, 0, 200, 400);
    line(400, 0, 200, 400);
    dx1 = (200)/numLines;
    dy1 = (400-0)/numLines;
    dx2 = (400-200)/numLines;
    dy2 = (-400)/numLines;
}

function draw() {
	background(100);
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
    //base black lines
        strokeWeight(0.5);
        stroke('black');
        line(0,x2,400,x1);
        line(x1, y1, x2, y2);
        line(x2,y1+200,x1-400,y2+200);
    //white lines
        stroke('white');
        line(mouseX,mouseY,y1,y2);  
        line(x2,y1+400,x1,y2+400);
        line(0,400,x1,y2-100);
        line(400,200,x1-600,y2);
    //red lines
        strokeWeight(2);
        stroke('red');
        line(x1,x2,mouseX,mouseY);  
        line(x2-200,y1,x1-600,y2);
        line(100,400,x2,y2+400);
        line(x2,0,y2,400);
    //black lines as highest layer
        stroke('black');
        line(x2,y1+200,x1-400,y2);
        line(x2-200,y1,x1-200,y2);
        line(400,100,y1,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}