Transcolors on Khan Academy: Version 2.0

The second iteration of Transcolors, a colorful puzzle game made on Khan Academy's Processing.js environment.
The second iteration of Transcolors, a colorful puzzle game made on Khan Academy's Processing.js environment.

Transcolors, a colorful puzzle game made on Khan Academy, has just become even more colorful with an updated look and feel from the original. The update, made over a period of several months, sports cleaner code, refreshing new gameplay, and revamped graphics in just about every aspect.

Updated

Category

Topic

Programming Language

Typeface Used

Transcolors on Khan Academy: Version 2.0

After making the original Transcolors on Khan Academy, I decided I wanted to improve upon it. Lots of the code could be better written – much of the UI existed in the form of hard-coded numbers, and there were functions that ran all over the place, with no organization whatsoever! I decided that I wanted to make drastic improvements and completely revamp everything.

Ninja Mode

First order of business – “hiding” the program from my raving fans. All Khan Academy programs you make can be found via your Khan Academy profile. I didn’t want users to look at the new version until I was completely done. I call it “ninja mode”…

//Ninja Mode
draw = function() {
    keyReleased = function(){
        if(keyCode === ENTER){
            frameCount = 0;
            draw = function(){
                draw2();
            };
        }
    };
    if(scaledMouseX < 0){
        draw = draw2();
    }
};

draw2 = function(){
    // Main draw() loop
};

What’s happening here? In Processing.js, the draw() function is the main program execution loop – the function that gets called once per frame. To start, the draw function doesn’t draw anything – it only checks to see if the ENTER key was pressed or if the mouseX position runs less than 0 (by dragging your finger left on a touch device). When that happens, the draw() function replaces itself with the function draw2(), which is where I put all my main execution.

When someone comes to this program, all they’ll see is a blank white screen. I placed a bunch of line breaks at the beginning of the code, so they’ll also think the editor is blank. If any one of my raving fans happens to stumble upon this program, they wouldn’t think to scroll down in the code, or even press ENTER on the canvas!

Revamping

Over a few months I worked away at the code, changing data formats, making new functions, button classes, and so forth. The most apparent change from Version 1.0 to Version 2.0 is the new overall look. Here are just a few of the many changes I made:

  • The UI colors are more vivid, and the buttons have a sleeker look.
  • The menus look more dynamic with a changing gradient background and circles that pop and fade out. It’s interactive, too – click anywhere to make a circle!
  • The four central colors are less jarring to the eyes and play much better together.
  • The typography was changed from Hoefler Text to Avenir (a font I see EVERYWHERE now).
  • Level boards are no longer fixed at 20×20 squares, and can shrink down to smaller sizes.
  • Bricks and gates have been re-skinned, and the gates even have a cool sliding animation.
  • Smiley now looks in the direction he moves in.
  • The circles that pop out whenever Smiley transforms look much more elegant than the radar-looking ones from Version 1.0. They can really add up if you transform too many times at once, so I added an option to turn it off under Settings (“Better Performance”).
  • The level editor has been completely redone, and now it’s a much cleaner overall experience!

On February 19, 2014, I publicized Transcolors Version 2.0 to the Khan Academy community. Within a week it got to 66 votes, and two weeks later the total came to 167 votes. Two weeks after that, Transcolors 2.0 had 330 votes. The program ended up getting even more votes than the previous version!

With a new update to a great game with fresh graphic effects and a beautiful new skin – not to mention all of the wonderful comments I’ve received – several users made more custom levels for me, and it’s been a hit! Many of them were accepted into the game – just go down the list of levels and look at the wide range of level authors. I may eventually have an online form for users to submit levels, but for now, read the instructions by clicking “Submit a Level” in the level editor menu.

Since the completion of Transcolors on Khan Academy, I have been working on an iOS app for Transcolors!

By | 2016-10-16T16:31:46-07:00 July 4th, 2016|2 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

2 Comments

  1. Jacob Belanger March 3, 2015 at 11:53 am - Reply

    wow Darryl, You really are a great programmer even outside of KA. Your website is better then 95% of all the one I’ve seen, And you’re self thought!

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top