Skip to main content

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!


Labels:

Comments

  1. J BakerMay 26, 2016 at 2:33 PM

    Bloop.

    Love the hot pink!

    ReplyDelete
  2. LiahSeptember 21, 2016 at 4:16 PM

    hello I found you on khan academy and really like your projects!

    ---liah
    (http://myartandjournal.blogspot.com/)

    ReplyDelete

Post a Comment

Popular posts from this blog

Gravity

Imagine the universe is filled with water. Instead of empty space, every inch of it contains pure water. No planets, no stars, only water. What happens? And what would happen if an air bubble formed? The answer to this question requires a basic understanding of gravity. Gravity is very important. It helps hold matter together, bends light, and distorts space-time (which, incidentally, is how it bends light). It also makes it possible to play football, and as Americans are big football fans, they would certainly agree that we couldn't live without it. Unfortunately, many Americans don't understand how gravity works. Admittedly, scientists haven't figured out a lot of things, but we do understand it well enough to make predictions and model physical events. One of the important things about gravity is that its strength is proportional to the inverse of the square of the distance. In other words, it gets weaker as you get farther away, based on the equation: F = c/d 2 where c ...
6 comments
Read more

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 π. 1. String and Tape Measure Draw a circle with a diameter of 1 foot and put a piece of string around the edge. Cut the string until it's the right length, and then measure it with a tape measure. The string should be about π feet long. This can be implemented more accurately using a computer program: take the arc length of √ (1 - x 2 ) on the interval (-1, 1). The result should be π. var pi = 0; var step = 0.0001; var previous = 0...
Post a Comment
Read more

2014 in Photos

The year of 2014 is over; the year of 2015 has begun. Over the past year, I took a lot of pictures - more than 1200 photos of clouds, bugs, plants, rocks, and more. I deleted most of the low-quality and repetitive photos. Then, I selected 20 of the remaining photos which I thought were the most interesting or significant. In this post, I'll include those photos, in chronological order. Spring 1. Cold Hummingbird I took this photo after a late snowstorm in Spring. In the days leading up to the storm, it was warm and sunny and the fields were green, so the snow came rather unexpectedly. During the storm, one of the hummingbirds at our feeder was covered in ice and could barely fly. This hummingbird was more fortunate, but unlucky nevertheless. 2. Green Landscape I took this photo on the side of a biking trail. I didn't edit or crop the photo - this is how it looked. 3. Indian Paintbrush The Indian Paintbrush is an unusual flower. What appear to be flower petals are actually brigh...
Post a Comment
Read more