Here’s my string art — when the mouse is pressed, it makes rainbow spiderwebs in each corner of the canvas. To erase the canvas and start over, press “e”.
sketch
//Sam Rauch / srauch / section B
//this code generates four "rainbow spiderwebs", one in each corner of the canvas,
//as long as the mouse is pressed. When the user presses the "e" key, the canvas
//erases.
// two points of A line
var ax1;
var ay1;
var ax2;
var ay2;
// two points of B line
var bx1;
var by1;
var bx2;
var by2;
// endpoints of connecting lines
var x1;
var y1;
var x2;
var y2;
function setup() {
createCanvas(400, 300);
background(0);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//draw spiderwebs in each quadrant of the canvas as long as mouse is pressed
if (mouseIsPressed){
strokeWeight(1);
stringart();
push();
translate(200,0);
stringart();
pop();
push();
translate(200,150);
stringart();
pop();
push();
translate(0, 150);
stringart();
pop();
}
//erase canvas when user presses e key
if (keyIsPressed){
if (key == "e") {
background(0);
}
}
}
//creates two lines, with 50 "stringers" between each line
function stringart() {
//canvas size (200, 150)
//randomly generate location of A line
ax1 = random(10, 190);
ay1 = random(10, 140);
ax2 = random(10, 190);
ay2 = random(10, 140);
//randomly generate location of B line
bx1 = random(10, 190);
by1 = random(10, 140);
bx2 = random(10, 190);
by2 = random(10, 140);
//assign first stringer's location connecting top of A and bottom of B
x1 = ax1;
y1 = ay1;
x2 = bx2;
y2 = by2;
//draw A line and B line in a random color
stroke(random(255), random(255), random(255));
line(ax1, ay1, ax2, ay2);
line(bx1, by1, bx2, by2);
strokeWeight(0.5);
//draw 50 lines between A line and B line, incrementing 1/50th of distance between x values
//and y values of each line
for (var i = 0; i < 51; i+=1) {
var x1Increment = (ax2- ax1) / 50;
var y1Increment = (ay2 - ay1) / 50;
var x2Increment = (bx1 - bx2) / 50;
var y2Increment = (by1 - by2) / 50;
//first stringer
line (x1, y1, x2, y2);
//changing position of stringer for each loop
x1 += x1Increment;
y1 += y1Increment;
x2 += x2Increment;
y2 += y2Increment;
}
}