zeffii · November 15, 2011 17:10
diff --git a/gen_abstract.html b/gen_abstract.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Generative Abstraction</title>
 	<link rel="stylesheet" href="../css/style2.css">
 	<script type="text/javascript" src="../../lib/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas_gen">
 			
 	/*
 	regen of triangles.
 	this one is for you.
 	written by Dealga McArdle 2011, November.
 	MIT license
 	
 	12 Nov, exploration of paper.js
 	13 Nov, bug tracking. (rasterize didn't like negative coordinates)
 	
 	Milestsones.
 	[x] place n triangles within a circular boundary.
 	[x] random size 
 	[x] random gradient 
 	[x] random rotation
 	[x] include refresh button
 	[x] include add more
 	[x] include reverse content
 	[ ] add ability to save hires image.
 	
 	*/
 	
 	// Layer inits
 	var layerMain = new Layer();
 	var layerTop = new Layer();
 	
 	var pathRefreshButton = new Path();
 	var pathReverseButton = new Path();
 	var pathAddButton = new Path();
 	
 	var cornerSize = new Size(3,3);
 	var colorScheme;
 	var colorSchemeHue;
 	var degreeArray = [22.5, 45, 90, 120, 180, 270, -30, -60, -90];
 	var degreeOfSeparation;
 	
 	var buttonColor = '#777777';
 	var buttonColorOver = '#222222';
 	var buttonHeight = 14;
 	
 	function random_between(lowValue, highValue){
 		
 		/*
 		input:	two ints or floats
 		return:	int between the input range.
 		*/
 	
 		var valueSpread = highValue - lowValue;
 		var result = lowValue + (valueSpread * Math.random());
 		result = Math.round(result);
 	   
 		if (result < lowValue)
 			return lowValue;
 		else if (result > highValue)
 			return highValue;
 		else
 			return result;
 		
 		}
 		
 	// refactor candidate, merge with random_between	
 	function random_float_between(lowValue, highValue){

 		/*
 		input:	two ints or floats
 		return:	float between the input range.
 		*/
 		
 		var valueSpread = highValue - lowValue;
 		var result = lowValue + (valueSpread * Math.random());
 	   
 		if (result < lowValue)
 			return lowValue;
 		else if (result > highValue)
 			return highValue;
 		else
 			return result;
 		
 		}
 		
 		
 	function shift_degrees(cScheme, num){
 	
 		var result = cScheme + num;
 		if (result > 360)
 			result = result - 360
 		if (result < 0)
 			result = 0 - result
 		return result;
 	}
 		
 		
 	function get_random_gradient(){
 		
 		/*
 		return:	deterministic random colours, suitable for gradient
 		*/	
 			
 		var reds = [];
 		var greens = [];
 		var blues = [];
 		var r1, g1, b1, r2, g2, b2;
 						
 		if (colorScheme == 0){
 			reds = ['FA', 'FB', 'FC', 'FD', 'FE', 'FF'];
 			greens = ['00', '10', '34', '2A', 'A0', 'A0'];
 			blues = ['00', '10', '04', '2A', '40','6A'];
 			r1 = reds[random_between(0, reds.length-1)];
 			g1 = '00';
 			b1 = '00';
 			r2 = reds[random_between(0, reds.length-1)];
 			g2 = greens[random_between(0, greens.length-1)];
 			b2 = blues[random_between(0, blues.length-1)];
 		}
 		
 		if (colorScheme == 1){
 			reds = ['04', '1A', '2A', '31', '1C', '2F'];
 			greens = ['04', '10', '24', 'AA', '30', 'A5'];
 			blues = ['FA', 'FB', 'FC', 'FD', 'FE', 'FA', 'E3', 'FF'];
 			r1 = reds[random_between(0, reds.length-1)];
 			g1 = greens[random_between(0, greens.length-1)];
 			b1 = blues[random_between(0, blues.length-1)];
 			r2 = reds[random_between(0, reds.length-1)];
 			g2 = greens[random_between(0, greens.length-1)];
 			b2 = blues[random_between(0, blues.length-1)];		
 		}
 		
 		if (colorScheme == 2){
 			var colorSchemeHue2 = shift_degrees(colorScheme, degreeOfSeparation);
 			var grad1 = new HsbColor(colorSchemeHue, Math.random(), Math.random());
 			var grad2 = new HsbColor(colorSchemeHue2, Math.random(), Math.random());
 			return [grad1, grad2];
 		}
 		
 		var rgb1 = '#' + r1 + g1 + b1;
 		var rgb2 = '#' + r2 + g2 + b2;
 		return [rgb1, rgb2];
 	
 	}
 	
 	
 	function get16ths(){
 		/* 
 		return: an array with an iteration of 22.5 from 0 to 360
 		*/
 		var myArray = new Array();
 		var degrees = 0;
 		while (degrees < 360){
 			myArray.push(degrees);
 			degrees += 45/2;
 				
 		}
 		return myArray;

 	}
 		
 	
 	function draw_triangle(point){
 	
 		/*
 		Massively malnurished code
 		[todo] extend to a triangle creating class.
 		*/
 		
 		var segments = [new Point(50, 75), new Point(100, 25),new Point(150, 75)]; 
 		var myPath = new Path(segments);
 		myPath.strokeColor = 'black';
 		myPath.strokeColor.alpha = 0;
 		myPath.closed = true;
 		
 		var topLeft = new Point(50, 25);
 		var bottomLeft = new Point(50, 75);
 				
 		var myGradient = new Gradient(get_random_gradient());
 		myPath.fillColor = new GradientColor(myGradient, topLeft, bottomLeft);
 		
 		var rotateDegrees = get16ths();
 		var rotationalAmount = rotateDegrees[random_between(0, rotateDegrees.length)];
 		myPath.rotate(rotationalAmount);
 				
 		myPath.position = point;
 		myPath.scale(Math.random()*Math.random()*5);
 		myPath.opacity = Math.random();
 		
 	}

 	
 	
 	function draw_button(point, stringText, rect){
 	
 		var path = new Path.RoundRectangle(rect, cornerSize);
 		path.fillColor = buttonColor;
 		path.strokeColor = '#DDDDDD';
 		path.strokeWidth = 0.76;
 		
 		var textX = rect.x + (rect.width/2);
 		var textY = rect.y + rect.height - 3;
 		var text = new PointText(new Point(textX, textY));
 		text.content = stringText;
 		text.justification = 'center';
 		text.characterStyle = {
 			fillColor:'#EEEEEE',
 			fontSize: 9
 		};
 	
 		return path;
 		
 	}
 	
 	
 	function draw_buttons(){
 	
 		// this would be prettier if PointText included a method to determine px width of content
 		layerTop.activate();
 		var point = new Point(300, 670);
 				
 		// Refresh Button
 		var buttonRefreshText = "hit refresh";
 		var rectDim = new Size(76, buttonHeight);
 		var rectangle = new Rectangle(point-[11,11], rectDim);
 		pathRefreshButton = draw_button(point, buttonRefreshText, rectangle);
 	
 		// Reverse Button
 		var buttonReverseText = "reverse items";
 		point += [80, 0];
 		var rect2Dim = new Size(88, buttonHeight);
 		var rectangle2 = new Rectangle(point-[7,11], rect2Dim);
 		pathReverseButton = draw_button(point, buttonReverseText, rectangle2); 
 		
 		// Add Button
 		var buttonAddText = "add items";
 		point -= [162, 0];
 		var rect3Dim = new Size(69, buttonHeight);
 		var rectangle3 = new Rectangle(point-[7,11], rect3Dim);
 		pathAddButton = draw_button(point, buttonAddText, rectangle3); 
 		
 		layerMain.activate();
 		
 		
 	}
 	
 	
 	// mouse interaction:
 	
 	function onMouseDown(event){
 	
 		if (pathRefreshButton.hitTest(event.point) != null){
 			layerMain.removeChildren();
 			main();
 		}
 		if (pathReverseButton.hitTest(event.point) != null){
 			layerMain.reverseChildren();
 		}
 		if (pathAddButton.hitTest(event.point) != null){
 			main();
 		}
 				
 	}
 	
 	/*
 	// if experiencing slow interaction, comment out this function.
 	
 	function onMouseMove(event){
 	
 		if (pathRefreshButton.hitTest(event.point) != null){
 			pathRefreshButton.fillColor = buttonColorOver;
 		}
 		else 
 			pathRefreshButton.fillColor = buttonColor;
 		
 		if (pathReverseButton.hitTest(event.point) != null){
 			pathReverseButton.fillColor = buttonColorOver;
 		}
 		else 
 			pathReverseButton.fillColor = buttonColor;
 		
 		if (pathAddButton.hitTest(event.point) != null){
 			pathAddButton.fillColor = buttonColorOver;
 		}
 		else 
 			pathAddButton.fillColor = buttonColor;
 		
 		
 	
 	}
 	*/
 	
 		
 	function main(){
 		
 		colorScheme = random_between(0,2);
 		
 		if (colorScheme == 2){
 			colorSchemeHue = random_between(0,360);
 			degreeOfSeparation = degreeArray[random_between(0,degreeArray.length-1)];
 		}
 		
 		layerMain.activate();
 		var numTris = 20; 
 		for (i=0; i < numTris; i++){
 			var pointOnCircle = 2.0 * 3.141592 * Math.random();
 			var tRadius = random_between(0,200);
 			var posX = Math.sin(pointOnCircle) * tRadius;
 			var posY = Math.cos(pointOnCircle) * tRadius;
 			posX += 350;
 			posY += 350;
 			draw_triangle(new Point(posX, posY));
 		
 		}
 				
 		draw_buttons();
 		
 	}
 	
 	main();
 	
 	
 	</script>
 </head>
 <body>
 	<canvas id="canvas_gen" width="700" height="700"></canvas>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Generative Abstraction</title>
	<link rel="stylesheet" href="../css/style2.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas_gen">

	/*
	regen of triangles.
	this one is for you.
	written by Dealga McArdle 2011, November.
	MIT license

	12 Nov, exploration of paper.js
	13 Nov, bug tracking. (rasterize didn't like negative coordinates)

	Milestsones.
	[x] place n triangles within a circular boundary.
	[x] random size
	[x] random gradient
	[x] random rotation
	[x] include refresh button
	[x] include add more
	[x] include reverse content
	[ ] add ability to save hires image.

	*/

	// Layer inits
	var layerMain = new Layer();
	var layerTop = new Layer();

	var pathRefreshButton = new Path();
	var pathReverseButton = new Path();
	var pathAddButton = new Path();

	var cornerSize = new Size(3,3);
	var colorScheme;
	var colorSchemeHue;
	var degreeArray = [22.5, 45, 90, 120, 180, 270, -30, -60, -90];
	var degreeOfSeparation;

	var buttonColor = '#777777';
	var buttonColorOver = '#222222';
	var buttonHeight = 14;

	function random_between(lowValue, highValue){

	/*
	input: two ints or floats
	return: int between the input range.
	*/

	var valueSpread = highValue - lowValue;
	var result = lowValue + (valueSpread * Math.random());
	result = Math.round(result);

	if (result < lowValue)
	return lowValue;
	else if (result > highValue)
	return highValue;
	else
	return result;

	}

	// refactor candidate, merge with random_between
	function random_float_between(lowValue, highValue){

	/*
	input: two ints or floats
	return: float between the input range.
	*/

	var valueSpread = highValue - lowValue;
	var result = lowValue + (valueSpread * Math.random());

	if (result < lowValue)
	return lowValue;
	else if (result > highValue)
	return highValue;
	else
	return result;

	}


	function shift_degrees(cScheme, num){

	var result = cScheme + num;
	if (result > 360)
	result = result - 360
	if (result < 0)
	result = 0 - result
	return result;
	}


	function get_random_gradient(){

	/*
	return: deterministic random colours, suitable for gradient
	*/

	var reds = [];
	var greens = [];
	var blues = [];
	var r1, g1, b1, r2, g2, b2;

	if (colorScheme == 0){
	reds = ['FA', 'FB', 'FC', 'FD', 'FE', 'FF'];
	greens = ['00', '10', '34', '2A', 'A0', 'A0'];
	blues = ['00', '10', '04', '2A', '40','6A'];
	r1 = reds[random_between(0, reds.length-1)];
	g1 = '00';
	b1 = '00';
	r2 = reds[random_between(0, reds.length-1)];
	g2 = greens[random_between(0, greens.length-1)];
	b2 = blues[random_between(0, blues.length-1)];
	}

	if (colorScheme == 1){
	reds = ['04', '1A', '2A', '31', '1C', '2F'];
	greens = ['04', '10', '24', 'AA', '30', 'A5'];
	blues = ['FA', 'FB', 'FC', 'FD', 'FE', 'FA', 'E3', 'FF'];
	r1 = reds[random_between(0, reds.length-1)];
	g1 = greens[random_between(0, greens.length-1)];
	b1 = blues[random_between(0, blues.length-1)];
	r2 = reds[random_between(0, reds.length-1)];
	g2 = greens[random_between(0, greens.length-1)];
	b2 = blues[random_between(0, blues.length-1)];
	}

	if (colorScheme == 2){
	var colorSchemeHue2 = shift_degrees(colorScheme, degreeOfSeparation);
	var grad1 = new HsbColor(colorSchemeHue, Math.random(), Math.random());
	var grad2 = new HsbColor(colorSchemeHue2, Math.random(), Math.random());
	return [grad1, grad2];
	}

	var rgb1 = '#' + r1 + g1 + b1;
	var rgb2 = '#' + r2 + g2 + b2;
	return [rgb1, rgb2];

	}


	function get16ths(){
	/*
	return: an array with an iteration of 22.5 from 0 to 360
	*/
	var myArray = new Array();
	var degrees = 0;
	while (degrees < 360){
	myArray.push(degrees);
	degrees += 45/2;

	}
	return myArray;

	}


	function draw_triangle(point){

	/*
	Massively malnurished code
	[todo] extend to a triangle creating class.
	*/

	var segments = [new Point(50, 75), new Point(100, 25),new Point(150, 75)];
	var myPath = new Path(segments);
	myPath.strokeColor = 'black';
	myPath.strokeColor.alpha = 0;
	myPath.closed = true;

	var topLeft = new Point(50, 25);
	var bottomLeft = new Point(50, 75);

	var myGradient = new Gradient(get_random_gradient());
	myPath.fillColor = new GradientColor(myGradient, topLeft, bottomLeft);

	var rotateDegrees = get16ths();
	var rotationalAmount = rotateDegrees[random_between(0, rotateDegrees.length)];
	myPath.rotate(rotationalAmount);

	myPath.position = point;
	myPath.scale(Math.random()Math.random()5);
	myPath.opacity = Math.random();

	}



	function draw_button(point, stringText, rect){

	var path = new Path.RoundRectangle(rect, cornerSize);
	path.fillColor = buttonColor;
	path.strokeColor = '#DDDDDD';
	path.strokeWidth = 0.76;

	var textX = rect.x + (rect.width/2);
	var textY = rect.y + rect.height - 3;
	var text = new PointText(new Point(textX, textY));
	text.content = stringText;
	text.justification = 'center';
	text.characterStyle = {
	fillColor:'#EEEEEE',
	fontSize: 9
	};

	return path;

	}


	function draw_buttons(){

	// this would be prettier if PointText included a method to determine px width of content
	layerTop.activate();
	var point = new Point(300, 670);

	// Refresh Button
	var buttonRefreshText = "hit refresh";
	var rectDim = new Size(76, buttonHeight);
	var rectangle = new Rectangle(point-[11,11], rectDim);
	pathRefreshButton = draw_button(point, buttonRefreshText, rectangle);

	// Reverse Button
	var buttonReverseText = "reverse items";
	point += [80, 0];
	var rect2Dim = new Size(88, buttonHeight);
	var rectangle2 = new Rectangle(point-[7,11], rect2Dim);
	pathReverseButton = draw_button(point, buttonReverseText, rectangle2);

	// Add Button
	var buttonAddText = "add items";
	point -= [162, 0];
	var rect3Dim = new Size(69, buttonHeight);
	var rectangle3 = new Rectangle(point-[7,11], rect3Dim);
	pathAddButton = draw_button(point, buttonAddText, rectangle3);

	layerMain.activate();


	}


	// mouse interaction:

	function onMouseDown(event){

	if (pathRefreshButton.hitTest(event.point) != null){
	layerMain.removeChildren();
	main();
	}
	if (pathReverseButton.hitTest(event.point) != null){
	layerMain.reverseChildren();
	}
	if (pathAddButton.hitTest(event.point) != null){
	main();
	}

	}

	/*
	// if experiencing slow interaction, comment out this function.

	function onMouseMove(event){

	if (pathRefreshButton.hitTest(event.point) != null){
	pathRefreshButton.fillColor = buttonColorOver;
	}
	else
	pathRefreshButton.fillColor = buttonColor;

	if (pathReverseButton.hitTest(event.point) != null){
	pathReverseButton.fillColor = buttonColorOver;
	}
	else
	pathReverseButton.fillColor = buttonColor;

	if (pathAddButton.hitTest(event.point) != null){
	pathAddButton.fillColor = buttonColorOver;
	}
	else
	pathAddButton.fillColor = buttonColor;



	}
	*/


	function main(){

	colorScheme = random_between(0,2);

	if (colorScheme == 2){
	colorSchemeHue = random_between(0,360);
	degreeOfSeparation = degreeArray[random_between(0,degreeArray.length-1)];
	}

	layerMain.activate();
	var numTris = 20;
	for (i=0; i < numTris; i++){
	var pointOnCircle = 2.0 * 3.141592 * Math.random();
	var tRadius = random_between(0,200);
	var posX = Math.sin(pointOnCircle) * tRadius;
	var posY = Math.cos(pointOnCircle) * tRadius;
	posX += 350;
	posY += 350;
	draw_triangle(new Point(posX, posY));

	}

	draw_buttons();

	}

	main();


	</script>
	</head>
	<body>
	<canvas id="canvas_gen" width="700" height="700"></canvas>

	</body>
	</html>