## Random Lines Spin Art

I spent a good amount of time trying to decide what to make. I ended up moving certain variables to fit between my triangular sides to make a star or compass shape. To keep it more simple for myself to move between to points I made it so I was not changing all of the line points. I think this helped a lot to understand the movement of the lines better. I tried to condense my code as much as I could.

``````var dx1; //variables for each triangle 1= triangle 1, 2= triangle 2
var dy1;
var dy2;
var dx3;
var dy3;
var dx4;
var numLines = 35;
function setup() {
createCanvas(400, 400);
background(200);
dx1 = (100 - 50) / numLines; //x2-x1/number of lines(thick or thin)
dy1 = (300 - 100) / numLines; //makes line lenght shorter or longer(higher,lower)
dy2 = (100 - 300) / numLines; //some of the movement could stay the same or be switched
dx3 = (250 - 50) / numLines;
dy3 = (100 - 150) / numLines;
dx4 = (50 - 250) / numLines;
}

function draw() { //per 1 line stroke
strokeWeight(.5);
var x1 = 200; //variables for each line, every triangle has 2
var y1 = 0; //must have different variables or will not run correctly
var x2 = 150;//even if numbers are the same
var y2 = 200;
var x3 = 200;
var y3 = 400;
var x4 = 150;
var y4 = 200;
var x5 = 0;
var y5 = 200;
var x6 = 200;
var y6 = 250;
var x7 = 200;
var y7 = 250;
var x8 = 400;
var y8 = 200;

for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, 150, 200); //top tri, left line
x1 += dx1;
y1 += dy1;
line(x2, y2, 250, 200); //top tri right line
x2 += dx1;
y2 += dy2;
line(x3, y3, 150, 200); //bottom tri, left line
x3 += dx1;
y3 += dy2;
line(x4, y4, 250, 200); //bottom tri right line
x4 += dx1;
y4 += dy1;
line(x5, y5, 200, 250); //left tri, bottom line
x5 += dx3;
y5 += dy3;
line(x6, y6, 200, 150); //right tri, top line
x6 += dx3;
y6 += dy3;
line(x7, y7, 200, 150); //left tri, top line
x7 += dx4;
y7 += dy3;
line(x8, y8, 200, 250); //right middle tri, bottom line
x8 += dx4;
y8 += dy3;
}
noLoop();
}   ``````

## Project-04: String Art

string art
``````// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;

var numLines=20;
function setup() {
createCanvas(400,300);
background(224,255,255);
dy1 = 150 / numLines;
dx2 = 200 / numLines;
dy3 = -150 / numLines;
dx4 = -200 / numLines;
da1 = 200 / numLines;
ds2 = -150 / numLines;
ds3 = 150 / numLines;
da4 = -200 /numLines;
}

function draw() {
var x1 = 200;
var y1 = 0;
var x2 = 200;
var y2 = 150;
var x3 = 200;
var y3 = 300;
var x4 = 200;
var y4 = 150;

var a1 = 0;
var s1 = 0;
var a2 = 0;
var s2 = 150;
var a3 = 400;
var s3 = 150;
var a4 = 400;
var s4 = 300;

//right up string section, section 1
stroke(127,255,0);
for (var i = 0; i <= numLines; i += 1 ) {
line(x1,y1,x2,y2);
y1 += dy1;
x2 += dx2;
}
//left down string section, section 2
stroke(75,0,130);
for (var i = 0; i <= numLines; i += 1) {
line(x3,y3,x4,y4);
y3 += dy3;
x4 += dx4;
}

//right up corner
stroke(255,192,203);
for (var a = 0; a <= numLines; a += 1) {
line(a1,s1,a2,s2);
a1 += da1;
s2 += ds2;
}
//left down corner
stroke(255,99,71);
for (var a = 0; a <= numLines; a += 1) {
line(a3,s3,a4,s4);
s3 += ds3;
a4 += da4;
}
noLoop();
}

``````

While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.

## Project 4: String Art

sketch
``````//Anthony Pan
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14;

var numLines = 30;

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

//left of circle change in x/y
dx1 = (280)/numLines;
dy1 = (70)/numLines;
dx2 = (120)/numLines;
dy2 = (150)/numLines;

//top of circle change in x/y
dx3 = (150)/numLines;
dy3 = (320)/numLines;
dx4 = (90)/numLines;
dy4 = (90)/numLines;

//top right of circle change in x/y
dx5 = (250)/numLines;
dy5 = (20)/numLines;
dx6 = (40)/numLines;
dy6 = (150)/numLines;

//bottom of circle change in x/y
dx7 = (70)/numLines;
dy7 = (120)/numLines;
dx8 = (20)/numLines;
dy8 = (300)/numLines;

//right of circle change in x/y
dx9 = (220)/numLines;
dy9 = (120)/numLines;
dx10 = (80)/numLines;
dy10 = (150)/numLines;

//bottom right of circle change in x/y
dx11 = (240)/numLines;
dy11 = (10)/numLines;
dx12 = (105)/numLines;
dy12 = (60)/numLines;

//bottom left of circle change in x/y
dx13 = (80)/numLines;
dy13 = (140)/numLines;
dx14 = (20)/numLines;
dy14 = (300)/numLines;

}

function draw() {
//ellipse(width/2, height/2, 120, 120) //ellipse for reference

//left of circle start points
var x1 = 130;
var y1 = 5;
var x2 = 130;
var y2 = 230;

//top of circle start points
var x3 = 0;
var y3 = 100;
var x4 = 250;
var y4 = 85;

//top right of circle start points
var x5 = 273;
var y5 = 5;
var x6 = 273;
var y6 = 230;

//bottom of circle start points
var x7 = 125;
var y7 = 210;
var x8 = 400;
var y8 = 210;

//right of circle start points
var x9 = 220;
var y9 = 40;
var x10 = 280;
var y10 = 180;

//bottom right of circle start points
var x11 = 240;
var y11 = 10;
var x12 = 270;
var y12 = 210;

//bottom left of circle start points
var x13 = 160;
var y13 = 200;
var x14 = 230;
var y14 = 220;

for (var i = 0; i <= numLines; i += 1) {
stroke(220, 20, 0);

//creating red vortex around a circle

line(x1, y1, x2, y2); //left of circle
x1 += dx1;
x2 -= dx2;
y1 += dy1;
y2 -= dy2;

line(x3, y3, x4, y4); //top of cirlce
x3 -= dx3;
y3 -= dy3;
x4 += dx4;
y4 += dy4;

line(x5, y5, x6, y6); //top right of circle
x5 -= dx5;
y5 += dy5;
x6 += dx6;
y6 -= dy6;

line(x7, y7, x8, y8); //bottom of circle
x7 -= dx7;
y7 -= dy7;
x8 += dx8;
y8 += dy8;

line(x9, y9, x10, y10); //right side
x9 += dx9;
y9 -= dy9;
x10 -= dx10;
y10 += dy10;

line(x11, y11, x12, y12); //bottom right
x11 += dx11;
y11 -= dy11;
x12 -= dx12;
y12 += dy12;

line(x13, y13, x14, y14); //bottom left
x13 -= dx13;
y13 -= dy13;
x14 += dx14;
y14 += dy14;

}

noLoop();

}

``````

Creating a vortex around an ellipse using string art

## Project 04 String Art

``````//Alana Wu
//ID: alanawu
//Project 04: String Art

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

function draw ()
{
background (0);
if (mouseIsPressed)
{
background(255);
}
var x = 100;
var y = 100;
var dist = 50;
var num = 5;

push();
translate (100, 75);
//white lines
for (y = 10; y <= 300; y += 5)
{
strokeWeight (4);
stroke (255);
if (mouseIsPressed)
{
stroke(0);
}
line (x + dist, y + dist, min (mouseX, 300), y);
strokeWeight (.5);
dist -= 1;
}

//purple lines
for (y = 100; y <= 200; y += .5)
{
stroke (76, 0, 153);
if (mouseIsPressed)
{
stroke (179, 255, 102);
}
line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
dist -= 5;
}
//light blue lines
for (y = 200; y <= 400; y += 1)
{
stroke (0, 255, 255);
if (mouseIsPressed)
{
stroke (255, 0, 0);
}
line (min (mouseX, 400), y, x + dist, y + dist);
}
pop();

//white string in larger black circle
push ();
translate (300, 200);
fill (0);
if (mouseIsPressed)
{
fill (255);
}
//big circle
ellipse (0, 0, 250, 250);
for (var k = 0; k < 100; k+= 1)
{
stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
if (mouseIsPressed)
{
stroke (0);
for (var a = 0; a < 40; a ++)
{
line (2, 10, 10 + min (mouseX/10, 40), 30);

}
push ();
translate (-100, -50);
for (var a = 0; a < 40; a ++)
{
stroke (100, 255, 100);
line (2, 10, 10 + min (mouseX/10, 40), 30);

}
pop();
noFill();
ellipse (0, 0, 220, 220);
ellipse (0, 0, 180, 180);
ellipse (0, 0, 140, 140);
}
line (25, 0, 25 + mouseY/5, 45);
}
pop ();

//string in smaller black circle
push();
translate (180, 275);
fill (0);
if (mouseIsPressed)
{
fill (255);
}
//smaller circle
ellipse (0, 0, 100, 100);
for (var i = 0; i < 100; i ++)
{
stroke (204, 204, 255);
if (mouseIsPressed)
{
stroke (51, 51, 0);
for (var a = 0; a < 40; a ++)
{
line (15, 25, 15 + min (mouseX/10, 20), 35);
}
}
line (15, 5, mouseY/8, 30);
line (10, 5, min (mouseY, 50), min (mouseY, 50));
}
pop ();

if (mouseIsPressed)
{
push();
translate (mouseX, mouseY);
//circle of red string circles
for (var c = 0; c <= 8; c ++)
{
translate (20, 20);
for (var b = 0; b < 80; b ++)
{
stroke (255, 0, 0);