geneva: hand shadows, pivots

vezquex · Jan 6, 2025 · c1d6008 · c1d6008
1 parent ac422fe
commit c1d6008
Showing 1 changed file with 99 additions and 36 deletions.
diff --git 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<path.length; ++i){
 		c.lineTo((path[i][0] + x)*m, (path[i][1] + y)*m)
 	}
-	c.fill()
+	fill && c.fill()
 }
-const shape = shapec.bind(null, c)
 
 function circle(r, x, y, m = 1){
 	m = m*z
@@ -433,6 +464,16 @@
 
 const day_of_month_el = eid('day_of_month')
 
+function shadow_on(c){
+	c.shadowBlur = z*shadowBlur
+	c.shadowOffsetX = c.shadowOffsetY = z*shadowOffset
+}
+function shadow_off(c){
+	c.shadowBlur = 0
+	c.shadowOffsetX = 0
+	c.shadowOffsetY = 0
+}
+
 function display(t){
 	const hours = t.getHours()
 	const minutes = t.getMinutes()
@@ -443,6 +484,7 @@
 
 	fc.fillStyle = palettes.mark
 	fc.lineWidth = .5*z
+	fc.shadowColor='rgba(0,0,0,1)'
 	fc.strokeStyle = palettes.edge
 	fc.save()
 	fc.clearRect(0, 0, width*z, height*z)
@@ -454,17 +496,18 @@
 	fc.rotate(
 		(hr / 12 + minutes / 720 + seconds / 43200) * tau,
 	)
-	fc.strokeStyle = palettes.edge
-	hour_shapes[hour_shape]?.(z, fc);
+	hour_shapes[hour_shape]?.(z, fc)
 	fc.restore()
 
 	// minute hand
 	fc.save()
 	fc.rotate((minutes / 60 + seconds / 3600) * tau)
 	fc.fillStyle = palettes.edge
-	shapec(
+	shadow_on(fc)
+	shape(
 		fc,
 		[
+			[6, 0],
 			[32, 0],
 			[39.7, 3],
 			[32, 6],
@@ -473,42 +516,56 @@
 			[6, 0],
 		],
 		0, -3,
+		1, false,
 	)
+	fc.arc(0, 0, 3*z, 0, tau)
+	fc.fill()
+	shadow_off(fc)
 	fc.fillStyle = palettes.mark
 	fc.fillRect(6*z, -2.5*z, 26*z, 5*z)
 	fc.restore()
 
-	// center post
-	fc.beginPath()
-	fc.arc(0, 0, 4*z, 0, tau)
-	fc.fillStyle = palettes.edge
-	fc.fill()
-
 	// second hand
 	fc.save()
 	fc.rotate(seconds * tau_60)
-
+	shadow_on(fc)
+
+	fc.strokeStyle = palettes.edge
 	fc.beginPath()
-	fc.moveTo(-15*z, 0)
+	// tip
 	fc.lineTo(45.6*z, 0)
-	fc.strokeStyle = palettes.edge
+	// eye
+	fc.arc(33.6*z, 0, 2*z, -tau_2, tau_2)
+	// center
+	fc.arc(0, 0, 2*z, 0, tau)
+	fc.moveTo(-2*z, 0)
+	// tail
+	fc.arc(-15*z, 0, 1.25*z, 0, tau)
 	fc.stroke()
 
+	shadow_off(fc)
+	// eye
+	fc.fillStyle = palettes.mark
 	fc.beginPath()
-	fc.arc(-15*z, 0, 1.5*z, 0, tau)
+	fc.arc(33.6*z, 0, 1.8*z, -tau_2, tau_2)
+	fc.fill()
+
 	fc.fillStyle = palettes.edge
+	fc.beginPath()
+	// center
+	fc.arc(0, 0, 1.8*z, 0, tau)
+	// tail
+	fc.arc(-15*z, 0, 1.3*z, 0, tau)
 	fc.fill()
 
+	// stem
+	fc.fillStyle = palettes.dial
 	fc.beginPath()
-	fc.arc(33.6*z, 0, 2*z, 0, tau)
-	fc.fillStyle = palettes.mark
-	fc.strokeStyle = palettes.edge
+	fc.arc(0, 0, lineWidth*z, 0, tau)
 	fc.fill()
-	fc.stroke()
 
 	fc.restore()
-	fc.restore()
-}
+	fc.restore()}
 
 function display_static(){
 	if(bezel_el.value === '0'){
@@ -528,6 +585,7 @@
 	].forEach(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]),