## Project 4 rrandell

``````/* Rani Randell
rrandell@andrew.cmu.edu
Project 4
Section A */

function setup() {
createCanvas(400, 300);
background(210, 40, 230);
}

function draw() {

for(var i = -40; i < 600; i += 20){
strokeWeight(4);
stroke(200, 50, 180);
line(i, 150, 150, i);

}
for(var x = 0; x < 300; x += 15){
strokeWeight(2);
stroke(180, 20, 170);
line(x, 200, 100, x);
}
for(var y = 0; y < 400; y += 10){
strokeWeight(2);
stroke(170, 70, 190);
line(y, 0, 300, y);
}
for(var r = 60; r < 200; r += 5){
strokeWeight(.5);
stroke(210, 30, 150);
line(r + 6, 0, 400, r);
}
for(var q = 80; q < 300; q += 7){
strokeWeight(.1);
stroke(255, 0, 100);
line(q, 300, 5, q)
}
for(var e = 30; e < 600; e += 10){
strokeWeight(1)
stroke(250, 30, 200);
line(200, e, e, 100)
}

}
``````

For my project I wanted to see how shades of pink interacted with each other and how the curves can frame parts of the canvas.

## Tanvi Harkare – Project 04 – String Art

``````/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-04-String Art */

var R; //variables for random color for line
var G;
var B;

var x1 = 0; //starting points for location of lines
var x2 = 0;
var y1 = 0;
var y2 = 100;

var x3 = 25; //starting position for second set of lines
var x4 = 25;
var y3 = 25;
var y4 = 150;

var x5 = 50; //starting position for third set of lines
var x6 = 50;
var y5 = 50;
var y6 = 200;

var x7 = 75; //starting position for fourth set of lines
var x8 = 75;
var y7 = 75;
var y8 = 250;

var x1stepSize = 15; //increment values for each point
var x2stepSize = 5;
var y1stepSize = 0;
var y2stepSize = 10;

var x3stepSize = 20; //increment values for second set of lines
var x4stepSize = 10;
var y3stepSize = 0;
var y4stepSize = 10;

var x5stepSize = 25; //increment value for third set of lines
var x6stepSize = 15;
var y5stepSize = 0;
var y6stepSize = 10;

var x7stepSize = 20; //increment value for fourth set of lines
var x8stepSize = 10;
var y7stepSize = 0;
var y8stepSize = 10;

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

function draw() {
//curve starting from 0, 0
for(var i = 0; i < 50; i++){
curveChange = random(.35, 1);
changeColor();
stroke(R, G, B);
line(x1, y1, x2, y2);
x1 += x1stepSize;
x2 += x2stepSize;
y2 -= y2stepSize;
y2stepSize -= curveChange;
}

//curve starting from 25, 25
for(var i = 0; i < 50; i++){
curveChange = random(.35, 1);
changeColor();
stroke(R, G, B);
line(x3, y3, x4, y4);
x3 += x3stepSize;
x4 += x4stepSize;
y4 -= y4stepSize;
y4stepSize -= curveChange;
}

//curve starting from 50, 50
for(var i = 0; i < 50; i++){
curveChange = random(.35, 1);
changeColor();
stroke(R, G, B);
line(x5, y5, x6, y6);
x5 += x5stepSize;
x6 += x6stepSize;
y6 -= y6stepSize;
y6stepSize -= curveChange;
}

//curve starting from 75, 75
for(var i = 0; i < 50; i++){
curveChange = random(.35, 1);
changeColor();
stroke(R, G, B);
line(x7, y7, x8, y8);
x7 += x7stepSize;
x8 += x8stepSize;
y8 -= y8stepSize;
y8stepSize -= curveChange;
}
}

function changeColor(){
/* assigns different color values for every
line that is drawn in the draw() function */
R = random(0, 255);
G = random(0, 255);
B = random(0, 255);
}``````

I had a lot of fun with this project, especially in creating different ways to show the curves made through the string art. In my sketch, the color of each line is different and changes each time you run the code; I did this by creating my own function. Additionally, the curvature of the string art changes slightly to create a different effect ever time.

## Joanne Lee – Project 04

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-04

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

function draw() {

var leftX1 = 0;
var leftX2 = 0;
var leftY = height/40
var rightX1 = 400;
var rightX2 = 400;
var rightY = height/40;

// step sizes
var vertStep = height / 40;
var horizStep1 = width / 15;
var horizStep2 = height / 150;
var i = 0;

strokeWeight(0.1);

//bottom left curve loop
for (i = 0; i < 40; i ++) {
stroke(0,80,115,10);
line(leftX1, 300, leftX2, leftY);
// x-values move in opposite directions
leftX1 += horizStep1;
leftX2 -= horizStep2;
leftY += vertStep; // increase y2 value
}

// bottom right curve loop
for (i = 0; i < 40; i ++) {
stroke(38,128,167,15);
line(rightX1, 300, rightX2, rightY);
// x-values move in opposite directions
rightX1 -= horizStep1;
rightX2 += horizStep2;
rightY += vertStep; // increase y2 value
}

// code reset
leftX1 = 0;
leftX2 = 0;
leftY = 300 - vertStep;

// top left curve loop
for (i = 0; i < 40; i ++) {
stroke(38,128,167,15);
line(leftX1, 0, leftX2, leftY);
// x-values move in opposite directions
leftX1 += horizStep1;
leftX2 -= horizStep2;
leftY -= vertStep; // decrease y2 value
}

// code reset
rightX1 = 400;
rightX2 = 400;
rightY = 300 - vertStep;

// top right curve loop
for (i = 0; i < 40; i ++) {
stroke(130,175,195,40);
line(rightX1, 0, rightX2, rightY); // decrease rightY value
// x-values move in opposite directions
rightX1 -= horizStep1;
rightX2 += horizStep2;
rightY -= vertStep; // decrease y2 value
}
}``````

The most difficult part of this project was determine what kind of shape I wanted to make. However, ultimately I decided that I wanted to create something that has a bit of depth as well as looks like something that is opening up. I am happy with the results and hope to be able to create more complex results in the future.

## Nina Yoo- Project 04- String Art

``````/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-04*/

var change = 5 // changing the lines position from one another (increments)

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

}

function draw() {

for(var r=100; r < height; r+= change){ // starting at x position 100 and spreading height --> change is space between lines
stroke(150,11,200);
strokeWeight(.5);
line(r, 0, width, r*.5);
} // line goes along width, divides change by half

//right side pattern reaching to bottom of canvas at 300	starting at y coordinate 100 from right side

for(var l=100; l < width; l+= change){
stroke(90,112,6);
strokeWeight(.5);
line(l, 300, width, l *.3);
}
//overlaying previous to make curved design change

for(var g=50; g < height; g+= change){
stroke(75,154,22);
strokeWeight(1);
line(g, height,500, g);
}
//left side bottom --> turning at same point the top patter starts
for(var h= 100; h<height; h+= change){ //100 is the starting value of change
stroke(111,23,200);
strokeWeight(.5);
line(h, height, 0 ,h);
}

//overlaying left side bottom shape

for(var j= 0; j<height; j += change){ //starts at 0 --> limit is height
stroke(68,112,115);
strokeWeight(.5);
line(j, width, 0, j);
}

for(var m = 0; m < width; m+= change){
stroke(100,78,150)
strokeWeight(.5);
line(m, 0, height,m)

}
}

``````

This project was fun to experiment with the different line patterns and textures you can create. For example, by overlapping sets of line you can create interesting shapes that look like after images and play with your eyes, which is what I experimented with on the green part of the project. It was also fun to see how shadows worked on the lines depending on the spacing set.

## Project 04: String Art

``````/* Samantha Ho
Section E
sch1@andrew.cmu.edu
Project 04*/

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

}

function draw() {
background(240,240,240);
//back dark wave
strokeWeight(2);
stroke(0,0,255);
x1 = 30;
x2 = 40;
y1 = 400;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//light back wave
strokeWeight(2);
stroke('cyan');
x1 = 0;
x2 = 60;
y1 = 500;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//light thin wave
strokeWeight(2);
stroke('cyan');
x1 = 0;
x2 = 60;
y1 = 500;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//green horizon wave
strokeWeight(2);
stroke(0,230,230);
x1 = 0;
x2 = 400;
y1 = 150;
y2 = 100;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//red horizon wave
strokeWeight(.5);
stroke(0,230,230);
x1 = 0;
x2 = 400;
y1 = 500;
y2 = 100;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//sunrays
strokeWeight(2);
stroke('yellow');
x3 = 0;
x4 = -300;
y3 = 0;
y4 = 300;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 600);
y3 -= 15;
line(x3, y3, x4, y4);
}
//dark sunrays
strokeWeight(2);
stroke(200,200,0);
x3 = 0;
x4 = -200;
y3 = 0;
y4 = 300;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 600);
y3 -= 15;
line(x3, y3, x4, y4);
}
}``````

I made this because I was inspired by the quality of the “strings”. I wanted to make an entire moving picture with a horizon and everything. I found it difficult though to completely control the landscape. It may be due to the quality of the “material”, but conceptually it was challenging to wrap my head around the forms.

``````//Elizabeth Maday
//Section A
//Project 04

//big purple variables
var x1;
var y1;
var x2;
var y2;
//orange variables
var a1;
var b1;
var a2;
var b2;
// corner a variables
var c1;
var d1;
var c2;
var d2;
//corner b variables
var e1;
var f1;
var e2;
var f2;
//click variables
var jump;
var eyeSize;

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

function draw() {
background(0);
strokeWeight(0.75);

//big purple variables
var x1 = 25;
var y1 = height + 5;
var x2 = 380;
var y2 = 0;

//big purple web
for(i = 0; i < 25; i += .6) {
x1 += 5;
y1 -= 5;
x2 -= 4;
y2 += 0;
stroke('purple');
line(x1, y1, x2, y2);
}

//orange variables
var a1 = 50
var b1 = -40;
var a2 = width - 200;
var b2 = height + 20;

//orange web
for (i = 0; i < 37; i += .6) {
a1 -= 3;
b1 += 2;
a2 += 5;
b2 -= 0.5;
stroke(255, 85, 0);
line(a1, b1, a2, b2);
}

//corner a variables
c1 = 0;
d1 = height - 120;
c2 = 70;
d2 = height;

//corner a web
for (i = 0; i < 30; i += .5) {
c1 = 0
d1 = height - 120;
c2 -= 2;
d2 += 8;
strokeWeight(0.65);
stroke(0, 93, 68);
line(c1, d1, c2, d2);
}

//corner b variables
e1 = -40;
f1 = height - 90;
e2 = 105;
f2 = height;

//corner b web
for (i = 0; i < 30; i += .5) {
e1 += 1;
f1 += 2;
e2 = 105;
f2 += 5;
strokeWeight(0.65);
stroke(0, 93, 35);
line(e1, f1, e2, f2);
}

//jump variable
var jump = 0;
var eyeSize = 2.5;

if (mouseIsPressed) {
//stars
for (i = 0; i < 100; i++) {

fill('white');
textSize(5);
text('*', random(400), random(300));
}

//stars
for (i = 0; i < 100; i++) {
fill('purple');
textSize(12);
text('*', random(400), random(300));
}

var jump = 20;
var eyeSize = 4;
}

//spider variables
var spiderX = 242 + (jump * 1.5);
var spiderY = 235 + jump;
var bodyWidth = 24;
var bodyHeight = 20;
//spider legs left
noFill();
stroke(255);
arc(spiderX - bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX - bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX - bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX - bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI - QUARTER_PI, 0 - QUARTER_PI);
//spider legs right
noFill();
stroke(255);
arc(spiderX + bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX + bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX + bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
arc(spiderX + bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI + QUARTER_PI, 0 + QUARTER_PI);
//spider body
stroke(0);
fill(0);
ellipse(spiderX, spiderY, bodyWidth, bodyHeight);
//spider eyes
strokeWeight(eyeSize);
stroke(255);
point(spiderX - bodyWidth/4, spiderY);
point(spiderX + bodyWidth/4, spiderY);
//spider mouth
strokeWeight(1);
stroke(255);
line(spiderX - bodyWidth/6, spiderY + 3, spiderX + bodyWidth/6, spiderY + 3);

}``````  When I started looking at examples of string art, I immediately thought of a spider web. I liked that I got to integrate a Halloween theme into this project. Make sure to click the image!

## Xiaoying Meng- Project 04 String Art

``````var x1;//x for first circle
var y1;//y for first circle
var x2;//x for second circle
var y2;//y for second circle
var x3;//x for third circle
var y3;//y for third circle
var x4;//x for fourth circle
var y4;//y for fourth circle

function setup(){
createCanvas(400,300);
background(200);
}
function draw(){
angleMode(DEGREES);
//d is degree of the angle
//To change color for each quarter of the circle
for(var d=90;d<=180; d+=2){

x1=200+r*cos(d);
y1=150+r*sin(d);
x2=200+(r+40)*cos(d+50);
y2=150+(r+40)*sin(d+50);
x3=200+(r+80)*cos(d+10);
y3=150+(r+80)*sin(d+10);
x4=200+(r+120)*cos(d+50);
y4=150+(r+120)*sin(d+50);

//line between 1st and 2nd circle
strokeWeight(0.03);
stroke(255);
line(x2,y2,x1,y1);
//line between 3rd and 1st, 2nd circle
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);

//line between 4th circle and 1st, 2nd, 3rd circle
line(x3,y3,x4,y4);
line(x2,y2,x4,y4);
line(x1,y1,x4,y4);
}
for(var d=180;d<=270; d+=2){

x1=200+r*cos(d);
y1=150+r*sin(d);
x2=200+(r+40)*cos(d+50);
y2=150+(r+40)*sin(d+50);
x3=200+(r+80)*cos(d+10);
y3=150+(r+80)*sin(d+10);
x4=200+(r+120)*cos(d+50);
y4=150+(r+120)*sin(d+50);

//line between 1st and 2nd circle
strokeWeight(0.03);
stroke(0);
line(x2,y2,x1,y1);
//line between 3rd and 1st, 2nd circle
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);

//line between 4th circle and 1st, 2nd, 3rd circle
line(x3,y3,x4,y4);
line(x2,y2,x4,y4);
line(x1,y1,x4,y4);
}
for(var d=270;d<=360; d+=2){

x1=200+r*cos(d);
y1=150+r*sin(d);
x2=200+(r+40)*cos(d+50);
y2=150+(r+40)*sin(d+50);
x3=200+(r+80)*cos(d+10);
y3=150+(r+80)*sin(d+10);
x4=200+(r+120)*cos(d+50);
y4=150+(r+120)*sin(d+50);

//line between 1st and 2nd circle
strokeWeight(0.03);
stroke(120);
line(x2,y2,x1,y1);
//line between 3rd and 1st, 2nd circle
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);

//line between 4th circle and 1st, 2nd, 3rd circle
line(x3,y3,x4,y4);
line(x2,y2,x4,y4);
line(x1,y1,x4,y4);
}
for(var d=0;d<=90; d+=2){

x1=200+r*cos(d);
y1=150+r*sin(d);
x2=200+(r+40)*cos(d+50);
y2=150+(r+40)*sin(d+50);
x3=200+(r+80)*cos(d+10);
y3=150+(r+80)*sin(d+10);
x4=200+(r+120)*cos(d+50);
y4=150+(r+120)*sin(d+50);

//line between 1st and 2nd circle
strokeWeight(0.03);
stroke(230);
line(x2,y2,x1,y1);
//line between 3rd and 1st, 2nd circle
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);

//line between 4th circle and 1st, 2nd, 3rd circle
line(x3,y3,x4,y4);
line(x2,y2,x4,y4);
line(x1,y1,x4,y4);
}

}`````` I first saw this image on pinterest. It inspired me to create this string art around a center point in circles. I found out how to find the points on circles and worked my way through.

## PO4 – Alexander Chen

``````//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project 04

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

function draw() {
background(0);

var x = 0;
var y = 0;
var x1 = width/2;
var y1 = height/2;
var x2 = width/2;
var y2 = height/2;
var x3 = width
var y3 = height
var x4 = width/2;
var y4 = width/2;
//white curves
for (var i = 0; i < 50; i++) {

//BOTTOM RIGHT//
stroke('red');
//bottom right corner (bigger gaps)
line(x1, height, width, height - y1);

stroke(67, 21, 32);
//bottom right corner (smaller gaps)
line(x2, height, width, height - y2);

//TOP LEFT//
stroke('red');
//top left corner (bigger gaps)
line(width - x1, 0, 0, y1);

stroke(67, 21, 32);
//top left corner (smaller gaps)
line(width - x2, 0, 0, y2);

//MIDDLE "SPOTLIGHT"
stroke(255);
line(x3, 0, x, y2);

//TOP RIGHT CORNER//
//top right corner (smaller gaps)
stroke('red');
line(x4, 0, width, y4);

stroke(67, 21, 32);
//top right corner (bigger gaps)
line(x2, 0, width, y2);

x1 = x1*1.08;
y1 = y1*1.08;
x2 = x2*1.025;
y2 = y2*1.025;
x4 = x4*1.08;
y4 = y4*1.08;
}
}
``````

## cmhoward-project-04

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

function draw() {
background('black');

//bottom left half almond
strokeWeight(2);
stroke('violet');
x1 = 0;
x2 = 0;
y1 = 300;
y2 = 0;
for (var i = 0; i < 20; i += 1) {
//restrain to stop mouse at center of almond shapes
x1 += min(mouseX, 80);
y2 += 15;
line(x1, y1, x2, y2);
}
//bottom left light green color
strokeWeight(1);
stroke('lightgreen');
x1 = 0;
x2 = 0;
y1 = 300;
y2 = 0;
for (var i = 0; i < 80; i += 1) {
x1 += min(mouseX, 80);
y2 += 5;
line(x1, y1, x2, y2);
}
//pattern repeats around canvas
//topleft
strokeWeight(2);
stroke('violet');
x3 = 0;
x4 = 0;
y3 = 300;
y4 = 0;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 80);
y3 -= 15;
line(x3, y3, x4, y4);
}
strokeWeight(1);
stroke('lightgreen');
x3 = 0;
x4 = 0;
y3 = 300;
y4 = 0;
for (var i = 0; i < 80; i += 1) {
x4 += min(mouseX, 80);
y3 -= 5;
line(x3, y3, x4, y4);
}
//bottomright
strokeWeight(2);
stroke('violet');
x5 = 400;
x6 = 400;
y5 = 0;
y6 = 300;
for (var i = 0; i < 20; i += 1) {
//x5 -= 15;
x6 -= min(mouseX, 80);
y5 += 15;
line(x5, y5, x6, y6);
}
strokeWeight(1);
stroke('lightgreen');
x5 = 400;
x6 = 400;
y5 = 0;
y6 = 300;
for (var i = 0; i < 80; i += 1) {
//x5 -= 15;
x6 -= min(mouseX, 80);
y5 += 5;
line(x5, y5, x6, y6);
}
//top right
strokeWeight(2);
stroke('violet');
x7 = 0;
x8 = 400;
y7 = 0;
y8 = 0;
for (var i = 0; i < 20; i += 1) {
y8 += min(mouseX, 80);
x7 += 15;
line(x7, y7, x8, y8);
}
strokeWeight(1);
stroke('lightgreen');
x7 = 0;
x8 = 400;
y7 = 0;
y8 = 0;
for (var i = 0; i < 80; i += 1) {
y8 += min(mouseX, 80);
x7 += 5;
line(x7, y7, x8, y8);
}
}``````

i really enjoyed this project! it was quite a challenge beginning to understand for loops, but playing with these geometries reminds me of things i’ve done with parametric modeling software in my architecture classes. it’s interesting to see how specific concepts transfer between technologies.

i especially enjoyed animating the string art, as there are moments that are seemingly symmetrical and it creates a really beautiful reaction between the geometries.

## Anthony Ra – Project-04-String-Art

``````/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-04 */

var x1;
var x2;
var y1;
var y2;

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

}

function draw() {

/* drawing rectangles increasing */

for (var i = 0; i <= 500; i += 5) {

stroke(50);
strokeWeight(0.25);
line(i, 0, i, height);

}

for (var i = 0; i <= 375; i += 10) {

/* curve along the top-right corner */
/* least sloped curve */
stroke(168, 143, 225);
line(i, 0, width + i, i);
/* steeper curve */
stroke(168, 143, 200);
line(i, 0, width, i);
/* slopiest curve along top-right corner */
stroke(168, 143, 175);
line(i, 0, width - i, i);
/* reflection from the previous lines of code along y-axis */
stroke(213, 142, 165);
line(i, i, width - i, 0);
/* long curve along bottom-left corner */
stroke(295, 142, 165);
line(0, i, i, height);
/* long curve along top-left corner */
stroke(200, 125, 165);
line(i, 0, 0, height - i);
/* curves along the diagonal axis */
stroke(154, 89, 140);
line(i, i, 0, height - i);

/* curve symmetry along x-axis */
strokeWeight(0.25);
stroke(200, 50, 140);
line(width, height - i, -i, i);
line(width, i, -i, height - i);

/*
strokeWeight(0.25);
line(0, height - i, width, height);
line(0, height - i, width, 0);
*/
}

}
``````

The purpose of making all my strings a different shade of pink is for a calming effect for myself. Along with that is a bevy of symmetry along multiple axes; however some of these lines of code produces visually asymmetrical results. Combining those together, with an emotionally stressful week, this is a reminder for me that it id okay to be imperfect and to take my day to day life less seriously. Live my life.