Claude Sonnet 4.6

#CodeVember #12 - shrinking hexagon
A 0.85T 0.30
1Looking at the animation frames, I can see:
21. A hexagon in the center
32. Small triangles appear around it pointing inward
43. The triangles move inward and grow, forming a star/snowflake pattern
54. The triangles fully merge with the hexagon creating a complex star shape
65. Then it reverses back - triangles pull away to small points again
76. This appears to loop
8
9The animation shows triangles at 6 positions (matching hexagon vertices) that pulse in and out.
10
11<!DOCTYPE html>
12<html lang="en">
13<head>
14<meta charset="UTF-8">
15<meta name="viewport" content="width=device-width, initial-scale=1.0">
16<title>Hexagon Animation</title>
17<style>
18  * { margin: 0; padding: 0; box-sizing: border-box; }
19  body {
20    background: #2a2a2a;
21    display: flex;
22    justify-content: center;
23    align-items: center;
24    width: 100vw;
25    height: 100vh;
26    overflow: hidden;
27  }
28  canvas {
29    display: block;
30  }
31</style>
32</head>
33<body>
34<canvas id="c"></canvas>
35<script>
36const canvas = document.getElementById('c');
37const ctx = canvas.getContext('2d');
38canvas.width = window.innerWidth;
39canvas.height = window.innerHeight;
40
41const cx = canvas.width / 2;
42const cy = canvas.height / 2;
43const hexR = 55;
44const color = '#c8c8c8';
45
46function hexPoints(r, offsetAngle = 0) {
47  const pts = [];
48  for (let i = 0; i < 6; i++) {
49    const a = (Math.PI / 3) * i + offsetAngle;
50    pts.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);
51  }
52  return pts;
53}
54
55function drawHex(r, offsetAngle = 0) {
56  const pts = hexPoints(r, offsetAngle);
57  ctx.beginPath();
58  ctx.moveTo(pts[0][0], pts[0][1]);
59  for (let i = 1; i < 6; i++) ctx.lineTo(pts[i][0], pts[i][1]);
60  ctx.closePath();
61  ctx.fillStyle = color;
62  ctx.fill();
63}
64
65// Draw triangle pointing toward center from a vertex
66// Each triangle sits at a hexagon vertex, pointing inward
67// At t=0: small triangles far out
68// At t=1: triangles fully merged in
69
70function drawTriangles(t) {
71  // 6 triangles, one per hexagon edge midpoint direction
72  // They point inward toward center
73  // At t=0 they are small and at distance ~hexR*1.5
74  // At t=1 they are large and at distance ~hexR (touching hex)
75
76  const numTri = 6;
77  // Triangle tip angle offset - pointing toward center
78  // Each triangle is at angle: 30 + 60*i degrees (edge midpoints of flat-top hex)
79  // Actually from frames: triangles appear at the 6 "corner" directions of the hex
80
81  for (let i = 0; i < numTri; i++) {
82    const angle = (Math.PI / 3) * i + Math.PI / 6; // pointing from outside toward center
83    
84    // Triangle size grows with t
85    const maxSize = hexR * 0.85;
86    const size = maxSize * t;
87    
88    // Distance from center to triangle tip (pointing inward)
89    // At t=0: far away, at t=1: close to hex edge
90    const maxDist = hexR * 1.55;
91    const minDist = hexR * 1.0;
92    const dist = maxDist - (maxDist - minDist) * t;
93    
94    // Triangle tip points toward center
95    const tipX = cx + dist * Math.cos(angle);
96    const tipY = cy + dist * Math.sin(angle);
97    
98    // Base of triangle (away from center)
99    const baseAngle = angle + Math.PI; // pointing away
100    const baseX = tipX + size * Math.cos(angle + Math.PI);
101    const baseY = tipY + size * Math.sin(angle + Math.PI);
102    
103    // Two base corners perpendicular
104    const perpAngle = angle + Math.PI / 2;
105    const halfBase = size * 0.6;
106    
107    ctx.beginPath();
108    ctx.moveTo(tipX, tipY);
109    ctx.lineTo(baseX + halfBase * Math.cos(perpAngle), baseY + halfBase * Math.sin(perpAngle));
110    ctx.lineTo(baseX - halfBase * Math.cos(perpAngle), baseY - halfBase * Math.sin(perpAngle));
111    ctx.closePath();
112    ctx.fillStyle = color;
113    ctx.fill();
114  }
115}
116
117let startTime = null;
118const period = 2000; // ms for one full cycle
119
120function animate(ts) {
121  if (!startTime) startTime = ts;
122  const elapsed = (ts - startTime) % (period * 2);
123  
124  // t goes 0->1->0 over 2*period
125  let t;
126  if (elapsed < period) {
127    t = elapsed / period;
128  } else {
129    t = 1 - (elapsed - period) / period;
130  }
131  
132  // Ease in-out
133  t = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
134
135  ctx.clearRect(0, 0, canvas.width, canvas.height);
136  
137  // Draw triangles behind hex
138  drawTriangles(t);
139  
140  // Draw hexagon on top
141  drawHex(hexR, Math.PI / 6);
142  
143  requestAnimationFrame(animate);
144}
145
146requestAnimationFrame(animate);
147
148window.addEventListener('resize', () => {
149  canvas.width = window.innerWidth;
150  canvas.height = window.innerHeight;
151});
152</script>
153</body>
154</html>