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();
}Randomly generated string vortex effect
sketch
]]>//Aarnav Patel
//aarnavp
//Section D
var numLines = 100;
var dx1;
var dy1;
var dx2;
var dy2;
function setup() {
createCanvas(400, 300);
background(220);
}
function draw() {
strokeWeight(0.25) //to better see string
for (var i = 0; i < 10; i += 1) { //the amount of vortex triangles drawn
let x1 = random(0, width);
let y1 = random(0, height);
let x2 = width / 2;
let y2 = height / 2;
//centering all lines towards middle on end point – converging vortex
let x3 = random(0, width);
let y3 = random(0, height);
let x4 = random(0, width);
let y4 = random(0, height);
line(x1, y1, x2, y2);
//line(x3, y3, x4, y4);
dx1 = (x2 - x1) / numLines;
dy1 = (y2 - y1) / numLines;
dx2 = (x3 - x4) / numLines;
dy2 = (y3 - y4) / numLines;
//creating evenly spaced lines for each "line art pair"
for (var j = 0; j < numLines; j += 1) {
if (i == 5) { //making the middle vortex triangle red
stroke("red");
} else {
stroke(0)
}
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}
noLoop();
}
For this project, I wanted to test the variability of how string art can generate, so I made a random string generator that creates what eventually looks like TV static. Press down the mouse to generate more and more strings until the screen is completely covered!
csavitz_4
]]>//Cole Savitz-Vogel
//csavitzv
//Section A
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;
function setup() {
createCanvas(500, 500);
background(0);
}
function draw() {
if (mouseIsPressed){
strokeWeight(.5);
web();
push();
translate(random(0,500),random(0,500));
web();
pop();
push();
translate(random(0,500),random(0,500));
web();
pop();
push();
}
}
function web() {
x3 = random(1, 500);
y3 = random(1, 500);
x4 = random(1, 500);
y4 = random(1, 500);
x5 = random(1, 500);
y5 = random(1, 500);
x6 = random(1, 500);
y6 = random(1, 500);
x1 = x3;
y1 = y3;
x2 = x5;
y2 = y5;
line(x3, y3, x4, y4);
line(x5, y5, x6, y6);
strokeWeight(0.5);
for (var i = 0; i < 51; i+=1) {
var xdelta1 = (x4 - x3);
var ydelta1 = (y4 - y3);
var xdelta2 = (x5 - x6);
var ydelta2 = (y5 - y6);
noFill();
stroke(random(i,200), random(i,200), random(i,200));
arc(x1, y1, x2, y2, random(0,3), random(0,3));
x1 += xdelta1;
y1 += ydelta1;
x2 += xdelta2;
y2 += ydelta2;
}
}This is my project 04.
sketch
]]>function setup() {
createCanvas(400, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
background(249,214,214);
//background line-top left
stroke(168,141,158);
line(50,0,150,0);
line(0,50,0,150);
dx1 = (150-50)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (0-0)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 50;
var y1 = 0;
var x2 = 0;
var y2 = 150;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//background line-top right
line(250,0,350,0);
line(400,50,400,150);
dx1 = (350-250)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (400-400)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 250;
var y1 = 0;
var x2 = 400;
var y2 = 50;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
line(0,150,0,250);
line(150,300,50,300);
dx1 = (0-0)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (50-150)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 0;
var y1 = 150;
var x2 = 50;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(400,150,400,250);
line(250,300,350,300);
dx1 = (400-400)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (350-250)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 400;
var y1 = 150;
var x2 = 350;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler left
stroke(146,63,75);
line(185,80,190,75);
line(197,117,203,115);
dx1 = (190-185)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 185;
var y1 = 80;
var x2 = 203;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler right
line(220,80,215,75);
line(197,117,203,115);
dx1 = (215-220)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 220;
var y1 = 80;
var x2 = 197;
var y2 = 117;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
stroke(63,41,54);
line(130,50,130,110);
line(280,140,280,230);
dx1 = (130-130)/numberLines;
dy1 = (110-50)/numberLines;
dx2 = (280-280)/numberLines;
dy2 = (230-140)/numberLines;
var x1 = 130;
var y1 = 50;
var x2 = 280;
var y2 = 230;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Inside-wing top right & bottom left
line(120,140,120,230);
line(270,50,270,110);
dx1 = (120-120)/numberLines;
dy1 = (230-140)/numberLines;
dx2 = (270-270)/numberLines;
dy2 = (110-50)/numberLines;
var x1 = 120;
var y1 = 140;
var x2 = 270;
var y2 = 110;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Outside-top left
stroke(189,135,134);
line(110,20,110,115);
line(200,115,200,130);
dx1 = (110-110)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 110;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Outside-top right
line(290,20,290,115);
line(200,115,200,130);
let numLines = 10;
dx1 = (290-290)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 290;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom left
line(100,135,110,260);
line(200,125,200,140);
dx1 = (110-100)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 100;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom right
line(300,135,290,260);
line(200,125,200,140);
dx1 = (290-300)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 300;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//bottom patterning
stroke(107,87,104)
line(150,150,170,150);
line(130,180,150,180);
dx1 = (170-150)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (150-130)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 150;
var y1 = 150;
var x2 = 150;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(225,150,245,150);
line(245,180,265,180);
dx1 = (245-225)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (265-245)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 225;
var y1 = 150;
var x2 = 265;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//upper patterning
line(145,90,155,90);
line(140,105,150,105);
dx1 = (155-145)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (150-140)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 145;
var y1 = 90;
var x2 = 150;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(245,90,255,90);
line(250,105,260,105);
dx1 = (255-245)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (260-250)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 245;
var y1 = 90;
var x2 = 260;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
}sketch
/* eliana fleischer
efleisch
section e */
//GLOBAL VARIABLES
// these global variables will be used to be able to change the values while drawing different string arts
var dx1;
var dx2;
var dy1;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines1 = 50;
var numLines2 = 15;
var ax1 = 50;
var ax2 = 150;
var ay1 = 50;
var ay2 = 300;
var bx1 = 300;
var bx2 = 350;
var by1 = 300;
var by2 = 100;
function setup() {
createCanvas(400, 300);
background(124,158,129);
}
function draw() {
push(); // push will create the bold deges of the lines
stroke(0);
strokeWeight(4);
ax1 = floor(random(15,200)); // randomize x values for the two lines
ax2 = floor(random(15,200));
bx1 = floor(random(200,385));
bx2 = floor(random(200,385));
ay1 = floor(random(15,150)); // randomize the y values for the two anchor lines
ay2 = floor(random(150,285));
by1 = floor(random(150,285));
by2 = floor(random(15,150));
line(ax1, ay1, ax2, ay2); // anchor line A
line(bx1, by1, bx2, by2); // anchor line B
dx1 = (ax2-ax1)/numLines2; // creates dx and dy for the lines created divided by numLines
dx2 = (bx2-bx1)/numLines2;
dy1 = (ay2-ay1)/numLines2;
dy2 = (by2-by1)/numLines2;
var x1 = ax1; // set the starting points of the string art lines to the anchor line values
var y1 = ay1;
var x2 = bx1;
var y2 = by1;
line(15,15, 385, 15); // upper anchor line
line(15,285,385,285); // lower anchor line
var x3 = 15; // creates the initial changing x values
var x4 = 385;
var x5 = 15;
var x6 = 385;
dx3 = (385-15)/numLines1; // dx for the lines going to the left
dx4 = (15 - 385)/numLines1; // dx for the lines going to the right
pop();
for (var i = 0; i <= numLines1; i +=1){ // for loop making the background lines
stroke(243,204,113); // orange lines
line(15,15, x3, 285); // lines going to left
stroke(247,255,118); // yellow lines
line(385,15,x4,285); // lines going to the right
stroke(236,180,236); //purple lines
line(15,285,x5,15); //lines from the bottom going left
stroke(236,180,180); // pink lines
line(385,285,x6,15); // lines from the bottom going right
x3 += dx3; // changes the x values by the set dx
x4 += dx4;
x5 += dx3;
x6 += dx4
}
stroke(29,5,95);
strokeWeight(3)
for (var i = 0; i <= numLines2; i+=1){
line(x1, y1, x2, y2); // uses the randomly generated points to start lines
x1 += dx1; // chnages the values by the set dxs and dys
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
noLoop();
}
I think the most difficult part of this project for me was creating an interesting image. I did this by randomizing one of the string art shapes.
]]>These are my abstract butterflies.
sketch
]]>// Natalie Koch
// nataliek
// Section A
// Abstract Butterflies
var numLines = 400;
var c1 = ['pink', 'blue' , 'purple'] //color 1
var c2 = ['blue', 'red', 'yellow'] //color 2
var c3 = ['pink', 'green' , 'orange'] //color 3
var dx1 = 10*(150-50)/numLines;
var dy1 = 10*(300-50)/numLines;
var dx2 = 10*(350-300)/numLines;
var dy2 = 10*(100-300)/numLines;
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
function a (x1, y1, x2, y2,dx1, dy1, dx2, dy2, colorList) {
for (var i = 0; i <= numLines; i += 1) {
stroke(random(colorList))
line(x1, y1, x2, y2);
x1 += cos(i)*dx1*15;
y1 += sin(i)*dy1*15;
x2 += cos(i)*dx2*20;
y2 += sin(i)*dy2*20;
}
}
a(50,50,300,300,dx1,dy1,dx2,dy2, c1)
a(50,200,200,375,dx1,dy1,dx2,dy2, c2)
a(150,25,300,200,dx1,dy1,dx2,dy2, c3)
noLoop()
}sketch
]]>// Emily Franco
// efranco
// Section C
//num of string lines
var numLines = 50;
//base lines
var dx1;
var dy1;
var dx2;
var dy2;
//string lines
var x1;
var y1;
var x2;
var y2;
//counts sets of lines
var setCount = 0;
//line points
var lnx1;
var lny1;
var lnx2;
var lny2;
//colors
r = 0;
g = 0;
b = 0;
function setup() {
createCanvas(400, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
background ("white");
}
function draw() {
var halfW = width/2;
var halfH = height/2;
if (setCount == 0){
//-----first line set--------
lnx1 = 0;
lny1 = 0;
lnx2 = width/10;
lny2 = height-(height/12);
}else if (setCount == 1){
//-----second line set--------
lnx1 = width/10;
lny1 = height-(height/12);;
lnx2 = halfW;
lny2 = height-(height/7);
}else if (setCount == 2){
//-----third line set--------
lnx1 = halfW;
lny1 = height-(height/7);
lnx2 = width-(width/6);
lny2 = height-(height/2);
}else if (setCount == 3){
//-----fourth line set--------
lnx1 = width-(width/6);
lny1 = height-(height/2);
lnx2 = width-(width/3);
lny2 = 0;
}else if (setCount == 4){
//-----fifth line set--------
lnx1 = width-(width/3);
lny1 = 0;
lnx2 = width/2;
lny2 = height/8;
}else if (setCount == 5){
//-----fifth line set--------
lnx1 = width/2;
lny1 = height/8;
lnx2 = width/9;
lny2 = height/9;
}else if (setCount>5){
//stop looping
noLoop();
}
//generate random colors
r = random (255);
g = random (255);
b = random (255);
push();
noStroke();
//fill trangle between base lines
fill (r,g,b,100);
beginShape();
vertex (lnx1,lny1);
vertex (halfW,halfH);
vertex (lnx2,lny2);
endShape();
//draw base lines
line(halfW,halfH,lnx1,lny1);
line(halfW,halfH,lnx2,lny2);
pop();
//get position increment for string line
dx1 = (halfW-lnx1)/numLines;
dy1 = (halfH-lny1)/numLines;
dx2 = (lnx2-halfW)/numLines;
dy2 = (lny2-halfH)/numLines;
//reset string postions
x1 = lnx1;
y1 = lny1;
x2 = halfW;
y2 = halfH;
for (var i = 0; i<numLines; i+=1){
//inverted stroke color
stroke (255-r,255-g,255-b,150);
//draw string lines
line (x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
setCount += 1;
}
Clare Katyal, Section E
href=”https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/09/sketch-393.js”>sketchDownload
sketch
]]>var dx1;
var dy1;
var dx2;
var dy2;
var dxOne;
var dyOne;
var dxTwo;
var dyTwo;
var numLine = 50;
var numLineTwo = 40;
function setup() {
createCanvas(400, 300);
background(18, 77, 26);
strokeWeight(2);
// all lines two pixels wide
dx1 = (150-50)/numLine;
dy1 = (300-50)/numLine;
dx2 = (350-300)/numLine;
dy2 = (100-300)/numLine;
dxOne = (400 - 340)/numLineTwo;
dyOne = (200 - 0)/numLineTwo;
dxTwo = (50 - 220)/numLineTwo;
dyTwo = (80 - 0)/numLineTwo;
}
function draw() {
var x1 = 5;
var y1 = 115;
var x2 = 180;
var y2 = 175;
// x and y values for left shape and vert lines
for(i = 0; i <= numLine; i++) {
stroke(232, 221, 202);
line(x1, y1, x2, y2);
x1 += dx1 + 5;
y1 += dy1;
x2 += dx2 - 2;
y2 += dy2 - 4;
} // draw left shape, advance by one pixel
for(i = 0; i <= numLine; i+= 4) {
stroke(16, 46, 14);
line(x1, y1, x2, y2);
x1 += dx2 + 80;
y1 += dy1 + 120;
x2 += dx1;
y2 += dy2;
} // draw right side vert lines, advance by four pixels
var xOne = 120;
var yOne = 0;
var xTwo = 300;
var yTwo = 20;
// x and y values for orange shape
for(i = 0; i <= numLineTwo; i ++) {
stroke(122, 65, 15);
line(xOne, yOne, xTwo, yTwo);
xOne += dxOne;
yOne += dyOne;
xTwo += dxTwo;
yTwo += dyTwo;
} // draw orange shape
noLoop();
}
Graham Murtha
Section A
This is the “complimentary eye of the storm”. I used 4 different variations of a base string code, each with different stroke weights and stroke colors for more variation. The numlines is set to 25.
sketch
]]>// gmurtha Graham Murtha
// Section A
var dx1 = 0;
var dy1 = 0;
var dx2 = 0;
var dy2 = 0;
var numLines =25;
function setup() {
createCanvas(300, 400);
background(80,0,80); // dark purple
for(var a = 0; a <= 360; a += 80){ //a = angle
translate(width/2,height/2);
line(0,125,25,-75); // base line 1
line(25,25,125,0); //base line 2
dx1 = (25-0)/numLines; //calculates difference between each string
dy1 = (-75-125)/numLines; //calculates difference between each string
dx2 = (125-25)/numLines; //calculates difference between each string
dy2 = (0-25)/numLines; //calculates difference between each string
rotate(radians(a));
}
}
function draw() {
fill(255,255,200) // bright yellow
circle(width/2,height/2,25);
fill(80,0,80); //background color
circle(width/2,height/2,10);
translate(width/2,height/2);
stroke(255,255,255); //white
strokeWeight(1);
for(var a = 0; a <= 360; a += 30){ // 12 shape variations fit
var x1 = 125;
var y1 = 75;
var x2 = 75;
var y2 = 125;
for (var i = 0; i <= numLines; i ++) { //loops 25 times
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
rotate(radians(a));
}
stroke(255,255,100); //yellow
strokeWeight(3);
for(var a = 0; a <= 360; a += 45){ // 8 shape variations fit
var x1 = 125;
var y1 = 175;
var x2 = 175;
var y2 = 125;
for (var i = 0; i <= numLines; i ++) { //loops 25 times
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
rotate(radians(a));
}
stroke(200,0,200); //purple
strokeWeight(2);
for(var a = 0; a <= 360; a += 60){ //six shape variations fit
var x1 = 125;
var y1 = -125;
var x2 = 75;
var y2 = 75;
for (var i = 0; i <= numLines; i ++) { //loops 25 times
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
rotate(radians(a));
}
stroke(255,150,255); //bright purple
strokeWeight(1);
for(var a = 0; a <= 360; a += 90){ //four shape variations fit
var x1 = 0;
var y1 = 125;
var x2 = 125;
var y2 = 0;
for (var i = 0; i <= numLines; i ++) { //loops 25 times
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
rotate(radians(a));
}
}