Month: September 2018

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.