I chose to create a responsive string art project, since I still haven’t had my fill of mouseX and mouseY data use. I also used a mousePressed function to spice things up as well, ultimately changing the location of the pivot points of the string as well as the color.
sketchDownload
//PROJECT 04 STRING ART
//Julia Steinweh-Adler
//jsteinwe
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 1;
var mode = 0;
function setup() {
createCanvas(400, 400);
background(0);
//line initial variables
dx1 = (width/1) / numLines;
dy1 = (width/2) / numLines;
dx2 = (width/3) / numLines;
dy2 = (width/4) / numLines;
}
function draw() {
var x1 = mouseX;
var y1 = mouseY;
var ptOne = 400; // yarn pivot point, y value
var ptTwo = 180; // yarn pivot point, x value
stroke(0);
strokeWeight(2);
// Red and Blue Yarn
if(mode == 0) {
for (var i = 0; i < numLines; i += 1) {
stroke(mouseX, 0, mouseY); // red blue color
line(x1, y1, ptOne, ptTwo); //line 1
stroke(mouseY, 0, mouseX); // red blue color
line(y1, x1, ptTwo, ptOne); //line 2, inverted from line 1
line(x1, y1, y1, x1); // line 3: connecting 1 and 2
// incremental addition to coordinates
x1 += dx1;
y1 += dy1;
ptOne += dx2;
ptTwo += dy2;
}
} else {
// Blue and Green Yarn
// changing yarn pivot point
let ptOne = 0 // yarn pivot point, x value
let ptTwo = 200 // yarn pivot point, y value
for (i = 0; i < numLines; i += 1) {
//change yarn color
stroke(0, mouseX, mouseY); // green blue color
line(y1, x1, ptTwo, ptOne); //line 1
stroke(mouseY, 0, mouseX); //green blue color
line(x1, y1, ptOne, ptTwo); //line 2, inverted line 1
line(y1, x1, x1, y1) //line 3; connector line
// incremental addition to coordinates
x1 += dx1;
y1 += dy1;
ptOne += dx2;
ptTwo += dy2;
}
}
}
function mousePressed() {
if (mode == 0) {
mode = 1;
} else {
mode = 0;
}
}
The color, repetitive nature, string-like-ness, and “stretchy” behavior of this interaction remind me of the rainbow loom. Therefore, I have titled this piece “Rainbow Loom”.