## Minjae Jeong-Project-04-StringArt

``````//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-04

function setup() {
createCanvas(400,300);
background("black");
strokeWeight(0.1);
}

function draw() {
stroke(mouseX / 3, mouseY / 2, 255); //diagonal line
line(0, 300, 400, 0);

for (i = 0; i < 400; i += 10) { //top left purple curve
stroke(204, 153, 255);
line(0, 300 - i, i, 0);
}

for (i = 0; i < 400; i += 10) { //bottom right emerald curve
stroke(0, 255, 255);
line(i, 300, 400, 300 - i);
}

//center
for (i = 0; i <= 200; i += 20) { //1st quadrant
stroke(153, 102, 255);
line(200, i - 50, 200 + i, 150);
}
for (i = 0; i <= 200; i += 20){ //3rd quadrant
stroke(0, 255, 204);
line(i, 150, 200, 150 + i);
}
}
``````

First it was very confusing to integrate for loops and line function to create string art. But after understanding the basics, It was a very fun and creative project to work on.

## Jina Lee – Project 04

For this project, I played around with curves. I wanted to give a disco/chaotic vibe. When move your mouse around the canvas, the lines move making it seem more busy. I enjoyed this project because there were so many ways I could make my strings move. In the future, I want to add more curves to make it seem like a camera lens opening and closing with the string curve. This assignment helped me better understand how loops work and how I can manipulate curves with mouseX and mouseY.

``````//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-04

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

function draw() {
//background is random
red = random(255);
green = random(255);
blue = random(255);
background(red, green, blue, 40);

//lines that just go up and down
//as the mouse goes right the lines appear
for (var i = 0; i <= mouseX; i += 50) {
stroke(255);
strokeWeight(1);
line(i, 0, i, height + i);
}
//top left corner and bottom right
//it curves down
for (var a = 0; a < mouseX; a += 20) {
stroke(255);
strokeWeight(1);
line(a, 0, width, a);
}
//top right and left bottom
for (var b = 0; b < mouseY; b += 5) {
stroke(255);
strokeWeight(1);
line(width + b, b, width - b, height);
}
//left top and bottom right
for (var c = 0; c < mouseX; c += 20) {
stroke(255);
strokeWeight(1);
line(width - c, height, 0, height - c);
}
//left bottom and top right
for (var d = 0; d < mouseY; d += 5) {
stroke(255);
strokeWeight(1);
line(0, height - d, d, 0);
}
}
``````

## project 04 – Ilona Altman – string art

This project was very interesting. It really helped me to isolate the changes of the variables in terms of width and height.

``````//Ilona Altman
//iea

function setup() {
createCanvas(400, 300);
background(230,212,160);
}

function draw() {

for(var x = 0; x < 2*width; x = x + 5) {
line(x, width, 0, -1*x);
stroke(194,130,150);
}

for(var x = 0; x < 2*width; x = x + 5) {
line(x, width, height, -1*x);
stroke(180,200,190);
}

for(var x = 0; x < 2*width; x = x + 5) {
line(width - x, -1.5*height, 0, height-x);
stroke(230,212,160);
}

for(var x = 0; x < 2*width; x = x + 10) {
line(0.000000005*width + x, height, width, height - x);
stroke(180,120,140);
}

for(var x = 0; x < 2*width; x = x + 5) {
line(width - x, height, width, 0.000000001*width + x);
stroke(190,130,90);
}

}``````

## Sarah Kang – Project-04-String Art

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-04-string art

//for center diamond
var r = 255;
var g = 125;
var b = 175;

//for intermediate rays
var rr = 255;
var gg = 196;
var bb = 179;

//for corner rays
var rrr = 255;
var ggg = 253;
var bbb = 232;

//canvas
var W = 400;
var H = 300;

function setup() {
createCanvas(W, H);
}

function draw() {
background(0);

strokeWeight(1);

//center diamond
for (var i = 0; i < W; i += 10) {
line(i, H / 2, W / 2, H - (0.8 / i));
stroke(r, g, b);

line(W / 2, 0.8 / i, i, H / 2);
stroke(r, g, b);
}

//intermediate rays
for (var i = 0; i < W; i += 30) {
line(W, 0.8 / i, i, H / 2);
stroke(rr, gg, bb);

line(i, H / 2, W, H - (0.8 / i));
stroke(rr, gg, bb);

line(0, 0.8 / i, i, H / 2);
stroke(rr, gg, bb);

line(i, H / 2, 0, H - (0.8 / i));
stroke(rr, gg, bb);
}

//corner rays
strokeWeight(0.3);
for (var i = 0; i < W; i += 5) {
line(i, H / 2, mouseX, H - (0.8 / i));
stroke(rrr, ggg, bbb);

line(mouseX, 0.8 / i, i, H / 2);
stroke(rrr, ggg, bbb);

line(i, H / 2, W - mouseX, H - (0.8 / i));
stroke(rrr, ggg, bbb);

line(W - mouseX, 0.8 / i, i, H / 2);
stroke(rrr, ggg, bbb);
}
}

``````

It was pretty confusing at first when figuring out how the variables were controlled and changed, but after playing around with different options, I finally got the hang of the basic inputs.

## Charmaine Qiu – Project 04 – String Art

It was challenging to figure out how to efficiently create the lines on canvas. I tried to incorporate an interactive aspect towards my project, and it was fun to explore with. I now have a better understanding of how digital line art is created and the thought process behind it.

``````/* Charmaine Qiu
charmaiq@andrew.cmu.edu
Section E
Project 04 String Art*/
var spacing = 10;
var gcolor = 34;
var bcolor  = 140;
function setup() {
createCanvas(400, 300);
}

function draw() {
//set background color and initial stroke color of center piece
background(0, 13, 255);
stroke(255, gcolor, bcolor);
//the center piece that follows the mouse
for(var i = 0; i < 30; i++){
//changes color when moving between left and right side of canvas
if(mouseX > width / 3){
stroke(150, gcolor, bcolor);
}
if(mouseX > 2*width / 3){
stroke(50, gcolor, bcolor);
}
//the center piece drawn with a spacing variable that sets distance between two lines
line(mouseX, i * spacing, width, height / 2);
line(0, height / 2, mouseX, i * spacing);
}
//line art that surrounds the opposite corners of canvas
for(var i = 0; i < width; i += 10){
//yellow lines
stroke(218, 245, 66);
line(i, 0, width, i / 2);
line(0, i, i /2, width);
//orange lines
stroke(255, 162, 0);
line(width, height - i, width - i, 0);
line(0, i / 2, i, height);
}

}
``````

## YouieCho-Project-04-String-Art

``````/*Youie Cho
Section E
minyounc@andrew.cmu.edu
Project-04-String Art*/

var a = 7
var b = 1

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

function draw() {
background(255, 179, 0);
//pink sequence
for (var i = 1; i < 1000; i++) {
stroke(255, 69, 128);
line(mouseX, i * a* mouseY / 100, i * a, height / 4);
}
//black sequence and rotation
for (var i = 1; i <= 1000; i++) {
stroke(0);
rotate(90);
line(mouseX, i * mouseY / 50, i * b, height / 2);
}
//yellow sequence and rotation
for (var i = 1; i <= 1000; i++) {
stroke(255, 215, 69);
rotate(180);
line(mouseX, i * mouseY / 25, i * a, height / 1.333333);
}
//purple sequence and rotation
for (var i = 1; i <= 1000; i++) {
stroke(174, 82, 255);
rotate(270);
line(mouseX, i * mouseY / 10, i * b, height);
}
}
``````

I tried to play around with changing ratios to generate different sequences on different parts of the canvas, and rotated them to create complexity. I tried complex lines because interesting shapes and patterns can be generated through the movement of the mouse. It was challenging to understand the mechanism of loop, but I enjoyed how dynamic it could be.

## Crystal-Xue-Project-04

``````//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-04

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

function draw() {
background(0);
stroke(255);

//set constrain to the mouse location
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);

let from = color(102, 153, 161);
let to = color(180, 129, 187);
let interA = lerpColor(from, to, 0.15);
let interB = lerpColor(from, to, 0.3);
let interC = lerpColor(from, to, 0.45);
let interD = lerpColor(from, to, 0.6);
let interE = lerpColor(from, to, 0.75);

//draw string geometries
for (var i = 0; i <= width; i = i + 5 ) {

//background dynamic grid change along mouse indicator
stroke(from);
strokeWeight(0.7);
line(i, 3 / 4 * i, i, y);
stroke(interA);
line(i, 3 / 4 * i, x, 3 / 4 * i);

//first pair of curves controlled by mouse location
stroke(interB);
line(i, 3 / 4 * i, width - i, y);
stroke(interC);
line(i, 3 / 4 * i, x, height - 3 / 4 * i);

//second pair of curves opposite of the first pair
stroke(interD);
line(i, height - 3 / 4 * i, width - i, y);
stroke(interE);
line(i, height - 3 / 4 * i, x, 3 / 4 * i);

//drawing the mouse indicator
stroke(to);
strokeWeight(2);
line(x, y, width - i, y);
stroke(to);
strokeWeight(2);
line(x, y, x, height - 3 / 4 * i);

}
}
``````

For this project, I was trying to mimic the abstract motion of the weaving process. The mouse indicator is the shuttle of a loom which shows the x and y coordinate positions. The background grid is the unwoven warp yarn showing the parallel lines. And the curves are the woven pieces. I also experimented with the gradient colors in p5js.

## Jasmine Lee – Project 04 – String Art

``````//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-04 (String Art)

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

function draw() {
//black background
background(100);

//left(white) half of the vertical lines
for (var a = 0; a < 151; a += 2) {
stroke(255);
line(a, mouseY, a, mouseX);
}

//right(black) half of the vertical lines
for (var b = 150; b < 301; b += 2) {
stroke(0);
line(b, mouseY, b, mouseX);
}

//top(white) half of the horizontal lines
for (var c = 0; c < 201; c += 2){
stroke(255);
line(mouseX, c, mouseY, c);
}

//bottom(black) half of the horizontal lines)
for (var d = 200; d < 401; d += 2){
stroke(0);
line(mouseX, d, mouseY, d);
}

//creates white "plus" sign
fill(255);
rectMode(CENTER);
noStroke();
rect(150, 200, 20, 200);
rect(150, 200, 200, 20);

//creates the curves in all four corners
for (var e = 0; e < 300; e += 2) {
stroke(0);
//top left corner
line(0, height - e * 1.5, e, 0);
//bottom right corner
line(e, height, width, height - e * 1.5);
stroke(255);
//top right corner
line(width, height - e * 1.5, width - e, 0);
//bottom left corner
line(width - e, height, 0, height - e * 1.5);
}

}
``````

For my string art, I wanted to create a piece with a dystopian feeling to it. I decided to use a strong composition, with a symbol right in the middle of the canvas, and animated strings that give a disoriented effect to the viewer.

## CJ Walsh – Project 04 – String Art

``````// CJ Walsh
// Section D
// cjwalsh
// Project-04

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

function draw() {
background('#8B9AF2');
var xstep = 10;
var ystep = 10;
var xpos = 0;
var ypos = 0;
var x1, y1;

for (i=1; i < 40; i++) {
x1 = xpos + xstep;
y1 = ypos + ystep;

// center red
stroke('#991D3E');
line(200, y1, x1 + 140, height);
stroke('#991D3E');
line(width-200, y1, width - x1 - 140, height);

// center pink
stroke('#FFB3FF');
line(200, y1, x1 + 70, height);
stroke('#FFB3FF');
line(width-200, y1, width - x1 - 70, height);

// lower large curves
stroke('#1C4E7C');
line(0, y1, x1, height);
stroke('#1C4E7C');
line(width, y1, width - x1, height);

// center black
stroke('black');
line(width-200, y1, width - x1, height);
stroke('black');
line(200, y1, x1, height);

// top large curves
stroke("#090170");
line(0, y1, width-x1, 0);
line(x1, 0, width, y1);

// lines controlled by mouse movement
stroke("white");
line(x1, 0, mouseX, mouseY);
line(x1, height, mouseX, mouseY);

xpos = x1;
ypos = y1;
}
}
``````

For creating my string art I just wanted to experiment with different ways of making and placing my curves. After playing around with the placement and giving a lot of attention to symmetry, I wanted to create a fun color palette. I think it makes it a lot more fun to interact with. At the end of my project, I wanted to include an interactive movement element, so I added some lines that follow the position of the mouse and create fun patterns when overlapping with the curves.

## Margot Gersing – Project 04 – String Art

``````// Margot Gersing - Project 04 String Art - Section E - mgersing@andrew.cmu.edu

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

function draw(){
background(0);

// tight lines less wide
for (i = 0; i < 200; i += 5) {
stroke(i, 208, 247); //blue and purple
line(100, 450 + i, i, 10 - i); //'curve 1'
line(100, 450 + i, mouseX * 10, 10 - i); //'curve 1' with interaction
}
// tight lines
for (i = 0; i < 600; i += 5) {
stroke(i, 235, 225, i); //green to peach
line(0, i - 100, i, 400); //'curve 2'
line(0, i - 100, mouseX, mouseY); //'curve 2' with interaction
}

// wider lines
for (i = 0; i < 600; i += 15) {
stroke(230, 202, i); //purple to ochre
line(0, 100 - i, 400, 200 + i); //'curve 3'
line(0, mouseY / 5, 400, 200 + i); //'curve 3' with interaction

// curve 4
stroke(252, 186, i, i); //yellow to magenta
line(400, 200 - i, i - 400, i); //'curve 4'
line(400, mouseY - i, i - 400, i); //'curve 4' with interaction
}
}
``````

I enjoyed making this project. I decided that I wanted to incorporate my ‘i’ variable into more than just the creation of the lines. I experimented with replacing rgb values with ‘i’ and it created really interesting color shifts. I also decided to make a copy of each of the curves I made and make one of them interactive with mouseX and mouseY.