## Lan Wei-Project-04-String-Art

my-sketch.js
In the project I tried to create the sence of space by creating layers of different properties. And by adding the balls on the strings, I attempt to create a dynamic feeling in the still graphic.

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

function draw() {
//back lines
for (var y1 = 0; y1 < height; y1 += 7){
stroke(0, 0, 120);
strokeWeight(0.1);
line(0, y1, width, y1)
}

//draw the top-down curves
x1 = 0;
x2 = width;
y2 = 0;
for (var y1 = 0; y1 < height - 50; y1 += 10){
x2 -= 20;
stroke(150);
strokeWeight(0.1);
line(x1, y1, x2, y2);
}

//draw the first part of the curves
x1 = 0;
x2 = 0;
y2 = height;
for (var y1 = 0; y1 < height - 70; y1 += 10){
x2 += 40;
stroke(255);
strokeWeight(0.3);
line(x1, y1, x2, y2);
}

//draw the second part of the curves
x2 = width;
y2 = height - 50;
for (var y1 = height - 70; y1 < height + 100; y1 += 10){
y2 += 3;
stroke(255);
strokeWeight(0.5);
line(x1, y1, x2, y2);
}

//balls
fill(3, 168, 158);
noStroke();
ellipse(300, 215, 15, 15);

//draw the red curves
y1 = height;
y2 = height;
for (var x1 = 0; x1 < width; x1 += 10){
y2 -= 20;
stroke(150, 20, 0);
strokeWeight(0.5);
line(x1, y1, x2, y2);
}

//balls
fill(3, 168, 158);
noStroke();
ellipse(120, 200, 50, 50);
ellipse(30, 100, 30, 30);
ellipse(310, 90, 60, 60);
ellipse(420, 200, 100, 100);
}
``````

## Sophia Kim Project-04 String Art- Sec C

``````// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu
// Project-04-StringArt

var x1
var y1
var x2
var y2

function setup() {
createCanvas(400, 300);
var x1 = 400;
var y1 = 100;
var x2 = 50;
var y2 = 300;
}

function draw() {
background(0);
//white line
x1 = 600;
y1 = 0;
x2 = 500;
y2 = 200;

for (var i = 0; i < 150; i += 1) {
stroke(255)
line(x1, y1, x2, y2)
x1 -= 10
y2 += 10
}
//white 2 line
x1 = 0;
y1 = 0;
x2 = 600;
y2 = 5;

for (var i = 0; i < 150; i += 1) {
stroke(90)
line(x1, y1, x2, y2)
x2 -= 10
y1 += 50
}
// light yellow curve line
x1 = 200;
y1 = 600;
x2 = 400;
y2 = 0;

for (var i = 0; i < 100; i += 1) {
stroke(251, 255, 132)
line(x1, y1, x2, y2)
x1 -= 30
y2 += 7
}
// light blue curve line
x1 = 0;
y1 = 0;
x2 = 400;
y2 = 0;
for (var i = 0; i < 50; i += 1) {
stroke(148, 191, 255)
line(x1, y1, x2, y2)
x1 += 13
y2 += 10
}
// light green curve line
x1 = 350;
y1 = 0;
x2 = 0;
y2 = 0;

for (var i = 0; i < 70; i += 1) {
stroke(155, 255, 124)
line(x1, y1, x2, y2)
x1 -= 8
y2 += 10
}
//light red curve line
x1 = 500;
y1 = 300;
x2 = 0;
y2 = 400;

for (var i = 0; i < 100; i += 1) {
stroke(255, 124, 124)
line(x1, y1, x2, y2)
x1 -= 8
y2 -= 7
}
//blue curve line
x1 = 0;
y1 = 0;
x2 = 500;
y2 = 0;
for (var i = 0; i < 50; i += 1) {
stroke(11, 34, 255)
line(x1, y1, x2, y2)
x1 += 13
y2 += 10
}
//green curve line
x1 = 250;
y1 = 0;
x2 = 0;
y2 = 0;

for (var i = 0; i < 70; i += 1) {
stroke(60, 239, 5)
line(x1, y1, x2, y2)
x1 -= 8
y2 += 10
}
//red curve line
x1 = 400;
y1 = 300;
x2 = 0;
y2 = 400;

for (var i = 0; i < 100; i += 1) {
stroke(255, 63, 11)
line(x1, y1, x2, y2)
x1 -= 8
y2 -= 7
}
//yellow curve line
x1 = 400;
y1 = 600;
x2 = 400;
y2 = 0;

for (var i = 0; i < 100; i += 1) {
stroke(255, 252, 11)
line(x1, y1, x2, y2)
x1 -= 30
y2 += 7
}
}``````

For this project, I focused on using tones of green, blue, yellow, and red. At first, I had trouble with organizing how to make the curves and how to align it to the edges of the canvas, but after many trials, I was able to understand how each line point worked. I had a lot of fun making string art with code, and I hope to make more complex and creative works like this.

## Yoo Jin Shin-Project-04-String-Art

``````// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-04

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

function draw() {
background(0);

// two white-ish rectangles in background
fill(235);
noStroke();
rect(0, 220, width, 80);
rect(0, 0, width, 80);

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

var stepSize1 = 7.5;
var stepSize2 = 10;
var stepSize3 = 7;
var stepSize4 = 3;

// dark grey lines
for (x2 = 0; x2 < width; x2 += stepSize2) {
x1 = 0;
y1 = 0;
y2 = height;
stroke(70);
strokeWeight(1);
line(x1, y1, x2, y2);
}

// dark blue lines
for (x1 = 0; x1 < width; x1 += stepSize1) {
stroke(0, 0, 255);
strokeWeight(1.5);
line(x1, y1 += 2, x2 -= 10, y2 -= 1);
}

// dark pink lines
for (x1 = 0; x1 < width; x1 += stepSize1) {
stroke(255, 200, 255);
strokeWeight(2);
line(x1, y1 += 4.5, x2 += 14.9, y2 -= 1.2);
}

// white lines
for (x2 = 0; x2 < width; x2 += stepSize3) {
x1 = width;
stroke(255);
strokeWeight(1.5);
line(x1 -= 10, y1 -= 80, x2, y2 += 10);
}

// black circle in center background
fill(0);
noStroke();
ellipse(width / 2, height / 2, 180, 180);

// purple lines
for (y2 = 0; y2 < height; y2 += stepSize4) {
stroke(160, 50, 255);
strokeWeight(1.5);
line(x1 += 100, y1 += 30.5, x2 -= 5.6, y2);
}

noLoop();
}``````

It was interesting to experiment with the different types of lines and curves to create this string art. I think the sound-art article that I read recently about the Multiverse and black holes subconsciously influenced my design.

## Sean Meng – Project 04

``````//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 4

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

}

function draw() {

background(0);

//First upper eyelip
stroke(87, 250, 255)
for (var i = 0; i < 100; i +=1)
line(width/20 + i*10, 0, 0, height + i*(-10))
//Second upper eyelip
stroke(153, 50, 204)
for (var i = 0; i < 100; i +=1)
line(width/5 + i*10, 0, 0, height + i*(-10))
//First lower eyelip
stroke(0, 0, 205)
for (var i = 0; i < 100; i +=1)
line(width/20 + i*10, height, width, height + i*(-10))
//Second lower eyelip
stroke(255, 128, 128)
for (var i = 0; i < 100; i +=1)
line(width/5 + i*10, height, width, height + i*(-10))

//Pupil
fill(75, 0, 130)
ellipse(200, 150, 150, 150)

fill(0, 0, 128)
ellipse(200, 150, 100, 100)

}``````

In this project, I explore the coding method that I learned to draw complex shape. This “eye” was consisted of for eyelips that are drew with straight lines. But the way they overlapped create a delusion that there is a curve at the very end of them. And I use the bold colors to add aesthetic value to it.

## Jacky Tian’s project 04

``````

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

function draw() {
background(0)
for (var i = 0; i < 21; i++) {
stroke(255, 0, 0);
line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

stroke(255)
line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

stroke(0, 255, 0);
line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

stroke(0, 0, 255);
line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

stroke(150, 80, 0);
line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

// stroke(100, 0, 100);
// line(width/5+i*10, 0, 0, height/2+i*(-5));

}
}

``````

In this project, I created five sets of lines rotating along the sides to create five curves. The background is black so that it makes the colors more obvious.

## Sophie Chen – Project 04 – String Art

``````var x1 = 1;
var x2 = 1;
var y1 = 1;
var y2 = 1;

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

}

function draw() {
// bottom section
for (var i1 = 5; i1 < 200; i1 += 10){ // start i1 at 5
strokeWeight(1);
stroke(255, 0, 255); // purple
x1 = 0.2 - i1;
y1 = width - i1 - 50;
x2 = width;
y2 += 25 - i1 / 15; // end point of line should grow towards end
line(x1, y1, x2, y2);
}
// top section
for (var i2 = 0; i2 < 300; i2 += 1){ // start i2 at 0
strokeWeight(1)
stroke(255, 0, 100); // pink
x1 = 0;
y1 = width - i2 * 10;
x2 = i2 + height;
y2 = i2 / 50;
line(x1, y1, x2, y2);
}
// right section
for (var i3 = 20; i3 < 300; i3 += 10){ // start i3 at 20
strokeWeight(0.5)
stroke(255, 150, 100); // orange
x1 = 0 - i3 * 10;
y1 = height - i3 * 30;
x2 = i3 * 0.5 + 300;
y2 = i3 + height / 2;
line(x1, y1, x2, y2);
}
// left section
for (var i4 = 0; i4 < 300; i4 += 5){ // start i4 at 0
strokeWeight(1);
stroke(100, 100, 255); // blue
x1 = 0; // start at 0
y1 = height - i4;
x2 += width - i4; // lines concentration increase at the end
y2 += i4 * 2;
line(x1, y1, x2, y2);
}
}
``````

For this project, my goal was to create something more environmental and resembles landscapes/light through lines. I started by creating the bottom one first, and modified the rest based on the bottom one.  I was trying to create a sense of depth through these two-dimensional strings, and although it took me a while to understand what I was doing, it was definitely a learning process.

## Robert Oh-Project-04-String-Art

``````//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-04-String-Art

//assigning variables

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

function draw() {
background(0);
strokeWeight(1)
stroke(255, 120, 79)

//creating the top and bottom parts
for (var i = 1; i < 401; i+=10){
line(200, 26, i, 300);
line(200, 274, i, 0);
}

stroke(255, 142, 142)
//creating the left and right parts
for (var i = 1; i < 301; i+=10){
line(33, 150, 400, i);
line(367, 150, 0, i);
}

stroke(255);
//creating the top left and bottom right parts
for (var i = 1; i < 401; i+=12){
line(0, height-(i*3/4), i, 0)
line(i, 300, 400, height - i*3/4);

}

//creating the bottom left and top right parts
//I changed the increment here to be lower to show more depth
for (var i = 1; i < 401; i+=5){
line(0, i*3/4, i, 300);
line(i, 0, 400, i*3/4);
}
}``````

For this project, I originally started off just experimenting around. When I finally was able to create the “star” figure in the middle, I knew I wanted to add some more flair, and so I included the curves covering the edges of the screen.

## Alessandra Fleck – Project 04 String Art

``````//Name: Alessandra Fleck
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-04

function setup() {
createCanvas(480, 300);
strokeWeight(0.3);
}

function draw() {
background(0);

//blue back lines (no curve)
for (var i = 0; i < 400; i += 6) {
stroke(155,236,255);
line(i, 0, 1.5*i, i); //top right corner start
//line(x1,y1,x2,y2);
line(2*i, 300, width, i); //bottom left corner start
}

//secondary layer for color in light blue

for (var i = 0; i < width; i += 3) {
stroke(179,223,222);
strokeWeight(0.3);
line(i*2, 0, width, i); //top right curve with lines
line(i*2, 0, height * 2, i); //next curve next to curved line 1
line(i*2, 0, height * 1, i); //next curve next to curved line 2
line(i*2, 0, height * 0.75, i + 20); //next curve next to curved line 3
line(i*2, 0, height * 0.6, i + 20); //next curve next to curved line 3
line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
}

//third layer for color

for (var i = 0; i < width; i += 3) {
stroke(220,183,225);
strokeWeight(0.3);
line((i*2)+100, height, 300, i); //top right curve with lines

line((i*2)-100, height, height * 1, i); //next curve next to curved line 2

line((i*2)-100, 0, height * 0.6, i + 20); //next curve next to curved line 3
line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
}

}``````

For this project, I wanted to try understanding how to take a line and manipulative it into a twisting curve. To invert the curve and create the twist like form, I used the height variable in the x2 coordinate section and multiplied it by a decimal to decrease the dynamic scale of the curve. I hope to be able to use this technique for something more symmetrical next time.

## YiranXuan-Project04-String-Art

This string art is based on an physical string art example I found on the web that is similar to the yin-yang. At first I was curious what the mathematical formula would be to create such a pattern where the inner curve would curve much more sharply than the outer curve. This was explained when I watched the video, where the artist increments one side of the strings by two pegs around the circle, while the other side only by one peg. I also needed to solve the problem of overlapping; I wanted both colors to be cover each other only in specific areas, not just have one over the other. This was solved by drawing strings for both sides in the same loop iteration.

``````function setup() {
createCanvas(400, 300);
background('white');
angleMode(DEGREES);
}

function draw() {

var whitecenter = 210; //centers of the dots
var blackcenter = 90;

var whiteslow = 0; //each line consists of a "slow point" that travels around the circle at 1 degree per iteration
var whitefast = 180; //and a "fast point" which travels around the circle at 2 degrees per iteration;
var blackslow = 180;
var blackfast = 0;

//the dots will piggyback off of the progression of whitefast, as they are forming complete circles.
//They will beformed by lines that are offset by 15 degrees

var slowincrement = 3;
var fastincrement = 2*slowincrement;

for(whiteslow = 0; whiteslow <= 180; whiteslow += slowincrement){

stroke('red');
stroke('blue');

stroke('red');
stroke('blue');
//the updated slow points to the old fast points

blackfast = (blackfast+fastincrement)%360; //updating fast points; if they go over 360, they wind back at 1
whitefast = (whitefast+fastincrement)%360;

stroke('yellow');
stroke('cyan');
//the updated slow points to the updated fast points

blackslow += slowincrement; //updating slow point
}

}
``````

## Han Yu Project 04 String Art

``````// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-04

function setup() {
createCanvas(400, 300);
background(24, 146, 245);
}

function draw() {
// the pink background
for (var i = 0; i <400; i++) { //top
stroke(245, 41, 143);
line(100, 100, i, 0);
i += 10;
}

for (var j = 0; j <300; j++) { //left
stroke(245, 41, 143);
line(100, 100, 0, j);
j += 10;
}

for (var k = 0; k<300; k++) { //right
stroke(245, 41, 143);
line(300, 200, width, k);
k += 10;
}

for (var m = 0; m<400; m++) { //bottom
stroke(245, 41, 143);
line(300, 200, m, height);
m += 10;
}

// the yellow hourglass
for (var n = 0; n<400; n++) { //bottom
stroke(255, 249, 57);
line(width/2, height/2, n, height);
n += 10;
}

for (var n = 0; n<400; n++) { //top
stroke(255, 249, 57);
line(width/2, height/2, n, 0);
n += 10;
}

// the concentric circles
for (var c = 10; c<155; c++) {
stroke(245, 41, 143);
noFill();
ellipse(width/2, height/2, c, c);
c += 5;
}

}
``````

I was inspired by the Japanese zen garden and wanted to use a bunch of colors that contrast with each other. Making the background was the hardest part of this project because it’s tricky to make everything align. Overall, this project reinforces my skills of using for loops.