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

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
6 comments
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

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. Gravity is very important. It helps hold matter together, bends light, and distorts space-time (which, incidentally, is how it bends light). It also makes it possible to play football, and as Americans are big football fans, they would certainly agree that we couldn't live without it. Unfortunately, many Americans don't understand how gravity works. Admittedly, scientists haven't figured out a lot of things, but we do understand it well enough to make predictions and model physical events. One of the important things about gravity is that its strength is proportional to the inverse of the square of the distance. In other words, it gets weaker as you get farther away, based on the equation: F = c/d 2 where c
6 comments
Read more