Gif Loop Coder Is An Animation Microworld

There's a new JavaScript programming tool called Gif Loop Coder that is providing me with endless fun. GLC provides a bunch of shape objects and an environment to play with their attributes and then run the resulting image as a tweened animation. Giving an object a single attribute, such as a fill color, will give it a static
characteristic while giving it two attributes will result in the output animation tweening the two attributes in a loop. A polygon, for example, can tween from 3 to 10 sides over the number of seconds you specify. Add colors, rotation, position, and many more attributes and you can quickly get some very gratifying effects. The gif at the left, for example, is tweening between x and y coordinates, color, sides, and size.

Why a Microworld?

To me the microworld character of this coding environment is one of the most exciting things about it. Seymour Papert describes a computer microworld as a safe place for people to explore "a little slice of reality" by manipulating an object, such as a Logo turtle. Microworlds are limited and bounded, but very rich, offering many discoveries to the explorer. GLC lets you explore attributes of objects so easily that time spent with it becomes a journey of idea testing and observation, with the behavior of the objects themselves sometimes inspiring the next idea to explore. This microworld is not as easy to explore as a Logo turtle, and familiarity with JavaScript and HTML is helpful. But without this background someone would need just a little guidance to learn the basic rules, syntax, and procedure for coding and publishing gifs in no time. I can see some of my middle and high school students having a great time using it and benefitting greatly from this powerful tool.

How To Use It

The documentation is essential reading for learning about the environment and possibilities, but without any JavaScript and HTML experience it will be hard to get started even after reading it. Here are some more user-friendly steps you can follow to get down to coding:

Highlight the first rectangle, copy it, and paste it in your template file.

• Download the zipped version of GLC from Github, at the link on the lower right. Unzip it on your computer and put it wherever you want. That folder is the coding environment.
• You also need a text editor. I like Sublime Text for its nice syntax coloring and other features.
• Open Sublime Text and from there open the Gifloopcoder folder. The subfolders and html and JavaScript documents will be on the left sidebar. In the side nav, open the sketches and code folders and double click on the template.js file (double click to make it stay open when you open another file in addition). This is an empty base code from which you can start any new animation.
• So you need a shape to put in it to get started. Open the examples folder in the sidebar and you'll see a bunch of .js files with shapes and other names. Each one is an example of things you can do with different shape objects. Open rects.js. This has the code for a bunch of rectangles, each one beginning with the code list.addRect({. Highlight the first one, right under "// your code goes here:", copy it, and paste it into the template file in the same place (see the above image). This rectangle has 4 attributes: a fixed x and y position, two widths, and a fixed height. So when you animate it you will see the width tween from 50 to 100 pixels.
• How to animate it? GLC comes with a GUI to run your code and create the gifs. In the sidebar find and open index.html, inside the sketches folder. Find the line 

  <script type="text/javascript" src="examples/allshapes.js"></script>
  

  and change it to 

  <script type="text/javascript" src="code/template.js"></script>
  

  Then in Finder or Windows Explorer go find that index file and open it. 
• The GUI! In your browser you'll see your rectangle squishing and stretching. To make it into a gif click the stop button, then Make a gif button. The resulting gif on the right can be saved to your computer by right clicking.

Phase

One of the best features is the phase attribute. But to play with phases you have to have multiple iterations of the same shape, created in a for loop. The phase attribute makes each shape animate slightly behind the previous at whatever interval you set, for some great effects. Here is one I made, and its code:

function onGLC(glc) {
    glc.loop();
    glc.styles.backgroundColor = "#000000";
    // glc.playOnce();
    // glc.size(400, 400);
     glc.setDuration(5);
    // glc.setFPS(20);
    // glc.setMode("single");
    // glc.setEasing(false);
    // glc.setMaxColors(256);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h;
    var num = 10;

        for(var i = 0; i<num; i++) {
           list.addPoly({
            fill:false,
            x: 200,
            y: 200,
            radius: (i+1)*20,
            sides: 6,
            lineWidth: i+1,
            rotation: [0,360],
            stroke: true,
            strokeStyle: ["#ffc500", "#c21500"],
            phase: (i+1)*0.03
            }); 
       }
}