Source

WebEvoCell / hackathonAlpha.html

<!DOCTYPE html>
<html lang="en-us">
<head>
	<link type="text/css" rel="stylesheet" href="style.css" />
	<script src="src/libs/DataView.js"></script>

	<script src="src/libs/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	  $.noConflict();
	  // Code that uses other library's $ can follow here.
	</script>
	
	<script src="src/libs/scriptaculous-js-1.9.0/prototype.js" type="text/javascript"></script>
	<script src="src/libs/scriptaculous-js-1.9.0/scriptaculous.js" type="text/javascript"></script>
	


	<script src="src/helpers.js"></script>
	<script src="src/evocell.js"></script>
	<script src="src/evocellweb.js"></script>

	<script id="shader-vs-passthrough" type="x-shader/x-vertex"> 
		attribute vec3 aPos;
		attribute vec2 aTexCoord;
		varying   vec2 vTexCoord;

		void main(void) {
			gl_Position = vec4(aPos, 1.);
			vTexCoord = aTexCoord;
		}
	</script> 

	<script id="shader-fs-palette" type="x-shader/x-fragment"> 
		#ifdef GL_ES
		precision highp float;
		#endif
		uniform sampler2D texFrame;
		varying vec2 vTexCoord;
		void main(void) {
			vec4 color = texture2D(texFrame, vTexCoord);
			//if (color.a == 0.)
			//	gl_FragColor = vec4(0., 0., 0., 0.);
			//else
				gl_FragColor = vec4(color.a*600.0, color.a*color.a*color.a*400000.0, 0., 1.);
   
			//gl_FragColor = texture2D(texFrame, vTexCoord);
		}
	</script>

<script type="text/javascript">

var nrSimsRows = 5;
var nrSimsCols = 5;

var nrSims;
var caCanvas, caSims = [];
var timer, time;
var width, height, colWidth, rowHeight;
var progShow;
var ctlXRes, ctlYRes, ctlRandomDensity, ctlNrSims, ctlFramerate;
var evoCellData;

function setup()
{
	ctlXRes = jQuery('#xres')[0];
	ctlYRes = jQuery('#yres')[0];
	ctlNrSims = jQuery('#nrSims')[0];
	ctlRandomDensity = jQuery('#randomDensity')[0];
	ctlFramerate = jQuery('#framerate')[0];

	document.getElementById('c').addEventListener('contextmenu', handleContextMenu, false);
	document.getElementById('c').addEventListener('click', handleCanvasClick, false);

	//document.getElementById('floatingPalette').addEventListener('click', handleFloatingPaletteClick, false);

	new Draggable('floatingPalette');
	
	jQuery('#evocellFile').change(handleFileSelect);
	clearInterval(timer);

	caCanvas = new EvoCell.CACanvas(jQuery("#c")[0]);
	
	width = 1200;
	height = 800;
	
	ctlXRes.value = width;
	ctlYRes.value = height;
	
	
	
	
	caCanvas.setSize(width, height);
	
	progShow = caCanvas.gl.createProgram();
	caCanvas.gl.attachShader(progShow, getShaderFromElement(caCanvas.gl, "shader-vs-passthrough" ));
	caCanvas.gl.attachShader(progShow, getShaderFromElement(caCanvas.gl, "shader-fs-palette" ));
	caCanvas.gl.linkProgram(progShow);
	var caSpace = createCASpace(caCanvas.gl);
	bindCASpaceToShader(caCanvas.gl, progShow, caSpace);
	
	
	var file = getArrayBufferFromURL(
	//"http://dl.dropbox.com/u/2297128/22C3_avgextgrowers_cooler",
	//"http://dl.dropbox.com/u/2297128/Moore4-avg3-sweetship",
	"rules/moore4_wave",
	//"ccc_rules/ecoli16",
	//"ccc_rules/annegret2", 
	//"ccc_rules/g2adapded", 
	//"ccc_rules/moore5-explosionz-spaceshyp-boxedin-mut",
	//"ccc_rules/moore5-explosionz-spaceshyp-boxedin-mut",
	//"ccc_rules/orientalischenachtschattengewaechse",
	//"ccc_rules/interestingreplicator2",
	//"ccc_rules/new/22C3_mirrorsymetric_gliders-randomwaver",
	//"ccc_rules/starburst_road", 
	//"ccc_rules/march", 
	//"ccc_rules/machines/gardener/g2adapded",
	//"ccc_rules/s5-2", 
	//"ccc_rules/evoloop/EvoloopN9",
	function (arrayBuffer) {
		arrayBufferData = arrayBuffer;
		
		evoCellData = EvoCell.loadEvoCellFile(arrayBuffer);
		
		
		handleReset();
		
	
		timer = setInterval(fr, 1000);
		time = new Date().getTime();
   
		anim();
	});
}

function handleReset(cleanStart)
{
	width = parseInt(ctlXRes.value);
	height = parseInt(ctlYRes.value);
	
	nrSimsCols = parseInt(ctlNrSims.value);
	nrSimsRows = nrSimsCols;
	nrSims = nrSimsRows * nrSimsCols;
	
	colWidth = Math.floor((width / nrSimsCols) - 1);
	rowHeight = Math.floor((height / nrSimsRows) - 1);
	
	randomDensity = parseFloat(ctlRandomDensity.value);
	caCanvas.setSize(width, height);
	//caSim.setSize(width, height);
	
	oldSims = caSims;
	caSims = [];
	for (var i = 0; i < nrSims; i++)
	{
		if (!cleanStart && oldSims.length > i)
		{
			caSims[i] = oldSims[i];
			caSims[i].setSize(colWidth, rowHeight);
		}
		else
		{
			caSims[i] = new EvoCell.CASimulation(caCanvas, evoCellData, colWidth, rowHeight);
		}
	}

	fillPalette(caSims[0].ruleData);
}

var delay=5;

requestAnimFrame = (function(){
  return  window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback, element){ setTimeout(callback, 1000 / 60); }
})();

var pausePlease = 0;
function anim(){
	updateFrame();

   frames++;
   if (!pausePlease)
   {
		requestAnimFrame(anim);
   }
}

function updateFrame() {
	for (var i = 0; i < nrSims; i++)
		caSims[i].step();
   
	for (var r = 0; r < nrSimsRows; r++)
	{
		for (var c = 0; c < nrSimsCols; c++)
		{
			var idx = r*nrSimsCols+c;
			caCanvas.draw(caSims[idx], progShow, null, 
				[(width / nrSimsCols) * (c + 0.5) - colWidth/2, (height / nrSimsRows) * (r + 0.5) - rowHeight/2, colWidth, rowHeight]);
		}
	}
}

function fr(){
  var ti = new Date().getTime();
  var fps = Math.round(1000*frames/(ti - time));
  ctlFramerate.value = fps;
  frames = 0;  time = ti;
}



function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
	
	var reader = new FileReader();
	reader.onload = function(evt) {	
			arrayBufferData = evt.target.result;
			var evoCellData = EvoCell.loadEvoCellFile(arrayBufferData);
			caSims[0].setRule(evoCellData);
			//handleReset();
		};
	reader.readAsArrayBuffer(files[0]); // start async operation
}
  
function handleContextMenu(evt) {
	evt.preventDefault();

	var canvas = document.getElementById('c');
	
	var coords = canvas.relMouseCoords(evt);
	var x = coords.x;
	var y = coords.y;
	
	var clickedCA;
	clickedCA = nrSimsCols * Math.floor(nrSimsRows * (height - coords.y) / height);
	clickedCA += Math.floor(nrSimsCols * coords.x / width);

	EvoCell.saveRule(caSims[clickedCA]);
}

function handleCanvasClick(evt) {
	var canvas = document.getElementById('c');
	
	var coords = canvas.relMouseCoords(evt);
	var x = coords.x;
	var y = coords.y;
	
	var clickedCA;
	clickedCA = nrSimsCols * Math.floor(nrSimsRows * (height - coords.y) / height);
	clickedCA += Math.floor(nrSimsCols * coords.x / width);

	if (evt.button == 0) {
		var mutReg;
		var mutTarget;
		var mutTimes;

		var rule = caSims[clickedCA].ruleData;

		//if (evt.button == 0) 
		{
			mutReg = ["?", "?", "?", "?", "?", "?", 0, 0, 0];
			mutTarget = "?";
			
			mutReg = ["?", "3", "?", "3", "?", "?", 0, 0, 0];
			mutTarget = "3";

			mutReg = [];
			for (i = 0; i < rule.neighbourhood.length; i++)
			{
				mutReg.push(document.getElementById('nPattern_' + i).value);
			}
			mutTarget = mutTimes = document.getElementById('nPattern_target').value;			
			
			//alert(document.getElementById('nPattern_all').checked);

			

			mutTimes = document.getElementById('nPattern_mutations').value;
		}
		/*
		else
		{
			mutReg = ["?", "?", "?", "?", "?", "?", 0, 0, 0];
			mutTarget = 0;
			mutTimes = 500;
		}
		*/

		
	
		
		for (var i = 0; i < nrSims; i++)
		{
			if (i != clickedCA)
			{
				var newRule = myClone(rule);
				newRule.ruleTable = new Uint8Array(rule.ruleTable);
				
				EvoCell.mutateEvoCellRule(newRule, mutReg, mutTarget, getRandInt(20, mutTimes));
				caSims[i].setRule(newRule);
			}
			else
			{
				caSims[i].invalidateProgram(); // TODO: this is a hack to trandomize clean this up
			}
		}
		//alert(clickedCA);
	} else if (evt.button == 0) {
		EvoCell.saveRule(caSims[clickedCA]);
	}
	evt.preventDefault();
	evt.stopPropagation();
}  


function fillPalette(evoCellData)
{
	var leftOffset = 55, topOffset = 75, xOffset = 55;
	var s="<div style=\"background-color:#ccf;\">Dont hesitate...MUTATE!</div>";
	
 
	s+="mutations: <input type='number' id='nPattern_mutations' value='1000' style='width:70px;' /> <input type='checkbox' id='nPattern_all' /> All rules ";
	
	for (var nIndex = 0; nIndex < evoCellData.neighbourhood.length; nIndex++)
	{
		var neighbour = evoCellData.neighbourhood[nIndex];
		
		var x = neighbour[0];
		var y = neighbour[1];
		var posx = leftOffset + x * xOffset;
		var posy = topOffset + y * 25;

	 	s+= "<input type=\"text\" id=\"nPattern_" + nIndex + "\" value=\"?\" style=\"position:absolute; width:40px; left:" + posx + "px; top:" + posy + "px;\" />";
	}

	var posx = leftOffset + 2.3 * xOffset;
	var posy = topOffset;
	s+="<input type=\"text\" id=\"nPattern_target\" value=\"?\" style=\"position:absolute; width:40px; left:" + posx + "px; top:" + posy + "px;\" />";

	var div = document.getElementById('floatingPalette');
	div.innerHTML = s;
	//alert(s);
		
}
function handleFloatingPaletteClick(evt)
{
	var coords = document.relMouseCoords(evt);
	
}

</script>


</head>
<body onload="setup()">

	<div id="floatingPalette" style="position:fixed; width:240px; height:150px; left:200px; top:200px; background-color:#fdd; cursor:move;">hello world</div>

	<canvas id="c" width="1000" height="3333"></canvas>

	<form name="controls" action="">
	<input type="button" id="cmdRunPause" value="run/pause" onclick="pausePlease = !pausePlease; if (!pausePlease) anim();">
	<input type="button" id="cmdSingleStep" value="one step" onclick="updateFrame();">
	<input type="number" id="xres" name="xres" min="100" max="4000" value="1000" onchange="handleReset();" />
	<input type="number" id="yres" name="yres" min="100" max="4000" value="3333" onchange="handleReset();" />
	<input type="number" id="randomDensity" min="0" max="1" step="0.001" value="0.01" onchange="handleReset();">
	<input type="number" id="nrSims" min="1" max="6" step="1" value="5" onchange="handleReset();">
	<input type="button" value="Reset" onclick="handleReset(1);">
	<input type="file" value="evocellFile" id="evocellFile" />
	fps<input size="1" id="framerate">
	
	</form>
</body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.