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.
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!
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!
Bloop.
ReplyDeleteLove the hot pink!
hello I found you on khan academy and really like your projects!
ReplyDelete---liah
(http://myartandjournal.blogspot.com/)