Table of Contents
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 984×984.
(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:
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