# Project 4 – String Art

``````

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

}

function draw() {
var x0 = 100;
var y0 = 50;
var x1 = 300;
var y1 = 250;
var xX = 100;
var yX = 50;
var gap = 5;
var redness = 220;
background (0, 0, 0);
//the first shape which is a square
for (var i=1; i<41; i++){
stroke (255, redness, redness);
line (xX, y0, x1, yX);
line (width-xX, y1, x0, height-yX);
stroke (255, 220-redness, 220-redness);
line (width-xX, y0, x0, yX);
line (xX, y1, x1, height-yX);
xX += gap;
yX += gap;
redness -= gap;
}

//the second shape that is like a cross
var xC = width/2;
var yC = 0;
var greeness = 100;
for (var j=0; j<31; j++){
stroke (255, greeness, 0);
line (width/2, yC, xC, height/2);
line (width/2, yC, width-xC, height/2);
line (width/2, height-yC, xC, height/2);
line (width/2, height-yC, width-xC, height/2);
xC += gap;
yC += gap;
greeness += gap;
}

//the third shape that connects the cross
var yM = 0;
var xM = width/4*3;
var blueness = 50;
for (var x=0; x<11; x++){
stroke (blueness, blueness, 255);
line (width/2, yM, xM, height/2);
line (width/2, yM, width-xM, height/2);
line (width/2, height-yM, xM, height/2);
line (width/2, height-yM, width-xM, height/2);
yM += gap;
xM += gap;
blueness += gap*2;
}

//the fourth shape that rotates from the center
var centerX = width/2;
var centerY = height/2;
var angle = 0;
var factor = dist(mouseX, mouseY, centerX, centerY);
//map the distance to the scale of radians
var angleC = map(factor, 0, (200^2+150^2)^(1/2), 0, PI);
for (var y=0;y<36;y++){
x1 = centerX + radius * Math.cos( angle );
y1 = centerY + radius * Math.sin( angle );
x2 = centerX - radius * Math.cos( angle );
y2 = centerY - radius * Math.sin( angle );
stroke (204,255,153);
line (x1, y1, x2, y2);
//the angle of the rotation is related to the mouse
angle += angleC;
}
}``````

My project was inspired by the idea of centralization. All the curves point to the center or rotate through the center. Also, I look for the string art online and get some inspiration of the form.