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

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

The Geminids

The Geminid meteor shower is coming up! At 2:00 AM, on December 14 (that's Thursday night, or Friday morning), you can see anywhere from 100 to 150 meteors per hour - depending on the sky and weather conditions. That's more than 1 meteor per minute! This particular meteor shower comes from a 5.1 km wide asteroid called 3200 Phaethon. Flecks of debris fall off this asteroid in a trail around the sun. These bits are called meteoroids . Every year, in December, Earth passes through this stream of meteoroids; when one of them enters Earth's atmosphere, it burns up and we see a meteor. If the meteor is brighter than Venus, it's called a fireball. Fireballs are much less common than meteors. This year, viewing conditions will be especially good; the peak occurs only 1 day past new moon. If you live in an area with lots of light pollution, you will definitely want to drive into the country. If you think the weather will be bad, go out a day or two before or after the peak. Kee...
Post a Comment
Read more

Which Hurts More?

212° F Let's play a little game. I'll list a bunch of possible actions. Each action will have 2 variations, (a) and (b). You choose either (a) or (b), depending on which would be safer (or less painful). Each of the questions will involve an oven hot enough to bake a cake (350° F), and a pot of boiling water (assume we're at sea level). So... would you rather: 1.     (a) Stick your hand in the oven     (b) Stick your hand in the boiling water   ... for a period of 10 seconds 2.     (a) Leave a fork in the oven     (b) Leave a fork in boiling water   ... for a period of 15 minutes. Then hold the fork tight with your bare hand. 3. Fill a jar to the top with cool tap water. Then:    (a) Place the jar in the oven    (b) Place the jar in the boiling water   ... for a specific, but unknown, period of time. Then remove the jar and put your hand in it. First see if you can figure these out yourself. They shouldn't be too...
Post a Comment
Read more