Animation Optimization in 3D World Javascript Format
I recently came up with the idea of creating a tag cloud like earth like animation. I extracted the coordinates of the coastline from ngdc.noaa.gov and wrote a little script that displayed it in my browser. Now, as you can imagine, the entire coastline consists of 48919 points, which my script will individually display (each coordinate is represented by one span). Obviously, no browser can do this smoothly - but it would be nice if I could do what you can say 200 runs (twice as many as now) on my old p4 2.8 Ghz (as a representative test). Is there a javascript optimization I could use to speed up the rendering of these intervals?
One 'coordinate':
<div id="world_pixels">
<span id="wp_0" style="position:fixed; top:0px; left:0px; z-index:1; font-size:20px; cursor:pointer;cursor:hand;" onmouseover="magnify_world_pixel('wp_0');" onmouseout="shrink_world_pixel('wp_0');" onClick="set_askcue_bar('', 'new york')">new york</span>
</div>
script:
$(document).ready(function(){
world_pixels = $("#world_pixels span");
world_pixels.spin();
setInterval("world_pixels.spin()",1500);
});
z = new Array();
$.fn.spin = function () {
for(i=0; i<this.length; i++) {
/*actual screen coordinates: x/y/z --> left/font-size/top
300/13/0 300/6/300
| /
|/
0/13/300 ----|---- 600/13/300
/|
/ |
300/20/300 300/13/600
*/
/*scale font size*/
var resize_x = 1;
/*scale width*/
var resize_y = 2.5;
/*scale height*/
var resize_z = 2.5;
var from_left = 300;
var from_top = 20;
/*actual math coordinates:
1 -1
| /
|/
1 ----|---- -1
/|
/ |
1 -1
*/
//var get_element = document.getElementById();
//var font_size = parseInt(this.style.fontSize);
var font_size = parseInt($(this[i]).css("font-size"));
var left = parseInt($(this[i]).css("left"));
if (coast_line_array[i][1]) {
} else {
var top = parseInt($(this[i]).css("top"));
z[i] = from_top + (top - (300 * resize_z)) / (300 * resize_z);
//global beacause it used in other functions later on
var top_new = from_top + Math.round(Math.cos(coast_line_array[i][2]/90*Math.PI) * (300 * resize_z) + (300 * resize_z));
$(this[i]).css("top", top_new);
coast_line_array[i][3] = 1;
}
var x = resize_x * (font_size - 13) / 7;
var y = from_left + (left- (300 * resize_y)) / (300 * resize_y);
if (y >= 0) {
this[i].phi = Math.acos(x/(Math.sqrt(x^2 + y^2)));
} else {
this[i].phi = 2*Math.PI - Math.acos(x/(Math.sqrt(x^2 + y^2)));
i
}
this[i].theta = Math.acos(z[i]/Math.sqrt(x^2 + y^2 + z[i]^2));
var font_size_new = resize_x * Math.round(Math.sin(coast_line_array[i][4]/90*Math.PI) * Math.cos(coast_line_array[i][0]/180*Math.PI) * 7 + 13);
var left_new = from_left + Math.round(Math.sin(coast_line_array[i][5]/90*Math.PI) * Math.sin(coast_line_array[i][0]/180*Math.PI) * (300 * resize_y) + (300 * resize_y));
//coast_line_array[i][6] = coast_line_array[i][7]+1;
if ((coast_line_array[i][0] + 1) > 180) {
coast_line_array[i][0] = -180;
} else {
coast_line_array[i][0] = coast_line_array[i][0] + 0.25;
}
$(this[i]).css("font-size", font_size_new);
$(this[i]).css("left", left_new);
}
}
resize_x = 1;
function magnify_world_pixel(element) {
$("#"+element).animate({
fontSize: resize_x*30+"px"
}, {
duration: 1000
});
}
function shrink_world_pixel(element) {
$("#"+element).animate({
fontSize: resize_x*6+"px"
}, {
duration: 1000
});
}
I would appreciate any suggestions for optimizing my script, maybe there is even a completely different approach on how to do this. The whole .js file that stores an array for all coordinates is available on my page, the file is about 2.9mb, so you can try pulling the .zip for local testing:
metaroulette.com/files/31218.zip
metaroulette.com/files/31218.js
PS php I am using to create spans:
<?php
//$arbitrary_characters = array('a','b','c','ddsfsdfsdf','e','f','g','h','isdfsdffd','j','k','l','mfdgcvbcvbs','n','o','p','q','r','s','t','uasdfsdf','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9',);
$arbitrary_characters = array('cat','table','cool','deloitte','askcue','what','more','less','adjective','nice','clinton','mars','jupiter','testversion','beta','hilarious','lolcatz','funny','obama','president','nice','what','misplaced','category','people','religion','global','skyscraper','new york','dubai','helsinki','volcano','iceland','peter','telephone','internet', 'dialer', 'cord', 'movie', 'party', 'chris', 'guitar', 'bentley', 'ford', 'ferrari', 'etc', 'de facto');
for ($i=0; $i<96; $i++) {
$arb_digits = rand (0,45);
$arbitrary_character = $arbitrary_characters[$arb_digits];
//$arbitrary_character = ".";
echo "<span id=\"wp_$i\" style=\"position:fixed; top:0px; left:0px; z-index:1; font-size:20px; cursor:pointer;cursor:hand;\" onmouseover=\"magnify_world_pixel('wp_$i');\" onmouseout=\"shrink_world_pixel('wp_$i');\" onClick=\"set_askcue_bar('', '$arbitrary_character')\">$arbitrary_character</span>\n";
}
?>
a source to share
You can always use an element <canvas>
. It makes it much faster in browsers that support it.
You will have to use a workaround for Internet Explorer, although prior to version 9. You can use ExplorerCanvas to emulate IE canvas support. However, just be aware that it is very slow - possibly even slower than your algorithm. If IE support is important to you, you can ask users to install Google Chrome Frame if they want a better Internet Explorer experience; but other than that, you can't do that to speed it up in IE.
a source to share
Well, I see one light optimization:
for(i=0;i<this.length; i++) {
You check this.length every time this loop repeats. It's expensive, and if you don't expect length changes, unnecessary.
Try:
for(i=0,ii=this.length;i<ii; i++) {
instead.
In JS, I don't do any particularly important work, so I can only offer a few preliminary suggestions.
You can port some heavy computation to WebWorker, but I'm not sure if your situation will be of much use.
Check them out here: https://developer.mozilla.org/En/Using_web_workers
Also, if you are not using any of the Array object functions for an array, try using an object with integer "keys" instead.
I've never done an object and array lookup test, but I have friends who insist that objects are much faster in some cases (although in theory they should be comparable).
This is a very quick and easy way to code your code, so why not give it a try?
a source to share