function setup() {
createCanvas(400, 300);
}
function draw() {
background(0);
//creating variables for starting point of lines (indicated by 1) and the ending points of the line (indicated by 2)
var x1;
var y1;
var x2;
var y2;
//creating the two circles in the center
noStroke();
fill(232, 140, 114);
ellipse(175, 125, 90, 90) //orange circle
//creating the black lines going through the orange circle
x1 = 70
y1 = 85;
x2 = 200;
y2 = 85
strokeWeight(6);
stroke(0);
for (i = 1; i < 10; i++) {
line(x1, y1, x2, y2);
y1 += 10 //the height of starting point is moving down
y2 += 10 //height of the ending point is moving down as well
x2 -= 10 // line is getting shorter with each iteration
}
noStroke();
fill(200, 42, 35);
ellipse(200, 150, 75, 75); // red circle
// creating the white lines crossing through the center
strokeWeight(1);
stroke(255, 255, 255);
x1 = 0;
y1 = 0;
x2 = 400;
y2 = 300;
for (i = 0; i < 41; i ++) {
line(x1, y1, x2, y2);
x1 += 10;
x2 -= 10;
}
//pink
stroke(246, 159, 255);
x1 = 400
y1 = 0
x2 = 0
y2 = 0
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
x1 -= 5;
y2 += 5;
}
//green
stroke(27,178, 141);
x1 = 400;
y1 = 0;
x2 = 400;
y2 = 300;
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 += 5;
x2 -= 5;
}
//yellow
stroke(232, 214, 114);
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 300;
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 += 5;
x2 += 5;
}
//blue
stroke(150, 173, 255);
x1 = 400
y1 = 300
x2 = 400
y2 = 0
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 -= 5;
x2 -= 5;
}
}
I wanted to create an abstract version of the sunsets I often see back home in LA. Because of the pollution that surrounds the city, the sunsets that overlooks the city is very colorful.
//variables of x and y placement of lines, to be changed under
//each for() statment
var x1;
var y1;
var x2;
var y2;
function setup() {
createCanvas(400, 300);
}
function draw() {
background(100, 100, 130);
// eye pupil
strokeWeight(0);
fill(40);
ellipse(width / 2 - 5, 215, 60, 60);
// eye highlight
fill(200);
ellipse(width / 2 + 10, 205, 15, 15);
// top lid
for( var g2 = 1; g2 < width; g2 += 5){ // group 2 lines
push();
stroke(155, 150, 195);
strokeWeight(1);
translate(20, -80);
rotate(radians(14));
x1 = 0;
y1 = width - g2;
x2 = height + g2;
y2 = g2;
line(x1, y1, x2, y2);
pop();
}
// bottom lid
for( var g1 = 1; g1 < width; g1 += 5){ // group 1 lines
push();
stroke(185, 180, 225);
strokeWeight(.5);
translate(40, height/2 - 30);
rotate(radians(2));
x1 = 0;
y1 = height - g1;
x2 = width - g1;
y2 = g1 ;
line(x1, y1, x2, y2);
pop();
}
// top
for( var g3 = 40; g3 < width; g3 += 5){ // group 3 lines
push();
stroke(195, 190, 235);
strokeWeight(1);
translate(10, -100);
rotate(radians(14));
x1 = 0;
y1 = width - g3;
x2 = height + g3;
y2 = g3;
line(x1, y1, x2, y2);
pop();
}
// head
for( var g4 = .5; g4 < width; g4 += 5){ //group 4 lines
push();
stroke(90, 70, 130);
strokeWeight(2);
translate(-170, -60);
rotate(radians(-25));
x1 = 20;
y1 = width - g4;
x2 = height + g4;
y2 = g4;
line(x1, y1, x2, y2);
pop();
}
}
This project was a bit difficult to wrap my head around, especially how the for() loops affected the line positions. I enjoyed manipulating the different parameters and seeing the various lines and arcs that could be created. My process was more one of discovery, as I played with the parameters to find inspiration. Once I had an idea, I went on from there to try and get more specific in what I wanted to achieve.
//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-04
var a;
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;
//assign all the coordinators
var d0 = 50;
var d1 = 80;
var d2 = 120;
var d3 = 160;
var d4 = 190;
//various diameters of curves
function setup() {
createCanvas(400, 300);
background(0);
angleMode(DEGREES);
}
function draw() {
for (a = -90; a <= 90; a += 5) {
x1 = 80 + d0 * cos(a);
y1 = 150 - d0 * sin(a);
x2 = 320 - d0 * cos(a);
y2 = 150 + d0 * sin(a);
x3 = 80 - d0 * cos(a);
y3 = 50 + d0 * sin(a);
x4 = 320 + d0 * cos(a);
y4 = 250 - d0 * sin(a);
stroke(100 + 3 * a);
line(x1, y1, x2, y2);
line(x3, y3, x4, y4);
}
noFill();
stroke(250);
ellipse(200, 150, 40, 40);
//first ring
for (a = 90; a <= 180; a += 2) {
x5 = 200 + d1 * cos(a);
y5 = 250 - d1 * sin(a);
x6 = 200 - d1 * cos(a)
y6 = 50 + d1 * sin(a);
stroke(0 + 2 * (a - 130));
line(x5, y5, x6, y6);
}
stroke(190);
ellipse(200, 150, 70, 70);
//second ring
for (a = 120; a <= 180; a += 2) {
x5 = 200 + d2 * cos(a);
y5 = 250 - d2 * sin(a);
x6 = 200 - d2 * cos(a)
y6 = 50 + d2 * sin(a);
//the x and y variables can be reused because the previous marks wouldn't disappear
stroke(0 + 2.5 * (a - 120));
line(x5, y5, x6, y6);
}
stroke(120);
ellipse(200, 150, 100, 100);
//third ring
for (a = 150; a <= 180; a += 1) {
x5 = 200 + d3 * cos(a);
y5 = 250 - d3 * sin(a);
x6 = 200 - d3 * cos(a)
y6 = 50 + d3 * sin(a);
stroke(50 + 4 * (a - 160));
line(x5, y5, x6, y6);
}
stroke(80);
ellipse(200, 150, 130, 130);
//fourth ring
for (a = 130; a <= 170; a += 1) {
x5 = 200 + d4 * cos(a);
y5 = 250 - d4 * sin(a);
x6 = 200 - d4 * cos(a)
y6 = 50 + d4 * sin(a);
stroke(50 + 4 * (a - 160));
line(x5, y5, x6, y6);
}
}
One of the rather stunning effects of string art is it’s using 1D lines to represent 2D surfaces. In this project, I’m willing to take the challenge of giving it the third dimension. To achieve this, I chose the monochrome color for the lines and assign them with gradient changing shades so as if they have depth into the canvas. On top of that, I also hooped the elegant flowing surfaces with rings that overlay on different layers of the drawing. In this case, we’re using 2D work space to create 3D rendering visual effects using merely different shades of gray.
/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-04
*/
var x; //x1 of the line
var y; //y1 of the line
var x2; //x2 of the line
var y2; // y2 of the line
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
//bottom right curve
for( var a = 0; a < 10; a += .03){
push();
//assign color n weight
stroke(255,255,161);
strokeWeight(0.003);
//draw from bottom left corner to top right corner
x = lerp(0, width, a);
y = height;
x2 = width;
y2 =lerp(height,0,a);
line(x, y, x2, y2);
pop();
}
//bottom left curve
for( var b = 0; b < 30; b += .03){
push();
stroke(250,170,113);
strokeWeight(0.003);
//draw from top left corner to bottom right corner
x = 0
y = lerp(0, height, b)
x2 = lerp(0, width, b);
y2 = height;
line(x, y, x2, y2);
pop();
}
//background curve from bottom left corner to top right corner
for(var e = 0; e < 10; e += 0.04){
push();
stroke(255, 244, 200);
strokeWeight(0.001);
//just testing what it looks like if all var are lerp
x = lerp(0, width / 4, e);
y = lerp(height, 3 * height / 4, e);
x2 = lerp(3 * width / 4, width, e);
y2 = lerp(0, height / 4, e);
line(x, y, x2, y2);
pop();
}
//draw the lighting from one point
for ( var c = 0; c < 200; c += 10 ){
push();
stroke(236, 138,82);
strokeWeight(0.09);
// the space and height of the end of the lines
//change consistently with + and -
var x = width - c
var y = height/ 2 + c
line(0, 0, x, y)
pop();
}
//draw the green lighting from a point
//the spread of the lines froms a curve
for (var d = 0; d < 30; d += 1){
push();
stroke(133,152,221);
strokeWeight(0.003);
//by using exponential function, the end of the lines
//do not have to be a straight cut
var x = Math.pow( d, 2);
var y = height/ 2 + Math.pow(d,2);
line( 3 * width / 4, 0, x, y)
pop();
}
}
I think it was very interesting testing out lerp. Playing around with line weight and color to create a foreground and background composition was fun. Although I did not carry that all the way. I did not aim to draw a certain image. I was deciding where the curves will be as the project develops. That’s why the composition is weird. If I would have to this again, I think I will try to sketch something first, then draw it.
/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-04-String-Art
*/
function setup() {
createCanvas(300, 400);
background(30);
//upper left curve
for (var a = 150; a > 0; a -= 5){
stroke(230);
line (150,50+a,a,0)
}
//lower right curve
for (var b = 150; b < height; b += 5){
stroke(230);
line (150,b-50,b,height);
}
push();
translate(150,200)
angleMode(DEGREES);
rotate(360);
//white bottom right curve
for (var a = 150; a > 0; a -= 5){
stroke(255);
line (150,50+a,a,0)
}
pop();
//white upper left curve
for (var a = 150; a > 0; a -= 5){
stroke(255);
push();
translate(150,200)
angleMode(DEGREES);
rotate(180);
line (150,50+a,a,0);
pop();
}
//background lines
for (var c = 0; c < 300; c += 5){
stroke(0);
line (c, a, c, height);
}
}
I found this assignment to be really challenging. For loops are definitely not easy to grasp. You would think you could easily manipulate positioning by just adding to x and y coordinates but it gets messy really fast.
function setup() {
createCanvas(400, 300);
background(0);
var x1 = 0;
var y1 = 0;
var x2 = 400;
var y2 = 300 / 2 - 50;
//blue strings
for (var i = 0; i < 40; i++) {
stroke(88 - (i * 10), 157 - (i * 7), 242 - (i * 5))
line(x1, y1, x2, y2)
x1 += 20
y2 += 10
}
x1 = 400;
y1 = 0;
x2 = 0;
y2 = 300 / 2 - 50;
//white strings
for (var i = 0; i < 40; i++) {
stroke(88 + (i * 2), 157 + (i * 7), 242 + (i * 5))
line(x1, y1, x2, y2)
x1 -= 20
y2 += 10
}
x1 = 0
y1 = 8
x2 = 400
y2 = 300 / 2 - 60
//filler strings between blue and white
for (var i = 0; i < 9; i++) {
stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
line(x1, y1, x2, y2)
y1 += 10
y2 -= 10
}
x1 = 400;
y1 = 0;
x2 = 0;
y2 = 300 / 2 - 50;
//pink strings
for (var i = 0; i < 40; i++) {
stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
line(x1, y1, x2, y2)
x1 -= 20
y2 += 10
}
x1 = 400
y1 = 300
x2 = 0
y2 = 300 / 2 + 50
//beige strings
for (var i = 0; i < 40; i++) {
stroke(195 - (i * 3), 149 - (i * 5), 167 - (i * 3))
line(x1, y1, x2, y2)
x1 -= 20
y2 -= 10
}
x1 = 0
y1 = 300
x2 = 400
y2 = 300 / 2 + 50
for (var i = 0; i < 40; i++) {
stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
line(x1, y1, x2, y2)
x1 += 20
y2 -= 10
}
x1 = 400
y1 = height - 8
x2 = 0
y2 = 300 / 2 + 60
//filler strings between pink and beige
for (var i = 0; i < 9; i++) {
stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
line(x1, y1, x2, y2)
y1 -= 10
y2 += 10
}
//eye-top
x1 = width / 2 - 20
y1 = height / 2 - 10
x2 = width / 2 + 20
y2 = height / 2 + 10
for (var i = 0; i < 21; i++) {
stroke(121 - (i * 5), 157 - (i * 3), 120 - (i * 3))
line(x1, y1, x2, y2)
x1 += 2
y2 += 1
}
//eye-bottom
x1 = width / 2 + 20
y1 = height / 2 + 30
x2 = width / 2 - 20
y2 = height / 2 + 10
for (var i = 0; i < 21; i++) {
stroke(121 + (i * 5), 157 + (i * 3), 120 + (i * 3))
line(x1, y1, x2, y2)
x1 -= 2
y2 -= 1
}
}
function draw() {
}
This project was the most challenging for me because of my lack of experience with string art, but I still wanted to challenge myself to draw something. This is my attempted drawing of an eye with gradient colors. The pupil looks a lot like the Pied Piper logo.
// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-04-string art
function setup() {
createCanvas(400, 300);
}
function draw() {
background(126, 25, 25);
// variable set up
var x1 = 0;
var x2 = 0;
var x3 = 0;
var x4 = 0;
var y1 = 0;
var y2 = 0;
var y3 = 0;
var y4 = 0;
// create a loop to draw many lines
for( var i = 0; i <= 150; i ++) {
// set new values for all the variables
x1 += i;
y1 += i;
x2 += 2 * i;
y2 += 2;
x3 += 20;
y3 -= i * 1/3;
x4 = 2 * i;
y4 = 2 * i;
// orange lines
stroke(246, 150, 14);
strokeWeight(3 / 4);
line(x1, y1, width, 70);
// white lines
stroke(255);
strokeWeight(1/2);
line(mouseX, y2, x2, height);
// light brown lines
stroke(142, 91, 53);
strokeWeight(2);
line(-mouseX + x3, y3, 400, 300);
// dark brown lines
stroke(49, 25, 7);
strokeWeight(0.5);
line(x4, y4, 210 - mouseX, 120);
// grey lines
stroke(68, 68, 68);
strokeWeight(3/4);
line(0, y2, x2, height);
}
}
I really enjoyed this project because it allowed me to experiment with different parameters to see what would happen. As a result, my string art came about almost accidentally as I manipulated the parameters to see what they would do.
//Jonathan Liang
//jliang2
//section A
function setup() {
createCanvas(400, 300);
}
function draw() {
//background
background(200);
for (var i = 1; i < 2400; i += 20) {
strokeWeight(4);
stroke('white');
line((i * .25), 0, (i * .25), 300);
}
//right eyebrow
for (var i = 1; i < 65; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(0, -15);
line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
pop();
}
for (var i = 1; i < 45; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(15, -19);
line((i) + 300, 38 + i / 1.5, (i * 1.25) + 300, 45 + i / 1.4);
pop();
}
//right eyelid
for (var i = 1; i < 50; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(90, 50);
scale(.7, .3);
line((i) + 250, 60 - i / 4, (i * 1.1) + 250, 50 - i / 4);
pop();
}
for (var i = 1; i < 50; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(90, 50);
scale(.7, .3);
line((i) + 300, 38 + i / 2, (i * 1.25) + 300, 45 + i / 2);
pop();
}
//left eyebrow
for (var i = 1; i < 45; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(5, 0);
line((i) + 50, 55 - i / 1.5, (i * 1.15) + 50, 54.5 - i / 1.75);
pop();
}
for (var i = 1; i < 65; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(0, -15);
line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
pop();
}
//left eyelid
for (var i = 1; i < 40; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(10, 65);
scale(.85, .3);
line((i) + 50, 55 - i * 1.5, (i * 1.35) + 50, 53 - i * 1.5);
pop();
}
for (var i = 1; i < 65; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(10, 50);
scale(.85, .3);
line((i) + 100, 45 + i / 4, (i * 1.05) + 100, 35 + i / 4);
pop();
}
for (var i = 1; i < 40; i += 1) {
line(i * 1.1+ 115, 30, 1.5*i + 115, 60 + i/1.1);
}
//right eye
for (var i = 1; i < 35; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(50, 60);
scale(.8, .65);
line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
pop();
}
for (var i = 1; i < 75; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(35, 79);
scale(.8,);
line((i * 1.25) + 300, (i + 30) / 3, (i) + 300, (i + 38) / 2.5);
pop();
}
for (var i = 1; i < 35; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(50, 60);
scale(.8, .65);
line((i) + 250, 60 - i / 4, (i) + 250, 50 - i / 4);
pop();
}
for (var i = 1; i < 20; i += 1) {
push();
translate(310, -25);
line(1.5*i, 135, .25*i, 150);
pop();
}
//right eyeball
for (var i = 1; i < 50; i += 1.05) {
strokeWeight(1);
stroke('black');
line(i + 280, i * .25 + 95, i + 280, 110);
}
for (var i = 1; i < 25; i += 1) {
strokeWeight(1);
stroke('white');
push();
translate(138, 60);
scale(.5, .5);
line(i + 280, i * .25 + 95, i + 280, 110);
pop();
}
strokeWeight(3);
stroke('white');
line(295, 100, 295, 100);
//left eye
for (var i = 1; i < 45; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(20, 67);
scale(.8);
line((i) + 50, 55 - i / 1.25, (i * 1.15) + 50, 54.5 - i / 1.5);
pop();
}
for (var i = 1; i < 65; i += 1) {
strokeWeight(1);
stroke('black');
push();
translate(10, 60);
scale(.8, .65);
line((i) + 100, 40 + i / 3, (i * 1.25) + 100, 34 + i / 3);
pop();
}
//left eyeball
for (var i = 1; i < 50; i += 1.05) {
strokeWeight(1);
stroke('black');
line(i + 80, 115 - i / 4, i + 80, 90);
}
strokeWeight(3);
stroke('white');
line(110, 100, 110, 100);
//mouth
var mouthColor = mouseX / (400 / 225);
for (var i = 1; i < 60; i += 1) {
strokeWeight(1);
stroke(255 - mouthColor, 25, 102);
push();
scale(.5, .5);
translate(400, 350);
line(i, 10, 3*i, 120);
line(3*i, 120, 1.2*i, 240);
pop();
}
for (var i = 1; i < 60; i += 1) {
strokeWeight(1);
stroke(255 - mouthColor, 25, 102);
push();
scale(.5, .5);
translate(405, 601.5);
rotate(PI, 3);
line(i, 10, 3*i, 120);
line(3*i, 120, 1.2*i, 240);
pop();
}
//pimple
strokeWeight(6);
stroke('black');
line(300, 200, 300, 200);
}
My project was heavily influenced by the Michael Kalish and Oyler Wu Collaborative art installation reALIze. reALIze was a pop art portrait of boxing legend Muhammad Ali completely made of of cords and punching bags (so basically a line drawing with varying line thicknesses.) I thought I could apply a similar concept to make a line drawing of Marilyn Monroe. I thought that using the concept of cross hatching and increasing the number of lines could give thickness to an object. Although I deem my portrait to be unsuccessful, it was still a valuable opportunity to learn how to use loops.
Oyler Wu reALIze installationinitial conceptual sketches exploring how to hatch
/*
Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-04
*/
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
//curves
for(var i=10; i <200; i+=15) {
stroke(13,238,255);
line(i,20,320, i);
}
for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(200,i,i, 300);
}
for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(25,i,i, 275);
}
for(var i=20; i <400; i+=15) {
stroke(13,238,255);
line(25,i,i, 275);
}
for(var i=10; i <700; i+=15) {
stroke(13,238,255);
line(i,100, 300,i);
}
var x = 0;
//red beams
for (var i = 0; i < 50; i++) {
//for loop allows me to control the width of the beam of lines starting from a certain point
stroke(255, 0, 0);
strokeWeight(1);
line(300, 300, x, mouseY); //moves on mouse Y
}
//blue beams
var j = 1;
for (var i = 4; i < 100; i++) {
j += 10;
stroke (0, 0, 255);
strokeWeight(2);
line(300, 300, mouseX, 0);// moves on mouse x
}
//green beams
var w = 100;
for (var i = 4; i < 200; i++) {
stroke (0,255,0);
strokeWeight(.5);
line(400, 0, w, mouseY);//moves on mouse Y
}
//yellow beams
var g = 100;
for (var i = 5; i < 20; i++) {
stroke (255,255,0);
strokeWeight(.5);
line(0, 0, mouseX, 275);// moves on mouse x
}
//purple beams
var m = 100;
for (var i = 5; i < 50; i++) {
stroke (252,141,255);
strokeWeight(.5);
line(25, 275, mouseX, mouseY);//moves on mouse Y and X
}
//rect border
noFill();
stroke(255);
rect(20,20,355,255)
stroke(0);
strokeWeight (4);
rect(0,0,400,300);
}
I made my work look like laser beams at a concert. I used for loops to create the beams of lines together as well as the series of lines that created curves.
/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-04
*/
function setup() {
createCanvas(300,400);
strokeWeight(2);
}
function draw(){
background (220,45,0);
//sun
fill(250);
ellipse(250,250,50,50);
//farthest web away(in background)
for (var e = 0; e < width; e += 8) {
stroke(150,150,150);
line(-5, e,e*1.5, 0);
}
//draw architectural structure
for (var a = 0; a < width; a += 5) {
stroke(0);
line(0, 0, a, 400);
}
for (var b = 0; b < width; b += 9) {
stroke(150,0,0);
line(300, 400, b * 1.5, 0);
//draw top web
}
for (var c = 0; c < width; c += 15) {
stroke(250);
line(250,75, c * 1.2, 1);
//draw web moving off screen
//hinting where spiderman is at
line(250,75,350,height);
}
//draw closest web that goes off screen
for (var d = 0; d < width; d += 20) {
stroke(250);
line(0,d*1.5, d*1.2, height);
}
}
This project was challenging yet rewarding to work through. I wanted to create something abstract, yet still derivative of something else. After playing around with the different line generations I could create, I noticed the spiderweb-like quality to the pattern. Playing off of this, I used functions described in class and in the brief to create an abstracted scene inspired by Spiderman, with lines that suggest him to have just swung off screen.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
