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!

How to Find an Algorithm

For some reason I felt like this was relevant

Happy Pi Day! The digits of the date - 3.14 - contain the first couple digits of π. But that's not all. If you add the year to get 3.14.16, you have the first 5 rounded digits of π. This is better than last year's version (3.14.15), which contained a truncated version of π. Today's date contains the more accurate rounded version.

In this post, I'll describe the process of finding an algorithm to approximate the number π.

Efficient Acceleration

Here's a simple physics puzzle: suppose you're launching a model rocket. You want the rocket to go as high as possible. Is it better to design the rocket to:
A. Use all of its fuel very quickly, and then use its momentum to travel high
B. Use the fuel gradually over the whole duration of the flight

In other words, what is the fuel consumption rate that will maximize the height of the flight path? For this problem, we can assume that the thrust is proportional to the fuel consumption rate.

I'll try to post a solution to the problem in the future.

New posts every month - subscribe for free!

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.

Ski Lift

Keystone on opening day

Keystone Ski Resort just opened for the ski season on Friday. I went up to the resort that same day. There was only one run open (not including the beginner area at the top of the mountain), but it was awesome nevertheless!

One of the main downsides to skiing on opening day is the number of people. There must have been about 2500 people on the mountain at the same time as me (not including the people snacking in the lodge).

To keep the lines moving, the lift attendants made sure that the lift was completely full, with 4 people per chair. Even so, the wait to get on the lift took a long time.

At one point when I was standing in line, a thought came to mind: the line was constantly being filled with more and more people, but it never got longer because the chair lift was carrying the people away at the same rate. So what would happen if the lift attendants only put 3 people on each chair, instead of 4? This would disrupt the balance: the inflow of skiers would be greater than the outflow, so the lines would start getting longer. But after a few minutes, the inflow of skiers would decrease (because not as many people would be coming down the mountain), and the lines would stabilize.

The point at which the line stabilizes depends on the number of people on each chair going up.

When I got home, I decided to calculate exactly how many people would be standing in line, based on the number of people per chair. The problem is that there were 2 lifts running, so to simplify the problem, I only looked at a single chair lift: Montezuma Express. I also assumed that half of the people preferred Montezuma Express (rather than the other lift). This makes the total number of people 1250, instead of 2500.

To solve the problem, I started by looking up some details for Montezuma Express. I found the following information at http://www.skilifts.org/:

Type:	High-speed quad
Vertical rise:	1589 ft
Inclined length:	6213 ft
Speed on line:	1000 fpm
Number of chairs:	168

Now the number of people in line is going to be the total of 1250 minus the number of people on the slopes, minus the number of people going up the lift.

Let x be the number of people per chair. Half of the chairs, 84 chairs, are going to have people on them (because the other half come down the mountain empty). That accounts for 84x people.

Now how many people are skiing down the mountain? Well, that depends on the rate that people are getting off the lift at the top. This, in turn, depends on how many chairs arrive per minute. The distance between the chairs is 6213 ft / 84 = 74 ft, and the speed of the chairs on the line is 1000 ft per minute, so the chair arrival rate will be (1000 fpm) / 74 ft = 13.5 chairs per minute. This means that the number of people getting off the lift at the top will be 13.5x per minute. Assuming it takes n minutes for the average skier to ski to the bottom, there should be 13.5nx skiers on the ski runs.

Using all these new values, there will be 1250 - 84x - 13.5nx people standing in line. How does this affect the minutes spent waiting in line? Just divide by the outflow rate: (1250 - 84x - 13.5nx)/(13.5x).

Taken Friday at Arapahoe Basin

That was pretty easy. Now let's try plugging in some values. Assuming that the average skier takes 10 minutes to ski down from the top, and that there are 4 people on every chair, the number of people standing in line will be 1250 - 84*4 - 135*4 = 374, and the time spent waiting in line will be 374 / (13.5*4) = 6.9 minutes.

If the attendant only put 3 people on each chair, then there will be 593 people in line, and the wait will be nearly 15 minutes. This is more than twice as long as when there were 4 people on every chair. I think it's pretty clear how important it is to fill every chair going up! (Incidentally, after a few runs, we got tired of the long lines and went to Arapahoe Basin. It wasn't much better...)

Now suppose there's a lodge at the top... and the number of people in the lodge depends on the amount of time spent waiting in line. Suppose that the number of people in the lodge will be 500 + 10t², where t is the time spent waiting in line at the bottom. How does this affect the number of people waiting in line? I'll leave this for you to figure out!

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.

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!

5 Common Pi Myths

Happy π-day! And happy π-month! Today's month and day - that is, March 14 or 3.14 - includes the first 3 digits of π. And today's month and year - March 2014 or 3.14 - also includes the first 3 digits of π. We won't have another double-day for π for the next 100 years, so enjoy this one!

For the special occasion, I'm posting two π-related posts, one for π-month and the other for π-day. In both posts, I'm setting the font size to 16.1527897 pixels, which is approximately π * π + π + π. This is the second post, for π-day; for the first, go to http://greatmst.blogspot.com/2014/03/pi-month-pi-day-post-1.html.

In this post, I will list 5 common myths about π, and explain why they're wrong.

Should Tau Replace Pi?

The digits of π, organized in a very new way

Happy π-day! And happy π-month! Today's month and day - that is, March 14 or 3.14 - includes the first 3 digits of π. And today's month and year - March 2014 or 3.14 - also includes the first 3 digits of π. We won't have another double-day for π for the next 100 years, so enjoy this one!

For the special occasion, I'm posting two π-related posts - one for π-month, and the other for π-day. In both posts, I'm setting the font size to approximately π * π + π + π. This is the first post, for π-month; to see the second, go to http://greatmst.blogspot.com/2014/03/pi-month-pi-day-post-2-5-common-pi-myths.html.

In this post, I am including an essay I wrote about whether π or τ is the more superior constant. This was written for people who know very little about math, so the basic idea should be easy to understand even for people who are not mathematically inclined.

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 others.

I HAD to figure it out. Was it possible, or not? I took a pen (or pencil, I don't remember) and a sheet of paper, and began writing. In a few minutes of working with math and numbers, I found that it was possible. I had the solution right in front of me.

The puzzle is this: what could the dimensions for the paper be?

New posts every month - subscribe for free!

Sine and Cosine

Trigonometry is the study of the relationship between the angles and sides of triangles. The two most essential parts of trig are the functions sine and cosine. Both take an angle, and return a number. The way they work is really quite simple.

A diagram showing sine (abbreviated sin) and cosine (cos)

To find the sine of the angle θ, draw a circle with radius 1 on a graph, and put the circle's center at the origin of a graph. Find a point on the edge of the circle. The point makes an angle with the center of the circle; make sure that the angle is θ. Sine of θ is the point's y-coordinate. Cosine is the point's x-coordinate. (See the picture to the right.)

Sine and cosine are very useful for calculating heights and distances. For example, let's say somebody needs to know the height of a sky scraper, but isn't able to measure it physically with a tape. If he walks a certain distance away from it, and looks at the angle it subtends in the sky, he can use trigonometry to figure out its height.

But that's not all. If you graph the sine function, you get a cool wavy line the shape of a ripple in water. That curve is called a "sine wave". The same curve is also the building block for the shapes of sound waves. Who said math had to be boring? Not I.

Mathematically Diving

Diving can be done well or poorly, depending on how good the diver is. Sometimes, beginning divers will do "belly flops", smacking the water horizontally instead of cutting into it like a needle. Whether a dive is a good one usually depends on whether the diver went straight into the water or not. Experienced divers can do this without thinking much about it, as if it were like walking; beginners, however, have a lot more trouble.

In time, people get used to diving; machines, however, can't learn, and are always just as clumsy. If the machine contained a computer, it would need a computer program to help it dive. The program would need to use a math formula. Here's what we'll start out with: v₁= v₂ tan θ, where v₁ and v₂ represent forward and downward velocities, and θ is the vertical angle in degrees.

 

Here's how it works: the forward and downward velocities of a good dive have the same ratio as the sine and cosine of the vertical angle of the diver (represented by θ. See picture), so the formula is v₁ / v₂ = sin θ / cos θ. Since sin/cos = tan, the formula becomes v₁ / v₂ = tan θ; multiply both sides by v₂, and you get v₁ = v₂ tan θ.

To use the formula, you figure out what angle you'll be diving at and how fast you'll be falling when you hit the water (the downward velocity, v₂). When you put those numbers into the equation, you can do the math and get your forward velocity (v₁), so you know how fast you have to run off the diving board.

However, you might not know how fast you'll be falling (v₂) when you hit the water, so let's calculate it now. If you fell h feet in s seconds, your average speed in the time you fell was h ft per s sec, which is the same speed as h/s ft per sec. Since acceleration while falling is as good as a constant (ignoring air resistance), and you start at zero, your final speed is twice your average speed: 2h/s ft per sec. Insert that into the equation and you get:

Now we have another problem: s, the amount of time before you hit the water. To get rid of s, we just need to state it in terms of another variable. After falling for 1 second, your speed will be 32 ft per sec. After s seconds, your speed will be 32s ft per sec. We also know that your speed will be 2h/s ft per sec. Therefore, 2h/s = 32s. Work it out and you get s = √h / 4. The very complicated equation you see to the right is what we have now. And if we simplify it, we get the final equation you see below.

"Flipping Quarters" Solution

A couple of pieces of good news: First, in this post will be the answer to the problem I gave called Flipping Quarters; and second, I'll even work through the solution!

Flipping Quarters

Here's an interesting puzzle involving chance:

A man in a park asks you to play a game with him. It's a form of gambling. To play, you must pay the man $5, then flip a coin repeatedly until you get heads. As soon as you get heads, you stop flipping. If you only flipped the quarter once, he'll give you $1. If you flipped it twice, you get $2. Three times, $4. Four times, $8. Each extra flip gets you twice as much money, so the longer it takes before you get tails, the more money you get.

Should you play, if you have a lot of time and the man will play as many games as you want? How much money, on average, would you gain (subtracting the $5 fee)?

I will give the solution in a later post.