Month: September 2016

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-04

/////////////////////////////
// DECLARE VARS
/////////////////////////////
//canvas
var canvasWidth, canvasHeight, cx, cy, margin
//mouse
var xm, xy; //constrained mouseX and mouseY\
//color
var bgColor, nColor, hColor; //background, normal, and highlight colors

//Spiral
var r0, theta0; //initial values for recursive spiral

/////////////////////////////
// HELPER FNS
/////////////////////////////
function drawSpiralArt(r, theta) {
	//mouseX controls amount by which spiral lines are decimating
	//in length with each recursive call
	var reductionFactor = map(xm,0,canvasWidth,0,1);
	//mouseY controls rotational increment between strings in the
	//spiral. Varying this by numbers which are not factors of 2*pi
	//leads to different types of spirals. 
	var angleIncrement = int(map(xy, 0, canvasHeight, 1, 10));
	//get spiral points per call
	var p1x = cx + r*sin(theta);
	var p1y = cy + r*cos(theta);
	var p2x = cx - r*sin(theta);
	var p2y = cy - r*cos(theta);
	//draw grey strings
	stroke(nColor);
	line(0, 0, p1x, p1y); //top left to p1
	line(canvasWidth, 0, p1x, p1y); //top right to p1
	line(0, canvasHeight, p1x, p1y); //bottom left to p1
	line(canvasWidth, canvasHeight, p1x, p1y); //bottom right to p1
	line(0, 0, p2x, p2y); //top left to p2
	line(canvasWidth, 0, p2x, p2y); //top right to p2
	line(0, canvasHeight, p2x, p2y); //bottom left to p2
	line(canvasWidth, canvasHeight, p2x, p2y); //bottom right to p2
	//draw main strings; 
	stroke(hColor);
	line(p1x, p1y, p2x, p2y); //through center (core of spiral)

	//recursive call until base case is met
	if (r > 1) {
		drawSpiralArt(r*reductionFactor, theta + angleIncrement);
	}


}
/////////////////////////////
// RUN!
/////////////////////////////
function setup() {
    //init canvas vars
    canvasWidth = 640;
    canvasHeight = 480;
    cx = canvasWidth/2;
    cy = canvasHeight/2;
    margin = 30;
    //init color vars
    bgColor = color(255); //white
    nColor = color(136,136,136,35); //grey, semitransparent
    hColor = color(255,0,136); //fucia
    //init spiral vars
    r0 = canvasWidth/2
    theta0 = HALF_PI;
    //init canvas
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	background(bgColor);
	//recalculate mouseX, mouseY with constraints
	xm = constrain(mouseX, margin, canvasWidth-margin);
    xy = constrain(mouseY, margin, canvasHeight-margin);
    //draw spiral
	drawSpiralArt(r0, theta0);
}

I wanted to use trigonometry to create a series of points predicated on circular geometry and then connect the points to various other points across the canvas. I ended up using recursion to generate a central spiral. I then used the mouse position to control the degree to which the length of strings in the spiral decimates (the rate at which the strings spiral towards the center) and to control the rotational rate of the strings in the spiral, so that spirals of various character could be created.

bdarreff_project_04

//Brandon Darreff

//Section A 

//bdarreff@andrew.cmu.edu

//Project-04

var diam; //circle diameters 
var h; //ribbon flared ends control
var x; //horizontal ribbon driver
var y; //vertical ribbon driver
var sd = 40; //starting diameter of circles

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


function draw() {

	background(23, 51, 68);

	noFill();

	for(diam = sd; diam <= 260; diam *= 1.1) { //background circle left
		stroke(75);
		strokeWeight(1);
		ellipseMode(CENTER); //modify ellipse drawing origin 
		ellipse(width / 2.4, height / 2.667, diam, diam);
	}

	for(diam = sd; diam <= 250; diam *= 1.1) { //background circle right
		stroke(75);
		ellipse(width / 1.37, height / 1.44, diam, diam);
	}

	h = 50; //assign flared end control value

	for (y = 200; y <= 400; y += 10) {

		stroke(200, 91, 111); //vertical ribbon color backdrop
		strokeWeight(.5);
		bezier(y + 80, 0, h + 5, 575, 450, 280, y + 75, height);

		stroke(220);		
		strokeWeight(0.75);	//vertical ribbon white overlay
		bezier(y + 100, 0, h, 550, 500, 270, y + 10, height);
		h -= 15 //flared end multiplier
	}

	for (x = 50; x <= 250; x += 15) {

		stroke(200, 91, 111);	//horizontal ribbon color backdrop
		strokeWeight(0.35);
		bezier(0, x - 30, 125, 305, 950, 300, 0, x + 370);
		
		stroke(200);		//horizontal ribbon white overlay
		strokeWeight(0.25);
		bezier(0, x - 50, 125, 285, 950, 300, 0, x  + 350);
		h -= 12; //flared end multiplier
	}


	for(diam = sd; diam <= 230; diam *= 1.05) {	//white circle left
		stroke(255);
		strokeWeight(1);
		ellipse(width / 2.133, height / 2.783, diam, diam);
	}

	for(var diam = sd; diam <= 150; diam *= 1.05) {	//white circle right
		stroke(215);
		ellipse(width / 1.574, height / 1.471, diam, diam);
	}

}

With this project I explored using arrayed curves to mimic ribbons across the defined canvas. By focusing in on the intersection points of the two ribbons using ellipses, the intent was to create depth using tone and varying line weights.

It’s been hot for too long so I’m craving the sight of snow falling outside my window. Hence, my creation.

I coded this “blizzard” by creating my own “snow” function and using “for” loops in order to create the curves on the upper right and lower left corner that serve as my window frame. I think a difficult aspect of this project was getting the curves to look how I wanted and getting them to overlap in the corners. I’m quite pleased with the end result.

ijhong-04

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-01

//string star point size
var c = 10; 

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

function draw(){
	//midnight sky 
	background(0, 0, 52);
	//blizzard 
	for (var x = -75; x < width; x += 75){
		snow(x, 75);
		snow(x, 150); 
		snow(x, 225); 
		snow(x, 300); 
		snow(x, 375); 
	}
	//curve #1
	for (var a = 0; a < width; a += 5) {
		stroke(255);
		strokeWeight(1);
		line(a, 0, width, a); 
	}
	//curve #2
	for (var b = 0; b < height; b += 5) {
		stroke(150); 
		strokeWeight(1);
		line(b, 0, height - 100, b); 
	}
	//curve #3
	for (var c = 0; c < width; c += 5) {
		stroke(255);
		strokeWeight(2);
		line(c, 640, width - 640, c);
	}
	//curve #4
	for (var d = 0; d < height; d += 5) {
		stroke(150);
		strokeWeight(1); 
		line(d, 640, height - 640, d); 
	}

}

//draws all the elements that are being animated 
function snow(x, y) {
	push(); 
	translate(x, y);
	rotate(millis()/20); 
	push(); 
	angleMode(DEGREES); 
	stroke(150); 
	rotate(30); 
	line(100, 100, 25, 100);
	rotate(30); 
	line(100, 100, 175, 100);
	rotate(30); 
	line(100, 100, 100, 25);
	rotate(30);  
	line(100, 100, 100, 175);
	rotate(30);  
	line(100, 100, 75, 75);
	rotate(30);  
	line(100, 100, 125, 125);
	rotate(30);  
	line(100, 100, 125, 75);
	rotate(30);  
	line(100, 100, 75, 125); 
	stroke(255);
	strokeWeight(2); 
	fill(255); 
	rotate(20);
	ellipse(100, 100, 2 * c, 2 * c); 
	rotate(20); 
	ellipse(25, 100, c, c); 
	rotate(20); 
	ellipse(175, 100, c, c);
	rotate(20); 
	ellipse(100, 175, c, c);
	rotate(20); 
	ellipse(100, 25, c, c);
	rotate(20); 
	ellipse(75, 75, c / 2, c / 2); 
	rotate(20); 
	ellipse(125, 75, c / 2, c / 2); 
	rotate(20); 
	ellipse(125, 125, c / 2, c / 2);
	rotate(20);  	
	ellipse(75, 125, c / 2, c / 2); 
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	rotate(40); 
	ellipse(200, 200, c / 4, c / 4);
	pop();
	pop(); 
}