Skip to content
Browse files

reverted some of the event/rendering 'optimizations' that started bre…

…aking everything
  • Loading branch information...
1 parent 3109ae0 commit b5b52085c61dbdd94b6cd3d49b34d54582065d92 @tmpvar committed Aug 22, 2010
Showing with 127 additions and 122 deletions.
  1. +69 −106 demos/stress-test.html
  2. +15 −0 demos/webworker.html
  3. +22 −0 demos/webworker.js
  4. +21 −16 lib/carena.js
View
175 demos/stress-test.html
@@ -8,121 +8,84 @@
<br />
<span id="fps" style='color:white'></span>
<script type="text/javascript">
- (function() {
+var canvas = document.getElementById("draggable-window"),
+ ctx,
+ fps = 1000 / 60,
+ frame = 1,
+ bx = canvas.width,
+ by = canvas.height,
+ lastTime = 0,
+ fpsDisplay = document.getElementById("fps"), scene = {children:[]};
- var canvas = document.getElementById("draggable-window")
- renderer = carena.build({}, ["carena.Renderer"], {
- canvas: canvas
- }),
- camera = carena.build({}, [
- "carena.Camera",
- "carena.DragManager"
- ], {
- renderer: renderer
- }),
- scene = carena.build({}, ["carena.Node", "carena.Eventable"]),
- mouse = {x:0, y:0},
- fps = 1000/60,
- averageFPS = 0
- frame = 1,
- lastTime = 0,
- fpsDisplay = document.getElementById("fps");
+canvas.width = document.width - 30;
+canvas.height = document.height - 60;
+bx = canvas.width;
+by = canvas.height;
- canvas.width = document.width-30;
- canvas.height = document.height-60;
- for (var i=0;i<7000; i++) {
- var node = carena.build({
- x: Math.floor((Math.random()*canvas.width)%canvas.width),
- y: Math.floor((Math.random()*canvas.height)%canvas.height),
- width: 1,
- height: 1,
- color: "rgba(255,255,255,10)",
- update : function(obj) {
- obj.x = obj.x + 10;
- }
- }, ["carena.Node"]);
-
- scene.add(node);
- }
- document.body.style.backgroundColor = "black";
- renderer.context.fillStyle = "black";
- renderer.context.fillRect(0,0,canvas.width, canvas.height);
- var cw = canvas.width,
- ch = canvas.height,
- imageData = renderer.context.getImageData(0,0,cw,ch),
- child,
- childrenl = scene.children.length,
- loc,
- updateTime = 5, start, dirty = false,
- ctx = renderer.context,
- idata = imageData.data,
- fallRate = 1,
- childx,
- childy;
-
- setTimeout(function update() {
-//renderer.context.fillRect(0, 0, canvas.width, canvas.height);
-//imageData = renderer.context.getImageData(0,0,cw,ch);
-
- for (var i=0; i<childrenl; i++) {
- child = scene.children[i];
- childx = child.x;
- childy = child.y;
- loc = (childx*4) + (cw*childy*4);
-
- if (childy >= ch-fallRate || idata[loc+(cw*4*fallRate)] === 255) {
- idata[loc+3]=255;
- child.x = Math.floor((Math.random()*canvas.width)%cw);
- child.y = Math.floor((Math.random()*canvas.height)%ch);
- continue;
- }
+ctx = canvas.getContext("2d");
+for (var i = 0; i < 5000; i++) {
+ scene.children.push({
+ x: Math.floor((Math.random() * bx) % bx),
+ y: Math.floor((Math.random() * by) % by),
+ color: "rgba(255,255,255,10)"
+ });
+}
+document.body.style.backgroundColor = "black";
+ctx.fillStyle = "black";
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+var cw = canvas.width,
+ ch = canvas.height,
+ imageData = ctx.getImageData(0, 0, cw, ch),
+ child, childrenl = scene.children.length,
+ loc, updateTime = 5,
+ start, dirty = false,
+ idata = imageData.data,
+ fallRate = 2,
+ childx, childy;
+setTimeout(function update() {
+ for (var i = 0; i < childrenl; i++) {
+ child = scene.children[i];
+ childx = child.x;
+ childy = child.y;
+ loc = (childx * 4) + (cw * childy * 4);
- idata[loc] = 0;
- idata[loc+1] = 0;
- idata[loc+2] = 0;
- child.y+=fallRate;
-
- loc = (child.x*4) + (cw*child.y*4)
-
- idata[loc] = 255;
+ if (childy >= ch - fallRate || idata[loc + (cw * 4 * fallRate)] === 150 ||
+ idata[loc - 4] === 150 || idata[loc + 4] === 150) {
+ idata[loc] = 150;
idata[loc+1] = 255;
- idata[loc+2] = 255;
- idata[loc+3] = 100;
- dirty = true;
- }
- setTimeout(update, updateTime);
- }, 10);
-
- var renderi = 0, children = scene.children, childrenl = children.length;
+ idata[loc+2] = 106;
+ idata[loc+3] = 255;
+ child.x = Math.floor(Math.random() * bx) % bx;
+ child.y = Math.floor(Math.random() * by) % by;
+ continue;
+ }
- setTimeout(function render() {
- ctx.putImageData(imageData, 0,0);
- frame++;
- setTimeout(render, fps);
- },fps);
+ idata[loc] = 0;
+ idata[loc + 1] = 0;
+ idata[loc + 2] = 0;
+ child.y += fallRate;
+ loc = (child.x * 4) + (cw * child.y * 4);
+ idata[loc] = 47;
+ idata[loc + 1] = 12;
+ idata[loc + 2] = 232;
+ idata[loc + 3] = 100;
+ dirty = true;
+ }
+ setTimeout(update, updateTime);
+}, 10);
+setTimeout(function render() {
+ ctx.putImageData(imageData, 0, 0);
+ frame++;
+ setTimeout(render, fps);
+}, fps);
- setInterval(function() {
- fpsDisplay.innerHTML = frame+"fps";
- frame=0;
- }, 1000);
- camera.target = scene;
- lastTime = (new Date()).getTime();
- // so the fps isn't weird initially
- // camera.render();
-/* setTimeout(function renderDraggableWindow() {
- var l = scene.children.length;
- for (var i=0; i<l; i++) {
- var node = scene.children[i];
- if (node.render) { node.render(renderer); }
- }
- //camera.render();
- frame++;
- setTimeout(renderDraggableWindow, 0);
- }, fps);*/
- }());
+setInterval(function fpsupdate() {
+ fpsDisplay.innerHTML = frame + "fps";
+ frame = 0;
+}, 1000);
</script>
</body>
</html>
View
15 demos/webworker.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <title>Worker example: One-core computation</title>
+ </head>
+ <body>
+ <p>The highest prime number discovered so far is: <output id="result"></output></p>
+ <script>
+ var worker = new Worker('webworker.js');
+ worker.onmessage = function (event) {
+ document.getElementById('result').textContent = event.data;
+ };
+ </script>
+ </body>
+</html>
View
22 demos/webworker.js
@@ -0,0 +1,22 @@
+var i,l,raw, nodes, node, loc, pw, ph;
+onmessage = function(ev) {
+ var data = JSON.parse(ev.data);
+ nodes = data.nodes;
+ l = nodes.length;
+ raw = { data: data.pixels.data };
+ pw = data.pixels.width;
+postMessage(JSON.stringify(data));
+return;
+ setInterval(function() {
+// for (i=0; i<l; i+=1) {
+ node = nodes[0];
+ node.x++;
+ loc = 0;//(node.x*4) + (pw*node.y*4)
+ data.pixels.data[loc] = 255;
+ data.pixels.data[loc+1] = 255;
+ data.pixels.data[loc+2] = 255;
+ data.pixels.data[loc+3] = 255;
+ // }
+ postMessage(JSON.stringify(data.pixels.data));
+ }, 1000);
+}
View
37 lib/carena.js
@@ -132,9 +132,11 @@
for (var j=0; j<obj.features.length; j++) {
if (obj.features[j] === features[i]) { break; }
}
- if (!skip) {
+ if (!skip && carena.features[features[i]]) {
carena.features[features[i]](obj, options, nodeStorage);
obj.features.push(features[i]);
+ } else {
+ throw new Error(features[i] + " is not registered with carena");
}
} else {
throw new Error(features[i] + " is not a function!");
@@ -178,7 +180,8 @@
carena.addFeature("carena.Renderable", function(obj, options, storage) {
carena.require("carena.Eventable", arguments);
- var last = { x: obj.x|| 0, y: obj.y||0, w: 1, h: 1 };
+ var last = { x: obj.x|| 0, y: obj.y||0, w: 1, h: 1 },
+ clearRects = [];
obj.event.bind("node.y", function(name, data) {
if (data.node === obj) {
@@ -196,8 +199,9 @@
clear : function(renderer) {
var ctx = renderer.context;
// use last and calculate what needs to be cleared
- ctx.fillStyle = "black";
- ctx.fillRect(last.x, last.y, last.w, last.h);
+ // TODO : implement this without diving into overlap cache hell.
+ /*ctx.fillStyle = "black";
+ ctx.fillRect(last.x, last.y, last.w+10, last.h+10);*/
},
render : function(renderer) {
var ctx = renderer.context;
@@ -591,13 +595,13 @@
var queryBinds = function(name, foundFn) {
var i=0, l, results = [], bindParts,
nameParts = name.split("."), found, last;
- if (safe.binds[bind]) {
+/* if (safe.binds[bind]) {
var l = safe.binds[bind].length;
for (var i=0; i<l; i++) {
foundFn(name, i);
}
- }
- return;
+ }*/
+// return;
for (var bind in safe.binds) {
found = true;
// catch all
@@ -664,21 +668,20 @@
trigger : function (name, data, bubble) {
var i=0, l, results = [], bindParts,
- /*nameParts = name.split("."), found, last,*/ res = true;
- if (safe.binds[name]) {
+ nameParts = name.split("."), found, last, res = true;
+/* if (safe.binds[name]) {
var l = safe.binds[name].length, binds = safe.binds[name];
for (var i=0; i<l; i++) {
if (!binds[i](name, data)) {
return false;
}
}
- }
- /*
- TODO: debug mode perhaps?
+ }*/
+
var res = queryBinds(name, function(resolvedName, index) {
var bind = safe.binds[resolvedName][index];
return bind(name, data);
- });*/
+ });
// bubbling
if (bubble !== false &&
@@ -763,7 +766,9 @@
},
render : function(root) {
- if (safe.dirty) {
+ // TODO: Optimize me! whether its using ImageData or clearing rects
+ // dirty nodes on the camer and under root need to be cleared.
+ if (root.dirty || true) {
safe.dirty = false;
obj.context.fillStyle = storage.style.backgroundColor;
obj.context.fillRect(0, 0, obj.canvas.width, obj.canvas.height);
@@ -947,11 +952,11 @@
get target() { return safe.target; },
set target(value) {
if (safe.target && safe.target.event) {
-// safe.target.event.unbind("*", obj.eventProxy);
+ safe.target.event.unbind("*", obj.eventProxy);
}
safe.target = value;
if (safe.target && safe.target.event) {
-// safe.target.event.bind("*", obj.eventProxy);
+ safe.target.event.bind("*", obj.eventProxy);
}
},
eventProxy : function() {

0 comments on commit b5b5208

Please sign in to comment.
Something went wrong with that request. Please try again.