Skip to main content

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 percentage of the light that is being received at that point on the surface. From this, I could easily calculate the brightness of the sphere's surface.

After anti-aliasing the edges of the sphere, I moved to the next step. I wanted to use Perlin noise to give the sphere some texture. I had already written a program that could generate 2-dimensional Perlin noise, so I just upgraded that to 3-dimensional (so I could generate noise based on the coordinates of the sphere's surface).

Finally, I made the light source change direction, and then set up a system to allow the user to look at the sphere from different angles. And then I was done. I think it turned out pretty well.

Here it is (click and drag the mouse to change the orientation):



New posts every month - subscribe for free!
Labels:

Comments

  1. Squeaky PigsOctober 14, 2015 at 7:56 AM

    Is it like the ones you made on KA all that time ago?

    ( https://www.khanacademy.org/computer-programming/rotating-gas-giant-3d/5363614714167296 )

    ReplyDelete
    Replies
    1. MathGeekOctober 14, 2015 at 12:05 PM

      This one is actually very different. The ones on KA didn't use 3D cloud mapping - I faked that with 2D Perlin noise. Also, for this program, I used a way to render the sphere much faster at a higher resolution, with the dot product instead of inverse trig functions. Another big difference is that I wrote the whole thing independently, with my FireTools library.

      Delete

Post a Comment

Popular posts from this blog

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

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. Should Tau Replace Pi? A constant is any number or value that ne...
Post a Comment
Read more