sketch

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.

version2

//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.

sketch.js

    //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.

sketch

/*
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.

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.

cathstringart

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// section C
// Project-04-String Art

var rightY = 0;
var leftY;
var colorV = 0;
var bgColor = 0;

function setup() {
	createCanvas(400, 300);
	leftY = height;
}

function draw() {
	background(200);
	// background gradient done w lines
	// the line gets smaller and lighter each round making a gradient
	for(var thickness = height*2; thickness > 1; thickness = thickness*.8) {
		strokeWeight(thickness);
		stroke(bgColor/2, bgColor/2, bgColor);
		line(0, height, width, height);
		bgColor += 20;
	}	
	strokeWeight(.5);
	// corner curves
	for(var topX = 0; topX < width; topX += 4) {
		// as one side of the line increases the other decreases making a curve
		// here are curves near the four corners
		stroke(colorV, 255-colorV, 150);
		line(width, leftY, width-topX, 0);
		line(topX, height, width, width-rightY);
		rightY += 4;
		line(topX, 0, 0, leftY);
		line(0, leftY, height-topX, height);
		leftY -= 4;
		// the color is continuously changing to make a gradient
		colorV += 2.5;
	}
	// yellow middle lines
	strokeWeight(1);
	stroke(253, 255, 137);
	for(var midX = 0; midX < width/2 - 50; midX += 8) {
		line(width/2 - 50, height/2 - 50 + midX, width/2 + 50 -midX, height/2 - 50);
		line(width/2 + 50, height/2 + 50 - midX, width/2 - 50 +midX, height/2 + 50);
	}
	noLoop();
}

I thought this was a really fun project! I didn’t do any sketches this time, instead I just experimented with different numbers to figure out how to make a curve and then added the curves in the middle. Additionally, I thought it would be cool to have a gradient background so I did this by using lines in a for-loop to follow the rest of the theme of the project.