zeffii · November 13, 2011 00:21
diff --git a/gen_graph.html b/gen_graph.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Apt Progress</title>
 	<link rel="stylesheet" href="../css/style2.css">
 	<script type="text/javascript" src="../../lib/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 			
 	/*
 	regen of triangles.
 	this one is for you.
 	written by Dealga McArdle 2011, November.
 	MIT license
 	
 	The idea is:
 	- semi random triangles, 
 	- semi random gradient parameters 
 	- semi distributed colours
 	- all contained mostly in a circular boundary
 	- white typography ontop. ( DigitalAphasia )
 	- [optional, make it move.]
 	
 	12 Nov, exploration of paper.js
 	
 	Milestsones.
 	[ ] place 50 triangles within a circular boundary.
 	[ ] random size 
 	[ ] random gradient 
 	[ ] random rotation

 	
 	*/
 	
 	// Layer inits
 	// var layerBackground = new Layer(); // background layer
 	// var layerTop = new Layer(); // top layer
 	
 	
 	function random_int(height){
 		
 		var randomFloat = Math.random();
 		var randomInt = randomFloat * height;
 		var intified = Math.round(randomInt);
 		if (intified > height)
 			return height;
 		else 
 			return intified;
 		
 		}
 	
 	
 	
 	
 	function get_random_gradient(){
 		
 		var reds = ['FA', 'FB', 'FC', 'FD', 'FE', 'FF'];
 		var greens = ['00', '10', '34', '2A', 'A0', 'a0'];
 		var blues = ['00', '10', '04', '2A', '40','6a'];
 		var r1 = reds[random_int(reds.length)];
 		var g1 = '00';
 		var b1 = '00';
 		var r2 = reds[random_int(reds.length)];
 		var g2 = greens[random_int(greens.length)];
 		var b2 = blues[random_int(blues.length)];
 		var rgb1 = '#' + r1 + g1 + b1;
 		var rgb2 = '#' + r2 + g2 + b2;
 		
 		return [rgb1, rgb2];
 	}
 	
 	
 	function draw_triangle(point){
 		/*
 		point [is center]. let's build a triangle around it.
 		*/
 		
 		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 rotationalAmount = 360 * Math.random();
 		myPath.rotate(rotationalAmount);
 		myPath.position = point;
 		myPath.scale(Math.random()*Math.random()*7);
 		myPath.opacity = Math.random();
 		// myPath.blendmode = 'overlay';
 	}
 	
 	function draw_text(){
 	
 		// #FAFAFA
 		var text = new PointText(new Point(200, 540));
 		text.content = 'ANTIALIASME';
 		text.characterStyle = {
 			fillColor:'#FAFAFA',
 			fontSize: 70
 		};
 		
 	
 	
 	
 	}
 	
 	
 	
 	
 	function main(){
 		
 		// draw within circular boundary.
 		for (i=0; i < 30; i++){
 			// random between 0 and 1
 			var x = Math.random(0,1);
 			var y = Math.random(0,1);
 			var radiusPosX = Math.random(0,1);
 			var radiusPosY = Math.random(0,1);
 			var posX = (radiusPosX * Math.sin(x) * 400) + 200;
 			var posY= (radiusPosY * Math.cos(y) * 400) + 200;
 			
 			// if midmpoint is 200,200
 			
 			var point = new Point(posX, posY);
 			draw_triangle(point);
 		}
 		
 		// draw_text();
 		
 	}
 	
 	main();
 		
 	</script>
 </head>
 <body>
 	<canvas id="canvas" width="700" height="1200"></canvas>

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

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

	The idea is:
	- semi random triangles,
	- semi random gradient parameters
	- semi distributed colours
	- all contained mostly in a circular boundary
	- white typography ontop. ( DigitalAphasia )
	- [optional, make it move.]

	12 Nov, exploration of paper.js

	Milestsones.
	[ ] place 50 triangles within a circular boundary.
	[ ] random size
	[ ] random gradient
	[ ] random rotation


	*/

	// Layer inits
	// var layerBackground = new Layer(); // background layer
	// var layerTop = new Layer(); // top layer


	function random_int(height){

	var randomFloat = Math.random();
	var randomInt = randomFloat * height;
	var intified = Math.round(randomInt);
	if (intified > height)
	return height;
	else
	return intified;

	}




	function get_random_gradient(){

	var reds = ['FA', 'FB', 'FC', 'FD', 'FE', 'FF'];
	var greens = ['00', '10', '34', '2A', 'A0', 'a0'];
	var blues = ['00', '10', '04', '2A', '40','6a'];
	var r1 = reds[random_int(reds.length)];
	var g1 = '00';
	var b1 = '00';
	var r2 = reds[random_int(reds.length)];
	var g2 = greens[random_int(greens.length)];
	var b2 = blues[random_int(blues.length)];
	var rgb1 = '#' + r1 + g1 + b1;
	var rgb2 = '#' + r2 + g2 + b2;

	return [rgb1, rgb2];
	}


	function draw_triangle(point){
	/*
	point [is center]. let's build a triangle around it.
	*/

	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 rotationalAmount = 360 * Math.random();
	myPath.rotate(rotationalAmount);
	myPath.position = point;
	myPath.scale(Math.random()Math.random()7);
	myPath.opacity = Math.random();
	// myPath.blendmode = 'overlay';
	}

	function draw_text(){

	// #FAFAFA
	var text = new PointText(new Point(200, 540));
	text.content = 'ANTIALIASME';
	text.characterStyle = {
	fillColor:'#FAFAFA',
	fontSize: 70
	};




	}




	function main(){

	// draw within circular boundary.
	for (i=0; i < 30; i++){
	// random between 0 and 1
	var x = Math.random(0,1);
	var y = Math.random(0,1);
	var radiusPosX = Math.random(0,1);
	var radiusPosY = Math.random(0,1);
	var posX = (radiusPosX * Math.sin(x) * 400) + 200;
	var posY= (radiusPosY * Math.cos(y) * 400) + 200;

	// if midmpoint is 200,200

	var point = new Point(posX, posY);
	draw_triangle(point);
	}

	// draw_text();

	}

	main();

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

	</body>
	</html>