![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
function setup() {
createCanvas(400,300);
}
function draw() {
background(140);
for (var i = 0; i < 590; i++) {
var x1 = 0;
var x2 = i*width/30;
var y1 = i*height/59;
var y2 = height;
strokeWeight(0.7);
stroke(200, 103, 98);
line(x1, y1, x2+100, y2);
stroke(155,109,90);
line(x2, 0, x1*2, height-y1);
stroke(147,55,91);
line(width, height-y1, x2*2, y2);
stroke(46,56,64);
line(x2, 4, width, y1);
stroke(65,50,123);
line(width+200, height-190, x2-999, height);
stroke(200,85,45);
line(width/2,height/2, x2, y1);
}
}
Category: Project-04-String-Art
Project-04
sketch
//Nami Numoto
//mnumoto
//Section A
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var r = 0; //red
var g = 0; //green
var b = 0; //blue
function setup() {
createCanvas(400, 400);
background(200);
line(50, 50, 150, 300);
line(300, 300, 350, 100);
var r = random(0,255);
var g = random(0,255);
var b = random(0,255);
dx1 = (150-50)/numLines;
dy1 = (300-50)/numLines;
dx2 = (350-300)/numLines;
dy2 = (100-300)/numLines; //shape 1 (given)
ex1 = 2 * (150-50)/numLines;
ey1 = 2 * (300-50)/numLines;
ex2 = 2 * (350-300)/numLines;
ey2 = 2 * (100-300)/numLines; //shape 2
fx1 = 4 * (150-50)/numLines;
fy1 = 4 * (300-50)/numLines;
fx2 = 4 * (350-300)/numLines;
fy2 = 4 * (100-300)/numLines; //shape 3
}
function draw() {
var x1 = 50;
var y1 = 50;
var x2 = 300;
var y2 = 300;
stroke(r, 0, 0); //set the stroke colour to some shade of red
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
stroke(0, g, 0); //set the stroke colour to some shade of green
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ex1;
y1 += ey1;
x2 += ex2;
y2 += ey2;
}
stroke(0, 0, b); //set the stroke colour to some shade of blue
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += fx1;
y1 += fy1;
x2 += fx2;
y2 += fy2;
}
noLoop();
}I’m not sure why it’s showing up the way it is – baseline, I struggled a lot with this project (mostly technically).
The idea was to make a fractal of sorts by squaring (hence the doubling and quadrupling) the original shape. I also intended to make each segment a different shade of red, blue, and green, infinitely.
Any suggestions? I was going to do a loop, but I was running low on time so I simply did it manually three times.
Project-04-String-Art
Project-04: String Art
sketch-beansDownload
//Yeon Lee, Section C
//Project-04: String Art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numOfLines = 50;
var angle = 0;
function setup() {
createCanvas(400, 300);
background(244, 226, 116);
dx = width / numOfLines;
dy = height / numOfLines;
dx2 = 100 / numOfLines;
dy2 = 200 / numOfLines;
dx3 = -100 / numOfLines;
dy3 = -200 / numOfLines;
}
function draw() {
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = height;
var x3 = 0;
var y3 = 0;
var x4 = width;
var y4 = 0;
var x5 = 0;
var y5 = 0;
var x6 = 0;
var y6 = height / 3;
var x7 = width;
var y7 = 0;
var x8 = 0;
var y8 = 0;
var x9 = 300;
var y9 = 0;
var x10 = 400;
var y10 = 300;
var x11 = 300;
var y11 = 400;
var x12 = 400;
var y12 = 300;
//draw torquoise lines on the left bottom
for (var i = 0; i <= numOfLines; i ++) {
stroke(123, 169, 147);
line(x1, y1, x2, y2);
y1 += dy;
x2 += dx;
}
//draw pink lines on top right in the very back
for (var i = 0; i <= numOfLines; i ++) {
stroke(240,192,165);
line(x3, y3, x4, y4);
x3 += dx2;
y4 += dy2;
}
//draw purple lines on the left
for (var i = 0; i <= numOfLines; i ++) {
stroke(177, 131, 222);
line(x5, y5, x6, y6);
x5 += dx2;
y6 += dy2;
}
//draw light orange lines in the back
for (var i = 0; i <= numOfLines; i ++) {
stroke(255, 195, 153);
line(x7, y7, x8, y8);
x7 += dx2;
y8 += dy2;
}
//draw light yellow lines in the back
for (var i = 0; i <= numOfLines; i ++) {
stroke(255,245,153);
line(x7, y7, x8, y8);
x7 += dx2;
y8 += dy2;
}
//draw light green lines on top right
for (var i = 0; i <= numOfLines; i += 1) {
stroke(127, 255, 180);
line(x9, y9, x10, y10);
x9 += dx3;
y10 += dy3;
}
//draw blue lines on bottom right
for (var i = 0; i <= numOfLines; i ++) {
stroke(102,116,255);
line(x11, y11, x12, y12);
x11 += dx3;
y12 += dy3;
}
noLoop();
}I enjoyed playing around with variables to change the colors and shapes of the lines around. By overlapping lines on top of each other, one by one, I loved to mixture of colors and harmony it created among themselves.
Project-04
I made the first line art and thought it looked like a light coming down from the ceiling, so I built off that idea
Project 4: String Art
wpf-string-art
//Patrick Fisher Section B
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 300);
background(50);
fill(10);
rectMode(CENTER);
rect(200,150,250,250)
dx1 = (275-25)/numLines;
dy1 = (275-25)/numLines;
dx2 = (25-275)/numLines;
dy2 = (25-275)/numLines;
}
function draw() {
var x1 = 75;
var y1 = 25;
var x2 = 275;
var y2 = 275;
stroke(255,0,0,200);
for (var i = 0; i <= numLines; i += 1) { //crates x design that goes from upper left to bottom right
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = 375;
y1 = 25;
x2 = 75;
y2 = 275;
for ( i = 0; i <= numLines; i += 1) { //creates x design that goes from lower left to upper right
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += dy1;
x2 += -dx2;
y2 += dy2;
}
dx1 = (325-25)/numLines;
dy1 = (75-25)/numLines;
dx2 = (25-275)/numLines;
dy2 = (25-0)/numLines;
x1 = 75;
y1 = 25;
x2 = 325;
y2 = 75;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the blue pattern at the top
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = 325;
y1 = 75;
x2 = 75;
y2 = 25;
for ( i = 0; i <= numLines; i += 1) { //creates the second half of the top blue pattern
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += -dy1;
x2 += -dx2;
y2 += -dy2;
}
x1 = 325;
y1 = 175;
x2 = 75;
y2 = 250;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the botom blue pattern
line(x1, y1, x2, y2);
x1 += -dx1;
y1 += dy1;
x2 += -dx2;
y2 += dy2;
}
x1 = 75;
y1 = 250;
x2 = 325;
y2 = 175;
stroke(0,0,255,200);
for ( i = 0; i <= numLines; i += 1) { //creates the top half of the bottom blue pattern
line(x1, y1, x2, y2);
x1 += dx1;
y1 += -dy1;
x2 += dx2;
y2 += -dy2;
}
noLoop();
}I really struggled with this project, both creatively and technically. I had to take the sample code and finger with it mostly randomly to create anything that I was remotely satisfied with it.
Project 4: String Art
var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 20;
var numLines2 = 20;
var numLines3 = 20;
function setup() {
createCanvas(400, 300);
background(220);
line(100, 50, 300, 200); // top left triangle
line(100, 50, 150, 250);
dx1 = (100-100)/numLines1;
dy1 = (50-50)/numLines1;
dx2 = (300-150)/numLines1;
dy2 = (250-200)/numLines1;
line(350, 25, 200, 275); // top right triangle
line(350, 25, 50, 125);
dx3 = (350-350)/numLines2;
dy3 = (25-25)/numLines2;
dx4 = (200-50)/numLines2;
dy4 = (275-125)/numLines2;
line(100, 50, 50, 125); // connection lines
line(350, 25, 300, 200);
dx5 = (100-50)/numLines3;
dy5 = (125-50)/numLines3;
dx6 = (350-300)/numLines3;
dy6 = (200-25)/numLines3;
}
function draw() {
var x1 = 100; // top left triangle
var y1 = 50;
var x2 = 150;
var y2 = 250;
for (var i = 0; i <= numLines1; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 -= dy1;
x2 += dx2;
y2 -= dy2;
}
var x3 = 350; // top right triangle
var y3 = 25;
var x4 = 50;
var y4 = 125;
for (var j = 0; j <= numLines2; j += 1) {
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
var x5 = 100;
var y5 = 50;
var x6 = 350;
var y6 = 25;
for (var k = 0; k <= numLines3; k += 1) {
line(x5, y5, x6, y6);
x5 -= dx5;
y5 += dy5;
x6 -= dx6;
y6 += dy6;
}
noLoop();
}
I wanted to see if I could create something that resembled a stage without having a lot of shapes. I ultimately chose to focus on the floor and lights to create both the playing space and the audience that surrounds it.
Project 4: String Art
string art
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 lines = 120; //for the left & right strings
var lines2 = 100; //for the top-> bottom & left -> right strings
var lines3 = 20; //for center strings
function setup() {
createCanvas(400, 300);
background(220);
//left blue+green strings
line(0, 0, 0, 300); //initial line
line(0, 300, 400, 0); //ending line
dx1 = (0-0)/lines;
dy1 = (300-0)/lines;
dx2 = (400-0)/lines;
dy2 = (0-300)/lines;
//right blue+red strings
line(0, 300, 400, 0); //initial line
line(400, 0, 400, 300); //ending line
dx3 = 400/lines;
dy3 = -300/lines;
dx4 = 0/lines;
dy4 = 300/lines;
//top -> bottom strings
line(0, 0, 400, 0); //initial line
line(0, 300, 400, 300); //ending line
dx5 = 400/lines2;
dy5 = 0/lines2;
dx6 = 400/lines2;
dy6 = 0/lines2;
//left -> right strings
line(0, 0, 0, 300); //initial line
line(400, 0, 400, 300); //ending line
dx7 = 0/lines2;
dy7 = 300/lines2;
dx8 = 0/lines2;
dy8 = 300/lines2;
//center piece
dx9 = 100/lines3;
dy9 = 150/lines3;
dx10 = 100/lines3;
dy10 = 150/lines3;
}
function draw() {
//left -> right strings initial points
var x7 = 0;
var y7 = 0;
var x8 = 400;
var y8 = 300;
//draw left -> right strings
for (var i = 0; i <= lines2; i += 1) {
stroke(255, 95, 90); //red
line(x7, y7, x8, y8);
x7 += dx7;
y7 += dy7;
x8 -= dx8;
y8 -= dy8;
}
//top -> bottom strings initial points
var x5 = 0;
var y5 = 0;
var x6 = 400;
var y6 = 300;
//draw top -> bottom strings
for (var i = 0; i <= lines2; i += 1) {
stroke(255, 105, 0); //orange
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 -= dx6;
y6 -= dy6;
}
//left blue+green strings initial points
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 300;
//draw blue+green strings
for (var i = 0; i <= lines; i+= 1) {
stroke(0, random(50, 160), random(100, 200)); //pick random color from green & blue
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//right blue+red strings initial points
var x3 = 0;
var y3 = 300;
var x4 = 400;
var y4 = 0;
//draw blue+red strings
for (var i = 0; i <= lines; i+= 1) {
stroke(random(80, 150), 0, random(100, 200)); //pick random color from red & blue
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//center piece initial points
var x9 = 100;
var y9 = 150;
var x10 = 300;
var y10 = 150;
//draw center piece
for (var i = 0; i <= lines3; i += 1) {
stroke(225, 210, 225); //white
line(x9, y9, x10, y10);
x9 += dx9;
y9 += dy9;
x10 -= dx10;
y10 -= dy10;
}
noLoop();
}
I found it a bit challenging to visualize the way the strings would work in my head, and so the drafting part was quite difficult. However, I really liked how the strings overlapping created dimension in the piece.
Project-04-String-Art
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 300);
background(255, 243, 79);
}
function draw() {
//reference function
for(var i = 0; i < 200; i ++){
var x1 = 0;
var x2 = i*width/25;
var y1 = i*height/50;
var y2 = height;
strokeWeight (0.5); //set thickness of the line
stroke(13, 66, 22); // right green center of the butterfly
line(200+x1,y1,x2+100, y2);
stroke(13, 66, 22); // left green center of the butterfly
line(400-(200+x1),y1,400-(x2+100), y2);
stroke(138, 233, 255); // right blue center of the butterfly
line(200+x1,y1,x2+100, y2+50);
stroke(138, 233, 255); // left green center of the butterfly
line(400-(200+x1),y1,400-(x2+100), y2+50);
stroke(209, 102, 255);
line(350+x1,y1,x2+100, y2);
stroke(209, 102, 255);
line(400-(350+x1),y1,400-(x2+100),y2);
stroke("magenta");
line(x1,y1,x2,y2);
stroke("magenta");
line(x1,300-y1,x2,300-y2);
stroke("magenta");
line(400-x1,y1,400-x2,y2);
stroke("magenta");
line(400-x1,300-y1,400-x2,300-y2);
var x1 = 0;
var x2 = i*width/25;
var y1 = i*height/70;
var y2 = height;
stroke("orange");
line(x1,y2,x2,y1);
stroke("orange");
line(400-x1,y2,400-x2,y1);
}
noLoop();
}
Project 04: String Art
//Tim Nelson-Pyne
//tnelsonp
//Section C
//shape 1
var ax1;
var ay1;
var ax2;
var ay2;
//shape 2
var by1;
var bx1;
var by2;
var bx2;
//shape 3
var cy1;
var cx1;
var cy2;
var cx2;
var numLines = 2;
var angle = 0;
//controls green value
var g = 0;
var gMod = 0;
//controls blue value
var b = 0;
var bMod = 0;
function setup() {
createCanvas(400, 300);
background(0);
//shape 1
ax1 = (100)/numLines;
ay1 = (0)/numLines;
ax2 = (100)/numLines;
ay2 = (0)/numLines;
//shape 2
bx1 = (0)/numLines;
by1 = (0)/numLines;
bx2 = (0)/numLines;
by2 = (0)/numLines;
//shape 3
cx1 = (100)/numLines;
cy1 = (0)/numLines;
cx2 = (0)/numLines;
cy2 = (0)/numLines;
}
function draw() {
//if you hold down the mouse it makes the canvas rotate around your mouse position
if (mouseIsPressed == true){
translate(mouseX, mouseY);
rotate(radians(angle));
angle += 1;
}
//brings green levels up and down based on sin() graph
//maped between zero and 255
gMod += 0.01;
g = sin(gMod);
g = map(g, -1, 1, 0, 255);
//brings blue levels up and down based on cos() graph
//maped between zero and 255
bMod += 0.01;
b = cos(bMod);
b = map(b, -1, 1, 0, 255);
//set stroke color and weight
stroke(255, g, b);
strokeWeight(.25);
var x1 = min(mouseX, width);
var y1 = min(mouseY, 246);
var x2 = 0;
var y2 = 0;
//shape 1
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ax1;
y1 += ay1;
x2 += ax2;
y2 += ay2;
}
//green to zero for shape 2
g = 0;
stroke(255, g, b);
var x1 = width;
var y1 = map(mouseY, 0, height, 250, height);
var x2 = 0;
var y2 = map(mouseY, 0, height, 250, height);
//shape 2
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += bx1;
y1 += by1;
x2 += bx2;
y2 += by2;
}
//set blue to zero for shape 3 and return green to sin() based value
b = 0;
g = sin(gMod);
g = map(g, -1, 1, 0, 255);
stroke(255, g, b);
var x1 = min(mouseX, width);
var y1 = constrain(mouseY, 150, 246);
var x2 = width;
var y2 = 150;
//shape 3
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += cx1;
y1 += cy1;
x2 += cx2;
y2 += cy2;
}
}I chose to make some interactive string art. Moving the cursor around changes the drawing and clicking and dragging changes it even more. I also decided to incorporate shifting colors to make the drawing change a bit more over time.