Tuesday, March 19, 2013

Iterative Canvas Code

As promised, here is a sampling of code from Iterative Canvas. This is the 'meat' of the program. While it makes up a fraction of the program's code, this is what generates and draws the output when running the game. It may be a little tough to follow, but any line that starts with two slashes (//) is a comment describing in English what is going on (the computer ignores these lines.)


this.addPoint = function(){
    if(endPoints.length > 0){
        
        //gets settings from the control panel
        var distChange = parseFloat(eval(document.getElementById('step').value));
        
        //randonly choose a target point
        var targetPoint = nextTarget;
        nextTarget = Math.floor (Math.random() * endPoints.length);
        
        //find the X's position after jumping the set distance to that target point
        curPoint[0] = curPoint[0] + ((endPoints[targetPoint][0]-1)-curPoint[0])*distChange;
        curPoint[1] = curPoint[1] + ((endPoints[targetPoint][1]-1)-curPoint[1])*distChange;
        
        //draw the new black dot
        context.fillRect(curPoint[0], curPoint[1], 1, 1);
        
        //call other code to move the X to the new location
        funitfciterativecanvas.updateXdraw();
        
        //if the program is running to infinity keep track of how far
        if(remainingPoints == 'inf') infRunCount++;
        
        //if the program isn't running to infinity, subtract one from the number of times this has to run
        if(remainingPoints != 'inf' && remainingPoints != 0) remainingPoints--;
        
        //if this has to be run more times
        if(remainingPoints != 0){
            //if drawing normally (not quickly) then delay and run again - also a hack to solve overflow problems in recursion
            if((document.getElementById('quickDraw').checked === false && (!remainingPoints || remainingPoints == 'inf'))
                    || remainingPoints == 1 || (infRunCount == 200 && document.getElementById('quickDraw').checked === true)){
                setTimeout(funitfciterativecanvas.addPoint, 0);
                infRunCount = 0;
            }
            
            //continue drawing points quickly
            else{
                funitfciterativecanvas.addPoint();
            }
        }
    }
}

3 comments:

  1. In response to your request, I can understand the code with the help of the comments. But would a layperson want to read through that? Probably not. My suggestion: every time you paste code, color the comments in red or another easily visible color.

    Keep in mind what I said when we discussed what people want to see: they want to SEE cool things, not UNDERSTAND it. They aren't going to try to read your code, they just want to be awed by its visual complexity. (Unless you've got some coders in your audience, in which case this conversation is moot) It's just like how people want to SEE my staff paper, not read the music that's on it.

    ReplyDelete
    Replies
    1. That's a great idea - I went back through and colored the comments red, and will certainly do that for future code posts.

      Delete
    2. For what it's worth, I definitely read the code and tried to understand what the various parts of it were doing. I do not know WebGL, but I have enough experience with programming that I can pick up on the syntax here and there. The colored comments are definitely very useful, as they help to visually separate the code into sections that do distinct things.

      Delete