Whoa - Accidental Fractal..."ish"

Thu, 03/01/2018 - 19:57

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. 

battlezone cracked windshield

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

accidental fractal