JHZ-CS Space

Note: Space->displayTimeSeconds is set to 60 seconds; modify it by Pausing, clicking Space, then change displayTimeSeconds value.

JHZ-CS Space demonstrates use of HTML 5 canvas using Javascript to emulate 3 dimensional representation.

JHZ-CS Space achieves this by generating a series of objects including a Star, Planets, Moons, Astroid Belts, Planetary Rings; as well as, a grid and mapping of planetary orbits. Potentially, supporting multiple Star systems each with their own orbiting objects; although, these objects are not part of this demonstration. The canvas is the Universe. Our Sun is the star. The planets and moons are part of our Solar System.

The Universe is created, then a star added to it. Then, planets are added to the star. Then, moons are added to the planets. The moons are considered satellites of a planet, as are rings. The Astroid Belt is a series of planets as their orbit is oriented to the star. All these bodies are placed in a multi-dimensional object. Each body has their own orbital parameters and vectors are generated for each and maintained in an array that is part of their respective object. Their orbital speed determines the intervals to complete an orbit. The Javascript interval functionality is used to increment a pointer to the current vector element. Each object has their own orbit interval and vector array.

Displaying 3 dimensional representation in 2 dimensional space requires position coordination to place objects behind objects in front. Each display interval requires determine if an object is in front of other objects and display the object in the back before objects in the front.

Dynamically modifying object parameters requires linking user interface controls to virtual objects and generating vectors in real-time as needed. Here there is a option to pre-generate vector arrays, then simply move through the vector array, or calculate vectors at each display cycle. The number of operations occurring simultaneously demonstrates capabilities to emulate 3 dimensional representation using 2 dimensions. The X Y axises is complemented by the Z axis to determine position and relative size; closer to front an object is the larger it appears. It appears complex and exhaustive, but actually it is merely a series of simple processes combined to create a complex representation.