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

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

Dividing Paper Puzzle

When I was young, I would fold a sheet of letter paper in half, for origami projects. It occurred to me that the two halves looked almost the same as the whole sheet of paper - except they were smaller. I could see they weren't exactly the same shape; they were off by a little bit. But the idea stuck in my head. You can use a pen, instead of scissors, to halve the paper. Those rectangles all have the same shape, but are different sizes. One night when I was 12, I thought about my idea. I wondered if it was possible to have a sheet of paper that could be cut in half, resulting in 2 smaller versions of the same paper. That would be neat, to be able to cut a paper in half and get 2 papers that had the same exact shape. If that were possible, then you could cut  those  papers, too; and the resulting papers would have the same shape as all the other papers. You could keep cutting in half forever, and each paper, no matter how small, would have the same shape as all the ot...
6 comments
Read more

Pluto No Longer on the Horizon

This morning, New Horizons became the first spacecraft to make a flyby observation of the Pluto system. During the mission, the spacecraft captured the most detailed photographs of Pluto's surface we've ever had, and possibly ever will have. It also found many new properties including size, mass, atmosphere, and surface composition. In a period of a few hours, we discovered more about Pluto than we've found in the 85 years since Clyde Tombaugh captured its first photograph. Before After  (images credit: NASA) To complete this mission, the spacecraft flew for more than 9 years through the emptiness of space. This may sound like a long time, but it's actually amazingly quick. In fact, New Horizons set the record for the fastest speed at launch, and during the flyby, the spacecraft was moving at a rate of over 30,000 mph, or roughly 50 times the speed of sound. Picture an object twice as heavy as a grand piano moving 25 times faster than a bullet from a gun. Yikes. The man...
2 comments
Read more

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