While browsing the web, I stumbled upon this neat JavaScript program (found on Khan Academy) created by another user:
/*vars*/
frameRate(0);
var Sz=100;
var particles=1000;
scale(400/Sz);
var points=[[floor(Sz/2),floor(Sz/2),false]];
for(var i=0;i<particles;i++){
points.push([floor(random(0,Sz)),floor(random(0,Sz)),true]);
}
var l=points.length-1;
var dirs=[[0,1],[1,0],[0,-1],[-1,0]];
/*functions*/
var move=function(p1){
var mv=dirs[floor(random(0,4))];
var temp=true;
for(var i=l;i>=0;i--){
if(!points[i][2]&&points[i][0]===p1[0]+mv[0]&&points[i][1]===p1[1]+mv[1]){
temp=false;
p1[2]=false;
i=0;
}
}
if(temp){
p1[0]+=mv[0];
p1[1]+=mv[1];
if(p1[0]<0){p1[0]=0;}
if(p1[0]>Sz){p1[0]=Sz;}
if(p1[1]<0){p1[1]=0;}
if(p1[1]>Sz){p1[1]=Sz;}
}
};
/*draw*/
draw= function() {
background(255);
for(var i=points.length-1;i>=0;i--){
stroke(0);
if(points[i][2]){
move(points[i]);
}
else{
stroke(0,0,255);
}
point(points[i][0],points[i][1]);
}
};
After reviewing the code, I found it a bit challenging to follow. Therefore, I opted to create my own version using object orientation principles:
// Turns out, using object orientation is significantly slower than utilizing arrays for data storage
var Point = function(x, y) {
this.x = x;
this.y = y;
this.moving = true;
};
// static constant
Point.dirs = [
{x:0, y:1},
{x:1, y:0},
{x:0, y:-1},
{x:-1, y:0}
];
/*vars*/
frameRate(0);
var Sz=100;
var particles=1000;
scale(400/Sz);
// initial point
var points=[new Point(floor(Sz/2), floor(Sz/2))];
points[0].moving = false; // displayed in blue
// additional points
for(var i=0;i<particles;i++){
points.push(new Point(floor(random(0, Sz)), floor(random(0, Sz)));
}
var l=points.length-1;
/*functions*/
var move = function(p1){
var mv = Point.dirs[floor(random(0,4))];
var notAttached = true;
for(var i = l; i >= 0; i--) {
if(!points[i].moving && points[i].x === p1.x + mv.x && points[i].y === p1.y + mv.y) {
notAttached = false;
p1.moving = false;
i = 0;
}
}
if (notAttached) {
p1.x += mv.x;
p1.y += mv.y;
if (p1.x < 0) { p1.x = 0; }
if (p1.x > Sz) { p1.x = Sz; }
if (p1.y < 0) { p1.y = 0; }
if (p1.y > Sz) { p1.y = Sz; }
}
};
/*draw*/
draw= function() {
background(255);
for(var i=points.length-1; i >= 0; i--) {
stroke(0);
if (points[i].moving) {
move(points[i]);
}
else {
stroke(0, 0, 255);
}
point(points[i].x, points[i].y);
}
};
The original implementation utilized arrays for data storage. Index [0] represented the x coordinate, index [1] denoted the y coordinate, and index [2] acted as a flag.
I believe I only made necessary changes to substitute point[0] with point.x, and so forth.
To my surprise, my modified version performed considerably slower.
Is there a way to enhance code readability without sacrificing performance? Or must we compromise performance for clarity?
JavaScript Engine: Chrome on Windows 10
Edit: further discoveries have been made:
As pointed out by Ryan, replacing the Point class with plain objects - new Point(x, y) → {x: x, y: y, moving: false} - resulted in improved performance close to the original code. Thus, the sluggishness was attributed to the Point class itself.
Presently, I am working with three different versions of the program:
- array-based data (original)
- Point class (initial rewrite)
- plain object (second rewrite)
In Chrome, the array-based data and plain object implementations exhibit negligible differences in performance, while the Point class approach noticeably lags behind.
I decided to test the same scenarios in Firefox and observed all variations performing similarly, with Firefox falling somewhere between the fast and slow speeds witnessed in Chrome, leaning towards faster execution.