[[projects:projects]]:[[voyc]]

====== Design Notes ======

===== Scale =====

scale = number of pixels to display the radius of the globe

scale factor.  used only at startup. default 1. 

scale step pct.  applied to current scale with each step

Calculation

with full screen browser window on laptop 1920 x 984
Make a square of 984x984.

(smallest dimension / 2) * factor = scale

==== Scale, Step, Factor, Rank ====
^step^factor^rank ^scale1^    2^    3^ degr   ^ globe     ^ example            ^
|   1|  .5  |  1  |   242|  111|   98| 360°   | 2 globes  |                    |
|   2|      |     |   276|  126|  112|        |           |                    |
|   3|      |     |   315|  144|  128|        |           |                    |
|   4|      |     |   359|  164|  146|        |           |                    |
|   5|      |     |   409|  187|  166|        |           |                    |
|   6|      |     |   466|  213|  189|        |           |                    |
|   7|   1  |  2  |   531|  243|  215| 180°   | 1 globe   |                    |
|   8|      |     |   606|  277|  245|        |           |                    |
|   9|      |     |   690|  316|  279|        |           |                    |
|  10|      |     |   787|  360|  318|        |           |                    |
|  11|   2  |  3  |   897|  410|  363|  90°   | 1/2 globe | Africa             |
|  12|      |     |  1023|  467|  414|        |           |                    |
|  13|      |     |  1166|  532|  472|        |           |                    |
|  14|   3  |  4  |  1329|  606|  538|  60°   | 1/3 globe | Mediterranean, USA |
|  15|      |     |  1515|  691|  613|        |           |                    |
|  16|      |     |  1727|  788|  699|        |           |                    |
|  17|   4  |  5  |  1969|  898|  797|  45°   | 1/4 globe |                    |
|  18|      |     |  2245| 1024|  909|        |           |                    |
|  19|      |     |  2559| 1167| 1036|        |           |                    |
|  20|   6  |  6  |  2904| 1326| 1181|  30°   | 1/6 globe | USA-Mexico border  |

scale 1: full screen laptop\\
scale 2: 1/4 screen laptop, 7cm square\\
scale 3: phone portrait\\

==== Sliding Scale to Palette Index ====

^zoom ^  geomScaleRank   ^^^^^^
^ ::: ^  1  ^  2  ^  3  ^  4  ^  5  ^  6  ^
^  1  |  6  |  5  |  4  |  3  |  2  |  1  |
^  2  |     |  6  |  5  |  4  |  3  |  2  |
^  3  |     |     |  6  |  5  |  4  |  3  |
^  4  |     |     |     |  6  |  5  |  4  |
^  5  |     |     |     |     |  6  |  5  |
^  6  |     |     |     |     |     |  6  |






==== Rivers ==== 
scalerank 1
  * Nile
  * Mississippi
  * Amazon
  * Yangtze
  * Lena
scalerank 2
  * Congo
scalerank 3
  * Indus
  * Ganges
scalerank 4

scalerank 5

scalerank 6


Tigris, Euprates

===== Patterns =====

google "fantasy map of the world"

Examples of "fantasy map" drawings of terrain and landscape: 
  * https://stock.adobe.com/images/fantasy-map-elements-illustration-drawing-engraving-ink-line-art-vector/178934576
  * https://www.pinterest.com/pin/old-school-typographic-map-symbols-for-drawing-terrain--536421005603192899/
  * https://www.freepik.com/premium-vector/vector-mountain-shapes_2181068.htm

===== show/hide =====

minimal implements functions show(id) and hide(id) which expect attribute "hidden".\\
minimal also implements attribute "initially" and class "hidden".

jslib/utils implements function show(elem,boo) which expects class "hidden".

HUD implements function fade(elem,boo) which expects classes "fade" and "in". 

display:block or none, removes the element entirely, so onscreen ordering can shift.

opacity:1 vs 0, leaves the element in place.

===== Sketch ===== 

For inspiration, see: https://sketch.io/sketchpad/?

design options
  - user choose up front from toolbar of points/lines/polygons
    * explict up-front choice might be easier to understand
    * make this choice part of creating the layer
  - choose point/line/polygon automatically, no menu
    * draw as line
    * user chooses point by finishing the object after one point
    * user chooses polygon by dropping last point on first

we have chosen option 1 for now

===== Polygons ===== 

In GeoJson, a polygon is a closed line.  The last point duplicates the first.

In canvas 2d ctx, there are two ways to close a line:
  * ctx.lineTo() back to the first point.
  * ctx.closePath()

In voyc, all of our polygon data is closed.\\
Therefore, we do not use closePath().


===== Perspective Correction ===== 

Drawing the Hires layer.

Projecting a bitmap onto a sphere.

Splitting a rectangular bitmap into smaller tiles, and projecting each onto the sphere.

Each bitmap tile must be perspective corrected.

Javascript canvas ctx commands available:
  * rotate()
  * scale()
  * skew()
  * translate()
  * transform() - all of the above using matrix math
  * clip()

These commands will NOT do perspective correction. aka distort, warp, free transform.

http://tulrich.com/geekstuff/canvas/perspective.html \\
http://pubs.sciepub.com/ajme/2/7/29/index.html#Figure3 \\
http://www.java2s.com/Tutorials/Javascript/Canvas_How_to/Image/Shear_image_with_scale_function.htm\\