javascript
/
tentone.escher.js
peilaus alkaen https://github.com/tentone/escher.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Stress</title>
</head>
<body>
	<script type="text/javascript" src="../build/escher.js"></script>

	<script type="text/javascript">
		var division = document.createElement("div");
		division.style.position = "absolute";
		division.style.width = "100%";
		division.style.height = "100%";
		division.style.top = "0px";
		division.style.left = "0px";
		division.style.overflow = "hidden";
		document.body.appendChild(division);

		var perfDelta = document.createElement("div");
		perfDelta.style.position = "absolute";
		perfDelta.style.width = "50px";
		perfDelta.style.height = "200px";
		perfDelta.style.top = "0px";
		perfDelta.style.left = "0px";
		perfDelta.style.overflow = "visible";
		perfDelta.style.fontFamily = "Arial";
		perfDelta.style.fontSize = "20px";
		document.body.appendChild(perfDelta);

		// Setup the display canvas
		var canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		canvas.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};
		division.appendChild(canvas);

		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};


		var group = new Escher.Object2D();

		for(var i = 0; i < 1e3; i++)
		{		
			var box = new Escher.Box();
			Escher.Helpers.boxResizeTool(box);
			box.draggable = true;
			box.position.set(Math.random() * 1e3, Math.random() * 1e3)
			group.add(box);
	
			var div = new Escher.DOM();
			div.size.set(100, 50);
			div.origin.set(50, 25);
			box.add(div);

			var text = document.createElement("div");
			text.style.fontFamily = "Arial";
			text.style.textAlign = "center";
			text.innerHTML = "DOM text!";
			div.element.appendChild(text);
		}

		var viewport = new Escher.Viewport(canvas);

		var time = performance.now();

		var renderer = new Escher.Renderer(canvas);
		renderer.createRenderLoop(group, viewport, function()
		{
			var newTime = performance.now();
			var delta = newTime - time;
			time = newTime;

			perfDelta.innerHTML = delta + "ms";

			console.log(delta);
		});
	</script>
</body>
</html>