diff --git a/geneva.html b/geneva.html index e11c6c1..aa0a3d0 100644 --- a/geneva.html +++ b/geneva.html @@ -223,9 +223,11 @@ 'Snowflake': (z, fc)=>{ const d = edge_thick fc.fillStyle = palettes.edge - shapec( + shadow_on(fc) + shape( fc, [ + [0, 0], [20, 0], [25, -5], [30, 0], @@ -238,9 +240,13 @@ [0, 0], ], 0, -3, + 1, false, ) + fc.arc(0, 0, 4*z, 0, tau) + fc.fill() + shadow_off(fc) fc.fillStyle = palettes.mark - shapec( + shape( fc, [ [20+d/sq2, 0+d], @@ -258,28 +264,50 @@ ) }, 'Sectors': (z, fc)=>{ - shapec( + const r = 5.25*z + const o = 23.75*z - r + shadow_on(fc) + shape( fc, [ [0, 0], [23, 0], - [26, 2], - [23, 4], - [0, 4], + [26.5, 2.25], + [23, 4.5], + [0, 4.5], [0, 0], ], - 0, -2, + 0, -2.25, + 1, false, + ) + fc.arc(o, 0, r, 0, tau) + fc.arc(0, 0, 4*z, 0, tau) + fc.fillStyle = palettes.edge + fc.fill() + shadow_off(fc) + fc.fillStyle = palettes.mark + const s = 23 + const w = 1.75 + shape( + fc, + [ + [0, w], + [s, w], + [25.5, 0], + [s, -w], + [0, -w], + [0, w], + ], ) - fc.stroke() - - // ornament - const r = 5*z - const o = 23.5*z - r fc.beginPath() fc.arc(o, 0, r, 0, tau) + fc.arc(0, 0, 4*z, 0, tau) + fc.fillStyle = palettes.edge + fc.fill() + fc.beginPath() + fc.arc(o, 0, r-z*.5, 0, tau) + fc.fillStyle = palettes.mark fc.fill() - fc.stroke() - fc.beginPath() fc.moveTo(o, 0) fc.lineTo(o-r, 0) @@ -319,13 +347,17 @@ const hour_len = 7 const hour_radius = 4 const hour_thick = 2 +const lineWidth = .5 const minute_len = 2.25 const minute_r = half * 766/1024 const minute_thick = 0.25 +const shadowBlur = .5 +const shadowOffset = .25 const thick = .2 const tau = 2 * Math.PI const sq2 = Math.SQRT2 +const tau_2 = tau / 2 const tau_4 = tau / 4 const tau_12 = tau / 12 const tau_60 = tau / 60 @@ -391,16 +423,15 @@ window.synchronizeTimeout = window.setTimeout(synchronize, r) } -function shapec(c, path, x = 0, y = 0, m = 1){ +function shape(c, path, x = 0, y = 0, m = 1, fill = true){ m = m*z c.beginPath() c.moveTo((path[0][0] + x)*m, (path[0][1] + y)*m) for(i=1; i { const a = -i * tau_12 + tau_4 - bezel_angle shape( + c, bezel_index.map(v => rot(a, v)), half + (bezel_r * cos(-a)), half + (bezel_r * sin(-a)), @@ -538,6 +596,7 @@ .forEach(i => { const a = -i * tau_60 + tau_4 - bezel_angle shape( + c, bezel_minute.map(v => rot(a, v)), half + (bezel_r * cos(-a)), half + (bezel_r * sin(-a)), @@ -561,6 +620,7 @@ .forEach(i => { const a = -i * tau_60 + tau_4 shape( + c, [ rot(a, [0, -minute_thick]), rot(a, [-minute_len, -minute_thick]), @@ -578,6 +638,7 @@ .forEach(i => { const a = -i * tau_60 + tau_4 shape( + c, [ rot(a, [0, -minute_thick*2]), rot(a, [-minute_len, -minute_thick*2]), @@ -595,6 +656,7 @@ const l = 1 const r = minute_r - minute_len shape( + c, [ rot(a, [0,-minute_thick]), rot(a, [l,-minute_thick]), @@ -623,6 +685,7 @@ ].forEach(i => { const a = -i * tau_12 + tau_4 shape( + c, [ rot(a, [-hour_len,-hour_thick]), rot(a, [hour_len,-hour_thick]),