Whoa – Accidental Fractal…”ish”

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