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.