Table of Contents

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 984×984.

(smallest dimension / 2) * factor = scale

Scale, Step, Factor, Rank

stepfactorrank 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

scalerank 2

scalerank 3

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

  1. 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
  2. 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:

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:

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