Jelly Ball

One thing I enjoy when programming is to make weird interactive computer-generated objects. In this post, I'm showing you... a blob. To see the blob, simply click on the black box. The blob will immediately appear. Once you have the blob, you can drag it around with your mouse - just press down and move it around. When you let go, the blob will snap back with a little jiggle.

Click here!

There are a few things I'd like to point out about the blob:

First, when you stretch it, it actually gets narrower. When I designed this, I wanted it to shrink enough to look realistic, but not far enough that it looked weird.

Second, notice that it drags faster depending on how far you stretch it. The speed at which it drags is proportional to the square of the distance stretched. I found that this was much more realistic than making it directly proportional to the stretch. Also, if you only stretch it slightly, it doesn't drag at all (this simulates static friction).

Finally, there's gravity. The gravity isn't strong enough to drag the blob, but it is strong enough to stretch it slightly. When you first create the blob, it bounces slightly as a result of the gravity.


The graphics was probably one of the most interesting parts of writing this program. First I included my Firetools.js library for some simple graphics functions. Then I simply stacked a series of filled translucent circles. I placed the circles on a straight path from the base to the tip of the blob, and determined the size and color using some simple math.

One of the biggest challenges I faced in designing this blob was setting it up to move around the page. It took a long time to figure out how to disable the highlighting of text and the clicking of links below the blob. (For geeks who are interested in my solution, it involved disabling pointer events on the canvas, and using an event listener in the window to turn them back on whenever the mouse was over the blob.)

Overall, I'm really happy with my final result. I hope you enjoy it!


New posts every month - subscribe for free!

CGI Sphere

Over my fall break (which lasted 1 day), I wrote a JavaScript program that would render a sphere. I thought it would be a fun way to practice math and programming skills simultaneously. As usual, I used my FireTools.js library to help with graphics as well as some other functions.

To render the sphere, I wanted to take every pixel on the screen, and calculate the color of the pixel. The color would vary depending on which part of the sphere the pixel was displaying. If the part of the sphere was facing the light source, it would need to be brighter than a part of the sphere facing away from the light source.

Overview of Functions

Imagine you have a blender. To your blender, you add a couple scoops of ice cream and some milk. Then you press the buttons on the blender. Soon, you have a delicious vanilla milkshake. Next, you add strawberries and press buttons again. The result is even better than before: a strawberry milkshake.

Input

Output

Of course, strawberries aren't the only option. Suppose that, instead of strawberries, you added cocoa powder and avocado. The result is a chocolate-avocado milkshake. Or you could have added some mint leaves, for a mint milkshake. Or some peaches, for a peach milkshake.

In each of these cases, you pick the ingredient, and get a different milkshake. Whatever ingredient you pick, the result is always a milkshake. In other words, the blender took your ingredients, and returned a flavor of milkshake.

The blender is like a function.

5 Methods for Approximating Pi

Happy super-π day! π-day falls on March 14 every year, because the month-day combination results in 3-14, which are the first 3 digits of π. But this π-day is particularly special: include the year, and you get 3-14-15, the first 5 digits of π. We won't get another π-day like this for another 100 years, so you better enjoy this one!

A particularly special time will be at 9:26:53 PM tonight, when we'll get 3-14-15 9:26:53, or the first 10 digits of π.

In honor of the occasion, I'm going to post 5 simple methods for approximating the value of π.

Perlin Noise

Today I finished a JavaScript program that will generate random numbers, and then use those numbers to generate Perlin noise.

Perlin noise is like a sort of organic randomness. First I'll explain randomness with regards to computing.

Online Snake Game

This is a simple Snake video game I wrote over the past few days. For the graphics, I used my Firetools.js library, which I also mentioned in my Pong post.

To play the game, use the arrow keys on the keyboard (you might need to click on the game to give it focus). The world loops, so you can go out one side of the screen and come in the other. Eat 50 green pellets to win the game. Each time you eat a pellet, you will get longer and your score will go up; the longer you are, the more points you get for each pellet. If you don't eat enough pellets, you'll begin to starve, and get shorter. Cherries make you longer, but do not prevent starvation.

I did not add the ability to track high scores, but I might add that feature later on. Meanwhile, you can post your scores in the comments. Have fun!

Internet Pong Game

Here's a program I wrote earlier this year in July. It's a two-player pong game that involves communicating over the internet using Firebase. As I wrote this program, I also wrote a JavaScript library to take care of graphics and data communication over the internet. The library took the most work; the pong program just required some math and some creativity to help solve the problems I ran into... such as how the two computers would figure out who gets the top paddle and who gets the bottom paddle.

Did You Know...

I recently added a "Did You Know" app to the sidebar of my blog. The app randomly picks a math/science/technology fact from a list, and displays it. I had to write the app myself (with JavaScript and HTML), because Blogger doesn't have an app like that built-in, and even if it did, I like to have control over my things.

To get technical: the data is stored on Firebase. The app reads the data from Firebase, and adds it all to an array. There is no way to tell how many items there are without reading all of them from Firebase. The app then looks at how many elements are in the array (call that number a) and then randomly chooses a number b from 1 to a. It then takes the bth element from the array, and displays it. (I know, I didn't have to store them all in an array, but it's easier that way.)

Because of the data storage method, I can add new facts very easily: I just have to go to Firebase and add the new fact to the database. Of course, my app updates as soon as I add the new data. I can also set up the app to read data from a different Firebase location, so I can easily have multiple apps with different themes. Here's a screenshot of a Minecraft-themed app, for example:

If anybody is interested in putting a version of the app on their blog, let me know! I'd be happy to set up a version of my app with another theme, such as astronomy, animals, or sports. I can also change the style to make the font pink or green, or give it a purple background, before I send you the code. The possibilities are endless.

To receive updates, subscribe now!

Fourier Series Grapher

Here's a simple JavaScript + HTML program I wrote. It will graph a given number of terms of a Fourier series. To graph a Fourier series, type the appropriate expressions into the text fields and click "Update." The text fields support JavaScript, so you can write a whole function in there if you need to.

I also added some functions.

1. even(x) - returns true if x is even, false otherwise.
2. odd(x) - returns true if x is odd, false otherwise.
3. power(x, a) - returns x^a.

Some examples of input to try:

• odd(k)?(2/k):0
• even(k)?(4/k/PI):0
• odd(k)?(4/(k+PI)/k):0

The default Fourier series is equal to sin(2.5x) on (-π, π).

Enjoy!




To receive updates, subscribe now!

Euler Spiral

I was reading a calculus textbook when I noticed it said that cos(x²) doesn't have an elementary antiderivative. Elementary antiderivative? Clearly, they were hiding something. They didn't say it didn't have an antiderivative; they said it didn't have an elementary antiderivative. Of course, I wanted to know what the antiderivative was. If it wasn't elementary, it had to be really awesome.

I looked up the integral of sin(x²). Turns out, the integral cannot be expressed as anything other than itself. It's known as the Fresnel S integral, is written as S(x), and is defined as the integral of sin(x²). There's another Fresnel integral known as the Fresnel C integral which is written as C(x) and defined as the integral of cos(x²).

I also saw some graphs of the integrals. One really cool graph involved the parametric equations x = C(t) and y = S(t), and was called the "Euler spiral." It had a cool spirally shape, and I immediately knew that I had to graph it myself. I ended up writing an interactive JavaScript program to graph the parametric equations. Here it is; enjoy!

x = C(t)
y = S(t)

Max t:
t step size: * .001

Zoom X: %
Zoom Y: %

To receive updates, subscribe now!

Art Maker Pro

On Khan Academy, a while ago, I wrote a program that would allow users to draw a picture, and then the program would generate another program which they could copy and paste and save. The new program would animate the drawing of the same picture. The program was named "Art Maker".

Recently, I created a new version of my program. The original only allowed for black and white; the new version includes color, as well as a dialog box system which I designed. The program uses only my own code - I didn't borrow anybody else's (as far as I can remember).

To embed the program on my blog, I had to use Khan Academy's script; unfortunately, their script isn't working very well here, so the program is cut off at the edge. You can access the program itself here: https://www.khanacademy.org/cs/art-maker-pro/5733417664643072

I finished the program before Christmas so I could release it for everybody to use on that day... so Merry Christmas!

To use:
* Click Generate to generate a JavaScript with Processing program in the pop-up console. You can copy the program and paste it in the New Program window on Khan Academy.
* Click Undo to undo the last stroke. Click Edit to change the palette.
* Pick a color by clicking the palette.
* Hide the top bar by clicking in the upper-right corner of the canvas; show the bar by clicking in the
* upper-left corner.
* Draw by clicking and dragging. This intentionally does work when the Generate Code dialog window is open. White doubles as an eraser.
* To get past the opening screen, either wait or click somewhere on the canvas.

Keyboard shortcuts:
* Enter: Generate code
* Z: Undo
* E: Edit Palette

Art Maker Pro

Instant Chat Application

Here's a version of the instant chat system I mentioned in my previous post. It updates in real-time, so unlike most forums, you don't have to reload the page to see new comments.

You can include HTML in the comments, but I disabled the <script> tags because users misused them. I also added a <console> tag and an <incode> tag. To post a comment, either click the button or press the Alt key on your keyboard.

There may or may not be other people on the chat app. If you want to chat with someone, email the link to that person.

If you do not see the app, please click HERE.

Instant Chat System

INITIALIZING...

Name:

Khan Academy

In this post, I'll tell you about a really cool new site I found: Khan Academy.

Khan Academy is basically a bunch of free tutorials for school subjects like mathematics, history, science, and just about anything else. And not only that, but they also have a special practice page that offers exercises, and when you complete enough of them you get points.

And here's one of my favorite things about it: they have a special section just for computer science, so I can write programs (mostly video games), and everybody else can see and play them. So far I've only written one program, but it's pretty good for my first (even though it's not finished yet). But one of the coolest things about that programming feature is that you can embed the program on a web page:

Super Ball

Another nice thing is the badges you get for accomplishing certain things. There are 6 types: meteorite, moon, earth, sun, black hole, and challenge. The easiest to get are the meteorites, and the hardest are the black holes (you don't even know how to get the black holes!). The challenge badges are just extra stuff. You can display up to 5 of your badges on your profile page for everybody else to see.

So check it all out - go to www.khanacademy.org! If you ever forget the link, just check my Links page.