Pi Graphic

I wrote the following program as a predecessor to another program I wanted to write. It's just a computer-generated graphical image, so it is not user-interactive. I included the code in this post, in case you're interested in seeing how I did it.

Also notice that each time you reload the page, the image is slightly different. This is because I set it up to generate certain aspects randomly.

Fire! Fire!

On Khan Academy a few days ago, a user asked for help. He said I was known for my animations, and that he needed fire for a game. A couple of days later, I tried writing a fire system. A couple of hours after that, I was done.

The result: a program that many people enjoyed. In only 20 hours, 46 users had voted it up. It has been 4 days since I wrote the program, and it now has at least 97 up-votes.

To create the fire, I used a particle system of a lot of transparent ellipses, a good bit of math, and Perlin noise. I added the wind yesterday, using Perlin noise to make transitions smoother. The program doesn't interact with the user; it's only supposed to look cool.

Live Chat

I recently discovered a really great website: firebase.com. It will store data for your applications, enabling you to write really awesome programs (such as multi-player games) using it - and the Development account (which I used) is free!

To communicate with the API, I had to learn HTML. I also learned some CSS and jQuery to make things easier. Then I wrote a live chat app using my knowledge.

In the app, you can use HTML to format your comments. At one point I allowed use of the &ltscript&gt tag, but after users abused it I disabled it. I also added a couple of new tags: &ltconsole&gt and &ltincode&gt You can post a comment by either clicking "Post Comment" or pressing the Alt key on your keyboard.

Fix Your Window

Click to try out the program!

In my original Smash It! program, I had a message that said, "Want me to fix it? Ask in Tips & Feedback!" I didn't want it to automatically fix itself, because that wouldn't be true to life. When you break a window, you live with the consequences.

Well, a lot of users wanted me to fix the window. One of the users figured out how to fix it himself, and started telling everybody how to do it. I didn't like that; it totally ruined the point of my program. Fixing a window shouldn't be easy. So I modified my code, and his solution was outdated.

He found a new method for fixing the windows. At first he didn't want to tell me about it, for fear I would circumvent, but finally he decided I wouldn't be able to. Laughing with pleasure, he wrote a fix-it program that used the method to fix windows, and started telling everybody about it.

I didn't like that. So I came up with a way to make his program stop working. I set things up using HTML5 storage so that his program worked great... for him, at least. For everybody else, it was useless. He didn't think of fixing it, because whenever he tested it, it worked. In fact, he happily talked about how good he was at programming. I just played along; ignorance is bliss.

I told him about it the next day. It's no fun to fool someone if they never know they were fooled.

Anyway, other users were writing fix-it programs, too. I decided it was time for me to write a decent one - a fix-it program that was guarantied to work. I didn't want it to ruin the point of my original program, so I created some virtual money; you could pay 30 virtual dollars to fix the window. My program made it to the top of the hot list; it was as popular as the original program.

Smash It!

Click to start

This was a very popular program I wrote. It makes use of HTML5 storage to remember whether the window is broken. Try clicking on things, and see what happens!

Streaks Special Effect

Click to start

Here's a program I wrote recently. It converts an image into an image with streaks. It is not an interactive program; you can only watch it.

Sparking Ball

Here's a program I wrote about a week ago, for the graphics. It isn't a game, and it isn't a tool; it just looks cool. At least, I hope it does.

UPDATE: I modified the program so you can click for another ball.

If a little green guy pops up and complains about something, click restart.

Art Maker

Here's a very successful program I wrote recently. You just scribble on the screen, and press Enter; the program will generate some code for a program. You just copy the code, and then use the code as a new program on Khan Academy.

If you make a mistake, press Z to undo. As always, if you have a problem, comment and let me know!

Jelly Ball

A month or two after I wrote the Stretchy Ball program, I tried making the ball slightly transparent. The result: a clear jelly effect. I thought it looked cool, so I saved it as a separate program and named it "Lens Ball".

Soon another user on Khan Academy suggested making the ball jiggle whenever it was clicked. That sounded good, but I thought it would be more realistic if it jiggled no matter WHAT you did. I modified the program accordingly, and once I set it up to slide down the screen, the effect was complete. Here it is - just click and stretch:

Rubber Disk

Here's the Stretchy Disk program I named in my Stretchy Ball post. My dad soon figured out how to fix the shape, and then I added a couple of enhancements. As with Stretchy Ball, just click and stretch:

Stretchy Ball

Once I finished the curvy lines program, I butchered it and started working towards my original goal: to create a stretchy disk. I succeeded, but the shape of the disk when I stretched it was all wrong. After a while, I got my dad to come over and take a look at the math, and he started playing with it too, trying to figure out how to fix the shape.

At one point, he changed something wrong and got a ball instead of a disk. It looked pretty cool, so I saved it. Later I made some changes. Here's the finished result; just click and stretch:

Curvy Lines

I wanted to write a program for a stretchy disk, but I made it too fancy and ended up with this. To use the program, click the mouse on the lines. Keeping the mouse pressed, move the mouse.

To create more lines, press the UP arrow. To get rid of lines, press the DOWN arrow.

Block Breaker

Block Breaker is an edited version of Super Ball. I added blocks and a couple more features for a very fun and addictive game. Here it is:

Super Ball

The Khan Academy computer science module uses JavaScript with a library called Processing. Processing is what allows you to draw graphics, and JavaScript is what does everything else (which can be quite a lot).

When I first learned about Khan Academy, I had never programmed in JavaScript before, let alone Processing. But I had been programming for so long in other languages that I caught on very quickly, and wrote my first program: Super Ball.

I had sometimes thought about how cool a bouncing ball program with gravity would be, and when I found Khan Academy's computer science module, I just had to write one. So here it is; if you get a high score, just comment. Enjoy!

Khan Academy

Khan Academy is a website where anybody can go to learn all kinds of stuff, from history to mathematics. It's 100% free, and you don't even need an account.

My favorite thing about Khan Academy is the computer science module; you can write, save, and share computer programs, all on the site. I've been writing programs on Khan Academy for almost 6 months now, and still enjoy it as much as when I first started.

Here's the address: www.khanacademy.org Take a look, and see what you think.