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".