Skip to main content

Posts

Showing posts with the label program

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, the...

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. To find the brightness of each point on the surface, I first calculated the XYZ coordinates of that part of the sphere. This is also equal to the normal vector at that point. I took the dot product between the light source's direction and the normal vector. This is a mathematical operation that tells me whether the surface is aligned with the light source, as well as the percen...

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. In math, a function takes a number, and follows a set of rules to do something to that number. No matter what the number is, the function always fo...

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

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. Randomness is very important in the computer industry. Computers use randomness for all kinds of applications, including encryption, artificial intelligence, and computer graphics. When a human wants to generate a random number, they usually pick whatever pops into their head. It turns out that most people aren't very good at picking random numbers - I once did a small survey and quickly found that certain numbers were more popular than others. Hence, most people must flip quarters or roll dice to find truly random numbers. It's like that for computers, too. Computers are completely mechanical, and cannot calculate perfectly random numbers on their own. Devices exist that will "flip" virtual quarters (basically read a noisy signal),...

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! New posts every month - subscribe for free !

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. To play the game, you'll need to send the URL to one of your friends (otherwise you won't have an opponent). Move your paddle (the white one) using the arrow keys, and click "Reset" to start over. The ball will bounce to the left or to the right depending on where it hits the paddle – you can use this to your advantage. And forgive the glitches; the computers are communicating over the internet, so it's not going to be perfect. Have fun! New posts every month ...

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 b th 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 soo...

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. even(x)  - returns true if x is even, false otherwise. odd(x)  - returns true if x is odd, false otherwise. 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! Fourier Series Grapher Min x: Max x: Min y: Max y: *sin(k*x) *cos(k*x) Terms: '> To receive updates, subscribe now!

Euler Spiral

I was reading a calculus textbook when I noticed it said that cos( x 2 ) 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 2 ). 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 2 ). 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 2 ). 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...

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

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 &ltconsole&gt tag and an &ltincode&gt 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 Application 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...