Category: Section E

sketch

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

sketch

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

sketch

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project-04*/

var change = 5 // changing the lines position from one another (increments)

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

function draw() {
	
	
	for(var r=100; r < height; r+= change){ // starting at x position 100 and spreading height --> change is space between lines
		stroke(150,11,200);
		strokeWeight(.5);
		line(r, 0, width, r*.5);
		} // line goes along width, divides change by half

	//right side pattern reaching to bottom of canvas at 300	starting at y coordinate 100 from right side 

	for(var l=100; l < width; l+= change){
		stroke(90,112,6);
		strokeWeight(.5);
		line(l, 300, width, l *.3);
	}
	//overlaying previous to make curved design change

	for(var g=50; g < height; g+= change){
		stroke(75,154,22);
		strokeWeight(1);
		line(g, height,500, g);
	}
	//left side bottom --> turning at same point the top patter starts
	for(var h= 100; h<height; h+= change){ //100 is the starting value of change
		stroke(111,23,200);
		strokeWeight(.5);
		line(h, height, 0 ,h);
	}

	//overlaying left side bottom shape

	for(var j= 0; j<height; j += change){ //starts at 0 --> limit is height 
		stroke(68,112,115);
		strokeWeight(.5);
		line(j, width, 0, j);
		} 

	for(var m = 0; m < width; m+= change){
		stroke(100,78,150)
		strokeWeight(.5);
		line(m, 0, height,m)

	}
}


	
	
	

This project was fun to experiment with the different line patterns and textures you can create. For example, by overlapping sets of line you can create interesting shapes that look like after images and play with your eyes, which is what I experimented with on the green part of the project. It was also fun to see how shadows worked on the lines depending on the spacing set.