An earlier post entitled "An introduction to SVG - part 1" quickly wandered off topic to discuss slide rules and how they applied logarithmic scales to facilitate calculations before the invention of affordable electronic calculators. It was the idea of constructing a slide rule image that gave me the idea of writing an introduction to SVG. As it turns out, a slide rule is not a great project for developing general SVG skills. So part two of the SVG introduction dealt with a wider range of graphical challenges leaving my slide rule project to end up here.
Creating SVG XML code from JavaScript is an effective way of drawing slide rule scales but drawing them on a <canvas> object would have been almost as easy although SVG has some very nice text positioning options. The downside of SVG for this project was probably the huge amount of XML generated and inserted into the DOM. The end result of my endeavours can be found at https://adit.co.uk/sliderule.html but that is getting the end of the development process in before the start.
The project started with an HTML page containing just four empty <divs>. These were styled using CSS to create the four main components of a slide rule - the upper stator, lower stator, slide and cursor. I then used jQuery to ease the path of getting the slide and cursor to move in response to a mouse or the keyboard left/right arrow keys. That was the foundation.
Once the slide rule representation was animated I could attend to drawing the slide rule scales using SVG, I am sure that most slide rule users (back in the day) had rules with scales they did not use and probably wished for a scale that was omitted. Rules were sold with sensible groupings to suit particular usage and some high quality rules were reversible so that additional scales could be accommodated. I was largely guided in my choices by the slide rule I had inherited from my Father. I did though, switch one of the L scales for a K scale. It was because I was generally copying that slide rule that the cursor image became tinted to reflect the ageing of the original plastic.
Drawing a log scale is no more difficult than drawing a linear scale and the calculation was demonstrated in the first post here on SVG. The trigonometrical scales are reversed as the sine of 90 degrees and the tangent of 45 degrees is 1 and the log10 of 1 is zero. I could have tried adding cosine scale values below the sine scale (S) as the intervals would be the same but with cos(90) at the left hand end. Similarly I also declined the visual confusion of adding tangent scale values in the range 45 degrees to 84 degrees (approx). These are not shown on my Father's slide rule but I think I had them on the one I owned years ago.
Having built my SVG slide rule and found that I could use it for some straightforward calculations I wondered how the demonstration might be improved. I then added a visual display of the values on each scale under the cursor hairline plus the values at the points where the A and B scales and CD scales intersected (well at the lower end).
I then started dreaming about an interactive calculator with the slide rule being used to manage the calculations. I simplified that idea by laying out a set of typical problems where the page user can enter values, click a button and see the slide rule positioned to manage the calculation and display the result.
You can use this virtual slide rule with the slide and cursor being positioned for you aromatically. How about that for labour saving?
There might be a temptation for the code to "cheat" when running these calculations but they are all managed by positioning the slide and cursor and "reading back" the cursor position and applying the antilogarithm [result = Math.pow(10, x)] to get the value for each scale.
The challenge of automating the calculations was mostly one of keeping track of the magnitude of the result. This was something that people were adept at, back when log tables were commonly used in schools. The square root and cube root calculations were the most interesting as a decision has to be made on which part of the A and K scales respectively the calculation should be performed.
As an example, the square root of 4 is 2 and the square root of 40 is close to 6.32 and these calculations are easy to set on the A scale with the result read from the D scale. However the square root of 400 is 20 so that calculation is performed back at the low end of the A scale while 4,000 returns to the upper end. The decision for any given value is based upon the number of digits before the decimal point for values greater than or equal to 1 or the number of zeros following the decimal point for values less than 1. Odd numbers of digits are managed at the lower end while even numbers of digits are tackled at the upper end of the A scale. The position on the K scale for cube root calculations is also based on the number of digits (modulo 3).
All of the code (with the usual advance apologies) is accessible using your browser "Developer Tools" if any of it is of interest. Feel free to comment on bugs or missed opportunities (I am still thinking about that calculator as it would look cool).
<Edit>
Well I thought about the virtual calculator option and decided to implement it here. Enjoy.
My thought on the process (trivial though such thoughts and process are) can be found here.
dated: 13/06/2020
</Edit>
Creating SVG XML code from JavaScript is an effective way of drawing slide rule scales but drawing them on a <canvas> object would have been almost as easy although SVG has some very nice text positioning options. The downside of SVG for this project was probably the huge amount of XML generated and inserted into the DOM. The end result of my endeavours can be found at https://adit.co.uk/sliderule.html but that is getting the end of the development process in before the start.
The project started with an HTML page containing just four empty <divs>. These were styled using CSS to create the four main components of a slide rule - the upper stator, lower stator, slide and cursor. I then used jQuery to ease the path of getting the slide and cursor to move in response to a mouse or the keyboard left/right arrow keys. That was the foundation.
Once the slide rule representation was animated I could attend to drawing the slide rule scales using SVG, I am sure that most slide rule users (back in the day) had rules with scales they did not use and probably wished for a scale that was omitted. Rules were sold with sensible groupings to suit particular usage and some high quality rules were reversible so that additional scales could be accommodated. I was largely guided in my choices by the slide rule I had inherited from my Father. I did though, switch one of the L scales for a K scale. It was because I was generally copying that slide rule that the cursor image became tinted to reflect the ageing of the original plastic.
Drawing a log scale is no more difficult than drawing a linear scale and the calculation was demonstrated in the first post here on SVG. The trigonometrical scales are reversed as the sine of 90 degrees and the tangent of 45 degrees is 1 and the log10 of 1 is zero. I could have tried adding cosine scale values below the sine scale (S) as the intervals would be the same but with cos(90) at the left hand end. Similarly I also declined the visual confusion of adding tangent scale values in the range 45 degrees to 84 degrees (approx). These are not shown on my Father's slide rule but I think I had them on the one I owned years ago.
Having built my SVG slide rule and found that I could use it for some straightforward calculations I wondered how the demonstration might be improved. I then added a visual display of the values on each scale under the cursor hairline plus the values at the points where the A and B scales and CD scales intersected (well at the lower end).
I then started dreaming about an interactive calculator with the slide rule being used to manage the calculations. I simplified that idea by laying out a set of typical problems where the page user can enter values, click a button and see the slide rule positioned to manage the calculation and display the result.
You can use this virtual slide rule with the slide and cursor being positioned for you aromatically. How about that for labour saving?
There might be a temptation for the code to "cheat" when running these calculations but they are all managed by positioning the slide and cursor and "reading back" the cursor position and applying the antilogarithm [result = Math.pow(10, x)] to get the value for each scale.
The challenge of automating the calculations was mostly one of keeping track of the magnitude of the result. This was something that people were adept at, back when log tables were commonly used in schools. The square root and cube root calculations were the most interesting as a decision has to be made on which part of the A and K scales respectively the calculation should be performed.
As an example, the square root of 4 is 2 and the square root of 40 is close to 6.32 and these calculations are easy to set on the A scale with the result read from the D scale. However the square root of 400 is 20 so that calculation is performed back at the low end of the A scale while 4,000 returns to the upper end. The decision for any given value is based upon the number of digits before the decimal point for values greater than or equal to 1 or the number of zeros following the decimal point for values less than 1. Odd numbers of digits are managed at the lower end while even numbers of digits are tackled at the upper end of the A scale. The position on the K scale for cube root calculations is also based on the number of digits (modulo 3).
All of the code (with the usual advance apologies) is accessible using your browser "Developer Tools" if any of it is of interest. Feel free to comment on bugs or missed opportunities (I am still thinking about that calculator as it would look cool).
<Edit>
Well I thought about the virtual calculator option and decided to implement it here. Enjoy.
My thought on the process (trivial though such thoughts and process are) can be found here.
dated: 13/06/2020
</Edit>
No comments:
Post a Comment