Category: Uncategorized

jinheel1_project-04

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(640,480);
}

function draw() {
	background (0);

	//violin strings
	var neckX = 100; //starting position for neck of violin
	var bridgeX = 100; //starting position for bridge of violin
	var stringY = 0;
	var stringX1 = 10; //spacing for string near neck
	var stringX2 = 50; //spacing for string near bridge

	for (i = 0; i < 4; i += 1) { //draw four strings
		if (i == 0) {
			stroke("#87CEFA"); //sky blue "G" string
		} else if (i == 1) {
			stroke("#ADFF2F"); //light green "D" string
		} else if (i == 2) {
			stroke("#FFFF00"); //yellow "A" string
		} else if (i == 3) {
			stroke("#FFA500"); //orange "E" string
		}
		line(neckX,stringY,bridgeX+stringX2,height);
		stringX2 += stringX2; //spacing near bridge grows
		neckX += stringX1; //spacing near neck is constant
		//the difference in spacing creates a "zoom" effect
	}

	//violin bow
	var bowX = width;
	var bowY1 = 240; //y position at right edge
	var bowY2 = 280; //y position at left edge
	var bowY1step = 0.25; //smaller spacing for right edge
	var bowY2step = 0.75; //larger spacing for left edge

	stroke("#D2691E"); //brownish color for bow

	for (i = 0; i < 50; i += 1) { //relatively small spacing makes "solid" object
		line(bowX,bowY1,0,bowY2);
		bowY1 += bowY1step; //difference in spacing makes "zoom" effect
		bowY2 += bowY2step;
	}

	//violin bow hairs
	//same as bow, on slightly smaller scale
	var hairX = width; 
	var hairY1 = 265; 
	var hairY2 = 350; 
	var hairY1step = 0.15; 
	var hairY2step = 0.5; 

	stroke("#FFEBCD"); //almond color for bow hairs

	for (i = 0; i < 50; i += 1) {
		line(hairX,hairY1,0,hairY2);
		hairY1 += hairY1step;
		hairY2 += hairY2step;
	}
}

Originally I had planned to make two branching clusters of branching lines to simulate puppeteer strings, but felt that it lacked variety.

In the end, I opted to create a violin (which I played from elementary to high school) using the same technique I had in mind, but varying the spacing and positions of the “curves” to: a) draw the individual strings and overall bow and b) create a slanted perspective using an artificial “zoom” effect.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 04
*
*/

function setup() {
    createCanvas(640, 480);
}

function draw() {
	background(140, 205, 255);

	for (var i = 0; i < 320; i ++) {
		var n = (i * 100);
		stroke(252, 258, 192);
        strokeWeight(1);
    	line(width/2, height/2, 0 - n/2, n);
    	// ^ bottom right hand yellow lines
    	line(width/2, height/2, 640 + n/2, n);
    	// ^ bottom left hand yellow lines
    	line(width/2, 0, 0 - n/2, n);
    	// ^ top right hand yellow lines
    	line(width/2, 0, 640 + n/2, n);
    	// ^ top left hand yellow lines
    }
    for (var i = 0; i < 240; i = i + 10) {
    	stroke(252, 89, 83);
    	strokeWeight(2);
    	line(width/2, i, width/2 + i, height/2);
    	// upper right hand red-ish curve
    	line(width/2, height - i, width/2 + i, height/2);
    	// bottom right hand red-ish curve
    	line(width/2, i, width/2 - i, height/2);
    	// upper left hand red-ish curve
    	line(width/2, height - i, width/2 - i, height/2);
    	// bottom left hand red-ish curve

        strokeWeight(1.5);
    	line(width, 0, width/2 + i, height/2);
    	// upper right hand red-ish "triangle"
    	line(width, height, width/2 + i, height/2);
    	// bottom right hand red-ish "triangle"
    	line(0, 0, width/2 - i, height/2);
    	// upper left hand red-ish "triangle"
    	line(0, height, width/2 - i, height/2);
    	// bottom left hand red-ish "triangle"
    }
}

Although I feel like I learned a lot more about lines and loops, I still felt quite frustrated during this process and I feel like I still need to practice much more to be fully comfortable. The almost halo-like effect from the yellow lines wasn’t intentional at first, but after I figured out how to do it I actually ended up liking it.

While working on this project, I became very comfortable with the for() function in p5.js. I started off just writing random for() functions but then saw how easy it was to manipulate the distances and lengths and positions of my shapes and variables. I spent a little too long on this because I wanted to make an eye in the middle of the frame but it was fun!

CLICK ON THE EYE!

sketch

//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment-String Art


function setup() {
    createCanvas(640, 480);
   
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	background(220);
	fill('violet blue'); //randomcolors
	rect(0, 0, width, height); //background rectangle
	if (mouseIsPressed) {
	fill(255);
	strokeWeight(2);
	ellipse(width/2, height/2, 250, 250); //eyeball
	fill(0);
	ellipse(width/2, height/2, 100, 100); //pupil
	fill(255);
	ellipse(width/2+20, height/2-30, 10, 10);//whiteball
	strokeWeight(2);
	line(width/2-75, height/2-100, width/2+75, height/2-100); //top eyelid
	line(width/2-75, height/2+100, width/2+73, height/2+100); //bottom eyelid
	line(width/2-40, height/2-100, width/2-40, height/2-120); //eyelashes
	line(width/2, height/2-100, width/2, height/2-125);
	line(width/2+40, height/2-100, width/2+40, height/2-120);
	}
	
 	else {
 	strokeWeight(3);
 	fill(102,51,150);
	ellipse(width/2, height/2, 250, 250); //eyeball
	strokeWeight(3);
	line(195, 240, 444, 240); //eyelid
	line(220, 240, 180, 260); //eyelashes
	line(260, 240, 230, 280);
	line(380, 240, 410, 280);
	line(420, 240, 460, 260);
	for (var ln = 280; ln < 380 ; ln+=40){ //middle eyelashes
		line(ln, height/2, ln, height/2 + 50);
	}
	
	
	}
	strokeWeight(1)
	stroke(random(255), random(255), random(255));
	// for(var i = 1; i<640; i+=10){ //Makes a sequence of straight lines from the top left to the bottom right
	// line(i,50,50,i);	
	// }
	for(var e = 1; e < 640; e += 5){ //Makes a curve arching to the top left of the screen
	line(width-e, 50, 50, e);
	}
	for(var a = 1; a < 640; a += 10){ //Makes a curve arching to the top right 
	line(a, 50, width - 50, a);
	}
	for(var o = 1; o < 640; o += 10){ //Makes a curve arching to bottom right
	
	line(width-o, height -50, width - 50, o);
	}
	for(var p = 1; p < 640; p += 10){ //Makes a curve arching to the bottom left. 
	
	line(p, height - 50, 50, p);
	}

	
}
	//Previous curves that I decided to exclude

// 	for(var y = 1; y<640; y+=10){
// 		line(y,height-y, width-50,y);
// 	}
// 	for(var x = 1; x < 640; x+=5){
// 		line(width-x, height-x, 50, x);
// }