I was attempting to add a cracked windshield to the player tank in my Battlezone remake built in Javascript. I wanted to built the crack procedurally and it's "working". But it's not very believable as a cracked windshield just yet. I was able to add a pretty cool effect that shakes the screen but, the cracked windshield currently either resembles fractured rock or in many cases modern art.
Anyways the idea is simple. Pick a direction, move the coordinates along the new vector, draw a line from [x1,y1] to [x2,y2]. Rinse, lather and repeat. Then on occasion split the crack in two directions if a roll of the dice hits a number. The idea is sound (except that I need to stop the cracks from crossing it's own path). The problem is that I was hitting the crack side of the die too often.
/**
* this is the loop
* @returns {Void}
* */
var loop = function() {
// if we somehow get here and things haven't been initiated. do that now
if(first) init();
// shake the screen
document.getElementById("game").style.left = ((Math.random() * 10) - 5)+"px";
document.getElementById("game").style.top = ((Math.random() * 10) - 5)+"px";
// get the current number of cracks
let l = cracks.length;
// loop the cracks
for(let j=0; j<l; j++) {;
// init a local x,y to hold before we add the new coord
let x = cracks[j].x;
let y = cracks[j].y;
// set a random whole number +/- 15 degrees
cracks[j].dir += Math.floor(Math.random() * 30) - 15;
// make sure we are inside a 360 degree coord system
if (cracks[j].dir > 360)cracks[j].dir -= 360;
if (cracks[j].dir < 0)cracks[j].dir += 360;
// move x,y to the new location and add the result to a temporary variable
let tmp = $w.motion.motion_set(cracks[j].x,cracks[j].y,cracks[j].dir,(300 + Math.random() * 300));
cracks[j].x = tmp[0];
cracks[j].y = tmp[1];
// logging for development purposes
Devlog.log("crack X",x);
Devlog.log("crack Y",y);
Devlog.log("crack dir",cracks[j].dir);
// draw the line
$w.canvas.line(i,x,y,cracks[j].x,cracks[j].y,GREEN);
/***
*
* this was the problem. I started at 600 aaaannnd...that was too low LOL
*
* */
if ((Math.random() * 1000) > 995) { // roll the dice. if it hits > 99.5%
// add a new crack
cracks.push({
x:x,
y:y,
dir:cracks[j].dir
});
}
}
// increment the loop count
loopcount++;
// if at the loop maximum
if (loopcount >= loopmax) {
// reset everything and set player is alive
reset();
Player.setAlive(); // the player will check if it's out of chances and end the game if necessary
}
}
I had actually predicted this a bit however, I didn't expect it too look like a fractal tree. I say "look like" because I seem to remember that a fractal self-similar.
Anyways it was an interesting result...cashed the browser. But,... "neat".



