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(); } } } }
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.)
Subscribe to:
Post Comments (Atom)
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.
ReplyDeleteKeep 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.
That's a great idea - I went back through and colored the comments red, and will certainly do that for future code posts.
DeleteFor 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