JihoonPark_project04

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-04: String Art

var i;
var j;
var k;
var l;
var space = 50; //space between starting points of lines
var countX = 9; //number of lines in X axis of a quarter
var countY = 7; //numver of lines in Y axis of a quarter
var boxW = 150; // width of a box
var speed = 1.3; 
var dir = 1;
var vertX = 0; // x coordinate of vertex
var vertY = 0; // y coordinate of vertex
var vertW = 0.5*boxW; // vertex limit

function setup() {
	createCanvas(640, 480, WEBGL);
	noCursor();

}

function draw() {
	background(255);
	
	
	vertX+=dir*speed;
	if (vertX>=vertW) {
		dir=-dir;
	} else if (vertX<=-vertW) {
		dir=-dir;
	}
	//x coordinate of vertex goes back and forth
	vertY+=dir*speed;
	if (vertY>=vertW) {
		dir=-dir;
	} else if (vertY<=-vertW) {
		dir=-dir;
	}
	
	
	for (var k = -countX; k < 0; k=k+1) {
		beginShape(LINES);
		vertex(k*space, -height, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//bottom edge left half lines

		beginShape(LINES);
		vertex(k*space, height, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//top edge left half lines
	}

	
	for (var  l= -countY; l < 0; l=l+1) {
		beginShape(LINES);
		vertex(-width, l*space, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//left edge bottom half lines
		
		beginShape(LINES);
		vertex(width, l*space, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//right edge bottom half lines

	}

	
	for (var i = 0; i < countX; i=i+1) {
		beginShape(LINES);
		vertex(i*space, -height, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//bottom edge right half lines
		
		beginShape(LINES);
		vertex(i*space, height, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//top edge right half lines
	}

	
	for (var  j= 0; j < countY; j=j+1) {
		beginShape(LINES);
		vertex(-width, j*space, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//left edge top half lines
		
		beginShape(LINES);
		vertex(width, j*space, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//right edge top half lines
	}
	
	
	//box rotates
	rotateX(frameCount*0.02);
	rotateY(frameCount*0.02);
	ambientMaterial(200);
	box(boxW, boxW, boxW);
	

	
}

I created lines that could be seen as controlling lines for a box to rotate. However, since the canvas had to be a 3d space, I had to use begin/end shape with vertices.