for this project, I was inspired by the work of weaver and sculptor Ruth Asawa, who gained international recognition in the art world for her looped-wire sculptures and hanging mobiles. the most challenging part of this project was creating self-contained forms that intersected multiple times.
string art ruth asawa
/* atayao
lab section E
project 04: string art
*/
// incrementing variables
var connectX = 150; // starting x for all connecting lines
var connectY1a = 75; // top of shape A
var connectY1b = 125; // bottom of shape A
var connectY2a = 160; // top of shape B
var connectY2b = 190; // bottom of shape B
var connectY3a = 250; // top of shape C
var connectY3b = 350; // bottom of shape C
var xa = 200; // y-point of top share
var xb = 50; // y-point of middle shape
var xc = 120; // y-point of bottom shape
var dx1a; // change in x for top half of top shape
var dx1b; // change in x for bottom half of top shape
var dx2a; // change in x for top half of middle shape
var dx2b; // change in x for bottom half of middle shape
var dx3a; // change in x for top half of bottom shape
// number of lines that connect two anchors
var numLines = 15;
function setup() {
createCanvas(300, 400);
background(0);
stroke(255);
// ANCHOR LINES
stroke(100);
line(width/2, 0, width/2, 350); // center line
stroke(255);
strokeWeight(1.5);
// shape A
line(100, 100, 200, 100); // anchor 1A (horizontal)
line(150, 75, 150, 125); // anchor 1B (vertical)
line(100, 100, 150, 75); // anchor 2 (top-left diagonal)
line(150, 125, 200, 100); // anchor 3 (bottom-right diagonal)
// shape B
line(50, 175, 250, 175); // anchor 4A (horizontal)
line(150, 160, 150, 190); // anchor 4B (vertical)
line(50, 175, 150, 160); // anchor 5 (top-left diagonal)
line(150, 190, 250, 175); // anchor 6 (bottom-right diagonal)
// shape C
line(120, 300, 180, 300); // anchor 7A (horizontal)
line(150, 250, 150, 350); // anchor 7B (vertical)
line(120, 300, 150, 350); // anchor 8 (bottom-left diagonal)
line(150, 250, 180, 300); // anchor 9 (top-right diagonal)
// INCREMENTS
dx1a = (100-xa)/numLines;
dx1b = (200-100)/numLines;
dx2a = (250-50)/numLines;
dx2b = (50-250)/numLines;
dx3a = (180-120)/numLines;
dx3b = (120-180)/numLines;
}
function draw () {
stroke(200); // color of connecting lines
// TOP SHAPE
// top half
for (var i = 0; i <= numLines; i++) {
line(connectX, connectY1a, xa, 100);
xa += dx1a;
}
// bottom half
xa = xa + dx1b
for (var i = 0; i <= numLines; i++) {
line(connectX, connectY1b, xa, 100);
xa += dx1b;
}
// MIDDLE SHAPE
// top half
for (var i = 0; i <= numLines; i++) {
line(connectX, connectY2a, xb, 175);
xb += dx2a;
}
// bottom half
for (var i = 0; i <= numLines; i++) {
line(connectX, connectY2b, xb + dx2b, 175);
xb += dx2b;
}
// BOTTOM SHAPE
// top half
for (var i = 0; i <=numLines; i++) {
line(connectX, connectY3a, xc, 300);
xc += dx3a;
}
// bottom half
xc = xc + dx3b;
for (var i = 0; i <= numLines; i++) {
line(connectX, connectY3b, xc, 300);
xc += dx3b;
}
noLoop();
}