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]),