Curator Welcome
Time Dependent Wave Equation 1D One Dimensional Optical Resonator Modes
Gas Physics Introduction
Gas Physics Introduction Chapter 1:Energy Distribution Evolution Energy Diffusion from Mono-energetic of a Three Dimensional Gas Rotating Gas in a 3D Toroid Gas Velocity Equilibration 2D Gas Velocity Equilibration 3D Circulating Gas in a Wind Tunnel Density Modulated Rotating Gas in a 3D Toroid Position Diffusion (Mixing) of a Three Dimensional Gas Energy Distribution 3D with MathJax Equations and Embedded Canvases Gas Energy Distributions 2D Rigid Rotors Energy Distribution 2D 1D Gas Energy and Momentum Distribution Rotor Energies 2D Rotor Energies 3D H2O Energies 3D CO2 Energies 3D 2D Rigid Arrays with Rotation and Translation 3D Rigid Arrays with Rotation and Translation Gas Energy Distributions 1D, 2D, 3D Chapter 2:Particle Scattering Effects
Inelastic Collision Conversion to Internal Energy Brownian Motion Animation 2D Using Hard Sphere Scattering Large Disc Kinetics 2D Condensation of a Gas on a 2D Solid Maxwell's Demon Energy Seperator 2D Minimize Final Energy 2D and 3D Gas Diffusion 2D Gas Expansion 2D Linear Gas Expansion 2D Constant Pressure Gas Expansion 2D Circular Gas Explosion 2D Circular MagnetoCaloric Effect 2D Convection Loops in a Numerical Gas Chapter 3: Gas Energy Equipartition Energy Equipartition of a Two Dimensional Gas with Two Different Masses Energy Equipartition of a Three Dimensional Gas with Two Different Masses Gas Energy Equipartition 3D
Chapter 2.1
Chapter 2.2
Chapter 2.3
Chapter 3.1
Chapter 3.2
Chapter 3.3
Chapter 4.1
Chapter 4.2
Chapter 4.3
Photoelectric Effect Alpha Particle Emission from a Large Nucleus 2D Black Body Emission from Charged Harmonic Oscillators Quantum Animation of Energy Band Gap 1D Animation of Quantum Wave Packets in a pn Junction 1D Quantum Mirror Focusing by Iterating the Schrodinger Equation Quantum Lens Focusing by Iterating the Schrodinger Equation Quantum Two Mirror Resonator by Iterating the Schrodinger Equation Entangled Quantum Object Propagation in a Parabolic Potential Classic and Quantum Object Propagation in a Parabolic Potential Accurate Wave Packet Propagation in a Parabolic Potential Comparison of Quantum to Classical Physics 1D-Time Dependent Accurate Wave Packet Propagation in a Swaged Potential Series Solution of Wave Packet Propagation in a Infinite Square Potential Propagation of a Wave Packet in a Parabolic Potential Propagation of a 2D Wave Packet in a 2D Parabolic Potential Propagation of an Asymmetric Shaped Wave Packet in a 2D Parabolic Potential Two Slit Diffraction by Iterating the Schrodinger Equation Two Potential Slit Diffraction by Iterating the Schrodinger Equation Propagation of an Electron Wave Packet in an Infinite Square Well (Series Solution) Propagation of a Free Wave Packet (Series Solution) Series and Algebraic Solutions for Propagation of a Wave Packet in a Parabolic Potential Comparison of Quantum to Classical Physics 1D-Time Independent Mexican Hat Stationary Quantum States of a Finite Square Potential Well Various Wave Packet Motion in a Finite Square Potential Well Various Wave Packet Motion in a Swaged Potential Well Comparison of Quantum to Classical Physics 1D-Time Independent Cosine/Parabola Electromagnetic Modes of a 2D Cavity Black Body Radiation Experiment and Theory Emission of the Inner Walls of a Black Body Cavity Multiple Slit Diffraction Statistics of Indistinguishable Dice or Particles Quantum Field Collapse Visualization Matrix Operations and Eigenmodes
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Tumbling Block on Inclined Plane New Roller on Inclined Plane Sliding Block on Inclined Plane Classic Objects Motion 1D Generation of Curve for Fastest Time between Two Points Curve for Fastest Time between Two Points Bead Sliding On a Stiff Wire Sound Wave in Two Solid Media Mechanical Properties of a 2D Numerically Modeled Lattice Vibrating Reed Numerical Model 2D Laminar Flow of a Fluid in a 2D Bearing Animation of a Fountain 2D Gravity Leveling of a 2D Liquid Longitudinal and Shear Wave Sound Speed in a 2D Lattice Mechanical Properties of a 2D Numerically Modeled Lattice Vibration Frequencies of a 2D Numerically Modeled Lattice Damped Harmonic Oscillator Motion and Modes of a Particle in a Mexican Hat Potential Forced Oscillator Roller Bearing Cam and Roller Follower Simple Hybrid Gear Train Ratchet Animation Child's Swing Height Increase Mechanics Roller Chain Animation Elasticity of 3D Gas Driving a Piston Free to Forced Harmonic Oscillator Transition Physics of Mounting a Tire on a Rim Physics of a Pendulum Clock Escapement Physics of a Gas Pressure Gauge
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Physics of a Gas Pressure Gauge Ion Drift in Neutral Particle Sea Diffusion Equation Solved by Finite Difference Method Linear Particle Diffusion Heat Flow 1D with Time Dependent Boundary Solid Cube in Liquid Column Drag on a Large Sphere Due to a Digital Gas Animation of a Gas Centrifuge Laminar Flow of a Gas in an Annular Space Laminar Flow of a Fluid in a 2D Bearing Incompressible Fluid Flow through a Constriction Fluid Flow Due To Pressure Gradients
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Parallel Resistors Gas Discharge Animation Oscilloscope Animation Permanent Magnet in Solenoid Cross Product of Two Vectors Magnetic Braking with Cylindrical Geometry Stopping a Falling Magnet by Eddy Currents Magnetic Brake Magnetic Field of a Long Solenoid Coil Light Propagation in a Transparent Dielectric Material Dipole Array Animations Angular Distribution of Emission of Arrays of Excited Dipoles Geometric Derivation of Snell's Refraction Angle Law Electromagnetic (EM) Wave Response to a Row of Dipoles Electromagnetic (EM) Wave Response to a Single Dipole Optics of a Transparent Plate by Iterating the Maxwell Wave Equation Diffraction by Iterating the Maxwell or Schrodinger Wave Equations Lens Focusing by Iterating the Maxwell or Schrodinger Wave Equations Optical Wave Packet Propagation by Finite Difference Matrix 1D Potential(x,y) Using Laplace's Equation Div(gradV)=0 with Variable Boundary Geometry Potential(x,y) Using Laplace's Equation Div(epsilon*gradV)=0 Laplace's Equation Div(gradV)=0 with Mixed BCs Potential(x,y) for Surface Electrodes with Dielectric Slab Dipolar Media Field Plots LCR Oscillator Animation Beam Trajectory of a Moving Laser Beam Trajectory in a Square Ring Laser Doppler Effect Converting Magnetic Forces to Electric Forces Converting Permanent Magnet Orbital Moments to Solenoid Currents Electron Beam Collimation by Axial Magnetic Field Electron Buncher for Klystron Charged Particle Spatial and Speed Bunching Electrical Conduction-Particle Picture Electromagnetic Bell Triode Vacuum Tube
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
E=mc^2 and Mexican Jumping Bean Radar Pulse Return Time Interval Experiment to Determine Gamma Current Loop with a Rotating Test Particle Moving Fabry-Perot Interferometer Space Time Invariant Intervals of a Moving Clock Relativity Transformations by Requiring Simulataneity Accelerated Space Trip Clock Times and Rates Minguzzi Invariant Inertial Frame Time Accelerated Space Trip with Light Pulse Signaling
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Solar Power Generation Planet Formation Illumination of Planets Change of Orbit due to Asteroid Impact Earth Time Zones Day Lengths Astronomical Aberration Kepler Planetary and Sun Orbits Model of Ocean Tides Gravity Course Iteration Spacecraft Speed Assistance by Gravity Hohmann Transfer from One Circcular Orbit to Another Star Distances Using the Parallax Method
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Semiconductor Electron Energies and Band Gap 1D Semiconductor Electron Energies and Band Gap 2D Simple Fermi Surface p-nJunctionDiode Depletion Width Temperature Dependence of 2D Fermi-Dirac Particles
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Assembly of 3D Parts Using Javascript Web Graphics Library 3D Compared to Javascript 3D Graphics 3D Graphics Tutorial Beginnings Proof of Pythagoras a^2+b^2=c^2
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Multiple Slider Animation Template for Plotting with HTML Enhanced Sliders or Ranges Collapsible Dropdown Menu Example Arrow Functions Fast Fourier Transform (FFT) Demonstration
Animation of a Progress Bar
Template for Scientific Plots
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Time Dependent Wave Equation 1D One Dimensional Optical Resonator Modes
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Probability of Birthday Match Random Creation of Probability Function Profiles Two Dies Probability Distribution Three Dies Probability Distribution
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Light Rays in a Transparent Isosceles Prism Light Ray in a Series of Wedges of Various Index of Refraction Snells Law of Refraction Refraction Due to Dipoles in Two Media Refraction and Reflection Two Media Animation of Concave Mirror Reflection Animation of Convex Lens Refraction Prism Refraction-Wave Picture Thick Lens Ray Trace Monochromator (Czerny-Turner Type) Wavelets from Concave Mirror> Thick Lens Focusing
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Sagnac Effect Fiber Optical Gyro (FOG) Ring Laser Gyro (RLG)
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Paticle Motion in a Venturi: Wall Reflections Paticle Motion in a Venturi Potential Elliptical Ion Trap Using Boundary Potential Distribution Prediction of Hard Disc Collision Time and Position Rigid Rotor Collisions
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Acoustic Wave with Built-in Pressure Acoustic Waves in 2D Numerically Modeled Solid Wave 1D on a Linear Array Waves on Discrete Model of Vibrating String Linear Acoustic Wave in a 3D Gas Spherical Acoustic Wave in a 3D Gas Laterally Perturbed Two Dimensional Gas with Lennard Jones Repelling Forces Longitudinally Perturbed Two Dimensional Gas with Lennard Jones Repelling Forces
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Bicep and Forearm Animation Blood Pressure Measurement Multiple Dose Residual Medicine Vs Time The Eye and its Resolution Breathing Animation Scoliosis Animation Muscle Animation
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Scattering from a Crystalline Target 2D Scattering from a Crystalline Target 3D
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Energy Conduction in a 2D Numerically Modeled Solid Lattice Unbalanced Gas Dynamics:Energy Flow in a Gas
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12

Hover over the menu bar to pick a physics animation.

WebGL 3D Shapes

Comparison of 3D Web Graphics Library Animation with 3D Javascript Animation

Elements of the Drawing 3D Shapes Using javascript

First, let's explore what is needed to animate 3D graphics. To translate or rotate the shape, we will need to have access to all the vertex points that make up the faces of the shape. If we apply movements to these vertices, the polygons that make up the faces will need to follow those vertices. So first of all we need to define the (x,y,z) values of the vertices. Then we need a list of integer indices that define the vertex mumbers from which the faces are made.

Let's take the simple case of a cube. The cube has 8 vertices and 6 faces. Each face is defined by 4 of the vertices so, if we transformed all the vertices of the faces, we would have to work with 24 vertices or 3 times as many as necessary.

From the diagram on Canvas 0, it is easily seen that the front face indices looking from outside the cube and going counter-clockwise (CCW) are (1,2,3,4). It's critical to state all
Canvas 0: Cube Vertices Numbering Scheme
the face indices in the same rotary sense i.e. CCW, because, using that scheme, it is possible to show only the faces that are toward the viewer. Using the CCW scheme we can easily see that the face indices are as follows:

right:[2,5,8,3]
left:[1,4,7,6]
top: [4,3,8,7]
bottom:[1,6,5,2]
back:[5,6,7,8]
front:[1,2,3,4]
or more conveniently for use in javascript:
[[2,5,8,3],[1,4,7,6],[4,3,8,7],[1,6,5,2],[5,6,7,8],[1,2,3,4]]

Finally, if the side length of the cube is labeled s, then the vertex (x,y,z) values are as specified below:

1:(0,0,s); 2:(s,0,s); 3:(s,s,s); 4:(0,s,s); 5:(s,0,0); 6:(0,0,0); 7:(0,s,0); 8:(s,s,0) or more conveniently as a 2D array for use in javascript:
[[0,0,s],[s,0,s],[s,s,s],[0,s,s],[s,0,0],[0,0,0],[0,s,0},[s,s,0]]

Translation (displacement of all vertices and faces by the vector) is not at all computer time intensive. However, rotation involves calculation of the sines and cosines of the rotation angles and that is very computer time intensive. After the sines and cosines are computed, the vectors of the vertices must be multiplied by a matrix like the following:

`McdotV=((m_("xx"), m_(xy),m_(xz)),(m_(yx),m_(yy),m_(yz)),(m_(zx),m_(zy),m_(zz)))((v_x),(v_y),(v_z))`

where the `m's` are the matrix elements involving the sines and cosines of the rotation angles and the `v's` are the elements of the vector of the vertex. To be specific, for a rotation about the z axis the M matrix looks like:

`M_z=((cz, sz,0),(-sz,cz,0),(0,0,1))`

where `cz=cos phi_z` and `sz=sin phi_z` and `phi_z` is the rotation angle. Rotations about the x and y axes have similar matrices. To rotate about two or three axes, just multiply the respective matrices. Order of multiplication DOES make a difference in the final orientation of the shape.

Canvas 1: Web Graphics Library Shape Animations: Cylinder
Canvas 2: Javascript Canvas Shape Animations: Cylinder
Note That Sphere Shows Latitudes and Longitudes.
After rotating the vertices of a shape, the next task is to determine whether a given facet of a shape should be made visible to the viewer. To do that we take the cross product of two vectors made up of three consecutive vertices (using their indices) of the facet.

`bb"v"_1=bb"v"_b-bb"v"_a, bb"v"_2=bb"v"_c-bb"v"_b`

where `bb"v"_a, bb"v"_b and bb"v"_c` are the 3 consecutive vectors and the cross product is:

`bb"v"_(cp)=bb"v"_2 xx bb"v"_1`

If the z component of the cross product of these two vectors is positive then we elect to display the face and otherwise we don't. To use javascript to display a face in 2D on a canvas, we go through the following steps. We first define the lines between the vertices vectors, v, of a face by the code segment Code 1 where context is the name of the javascript access to the canvas on which we want to draw. The fill statement fills the polygon defined by the lines and the stroke statement draws lines along that same polygon perimeter. Of course there may be many faces and these are usually stored in a face index array so there will be an outside level of this loop to step through the faces.
var n=vectorArray.length;
var fillStyle=color;
context.beginPath;
for (var i=0; i < n; i++)
{ var v=vectorArray[i];
context.lineTo(v.x,v.y);
}
context.closePath();
context.fill();
context.stroke();
Cube Cylinder Regular Tetrahedron Beach Ball Jupiter Rings

Elements of Drawing with the Web Graphics Library

Web Graphics Library (WebGL) uses similar parameters to those we just discussed for javascript 3D animation. A significant difference is that all the vertices of all the faces are needed for the "positions" buffer. That would seem to imply that WebGL rotates all of these vertices. Since the faces of an interesting shape like a sphere are usually 4 vertex polygons and each vertex leads to one face, this would require 4 times more computer rotation time than the javascript method discussed above. Another diffence is that WebGL breaks the 4 vertex polygon into the two triangles that are obtained by drawing a diagonal from vertex 1 to vertex 3. Then WebGL uses an indices matrix that points to the indices of each of these triangles separately. WebGL DOES have some features that are not included in the javascript version of 3D graphics I have presented.

Linear Perspective

This is the feature where faces at larger distance from the viewer are shown as diminished in size. As an example, look at the hollow cylinder that is shown in Canvas 1. When the cylinder axis is along the z direction, the end farther from the viewer has a smaller diameter. The reason is simple: to the viewer, the far end subtends a smaller angle than the near end and should be depicted as smaller. The reason is that the size of the image on our retina depends on the angular subtense of the object that we are viewing. And, of course, the more distant end subtends a smaller angle. The same concept applies to the size of an image at the film plane of a camera.

Brightness Variation with Lighting and Viewing Angle

For a shape with perfectly smooth surface and plane parallel lighting, the only facets that we will be able to see are the ones where the surface normal bisects the angle between the light direction and the viewing direction (called specular reflection). If the light on the smooth surface has a larger angular distribution, then we will be able to see larger portions of the shape but the view will still be limited to the size of the light source (think of seeing the image of a angularly large lamp reflected by a plane mirror). Usually the shape we are viewing has a slightly rough surface. That means that the surface normal direction is a variable. Then the light will be scattered rather than reflected at Snell's law of reflection from the mean local surface plane. The larger the surface slope variation, the larger the distribution of scatter angles from the surface. At some point the wavelength of the light may be larger than the spacing between surface peaks and this will also cause some variation of angular distribution of light scatter. In any case, we can make the comment that the apparent brightness of a surface area element in WebGL is usually chosen to be the cosine of the angle between the surface normal and the z axis.

Pros and Cons of WebGL Vs Javascript Animation

WebGL is faster because it uses the Graphics Processing Unit (GPU) of any computer that has a GPU and most do. However, the learning curve for WebGL is steeper because it comes with a lot of software baggage that most people don't use anyway. I'm sure that I've not used anywhere near its full capability in this comparison. Also, for the spheres, I was unable to include both lines of longitude and latitude nor printed numbering of these lines in WebGL shapes although that may be due to my lack of experience. In javascript, these are quite easy since you need to draw lines to define outline of the face that is to be filled.