That's a Wrap

Dear reader,
I am wrapping up this blog as I am preparing to print and bind it. There are a lot of loose threads, "I will post about"s, and a distinct lack of closure. Fractal Canvas has most of its features and most of its design, but hasn't been published, tested, and revised in full-form yet.

The process of developing Fractal Canvas has been fun, challenging, and instructional. My primary growth in reflecting on that learning process in this blog has been learning how to communicate my projects to a general audience in a varied, interesting, general voice. I hope you have enjoyed reading this blog, and maybe some day you can check out www.fractalcanvas.com again and see what it becomes.

Istvan.

Elite Athletes Listen To Their Coaches

An article about Olympic athletes and their relationships with their coaches, this Huff Post piece outlines the importance of listening to advice and why, sometimes, we might not accept it so easily. Students were asked to consider this in terms of their relationships with their teachers.

An interesting trait shared by the best teachers I have ever had is they recognize what I do outside of class and have a reasonable idea of how their class fits in. A teacher who is fully involved in their subject may produce high test scores, but not necessarily well-rounded students.

A good coach, on the other hand, is hired to perfect one skill (gymnastics for example). To this extent, coaches and teachers are not similar.

Both do give advice and criticism, however. Being receptive to that feedback is important in both cases, and often difficult in both cases. Especially in my project where I wanted to incorporate user feedback into my site, the difference between criticism on how the site works vs. how they expect it to work is very different from criticism on my process. The former is easy to receive for me, the latter takes cogitation.

There isn't really a "moral" to this post, it's just some observations for consideration.
Istvan.

Logistics Explained

I met with Mr. Drix to have him explain what is going on with the logistic graph featured in the logistic app. He explained it using several representations, some of which I want to add to my long-term goals to implement (after WISE), including the Feigenbaum plot. I have written up the fruits of our conversation and will be publishing it live to fractalcanvas.com after proofing it and finding diagrams.

Istvan.

Statistics

SAFE, the framework/compiler I'm using, has a feature that tells you how much code is on your site. Prepare to have your mind blown.

specified SFW lines: 448 (The basics for the page with no content (including sidebar, login, etc. just the page)

generated SFW lines: 2184 (The framework takes the above SFW lines and generates the live code of this length)

specified CSS lines: 2174 (Including the base style that comes with the framework, this is how many lines of styling code there are on the site)

specified JS lines: 23163 (Including the libraries included in the framework, this is how many lines of JavaScript are on my site)

I might modify the statistics code to tell me how much of those last two pieces I wrote. Stay posted!

Fractal Engine

The last time I posted a sample of code it was hugely popular - so I'm doing it again. This time, it is the backbone of the FractalCanvas program - the Fractal Engine. The code is a little bit more complex than anything I have posted thus far, so cling to the red comments which explain what is going on!
Note: this code is not yet optimized - by storing some values instead of calculating them multiple times and by algebraically simplifying some operations I anticipate this code running far more quicklky and effeciently than it does.

//fractalCanvasEngine provides tools to generate and manipulate fractals
function fractalCanvasEngine() {
//transpose is a function to scale and move the points in a fractal so that the first point is on (0,0) and the last point is on (1, 0)
this.transpose = function(sketchPoints){
  var transposedSketchPoints = [], angle, length, pointAngle, pointLength, i;
  
  //calculates the length of the line connecting the first and last points
  length = Math.sqrt(Math.pow(sketchPoints[0][1] - sketchPoints[sketchPoints.length - 1][1], 2) + Math.pow(sketchPoints[0][2] - sketchPoints[sketchPoints.length - 1][2], 2));
  //calculates the angle of the line connecting the first and last points
angle = Math.asin((sketchPoints[0][2] - sketchPoints[sketchPoints.length - 1][2]) / length);
  //for each point in the fractal apply the rotation and scaling
for(i = 0; i < sketchPoints.length; i++){
   pointLength = Math.sqrt(Math.pow(sketchPoints[0][1] - sketchPoints[i][1], 2) + Math.pow(sketchPoints[0][2] - sketchPoints[i][2], 2));
   pointAngle = Math.asin((sketchPoints[0][2] - sketchPoints[i][2]) / pointLength) - angle;
   
   //Add the newly transformed point to the output array
   transposedSketchPoints.push([
    sketchPoints[i][0],
    Math.cos(pointAngle) * pointLength / length || 0,
    Math.sin(pointAngle) * pointLength * -1 / length || 0
   ]);
  }
  return transposedSketchPoints;
 }

 //scale takes a fractal and rescales it to fit in a 1 by 1 window
 this.scale = function(points){
  var minX = points[0][1] || 0,
  maxX = points[0][1] || 0,
  minY = points[0][2] || 0,
  maxY = points[0][2] || 0,
  scaleFactor, point;
  
  //find the size of the fractal (height and width)
  for(point in points){
   if(points[point][1] < minX) minX = points[point][1];
   if(points[point][1] > maxX) maxX = points[point][1];
   
   if(points[point][2] < minY) minY = points[point][2];
   if(points[point][2] > maxY) maxY = points[point][2];
  }
  
  //calculate how much the fractal needs to be scaled
  scaleFactor = Math.min(1 / (maxX - minX), 1 / (maxY - minY));
  
  //apply the scaling to each of the points
  for(point in points){
   points[point][1] -= minX;
   points[point][1] *= scaleFactor;
   
   points[point][2] -= minY;
   points[point][2] *= scaleFactor;
  }
  
  return points;
 }

 //the heart of the fractal engine - a recursive function that generates the fractal
 this.getLevel = function(remainingLevels, points)
 {
  //continue recursive operation, there are more levels to calculate
  if(remainingLevels > 0){
   var subLevel = this.getLevel(remainingLevels - 1, points),
   prevPoint,
   curPoint,
   rotFactor,
   scaleFactor,
   returnLevel = new Array(),
   subRot,
   subScale,
   i,
   inverse;
   
   for(i = 1; i < points.length; i++){
    prevPoint = points[i-1];
    curPoint = points[i];
    
    if(curPoint[0] === 1 || curPoint[0] === 2){
     //this is where the actual fractal is generated... its fairly complex. In short, it converts the fractal to polar, applies the transformations (including flipping it if necessary) and then converts it back to rectangular. I am not going to try to explain where/how all of that happens.
     scaleFactor = Math.sqrt(
      Math.pow((curPoint[2]-prevPoint[2]), 2)
      + Math.pow((curPoint[1]-prevPoint[1]), 2)
     );
     rotFactor = Math.asin((curPoint[2]-prevPoint[2])/scaleFactor);
     
     inverse = (curPoint[0] === 1 ? 1 : -1);
     
     for(var j = 0; j < subLevel.length; j++){
      subScale = Math.sqrt(Math.pow(subLevel[j][2], 2) + Math.pow(subLevel[j][1], 2));
      
      subRot = Math.asin((subLevel[j][2]/subScale) || 0);
      if(subLevel[j][1] < 0) subRot += (Math.PI/2 - subRot)*2;
      
      returnLevel.push(Array(subLevel[j][0],
       ((subScale)*scaleFactor)*Math.cos(rotFactor+inverse*subRot)+prevPoint[1],
       ((subScale)*scaleFactor)*Math.sin(rotFactor+inverse*subRot)+prevPoint[2]));
     }
    }
    else returnLevel.push(Array(curPoint[0], curPoint[1], curPoint[2])); //the type of this segment is not one that requires it to be replaced by a fractal
   }
   return returnLevel;
  }
  else return [[1, 0, 0], [1, 1, 0]]; //level 0 is just a line
 }
}
var fractalCanvasEngine = new fractalCanvasEngine();

Sample Presentation

Luke's fantastic sample presentation brought a couple of points to my attention. Luke's powerpoint was very well done; the text was sparse and concise, images relevant and aided his explanations, and the entire presentation was well organized. The part that struck me as the most impressive was Luke's ability to answer questions - whether an obscure history question, or a technical playing question. His research and understanding were evident.

The presentation also served as a good kick to start seriously thinking about my own project and my readiness.

Istvan.

Uh-oh

I updated the framework in hopes of using a new feature. Unfortunately there is some incompatibility/bug that is causing about half of the style to not appear - ie there is no sidebar and much of the functionality is broken. I am working with the developers of the framework to find the source of that bug now...

Stay posted.

Fractal Canvas - Major Update

Dear reader,
it seems that several of my previous posts from my phone didn't publish to my blog, and were only saved as a draft due to a bug in the Blogger application. In this post, I will compile all of the exciting news that should have been posted over the last two weeks or so.

Fractal Canvas Controls:
The control palate for a line segment has been tightened up and committed to the live code base (sketches and a mockup were posted earlier)! The live code now lets you draw a template and change the line types (0 through 5) for any line by clicking on that segment and then the appropriate number. The move, splice, and delete functions are working to varying degrees on the test site now. Hopefully those three functions will also be committed to the live site by tomorrow when I have a day off school and can work out some quirks.

Fractal Canvas Engine:
The engine is what takes the points from the template and draws the fractal. I wrote the engine on a test site at first, then I updated the beta drawing engine, split it into three functions, committed it to the site, and linked it in. Users can now create fractals from custom templates.

To-do for Fractal Canvas: I need to finish the tools for segments, add tools for points, verify the line types all work, and tidy up the controls/add the missing controls, and draw fractals to new layers.

Happiness Revisited

What makes me happy? Even before reading the article, I could have told you I am happy when I'm "in the zone" or in "flow". When I settle on a project or activity, and I am in the middle of working on just that I am happy. What that particular occupation is has some impact, but isn't a common feature of fun activities.

Happiness Revisited confirms that notion of happiness. It goes further to say that "flow" exists in a 'sweet spot' combination of challenge and skills. My WISE project, along with most of my endeavours, exist in a self-mediated flow, in a modern buffer that meets challenges with the internet. I take on projects that ideally I have little idea how to accomplish. I like learning on the fly, whether in programming fractals apps or in building a CNC plasma cutter. The development of fractalcanvas falls under this category - every step of the way involves learning new things, becoming more skilled, and arriving at another challenge.

Istvan.

Code Red

This past week Code Red Robotics competed in the international championship event in St. Louis. The WISE blog I read was from a team president who dedicated a post to the team, and now that that's me, here it is:

Code Red Robotics is IHS's local FIRST robotics team. The 75 members spend 6 weeks designing and building a robot, and all year sharing their passion for science and technology with the community.

The robot that Code Red builds every year is designed to compete in a specific challenge against thousands of high school teams from around the world. For the past two years, Code Red has been invited to the international championship event held in St. Louis to compete with 400 of the best teams from around the world. We earned that slot by winning the Buckeye Regional.

While not directly related to my project, this trip has been a major focus of mine for the past few weeks. Now that the season is over, and as the period of post-AP-freedom approaches I hope to ramp up the time spent on Fractalcanvas in preparation for the end of the year.

Istvan.

Comfort Zone

The border of the 'comfort zone' is aptly fractal for my project. Almost nothing of what I am doing is something with which I am familiar, but on the other hand thats what makes me feel so at home programming. I enjoy the variety and diversity of the project. The more things I learn, the better, and there is no better way to learn than getting a challenge and having Google by your side.

Istvan.

Mentor Meeting

NOTE: This post has been a 'draft' for nearly a week now, and I didn't notice.

I met with Mr. Drix today - we talked about Iterative Canvas a lot, specifically the help text. We tweeked the wording, and he helped me develop a clear way to explain the Sierpinski triangle. We also briefly talked about future options for this project, looking beyond this year. More on that later.

Istvan.

Revision 2827

While spelunking around in my old website where I have dozens upon dozens of tests, mini-projects, and and the bones of once-great-ideas, I came across an app I developed for my math teacher last year. During a unit on logistic functions, he made mention of the function's ability to produce chaos. The next day, I had a little web app ready for him to show the class.

When I found this app I figured I'd bring it to the Fractal Canvas site -- Check it out!

I will be posting documentation for it soon... Once I remember how it works :)

The title of this post comes from the revision of SAFE (the framework I use) that I installed today. I asked for a couple of features to be added that were required to get this app running, and that revision contains those updates.

Istvan.

Two Tramps in Mud Time

Robert Frost's Two Tramps in Mud Time tells the story of two men who come upon Frost splitting wood. I thought the most significant part of the whole poem was:

...I  had no right to play with what was another man's work for gain.

My right might be love but theirs was need.

And where the two exist in twain

Theirs was the better right  - agreed.

 I think it's interesting that in our culture one's enjoyment is second to another's livelihood. I don't know that it is good or bad.

Perhaps it is a naivety, but I think that people can make a living of their love. Ms. Gergely is always encouraging her students to love their projects, their school work. My greatest mentors have loved something enough that they made a living from it. In particular I think Neil deGrasse Tyson is a great example.

Istvan.

Controls

Here is a rough sketch of the controls users will get when they hover over a line in Fractal Canvas.

This is obviously not an intricate sketch. It has just the locations and shapes of important elements. I use these rough sketches to figure out what elements I actually need to have, and roughly where they will go.

These tools allow a user to move, delete, and splice line segments. The numbers on top let users change line types. The shaded part in the middle starts a drag-and-drop when you click it, the button on the bottom right deletes the line, and the button on the bottom left splits the line into two segments where the cursor is.

Here is this sketch coded up and running in a web browser:

In the picture, my mouse is hovering over the 4 (which is why it sticks out.) The colors are all semi-transparent, but when your mouse hovers over them they light up.

Edit: It is worth noting that the image above took 160 lines of HTML/CSS to code.

Tweaks and Quirks

While I work on the Fractal Canvas app, I am continuing to tweak Iterative Canvas.

When I work at home, I have my laptop's 17.3" screen and a 22" display connected. I test all of the apps I create on this setup, which leads to some quirks sometimes. For example, the Iterative Canvas controls all fit fine (with plenty of room to spare) on my screens, but when people viewed the app on school computers they found that the controls were too wide for the screen and that it was difficult to see the controls and the canvas at the same time. I have tweaked a few things to minimize the screen real estate the controls take up, hopefully bettering the experience of users.

Down the road, I might make the controls a drawer on the canvas, so you hover your mouse on the top or right side of the canvas, the controls slide out, you change what you like, and then when you hit 'Go' the controls slide back in. This will take some thought though, since it might be inconvenient at times.

But thats later to come.

One of the comments I have gotten several times has been "Can you explain the Fractals and Chaos behind the app?" -- In previous posts I have struggled with explaining what is going on in big chunks of text. For several reasons, those walls of information are less than ideal - not the least of which is that presented to me I certainly would not read it! One idea I got from a friend is to make videos. I need to explore this a little more, but I am thinking it would be very cool to make 1 minute videos explaining what is going on in apps. These are much more friendly to consume, and allow me to present the ideas verbally - a medium with which I am far more familiar.

Istvan.

Quick Lists

As part of the "Out of the Rut" assignment, here is a planning list:

• 7 Things I want to accomplish in the next week
1. Design (sketch) the tool palette for Fractal Canvas
2. Implement the tool palette for Fractal Canvas
3. Code template functions
4. Code template to sketchPoints features
5. Decide on Canvas vs WebGL implementation
6. Explore more ad spots
7. Make Iterative Canvas more friendly to SMART Board setup
• 5 People I should talk to about my project
1. Mr. Drix
2. A student who is now using Iterative Canvas in class
3. A student who is now using Iterative Canvas in class
4. A student who is now using Iterative Canvas in class
5. A student who is now using Iterative Canvas in class
• Supplies I need to get
• Supplies not required
• 3 Things I should talk to my mentor about
1. Testing plan for Fractal Canvas
2. Video lessons for all apps
3. Review of how Iterative Canvas is doing in-class
• 7 Things to research
1. JavaScript Closures
2. SVG Optimization
3. Canvas vs. WebGL implementation
4. Advertising options
5. How to perform usage analysis of web apps
6. How to make the site load more quickly
7. Learn how to use drag and drop features of HTML5 for layout adjustments

Istvan.

Ads

I published ads on fractalcanvas.com in the sidebar. This ad is hopefully unobtrusive, but will still bring in some money as people use the apps. Some portion of that money might go into buying ads which will bring people to my site.

Istvan.

Data Structures

This post is written for people who are familiar with the basics of computer science and a little javascript. If this is not you, feel free to read the code below (which contains extra comments.)

There is an entire field within computer science dedicated to finding efficient ways to store information. I was not satisfied with how I was storing data in an early version of fractal canvas, specifically how points in the template needed frequent updates to keep them in sync with their representations under the hood. My solution is to create a data structure that stores each point with an Id that is unique for the lifetime of the page.

Warning: it gets more technical

//hashedArray is my new data structure gives each element an ID that is unique for the lifetime of the page
function hashedArray(){
    this.id = 0; //the ID of the newly inserted element
    this.elements = []; //holds the data
    
    //gets the length of the elements (needed because array is sparse)
    this.length = function(){
        var cnt = 0;
        for(var i in this.elements) cnt++;
        return cnt;
    };
    
    //index is optional - defaults to the end of the array
    this.insert = function(elem, index){
        index = ((typeof index === 'undefined') ? this.elements.length : index);
        this.elements.splice(index, 0, {hash: this.id, data: elem});
        return this.id++;
    };
    
    //getter
    this.get = function(){
        return this.elements.map(function(elem){ return elem.data; })
    };
    
    //get an element by its hash
    this.getElementByHash = function(hash){
        for(var elem in this.elements) if(this.elements[elem].hash === hash) return this.elements[elem]; //find the element
    };
}
//create an object to hold the sketch points
this.sketchPoints = new hashedArray();

SVG

There are countless languages that are used in web development. One of these is called SVG. It is actually misleading to call it a language. According to Wikipedia, it is

[...] an XML-based vector image format for two-dimensional graphics

 Previously, for the Fractasketch template, I drew a dot at the end of each line segment in the template and then drew lines connecting the dots on a template.

This is not flexible at all though when designing the UI. I only have access to events on the dots (mouse over, clicking on etc.) By switching to SVG for the template drawing, I will be able to write a highly interactive UI where users can click on the lines, points, and arrows that make up the template.

I will post pictures of tests and demos as I learn how to incorporate dynamic SVG content into my page.

Istvan.

Mentor Meeting

Today I had my weekly mentor meeting with Mr. Drix. I showed him the final version of Iterative Canvas which we played with for a period.

In my experience, some teachers only use Smart Boards as projectors, some have them but don't use them at all, and a handful use Smart Boards to enhance their lessons beyond what an overhead can do. There are, however, some teachers and some lessons that feature a Smart Board so effectively it amazes me in the way only powerful tools that are used so effectively they become transparent can. Today, I think Iterative Canvas made it to the short list of lessons that are effective on Smart Boards.

While he ran through his lesson and I pointed out technical tips, I also discovered some small things to update. For example, now the grid updates resolution as you type, custom points are reverted to auto when you switch tabs, and changing the number of auto points and their scale are both immediately reflected.

I fixed a few typos in the text below the canvas that I found as we read through them together.

Progress is going well as I create an FUnit from the alpha Fractasketch template UI. More posts on this soon.

Istvan.

Walls of Text

Writing the documentation is turning out to be more difficult than I thought.I'm trying to make it interesting and thorough enough that people can appreciate what's going on. That amount of detail builds a formidable wall of text which easily surpasses what I would be willing to read if I stumbled upon this page.

In my meeting with Mr. Drix I will ask him how he approaches boiling this down in his class.

Istvan.

Wait... documentation

I need to take a break from Fractasketch... I forgot something!

My Chaos Game (the old version of Iterative Canvas) has some poorly written, un-proofed documentation... which is still more than Iterative Canvas has now!

I'm going to get started now, and hopefully have at least a 'getting started' done by tomorrow.

Also, check out the new collapsing feature I added to the controls.

Istvan.

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();
            }
        }
    }
}

What's Next?

I have mentioned my next project, Fractasketch, before. The attached images are a teaser of what you will be able to do. These were created by the current fractals and chaos students (I will credit them when their names are released).

Istvan.

Scary Code

When I was a young kid I always thought programming was all in cryptic numbers and symbols without any semblance to natural language. As it turns out, this is indeed (usually) largely untrue. For example:

<if:Empty $%username>
...
</if:Empty>

That is relatively straight forward - if the username is empty, then run what ever code is between those lines.
This segment stores the value 0 on the computer for use later:

remainingPoints = 0;

There are times, however, that code really does resemble my preconceptions. The following code comes from the configuration file of my server:

 #apps
RewriteRule ^apps/([^/.]+)(?!.)$ $1.sfw.php [L]
#app resources
RewriteRule ^apps/(.*(?=\.).*)$ $1 [L]

I wrote it to tidy up the web addresses (URLs) that my users visit.
Now,

http://www.fractalcanvas.com/apps/iterativecanvas

is the same page as

http://www.fractalcanvas.com/iterativecanvas.sfw.php

except a much nicer address. In fact, other applications I develop will have similar URLs now, of the form:

http://www.fractalcanvas.com/apps/some_app_name

There is a little insight into what programming really looks like- granted, each of those examples was hand-picked to prove a point. I'll be posting some code segments soon that are more representative of what my project entails.
Istvan.

Thoughts From a Project Past

As part of an assignment, I read the project materials of a former student. Reading the project was particularly interesting to me because I know the student and had a lot in common with him; we were both presidents of Code Red Robotics (I still am), took the Project Lead The Way tech classes, and both hope to become engineers (he did!)

The project I read was making a robotic arm that plays checkers against you. The student's journal showed several examples of the problem solving involved in his project, for example detecting stacked up pieces. The journal explained the problems in light detail, but explained the basic technical principles behind their solutions. Being familiar with these principles, and in fact having learned them from the same teacher on the same machines as he used, I particularly appreciated these posts.

The idea of having a blog be 'for your own benefit' has been advised to my class several times; but I will not be the only one who reads mine. The blog I read was littered with spelling errors, but was also hard to follow as a reader. I also would have benefited from benchmarks or some overall view of the project and occasional sign letting me know where he is.

From these conclusions I am starting two new habits in my own blog: milestone posts and posts that explain what I'm doing to a non-technical reader.

Istvan.

Home Page

I created a (temporary) home page a few days ago, but when you went to www.fractalcanvas.com the home page didn't show up. Instead it created an automatic listing of all the pages on the site, but it didn't automatically choose the right one for the home page. A little research showed that adding the following line to my configuration would solve the problem (without messing several other things up, which was the problem with other solutions I had tried):

DirectoryIndex index.php index.sfw.php

 I need to put some more substance on the home page soon. I will start drafting an "about this site"  blurb to add to that page in the coming few days.

Istvan.

How Meta Can You Go?

In reading journals from previous projects, talking to a friend about his blog, and in reading my own I got thinking about how abstract my blog is/should be. Here is the conundrum:

If I talk very specifically about the problems I encounter, the solutions I find, and technical perspectives of the work I do my journal becomes a very useful tool to me... and an unintelligible, boring log with occasional pictures to everybody else.

If I talk generically about the progress I am making it will sound very, very repetitive and serve little purpose to me. However, the comment was made to me, that people are interested in what I am doing, not necessarily how I am doing it.

Here is a template for every abstract post I might or could make:

I started with the goal of [some feature to implement]. I ran into some problems with the programs I'm using [list a couple of bugs, like "the sidebar is too wide in Firefox"]. I found a fix for [some problem I had before] - it works now. Next I need to [perhaps some goals].

At first glance, that seems like a thoughtful and perhaps even interesting blog post. As a tool to me, however, this post offers little help. 'The sidebar is too wide in Firefox' is the kind of bug developer hate. Its not really a bug, it's a symptom. A useful description of the bug might be "Firefox doesn't support the box-style CSS property. The style was written to use border-box, which is valid in Chrome. Using a temporary Firefox-specific style instead."

As a compromise, I might start prefacing some technical posts with a summary (following the above template roughly) and then getting into the technical details after.

Practice

The exact benefit of practicing is a skittish creature to define. Over the past week I have been considering examples of practicing, some that relate to my project and some that don't, to help nail down what it is exactly that practicing does for me.

Learning new things

Being a learn-on-the-fly type of guy, the first (few) times I practice something, it is akin to bushwhacking. As part of the research for Fractal Canvas, I am learning a new language (WebGL.) On my left screen I have a tutorial open on one half and the manual on the other. On my main screen, I switch between my code editor and browser to see the results. Practicing at this stage is just transcribing from the example to my own code, understanding each piece as I do (from the manual) and tweeking little things here and there to familiarize my intuitive sense with the parameters.

In an example from a completely different field, I picked up a trombone yesterday and my friend taught my the basics of how to play. Being a tubist, the fundamental sound-making came easily, but the slide was completely new. Creating relationships between partials, notes, and positions came more and more easily as I fumbled through notes in easy pieces, finding each one as I went.

Intuitive Sense

Practice can lead one to develop an 'intuitive sense' relating to some task. In programming, this may be the approach I take to solving a problem, styling a page, or making accommodations for afterthoughts. In music this intuitive sense fuels my interpretation of the ink on the page. But perhaps the most tangible example comes from my experience as a machinist on Code Red. By the end of a 6-week build I could mill 1/1000th of an inch of metal off a rod by eye, identify the thread size on bolts, and estimate parts and features to the nearest common fractional size. These abilities were developed through repetition and unconscious pattern recognition. These intuitive skills, including those in programming, music, and machining along with the countless similar skills everybody picks up every day, are clearly definable products of practice.

Maintenance

In programming there are distinctly different skills in theoretical understanding and application. Practicing writing actual code is the transition from one to the other. Each time I write a similar piece of code I become less dependent on manuals and documentation. Phrases and melodies in band pieces become muscle memory. My fingers and mouth sync up better as I practice, and my ears become more finely tuned to the music. This stage is where things become facile, "like riding a bike."

Relearning

When I take my bike out for the first time in the spring, it's obvious that some relearning is in order. It takes a moment's thought (and planning ahead) to unclip my shoes from my pedals before I stop. It takes a few miles to remember just how much to lean over when corning at race speeds.

Most programmers 'know' more than one language. Many are similar, so once you know one it may take a day or two to 'learn' another. But every time I take a hiatus from a language, it takes a day with the documentation to remember the exact syntax specific to parts of that language.

Just this Monday, in band we took out Bayou Breakdown for the first time in three weeks; we crashed and burned. We all went home, refreshed our fingers and re-attuned our ears to our parts, and made it through the piece just fine a few days later.

Practice

I considered four 'types' of practicing from my own experience. In just this last week I have had a chance to experience and contemplate each. In my project, each kind of practice is certainly present to a large degree. This weekend I have worked on learning a new language, brushed up on a familiar language (SQL), and written in SAFE/PHP/HTML/CSS, all languages with which I am very familiar.

Istvan.

3D Page, Firefox Woes

I'm working on squashing a bug on my site in Firefox. When you manually add target points they are added far offset from where they should be. Firefox and Webkit (Chrome, Safari) handle the clicking differently, and it seems Firefox changed how they handle it recently. I'm poking around in some forums to see how to fix the problem.

In the mean time, here is a neat picture Firefox created showing all of the layers and elements in my page:

Istvan.

Mentor Meetings

A week ago I posted:

My goals for the next week or so are to tidy up Iterative Canvas (especially the code and front end) and add snap to grid functionality for custom placement of points.

 Today I finished the second part of a two-part mentor meeting in which I showed Mr. Drix the successful completion of these goals. For a more complete summary, see the post I published this morning.

Moving forward, I will of course be tieng up loose ends for Iterative Canvas (including a style bug in which the custom points tab is nowhere to be found in Safari.) My main focus, however, is transitioning to implementing Fractasketch (under some other name.) I have been doing research about writing code in WebGL. The application of that research will come with Fractasketch as I port the alpha version I have and write the drawing engine in WebGL.

A quick, miscalculation project in the next day or two will be to add user authentication features to fractalcanvas.com so that users can save their work and create galleries online.

Istvan.

Iterative canvas updates

Last night I pushed several updates live, including features for iterative canvas,a home page, Google analytics code, and site-wide libraries.

Iterative canvas' controls now include a toggle for go to infinity/stop. The controls are all shorter so that they fit on smaller screens. A snap to grid checkbox has been added which uses a snap to grid function written in a utils FUnit.

The utils FUnit is activated by every page which inserts tracking code and makes JavaScript libraries available.

I will post later today about my mentor meetings today and Tuesday.

Istvan

Iterative Canvas Live

The moment that I have been promising would come for several posts now has arrived! Iterative Canvas, the first of the applications I'm deploying, is live on my new domain! Click here to go check it out. Note that I have not yet written the tutorials so for most people the "point" of the page won't be clear... but for a pretty picture just hit Go ∞

Here are some of the things it draws:

Thanks

This will be a short post, but I want to give a shout out to Raphael Reischuk, a coworker of mine on the SAFE project who has been very helpful in getting SAFE working on my shared host. He has answered my questions and helped me develop proposals/implement new features that allow the system to run on the strict requirements of my server.

Istvan.

WISE Documentary

In class, we watched a video that was not only a WISE project, but was about a WISE project. The documented project was a prime example of what the program can do; the task, building a barn, was enormous, but the student was dedicated. The interplay between the challenges and the student's resolve set clear mile makers of the projects growth, as the student looked for trees, milled the lumber, and created the framework for the barn; each step coming with unforeseen delays and challenges.

At the end of each stretch, the student was interviewed. The student shone at the measurable, tangible progress he had made. I look forward to having my website live so that I can announce on this blog that a new feature is available for the world to test.

On that note, off to code 'snap to grid'!

Istvan.

Integrated Live

After creating a proposal for an update to SAFE that allows it to run on managed (limited) SQL setups, one of my coworkers implemented those features. Now I can run SFW on my hosted server and integrate FUnits! I have even gotten the alpha version of the Iterative Canvas (new Chaosgame) working live.

I need to complete the control panel, map the site to my domain name, and then push those changes live for the world to enjoy in the coming week!

Istvan.

Mentor Meeting Notes

Today I had another mentor meeting. I managed to patch up a quick demo of Iterative Canvas in the few minutes before Mr. Drix and I met -- check out the picture below!


Mr. Drix also pointed out that I should make a credits page or section for these apps since I took inspiration from other people's work. I also aught to contact Peter Van Roy again and mention to himthat I will be using a name other than Fractasketch (as good as the name is, the code is completely unrelated so it seems appropriate for the name to follow suit.)

My goals for the next week or so are to tidy up Iterative Canvas (especially the code and front end) and add snap to grid functionality for custom placement of points.

    Iterative Canvas - the control section may look familiar. The styling is in-progress to match this sketch.

Istvan.

Scripting Mahem

I have copied Chaos Game to the new site, calling it Iterative Canvas. The page loads, looks decent, and throws no errors!

Unfortunately it still doesn't work. SAFE (as part of its security) puts each FUnit's scripts in an object. I split the game and controls into separate FUnits which, combined with the methods that call each other, have made quite a mess of function calls. This is for the to-do list tomorrow; I'll likely update the code base as I go since there are a fair number of loose ends lying around in the code.

Istvan.

Christening of Iterative Canvas

Hopefully I will officially deprecate my existing implementation of Chaos Game and launch the new version built into Fractal Canvas soon! I am porting the code over tonight. Below is a quick sketch of the control pane.

Istvan.

Behind the Curtain

Thus far, the actual happenings of this project have been somewhat hidden as the technical details of whats going on have been stripped away. This post is a 'peek behind the curtain'.

My experience thus far has been that the road is rocky; the solution to one problem is the cause of the next, or that another unforeseen challenge is but a few lines away. When smoothed out the progress looks slow, but then again the British coastline is not merely 11,072.76 miles long.

> The coastline is often considered a fractal, and infinitely long. Consider a small peninsula - from a satellite's
> view you might not see the feature and trace over the peninsula, affording it no length in the coast line. If

> you look more closely, however, that peninsula adds distance. Now look even more closely, and add the
> distance created by the features of the rocks, of the sand, even of the crystals that make up the sand.

Perl v10.what?

One of the first issues I grappled was that of a misleading spec on my web host's site - they claimed to be running a later version of Perl than was being called by default, causing the following error:

Sequence (?|...) not recognized in regex; marked by <-- HERE in m/((?| <-- HERE  empty \( ([^)]+) \)
                            | empty \s+ ([^\s&|)>]+)
                            | notempty \( ([^)]+) \)
                            | notempty \s+ ([^\s&|)>]+)
                            | equal \( ([^,]+)\s*,\s*([^)]+) \)
                            | notequal \( ([^,]+)\s*,\s*([^)]+) \)
                            | \s+OR\s+
                            | \s+AND\s+
                            | \s+
     at ../../sfwc/sfwc line 1480.

Can't GRANT me SUPER

My host gives me three database accounts per databsae by default... which don't really line up with the required permission levels for SAFE. Many of the SAFE features rely on individually GRANTing access within the database -- a command that none of those three users can execute. SAFE also tries to create VIEWs with DEFINERS set, requiring the SUPER privilege (which I don't have, and clearly can't GRANT myself.)

Template Page

The template has been copied into my SAFE installation and is running on a generic page! I need to separate the parts of the page into FUnits (sidebar, header, footer, content area, and activated content modules.) This came only after some wrestling with CSS inclusions, database errors (these were never 'resolved'... they just disappeared) and some updates. SAFE was not initially designed to run in directories that are children of the web root and needed some updating to make it work.

Research?

I have have familiarized myself with the basics of WebGL and have modified some of the example pages. My next adventure will be to draw thick lines with geometery shaders... features that arent provided by WebGL.

Apps

Of the three apps I am adding to this site, one is already done (only minor feature additions are required, such as snapping points to grids.) Once the template is 'expanded' I will dump the ChaosGame code into an FUnit and integrate it!

Files/Saving

One of the advantages of the new framework is that users aught to be able to save their files.... These features might be added to chaos game in parallel to the implementation of the other two apps.

When can I see this?

Good question. Once SAFE is updated to work on my host, I'll blast it up for all to see and use!

I'll periodically post these 'Behind the Curtain' posts with some technical insight for those interested. For the rest of you, pretty pictures are on their way!

Istvan.

SAFE on a shared host, status

Installing SAFE on my shared host has turned into a headache of unexpected proportions. Still early in development, the focus has been to develop functionality to run on the dev servers, not yet on customizable deployment. As I mentioned in a previous post,  I removed all user creations, all GRANTs, and DEFINERs from VIEWS from the database initialization code. It turns out that the CRM (which manages all of the pages/users/content etc in SAFE) is written to use these features as well, which causes it to throw errors on my shared host. I have written a proposal to update the CRM to contain the customization required to make installing SAFE easier. In the mean time, I will continue to run the site locally and update the gantt to reflect these unfortunate delays.

Istvan.

Mentor Meeting 2/27/13, Domain

Mr. Drix, my mentor, and I met again today. We talked about the project generally, since I have very few specifics ready to discuss.

The three main milestone programs for me will be versions of:

• Chaosgame
• Fractasketch
• Complex Paint

We also decided to go with the name FractalCanvas, and I purchased fractalcanvas.com  -- I will be switching my SAFE test bed over after this weekend.

After several bugs and help support tickets to my web host, I traced the bugs down to some Perl version errors. SAFE was also just updated to run in lower-level directories so that I can run this site.

With all of that out of the way, full steam ahead!

Istvan.

Database Solved, Perl Problems, Domain Resolution

For the last few day I have been focusing on getting the web framework up and running on my server - this post is a quick summary of where I stand, what I have encountered, and what I expect to come.

SAFE, the framework I am using, is still very much in a development stage. I have successfully installed SAFE without any problem on my test server, but deploying it to my public server is requiring paving the way for new configurations. Thus far, the database initiation scripts (which assume full-privileged MySQL access and creates new users) has been incompatible with my shared hosting solution, which provides three pre-made accounts, none of which has full access. I was, however, able to rewrite the database configuration scripts to work, and submitted them to the SAFE repository for consideration.

The next challenge is to address a "syntax" error in the compiler (written in Perl) that exists only on the deployed site, not my local site. I am talking with the other developers now, hopefully the solution will be simple.

I have been in contact with the owner of www.fract.us about purchasing his domain. He is willing to sell it, but his offer is $199 - far out of my price range. I am also contemplating www.fractalcanvas.com. Suggestions would also be appreciated! This decision is fairly critical since naming conventions and style might depend on it. I need to have purchased a domain by the end of this week.

Istvan.

EDIT: misspelling of Perl

WISE Blogs

I read several of my peer's blogs, and they are doing some really interesting projects! Two of my best friends who are also in WISE are composing music and learning performance magic.

Joon, who is amazingly musically talented, has already composed a piece for a video a friend and I made! His journal is part of his personal blog, which I follow. Joon makes frequent and content-filled updates frequently, almost daily. Given the nature of his blog/project, there are often great videos to watch or inspirational pieces linked in his posts making it far more engaging. His varied post style (combinations of lists, paragraphs, quick comments on a video, formal writing, semi formal, personal writing, etc.) also help making his posts engaging to read.

Edan is IHS's magician. He inspired me at the start of this year to pick up a deck and learn a few tricks of my own. I can't wait to follow his progress through the next 14 weeks, hopefully have him practice the tricks on me, and maybe even pick up some of the tricks he learns too. We have even talked about doing a two-person trick as part of his final project!

Progress on the theme is progressing - I have started throwing in dummy-apps to get a sense of how some of the major applications will look/behave on different screens. In the next few days I need to start porting the theme into SAFE and preparing the script libraries!

Istvan.

296 Lines

A night-and-a-day later, I'm 296 lines into the layout! (from body tag to body tag it's 34 lines, and 242 from style to style - no scripts needed!) A pure HTML5/CSS3 layout, this uses new (still developing) technology found in the latest browsers.

My next step is to start bringing this into my SAFE environment running locally. Unfortunately, on my shared host where the database server is separate from the web server, the preliminary SAFE config files need heavy tweaking (by default some tables require SUPER privileges in mySQL.) I am talking to the other developers about fixing that.

Istvan.

Color Scheme

Quick Post:
I dug up the color scheme I used to design the current set of fractals and chaos applications!
Click here to check it out

Istvan.

Design Inspiration

The framework I am using is designed to be built into a layout. Having set up the basics for the framework, I am now looking to finalize my layout and start the fun part - coding it. The existing design needs work... I like the colors, but for a more advanced site there is a lot to be desired. There is no way to link to several applications, the site doesn't adapt well to screen sizes, the text is perhaps a little hard to read, and there is no navigation within a page.

I keep most of my sketches for website layouts around, buried in some pile or another, but there was one that I particularly liked and put on my bulletin board right above my computer (see picture). I think I have finally found a suitable project, so it is time to dig out my sketchbook and fold my existing layout into it! Stay posted for more sketches to come soon.

Istvan.

Grammar

As I am getting into the more advanced aspects of WebGL, a major challenge is becoming apparent. Sharers (programs that draw things) can not be recursive.... while fractals are, by definition, recursive. To overcome this, I am going to have to implement an iterative drawing mechanism in WebGL (while I could recursively generate the fractal in JavaScript, the result would not be nearly as fast. Besides shaders being optimal for this type of computation, recursive approaches are almost always slower since they require complex memory management.) I am digging through the following resources as I try to write an algorithm to generate a fractal recursively:

• Fractalturtle
• The Koch Curve Via Grammar Re-Writing

As a bonus, I am learning grammar rules (not the punctuation, spelling kind.) A very important and powerful concept in Computer Science, I am unfamiliar with the technical implementations and terminology of grammar rules... although that is quickly changing!

Back to research,

Istvan.

SAFE, WebGL

The first hurdle in building the website that will become the home of my project is building the underlying framework. I am working with the brand new, un-released, SAFE (Safe Activation Framework for Extensibility) framework. Using SAFE I can develop applications one at a time and publish them as part of the larger site.

In addition to publishing individual applications via the framework, I need to create and host libraries on which the applications are build. For example, many of the applications will run on WebGL (a language with which I am familiarizing myself as part of this project). I have spent the last several days reading through these tutorials to learn about WebGL and how to build it into my framework.

Progress is off to a great start,
Istvan.

Gantt

With only 16 weeks, time management will be crucial to the successful completion of my project. As a tool to manage the overall timeline of my project, I have posted the Gantt Chart I will be regularly updating and following. As a spreadsheet nerd, I implemented this chart in Google Drive using lots (and lots) of formulas (see below for some of my favorites).

As I add applications to implement and receive bug reports, I will maintain the gantt chart to reflect my deadlines. On days I post content-oriented blog posts, I will link to that post from the gantt chart. I have added the first steps for my project in the coming weeks pertaining to research, the framework, and porting over existing applications.

My favorite formulas:

To calculate the average completion of a major task (grey rows):

=SUMPRODUCT($D13:$D14,$E13:$E14)/SUM($D13:$D14)

To display the letters for the days of the month:

=if(NETWORKDAYS(DATE(YEAR(G4), MONTH(G4), 1), G4) <= LEN(text(G4,"MMMM")),right(left(text(G4,"MMMM"), NETWORKDAYS(DATE(YEAR(G4), MONTH(G4), 1), G4)),1),"")

To display the dates of weekdays:

=IF(NETWORKDAYS(L4+1,L4+1), L4+1, L4+3)

To color a cell in the calendar (grey is pending, yellow/blue is complete for major/minor tasks rkespectively, red is behind schedule and not complete):

=if(AND((K$4>=$B5),(K$4<=$C5)),if((ROUNDDOWN($E5*$D5)<=(K$4-$B5)), IF(TODAY() >= K$4, "Z", "X"), "Y"),"")

Stay tuned for a project name as I look to register a domain name in the coming days!

~Istvan.

Hello World!

Dear reader,
Welcome to my WISE project blog. For the next sixteen weeks, I will be developing web-based software to explore fractals and chaos. It is my goal to recreate the antiquated software used by the Ithaca High School fractals and chaos course in a modern environment accessible to students around the world.

My interest is in the mathematical, artistic, and programming aspects of this project. I am going to use a brand new web framework, SAFE, along with new, advanced technologies, including WebGL, that will allow for very fast computation and interactive environments to explore fractals and chaos.

Through the course of this project, I hope to learn not only computer-science-oriented project management skills (including bug tracking and time budgeting) as well as advanced technical skills as I mentioned previously.

I hope you enjoy my blog and my software!
~Istvan.