When Bricmont was purchased by Inductotherm in 1996 I was charged with maintaining the product Inductotherm used to control its induction melting furnaces. During a lull some time later I worked up a little demo program in Delphi that could display the state of such a furnace in 3D. I thought it would be a good exercise to replicate that program using the HTML5 canvas element with graphics generated by Javascript code.
Here is the original program in action. It didn’t include the extra rotations.
The Charge button increments the mass contained in the furnace by five percent. One hundred percent mass is defined here as the mass of a volume of molten steel that fills the entire furnace. The density of the charge material is assumed to be one-third that of the molten material. Charge can only be added to the furnace when it is fully upright, when the Pour Angle is ninety degrees. Each increment of charge is capped so the total volume of material in the furnace is never greater than one hundred percent. If the furnace has been rotated away from its standard pouring view it will be returned to that view.
The Melt button increments the percentage of the mass in the furnace that is melted by five percent. The volume and mass of the melted and not-yet-melted materials are recalculated. If there is no unmelted material in the furnace the button has no effect. If the furnace has been rotated away from its standard pouring view it will be returned to that view.
The Tilt Down button tilts the furnace down in increments of five degrees. If the molten steel in the furnace would spill over the top lip of the furnace the volume and mass of material will be recalculated. This calculation is obviously idealized because material pouring over the lip would have some thickness. If the furnace has been rotated away from its standard pouring view it will be returned to that view.
The Tilt Up button tilts the furnace back up towards vertical. The level of any molten material remaining in the furnace is recalculated.
The remaining buttons are used to rotate the furnace around the X-, Y-, and Z-axes in increments of five degrees. The rotation is always initialized from the standard pouring view. I originally included this capability, along with the ability to perform translation and scaling operations, just so I could interactively locate the display in the drawing area.
This is all something of a hack. The point wasn’t to make it pretty and perfectly rational but to demonstrate some basic operations. The 3D and display operations are all carried out using matrix operations in straight Javascript. The same is also true for what may be the worst hidden line implementation in history. It may be ugly, but it at least has the virtue of working. I didn’t bother defining the bottom surface of the furnace for the hidden line calculations in the interest of being able to see everything I was doing.
Buttons in Delphi (which used Borland’s Object Windows Library or OWL) automatically included a repeat feature, but HTML and Javascript do not do so automatically. I therefore had to embed the button events in functions that fire an initial SetTimeout(func,delay) on mouse down. It would trigger the desired event once and if the mouse button stayed down until that timer expired (at 250 ms) it would initialize a SetInterval(func,delay) event that would fire every 50 ms. The active timer was cleared on mouse up. I found that new timers would occasionally get initialized before the old ones cleared so I inserted extra clear events before every new set event.
I also added handlers for touch events, though I kept it basic. It doesn’t try to handle multi-touch events and only handles the touchstart and touchend events. Interestingly, the touch events aren’t recognized by the version of Firefox that was current as of this writing (v44.0.1, 9 February 2016). The touch features do work in Chrome and Microsoft Edge.