/* The sewn logo A logo preview embroidered in front of you. A wooden hoop drops onto a linen cloth and its brass screw turns, pulling the cloth taut. A silver needle runs in, trailing a thread that swings behind it like a little chain, stabs the cloth and sews the edges of every letter in running stitch: the stitches appear one after the other, the needle dips in and out (only its back shows while it is under) and the cloth dimples where it goes in. Then it fills the letters in satin stitch, row after row of thread with lights and shadows, ties a knot, and a small pair of scissors snips the thread; the embroidery puffs up a little. Then it rests: the light runs over the thread, the loose cloth moves a little and the needle, pinned at the side, sways. After a while the needle pulls the thread and the stitches come undone in reverse, and it starts again. The logo is a word (each letter is sewn on its own) or a picture: its shape is sewn and filled with its colours. */ /* ---- values to change ---- */ const NAME = 'Hemwick'; /* the logo, written: the needle sews the edges of every letter, then fills it */ const IMAGE = ''; /* or the logo as a picture (an address, or a file loaded in the Playground): its shape is sewn and filled with its colours */ const STITCH = 0.1; /* how long a running stitch along the edges is, in letter heights */ const FILL = 36; /* how close the satin stitches sit: rows of thread per letter height */ const ANGLE = 35; /* the slant of the satin stitches, in degrees (0 = level, 90 = upright) */ const HOOP = true; /* the wooden hoop around the cloth, with its brass screw */ const SPEED = 1; /* 2 = twice as fast, 0.5 = half as fast */ const REST = 4; /* seconds the embroidered logo stays on show before it is unpicked */ const LOOP = true; /* unpick the stitches and sew the logo again */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const TRACK = -0.01; /* the letter spacing of the logo, in em */ const EYE = 176; /* where the thread goes through the needle, in the needle's drawing */ const DEEP = 186; /* how far the needle can go into the cloth, in the needle's drawing */ const TAU = Math.PI * 2; const $ = (s) => document.querySelector(s); const stage = $('[data-stage]'); const world = $('[data-world]'); const layer = { drapes: $('[data-drapes]'), folds: $('[data-folds]'), ring: $('[data-ring]'), shadow: $('[data-stitch-shadow]'), fill: $('[data-fill]'), light: $('[data-light]'), outline: $('[data-outline]'), knot: $('[data-knot]'), fx: $('[data-fx]'), }; const el = { cloth: $('[data-cloth]'), outside: $('[data-outside]'), outsideFull: $('[data-outside-full]'), outsideHole: $('[data-outside-hole]'), outsideMask: $('[data-outside-mask]'), inside: $('[data-inside]'), vignette: $('[data-vignette]'), work: $('[data-work]'), sheen: $('[data-sheen]'), sheenMask: $('[data-sheen-mask]'), sheenRect: $('[data-sheen-rect]'), sheenTurn: $('[data-sheen-turn]'), hoop: $('[data-hoop]'), screw: $('[data-screw]'), tabL: $('[data-tab-l]'), tabR: $('[data-tab-r]'), threads: $('[data-threads]'), knurl: $('[data-knurl]'), tools: $('[data-tools]'), dimple: $('[data-dimple]'), needle: $('[data-needle]'), needleShadow: $('[data-needle-shadow]'), cut: $('[data-needle-cut]'), glint: $('[data-glint]'), thread: $('[data-thread]'), tEdge: $('[data-thread-edge]'), tMain: $('[data-thread-main]'), tTwist: $('[data-thread-twist]'), scissors: $('[data-scissors]'), scissorsShadow: $('[data-scissors-shadow]'), halfA: $('[data-half-a]'), halfB: $('[data-half-b]'), }; function make(tag, attrs, parent) { const n = document.createElementNS(NS, tag); for (const k in attrs) n.setAttribute(k, attrs[k]); if (parent) parent.append(n); return n; } const rand = (a, b) => a + Math.random() * (b - a); const fix = (v) => v.toFixed(1); /* the same angle, turned by whole turns so that it is as close as possible to another one */ const near = (a, ref) => a + TAU * Math.round((ref - a) / TAU); /* every piece turns on its joint: a point of the drawing, turned into a percentage of the piece's own box */ const joint = (node, x, y) => { const b = node.getBBox(); gsap.set(node, { transformOrigin: `${(((x - b.x) / b.width) * 100).toFixed(3)}% ${(((y - b.y) / b.height) * 100).toFixed(3)}%` }); }; joint(el.halfA, 0, 0); joint(el.halfB, 0, 0); let picture = null; let T = null; let idle = null; let S = null; let round = 0; let size = { w: 0, h: 0 }; /* ------------------------------------------------------------------ the needle and the scissors */ /* the needle is one object: where its point touches the cloth (x, y), where it points (a), how deep it is in the cloth (d, 0 to 1), how high it is lifted (lift) and how much it stretches (sx). It is written as attributes */ const N = { x: 0, y: 0, a: 0, d: 0, lift: 0, sx: 1, on: 0 }; const eye = { x: 0, y: 0 }; function needleAt(n) { const k = S.ns * (1 + 0.16 * n.lift); const c = Math.cos(n.a); const s = Math.sin(n.a); const reach = n.d * DEEP * k * n.sx; const px = n.x + c * reach; const py = n.y + s * reach; return { px, py, k, ex: px - c * EYE * k * n.sx, ey: py - s * EYE * k * n.sx }; } function drawNeedle() { if (!S) return; const q = needleAt(N); const deg = ((N.a * 180) / Math.PI).toFixed(2); const turn = `rotate(${deg}) scale(${(q.k * N.sx).toFixed(4)} ${(q.k / N.sx).toFixed(4)})`; el.needle.setAttribute('transform', `translate(${q.px.toFixed(2)} ${q.py.toFixed(2)}) ${turn}`); /* the higher it is, the further away and the lighter its shadow */ const off = S.os * (0.05 + 0.32 * N.lift); el.needleShadow.setAttribute('transform', `translate(${(q.px + off * 0.6).toFixed(2)} ${(q.py + off).toFixed(2)}) ${turn}`); el.needleShadow.setAttribute('opacity', (1 - 0.45 * Math.min(1, N.lift)).toFixed(3)); /* only the part still above the cloth is drawn */ el.cut.setAttribute('width', Math.max(0, 260 - N.d * DEEP).toFixed(2)); const dk = Math.min(1, N.d * 5) * (1 - Math.min(1, N.lift)); el.dimple.setAttribute('transform', `translate(${N.x.toFixed(2)} ${N.y.toFixed(2)}) rotate(${deg}) scale(${(Math.max(dk, 0.001) * S.os * 0.0045).toFixed(4)})`); const on = N.on > 0.5; el.needle.setAttribute('visibility', on ? 'visible' : 'hidden'); el.needleShadow.setAttribute('visibility', on ? 'visible' : 'hidden'); el.dimple.setAttribute('visibility', on && dk > 0.02 ? 'visible' : 'hidden'); eye.x = q.ex; eye.y = q.ey; } /* the scissors: place, direction and how far they are open */ const SC = { x: 0, y: 0, a: 0, on: 0 }; function drawScissors() { if (!S) return; const turn = `rotate(${((SC.a * 180) / Math.PI).toFixed(2)}) scale(${S.sk.toFixed(4)})`; el.scissors.setAttribute('transform', `translate(${SC.x.toFixed(2)} ${SC.y.toFixed(2)}) ${turn}`); el.scissorsShadow.setAttribute('transform', `translate(${(SC.x + S.os * 0.06).toFixed(2)} ${(SC.y + S.os * 0.12).toFixed(2)}) ${turn}`); const v = SC.on > 0.5 ? 'visible' : 'hidden'; el.scissors.setAttribute('visibility', v); el.scissorsShadow.setAttribute('visibility', v); } /* ------------------------------------------------------------------ the thread */ /* a little chain of points pulled by the needle's eye: each frame the points keep their speed, fall a little and are pulled back to their length. One end is the eye; the other end is the last stitch, or loose */ const TH = { on: 0, a: 0, ax: 0, ay: 0, len: 100, slack: 0 }; const CH = 22; const px = new Float64Array(CH); const py = new Float64Array(CH); const qx = new Float64Array(CH); const qy = new Float64Array(CH); let fresh = true; const lastEye = { x: 0, y: 0 }; function threadLength() { if (!TH.a) return TH.len; const d = Math.hypot(TH.ax - eye.x, TH.ay - eye.y); return Math.max(d * 1.02, d + TH.slack); } function lay(L) { for (let i = 0; i < CH; i++) { const f = i / (CH - 1); let x; let y; if (TH.a) { x = eye.x + (TH.ax - eye.x) * f; y = eye.y + (TH.ay - eye.y) * f + Math.sin(f * Math.PI) * L * 0.08; } else { x = eye.x + Math.sin(f * 2) * L * 0.08; y = eye.y + f * L * 0.95; } px[i] = qx[i] = x; py[i] = qy[i] = y; } } function settle(steps) { const L = threadLength(); const seg = L / (CH - 1); const fall = (S.h * 3) / 3600; const pinned = !!TH.a; for (let n = 0; n < steps; n++) { for (let i = 1; i < CH; i++) { if (pinned && i === CH - 1) continue; const vx = (px[i] - qx[i]) * 0.9; const vy = (py[i] - qy[i]) * 0.9; qx[i] = px[i]; qy[i] = py[i]; px[i] += vx; py[i] += vy + fall; } px[0] = qx[0] = eye.x; py[0] = qy[0] = eye.y; if (pinned) { px[CH - 1] = qx[CH - 1] = TH.ax; py[CH - 1] = qy[CH - 1] = TH.ay; } for (let it = 0; it < 14; it++) { for (let i = 0; i < CH - 1; i++) { const dx = px[i + 1] - px[i]; const dy = py[i + 1] - py[i]; const d = Math.hypot(dx, dy) || 1e-6; const diff = (d - seg) / d; const endFixed = pinned && i + 1 === CH - 1; if (i === 0 && endFixed) continue; const wa = i === 0 ? 0 : endFixed ? 1 : 0.5; const wb = i === 0 ? 1 : endFixed ? 0 : 0.5; px[i] += dx * diff * wa; py[i] += dy * diff * wa; px[i + 1] -= dx * diff * wb; py[i + 1] -= dy * diff * wb; } } } } function threadTick() { if (!S) return; const show = TH.on > 0.5 && N.on > 0.5; el.thread.setAttribute('visibility', show ? 'visible' : 'hidden'); if (!show) { fresh = true; return; } /* a jump (a restart, a seek) lays the thread again and lets it settle at once */ if (fresh || Math.hypot(eye.x - lastEye.x, eye.y - lastEye.y) > S.os * 1.2) { lay(threadLength()); settle(70); fresh = false; } else settle(1); lastEye.x = eye.x; lastEye.y = eye.y; let d = `M${fix(px[0])} ${fix(py[0])}`; for (let i = 1; i < CH - 1; i++) d += `Q${fix(px[i])} ${fix(py[i])} ${fix((px[i] + px[i + 1]) / 2)} ${fix((py[i] + py[i + 1]) / 2)}`; d += `L${fix(px[CH - 1])} ${fix(py[CH - 1])}`; el.tEdge.setAttribute('d', d); el.tMain.setAttribute('d', d); el.tTwist.setAttribute('d', d); } gsap.ticker.add(threadTick); /* ------------------------------------------------------------------ stitches drawn in bulk */ /* thousands of stitches are a few paths: each keeps the whole text of its stitches and shows only the first ones */ function bundle(paths) { return { paths, strs: paths.map(() => ''), offs: paths.map(() => [0]), idx: [], count: -1 }; } function addTo(b, i, parts) { b.idx.push(i); parts.forEach((s, j) => { b.strs[j] += s; b.offs[j].push(b.strs[j].length); }); } function reveal(b, n) { let lo = 0; let hi = b.idx.length; while (lo < hi) { const m = (lo + hi) >> 1; if (b.idx[m] < n) lo = m + 1; else hi = m; } if (lo === b.count) return; b.count = lo; b.paths.forEach((p, j) => p.setAttribute('d', b.strs[j].slice(0, b.offs[j][lo]))); } const line = (x1, y1, x2, y2) => `M${fix(x1)} ${fix(y1)}L${fix(x2)} ${fix(y2)}`; function showStitches(n1, n2) { reveal(S.ob, n1); for (const b of S.fb) reveal(b, n2); } /* ------------------------------------------------------------------ reading the shape of the logo */ /* each piece is drawn alone on a small canvas, one pixel every g units of the stage */ function raster(p) { const pad = 0.3 * S.h; const x0 = p.x - pad; const y0 = S.B - S.h - pad; const g = S.g; const cw = Math.ceil((p.w + 2 * pad) / g) + 1; const ch = Math.ceil((S.h + S.desc + 2 * pad) / g) + 1; const c = document.createElement('canvas'); c.width = cw; c.height = ch; const x = c.getContext('2d', { willReadFrequently: true }); x.scale(1 / g, 1 / g); x.translate(-x0, -y0); let data = null; if (p.pic) { x.drawImage(picture, p.x, S.B - S.h, p.w, S.h); } else { x.font = S.font; x.fillText(p.ch, p.x, S.B); } try { data = x.getImageData(0, 0, cw, ch).data; } catch (e) { /* a picture from another site cannot be read: its box is sewn instead, and the picture is shown on top */ data = new Uint8ClampedArray(cw * ch * 4); for (let j = 0; j < ch; j++) { for (let i = 0; i < cw; i++) { const sx = x0 + (i + 0.5) * g; const sy = y0 + (j + 0.5) * g; if (sx >= p.x && sx <= p.x + p.w && sy >= S.B - S.h && sy <= S.B) data[(j * cw + i) * 4 + 3] = 255; } } p.blind = true; } const at = (sx, sy) => { const i = Math.round((sx - x0) / g - 0.5); const j = Math.round((sy - y0) / g - 0.5); return i < 0 || j < 0 || i >= cw || j >= ch ? -1 : (j * cw + i) * 4; }; return { x0, y0, g, cw, ch, data, alpha: (sx, sy) => { const k = at(sx, sy); return k < 0 ? 0 : data[k + 3]; }, rgb: (sx, sy) => { const k = at(sx, sy); return k < 0 ? [0, 0, 0] : [data[k], data[k + 1], data[k + 2]]; }, }; } /* marching squares: the edge between inside and outside, as closed lines through the middle of the pixel edges */ const CASES = { 1: [['L', 'B']], 2: [['B', 'R']], 3: [['L', 'R']], 4: [['T', 'R']], 5: [['T', 'R'], ['L', 'B']], 6: [['T', 'B']], 7: [['T', 'L']], 8: [['T', 'L']], 9: [['T', 'B']], 10: [['T', 'L'], ['B', 'R']], 11: [['T', 'R']], 12: [['L', 'R']], 13: [['B', 'R']], 14: [['L', 'B']], }; function trace(R) { const { cw, ch, data, x0, y0, g } = R; const al = (i, j) => (i < 0 || j < 0 || i >= cw || j >= ch ? 0 : data[(j * cw + i) * 4 + 3]); const LIM = 128; const spot = new Map(); const nb = new Map(); const clamp = (f) => Math.min(1, Math.max(0, f)); const node = (t, i, j) => { const key = `${t}${i},${j}`; if (!spot.has(key)) { const a0 = al(i, j); const a1 = t === 'h' ? al(i + 1, j) : al(i, j + 1); const f = a1 === a0 ? 0.5 : clamp((LIM - a0) / (a1 - a0)); const gx = t === 'h' ? i + f : i; const gy = t === 'h' ? j : j + f; spot.set(key, [x0 + (gx + 0.5) * g, y0 + (gy + 0.5) * g]); } return key; }; const link = (a, b) => { if (!nb.has(a)) nb.set(a, []); if (!nb.has(b)) nb.set(b, []); nb.get(a).push(b); nb.get(b).push(a); }; for (let j = -1; j < ch; j++) { for (let i = -1; i < cw; i++) { const c = (al(i, j) >= LIM ? 8 : 0) | (al(i + 1, j) >= LIM ? 4 : 0) | (al(i + 1, j + 1) >= LIM ? 2 : 0) | (al(i, j + 1) >= LIM ? 1 : 0); if (c === 0 || c === 15) continue; const E = { T: () => node('h', i, j), B: () => node('h', i, j + 1), L: () => node('v', i, j), R: () => node('v', i + 1, j) }; for (const [a, b] of CASES[c]) link(E[a](), E[b]()); } } const loops = []; const seen = new Set(); for (const first of nb.keys()) { if (seen.has(first)) continue; const loop = []; let prev = null; let cur = first; while (cur && !seen.has(cur)) { seen.add(cur); loop.push(spot.get(cur)); const ns = nb.get(cur); const next = ns[0] !== prev ? ns[0] : ns[1]; prev = cur; cur = next; } if (loop.length > 6) loops.push(loop); } /* a little smoothing, so that the stitches follow curves and not pixels */ return loops.map((L) => { let A = L; for (let pass = 0; pass < 2; pass++) { A = A.map((q, i) => { const a = A[(i - 1 + A.length) % A.length]; const b = A[(i + 1) % A.length]; return [(a[0] + 2 * q[0] + b[0]) / 4, (a[1] + 2 * q[1] + b[1]) / 4]; }); } return A; }); } /* a closed line measured along its length */ function along(L) { const n = L.length; const cum = [0]; for (let i = 1; i <= n; i++) { const a = L[i - 1]; const b = L[i % n]; cum.push(cum[i - 1] + Math.hypot(b[0] - a[0], b[1] - a[1])); } const per = cum[n]; const at = (s) => { s = ((s % per) + per) % per; let lo = 0; let hi = n - 1; while (lo < hi) { const m = (lo + hi + 1) >> 1; if (cum[m] <= s) lo = m; else hi = m - 1; } const a = L[lo]; const b = L[(lo + 1) % n]; const f = (s - cum[lo]) / (cum[lo + 1] - cum[lo] || 1); return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f]; }; let area = 0; for (let i = 0; i < n; i++) { const a = L[i]; const b = L[(i + 1) % n]; area += a[0] * b[1] - b[0] * a[1]; } return { per, at, area: Math.abs(area / 2) }; } /* satin stitch: parallel rows across the shape, gathered into columns the needle can fill in one go */ function satin(R, ang) { const c = Math.cos(ang); const s = Math.sin(ang); const { x0, y0, cw, ch, g } = R; const corners = [[x0, y0], [x0 + cw * g, y0], [x0, y0 + ch * g], [x0 + cw * g, y0 + ch * g]]; const us = corners.map(([x, y]) => x * c + y * s); const vs = corners.map(([x, y]) => -x * s + y * c); const umin = Math.min(...us); const umax = Math.max(...us); const vmin = Math.min(...vs); const vmax = Math.max(...vs); const sp = S.sp; const step = g * 0.5; const inset = S.sw * 0.3; const rows = []; let r = 0; for (let v = vmin + sp * 0.5; v < vmax; v += sp, r++) { const segs = []; let open = null; for (let u = umin; u <= umax; u += step) { const inn = R.alpha(u * c - v * s, u * s + v * c) >= 128; if (inn && open === null) open = u; else if (!inn && open !== null) { segs.push([open, u - step]); open = null; } } if (open !== null) segs.push([open, umax]); rows.push(segs.filter((q) => q[1] - q[0] > sp * 0.5).map((q) => ({ r, v, ua: q[0] + inset, ub: Math.max(q[0] + inset + 0.1, q[1] - inset) }))); } const runs = []; let before = []; for (const row of rows) { const now = []; for (const sg of row) { const run = before.find((rn) => !rn.used && Math.min(rn.last.ub, sg.ub) - Math.max(rn.last.ua, sg.ua) > sp * 0.5); if (run) { run.used = true; run.segs.push(sg); run.last = sg; now.push(run); } else { const fresh2 = { segs: [sg], last: sg, used: true }; runs.push(fresh2); now.push(fresh2); } } for (const rn of now) rn.used = false; before = now; } const pt = (u, v) => [u * c - v * s, u * s + v * c]; for (const rn of runs) for (const sg of rn.segs) { sg.a = pt(sg.ua, sg.v); sg.b = pt(sg.ub, sg.v); sg.pt = pt; } return runs; } /* ------------------------------------------------------------------ measures and pieces */ function build() { const W = stage.clientWidth || innerWidth; const H = stage.clientHeight || innerHeight; size = { w: W, h: H }; stage.setAttribute('viewBox', `0 0 ${W} ${H}`); for (const k in layer) layer[k].replaceChildren(); gsap.set([world, el.work, el.hoop, layer.drapes, layer.shadow, el.tools, layer.outline, layer.fill, layer.light, layer.knot], { x: 0, y: 0, scale: 1, opacity: 1 }); gsap.set([el.tabL, el.tabR, el.threads, el.knurl, el.glint], { x: 0 }); gsap.set([el.halfA, el.halfB], { rotation: 0 }); gsap.set(el.sheen, { opacity: 1 }); el.tMain.setAttribute('class', 'filo filo--orlo'); stage.setAttribute('aria-label', picture ? 'Logo' : NAME); /* the letters measured on a canvas, in the same face as the page */ const cs = getComputedStyle(stage); const font = (px2) => `${cs.fontWeight} ${px2}px ${cs.fontFamily}`; const pen = document.createElement('canvas').getContext('2d'); let k; let asc; let desc = 0; const letters = []; if (picture) { k = (picture.naturalWidth || 300) / (picture.naturalHeight || 150); asc = 1; } else { pen.font = font(100); const chars = Array.from(NAME.trim() || 'Logo'); chars.forEach((ch, i) => { const before = i ? pen.measureText(chars.slice(0, i).join('')).width + i * TRACK * 100 : 0; letters.push({ ch, i, x: before / 100, w: pen.measureText(ch).width / 100 }); }); const m = pen.measureText(chars.join('')); k = (m.width + (chars.length - 1) * TRACK * 100) / 100; asc = m.actualBoundingBoxAscent / 100 || 0.72; desc = m.actualBoundingBoxDescent / 100 || 0; } /* one size for everything: the hoop is an oval round the logo, with room for the screw on top */ const tall = W < H * 0.9; const hh1 = asc + desc; const m1 = 0.3 * asc; const rw1 = 0.2 * asc; /* the oval is as round as the screen allows: of all the shapes that hold the logo, the one with the biggest letters */ const fit = (c) => { const ry = c * (hh1 / 2 + m1); const rx = Math.max(ry, (k / 2 + m1) / Math.sqrt(1 - Math.pow((hh1 / 2 + m1) / ry, 2))); const ff = Math.min(((tall ? 0.95 : 0.92) * W) / (2 * (rx + rw1)), ((tall ? 0.7 : 0.8) * H) / (2 * (ry + rw1) + 1.3 * rw1), ((picture ? 0.36 : 0.28) * H) / hh1, 300); return { ry, rx, ff }; }; const shapes = []; for (let c = 1.6; c <= 4.5; c += 0.1) shapes.push(fit(c)); const top = Math.max(...shapes.map((o) => o.ff)); const best = shapes.filter((o) => o.ff >= top * 0.97).pop(); const rx1 = best.rx; const ry1 = best.ry; const f = best.ff; const h = asc * f; const rw = Math.max(8, rw1 * f); const rx = rx1 * f; const ry = ry1 * f; const cy = H * 0.48 + 0.6 * rw; const cx = W / 2; const B = cy + (h - desc * f) / 2; const left = cx - (k * f) / 2; const os = Math.max(h, 0.075 * Math.min(W, H)); const sp0 = Math.max(1.5, h / FILL); S = { W, H, f, h, desc: desc * f, B, cx, cy, rx, ry, rw, left, right: left + k * f, os, ns: (1.3 * os) / 200, sk: (1.1 * os) / 200, g: Math.max(0.6, h / 72), sp: sp0, sw: sp0 * 1.3, ow: Math.max(1.5, h * 0.034), tw: Math.max(1.4, h * 0.026), font: font(f), }; /* the cloth, the shade outside the hoop, the vignette */ const big = { x: -W, y: -H, width: 3 * W, height: 3 * H }; for (const n of [el.cloth, el.outside, el.outsideFull, el.vignette]) for (const a in big) n.setAttribute(a, big[a]); for (const a in big) { el.outsideMask.setAttribute(a, big[a]); el.sheenMask.setAttribute(a, big[a]); } const rxC = rx + rw / 2; const ryC = ry + rw / 2; for (const [a, v] of Object.entries({ cx, cy, rx: HOOP ? rxC : 0, ry: HOOP ? ryC : 0 })) el.outsideHole.setAttribute(a, v); for (const [a, v] of Object.entries({ cx, cy, rx: HOOP ? rx : W * 3, ry: HOOP ? ry : H * 3 })) el.inside.setAttribute(a, v); el.outside.setAttribute('visibility', HOOP ? 'visible' : 'hidden'); gsap.set(layer.drapes, { opacity: HOOP ? 1 : 0 }); gsap.set(el.hoop, { opacity: HOOP ? 1 : 0, svgOrigin: `${cx} ${cy}` }); /* the hoop: a shadow, an outline, the wood, its inner side, the grain and a light along the top left */ if (HOOP) { const ring = (cls, rxx, ryy, w, extra = {}) => make('ellipse', { class: cls, cx, cy, rx: rxx.toFixed(1), ry: ryy.toFixed(1), 'stroke-width': w.toFixed(2), ...extra }, layer.ring); S.ringShadow = ring('anello-ombra', rxC, ryC, rw); gsap.set(S.ringShadow, { x: h * 0.05, y: h * 0.09 }); ring('anello-orlo', rx - rw * 0.15, ry - rw * 0.15, rw * 0.5); ring('anello-rilievo', rx - rw * 0.55, ry - rw * 0.55, rw * 0.14); ring('anello-bordo', rxC, ryC, rw + 3.4); ring('anello', rxC, ryC, rw); ring('anello-dentro', rxC - rw * 0.3, ryC - rw * 0.3, rw * 0.36); ring('anello-venatura', rxC + rw * 0.14, ryC + rw * 0.14, 1.4, { pathLength: 1000, 'stroke-dasharray': '70 24 160 36 40 50 120 30 90 60 50 40 110 30' }); ring('anello-venatura', rxC - rw * 0.06, ryC - rw * 0.06, 1.2, { pathLength: 1000, 'stroke-dasharray': '40 60 120 30 70 45 160 50 30 40 90 35' }); ring('anello-luce', rxC + rw * 0.2, ryC + rw * 0.2, rw * 0.16, { pathLength: 100, 'stroke-dasharray': '0 53 20 100' }); ring('anello-luce', rxC + rw * 0.2, ryC + rw * 0.2, rw * 0.1, { pathLength: 100, 'stroke-dasharray': '0 76 6 100' }); el.screw.setAttribute('transform', `translate(${cx} ${(cy - ryC).toFixed(1)}) scale(${(rw / 30).toFixed(4)})`); } /* loose folds outside the hoop, and the creases inside it that the screw pulls flat */ const fold = (parent, d, wide, dx, dy) => { const gfold = make('g', {}, parent); [1, 0.6, 0.28].forEach((w) => make('path', { class: 'piega-scura', d, 'stroke-width': (wide * w).toFixed(1), transform: `translate(${dx} ${dy})` }, gfold)); [0.5, 0.2].forEach((w) => make('path', { class: 'piega-chiara', d, 'stroke-width': (wide * w).toFixed(1), transform: `translate(${-dx} ${-dy})` }, gfold)); return gfold; }; const R2 = Math.max(W, H); for (let j = 0; j < 10; j++) { const a = (j / 10) * TAU + rand(-0.15, 0.15); const sx0 = cx + Math.cos(a) * rxC * 1.02; const sy0 = cy + Math.sin(a) * ryC * 1.02; const ex = cx + Math.cos(a) * (rxC + R2 * 0.7); const ey = cy + Math.sin(a) * (ryC + R2 * 0.7); const bend = rand(-0.25, 0.25) * R2; const d = `M${fix(sx0)} ${fix(sy0)}Q${fix((sx0 + ex) / 2 - Math.sin(a) * bend)} ${fix((sy0 + ey) / 2 + Math.cos(a) * bend)} ${fix(ex)} ${fix(ey)}`; fold(layer.drapes, d, Math.max(10, h * rand(0.5, 0.9)), h * 0.06, h * 0.08); } const fx0 = HOOP ? rx : W * 0.5; const fy0 = HOOP ? ry : H * 0.5; S.folds = [-0.55, 0.05, 0.6].map((o, j) => { const y1 = cy + fy0 * (o - 0.35); const y2 = cy + fy0 * (o + 0.3); const d = `M${fix(cx - fx0 * 1.05)} ${fix(y1)}C${fix(cx - fx0 * 0.3)} ${fix(y1 - fy0 * 0.25)} ${fix(cx + fx0 * 0.2)} ${fix(y2 + fy0 * 0.3)} ${fix(cx + fx0 * 1.05)} ${fix(y2)}`; return fold(layer.folds, d, Math.max(12, h * (0.7 - j * 0.12)), h * 0.05, h * 0.07); }); gsap.set(S.folds, { transformOrigin: '50% 50%', scaleY: 1, opacity: 1 }); /* the pieces of the logo: a letter each, or the whole picture */ const pieces = []; if (picture) pieces.push({ x: left, w: k * f, pic: true }); else { for (const L of letters) { if (!L.ch.trim()) continue; pieces.push({ x: left + L.x * f, w: L.w * f, ch: L.ch }); } } for (const p of pieces) { p.R = raster(p); p.loops = trace(p.R).map(along).filter((q) => q.per > h * 0.12); } stitchAll(pieces); S.pieces = pieces; /* a picture from another site: the stitches cannot take its colours, so the picture is laid over the satin */ layer.knot.replaceChildren(); S.over = null; if (picture && pieces[0].blind) { S.over = make('image', { href: IMAGE, x: left, y: B - h, width: k * f, height: h, preserveAspectRatio: 'xMidYMid meet', opacity: 0 }, layer.knot); } /* the knot, and the short tail left after the snip */ const KN = S.K; S.knot = make('g', {}, layer.knot); const kr = Math.max(2.4, S.ow * 1.15); make('circle', { class: 'nodo', cx: KN.x, cy: KN.y, r: kr, 'stroke-width': Math.max(1, kr * 0.35) }, S.knot); make('circle', { class: 'nodo-luce', cx: KN.x - kr * 0.35, cy: KN.y - kr * 0.35, r: kr * 0.35 }, S.knot); gsap.set(S.knot, { transformOrigin: '50% 50%', scale: 0 }); /* where the needle goes after the knot (Q), where the scissors cut (M), where it is pinned at the end */ const room = (x, y) => x > os * 0.1 && x < W - os * 0.1 && y > os * 0.1 && y < H - os * 0.15; let aQ = 0.45; for (const a of [0.45, 0.9, -0.2, 1.35, 2.2, -0.9, 2.8]) { if (room(KN.x + Math.cos(a) * os * 1.75, KN.y + Math.sin(a) * os * 1.75)) { aQ = a; break; } } const Q = { x: KN.x + Math.cos(aQ) * os * 1.75, y: KN.y + Math.sin(aQ) * os * 1.75 }; const qe = needleAt({ x: Q.x, y: Q.y, a: aQ, d: 0, lift: 0.8, sx: 1 }); const M = { x: KN.x + (qe.ex - KN.x) * 0.5, y: KN.y + (qe.ey - KN.y) * 0.5 }; let nx = -(qe.ey - KN.y); let ny = qe.ex - KN.x; const nl = Math.hypot(nx, ny) || 1; nx /= nl; ny /= nl; if (ny < 0) { nx = -nx; ny = -ny; } S.tail = make('path', { class: 'coda', 'stroke-width': S.tw.toFixed(2), opacity: 0, d: `M${fix(KN.x)} ${fix(KN.y)}Q${fix(KN.x + (M.x - KN.x) * 0.6 + nx * h * 0.06)} ${fix(KN.y + (M.y - KN.y) * 0.6 + ny * h * 0.06)} ${fix(KN.x + (M.x - KN.x) * 0.85 + nx * h * 0.12)} ${fix(KN.y + (M.y - KN.y) * 0.85 + ny * h * 0.12)}`, }, layer.knot); const aPin = Math.PI - 0.32; const dPin = 0.42; const yb = B + S.desc; const pinY = yb + (cy + ry - yb) * (HOOP ? 0.5 : 0.45); const xr = cx + rx * Math.sqrt(Math.max(0, 1 - Math.pow((pinY - cy) / ry, 2))) - h * 0.12; const showing = ((1 - dPin) * DEEP + 18) * S.ns; const pinX = Math.max(cx - rx * 0.2, xr - showing * Math.cos(0.32)); Object.assign(S, { Q, aQ, M, nx, ny, pin: { x: Math.min(pinX, W - showing - os * 0.1), y: pinY }, aPin, dPin, cutLen: Math.hypot(qe.ex - M.x, qe.ey - M.y) }); S.Pu = { x: Math.min(W - os * 0.3, S.right + os * 0.25), y: Math.max(os * 0.3, cy - ry - os * 0.55) }; /* the light that runs over the satin: a slanted band in a mask */ const band = h * 1.1; for (const [a, v] of Object.entries({ x: S.left - band * 3, y: -H, width: band, height: H * 3 })) el.sheenRect.setAttribute(a, v); el.sheenTurn.setAttribute('transform', `rotate(18 ${cx} ${cy})`); S.band = band; gsap.set(el.work, { svgOrigin: `${cx} ${(B - h / 2).toFixed(1)}` }); for (const [n, w] of [[el.tEdge, S.tw * 1.7], [el.tMain, S.tw], [el.tTwist, S.tw * 0.45]]) n.setAttribute('stroke-width', w.toFixed(2)); el.tTwist.setAttribute('stroke-dasharray', `${(S.tw * 0.9).toFixed(1)} ${(S.tw * 1.5).toFixed(1)}`); fresh = true; } /* every stitch of the logo, in the order the needle makes them, and the needle's route through them */ function stitchAll(pieces) { const { h, sw, ow } = S; const route = []; const outline = []; const fill = []; let n1 = 0; let n2 = 0; const push = (x, y, a, d, lift, jump) => { const last = route[route.length - 1]; let u = 0; if (last) { const dist = Math.hypot(x - last.x, y - last.y); u = last.u + dist * (jump || lift > 0 || last.lift > 0 ? 0.45 : 1) + Math.abs(lift - last.lift) * h * 0.45 + 0.01; } route.push({ x, y, a, d, lift, n1, n2, u }); }; const jump = (to, a) => { const last = route[route.length - 1]; if (!last) return; const mid = { x: (last.x + to[0]) / 2, y: (last.y + to[1]) / 2 - h * 0.12 }; push(mid.x, mid.y, near(Math.atan2(to[1] - last.y, to[0] - last.x), last.a), 0, 1, true); push(to[0], to[1], a, 0.1, 0, true); }; /* the running stitch: every edge, the outer one first, starting from the point nearest the needle */ const totalPer = pieces.reduce((sum, p) => sum + p.loops.reduce((s2, q) => s2 + q.per, 0), 0); const step = Math.max((STITCH * h) / 0.62, 4, totalPer / 900); const dl = Math.max(2, h * 0.05); const ob = bundle([ make('path', { class: 'orlo-ombra', 'stroke-width': (ow * 1.15).toFixed(2), transform: `translate(${(ow * 0.25).toFixed(2)} ${(ow * 0.4).toFixed(2)})` }, layer.outline), make('path', { class: 'orlo', 'stroke-width': ow.toFixed(2) }, layer.outline), ]); let penAt = null; for (const p of pieces) { const loops = p.loops.slice().sort((a, b) => b.area - a.area); for (const q of loops) { /* start the edge where the needle is now */ let s0 = 0; if (penAt) { let best = Infinity; for (let s = 0; s < q.per; s += q.per / 80) { const pt = q.at(s); const dd = Math.hypot(pt[0] - penAt[0], pt[1] - penAt[1]); if (dd < best) { best = dd; s0 = s; } } } const m = Math.max(3, Math.round(q.per / step)); const st = q.per / m; const at = (s) => q.at(s0 + s); const dir = (s) => { const a1 = at(s - dl); const a2 = at(s + dl); return Math.atan2(a2[1] - a1[1], a2[0] - a1[0]); }; const base = n1; const a0 = route.length ? near(dir(0), route[route.length - 1].a) : dir(0); if (route.length) jump(at(0), a0); for (let j = 0; j < m; j++) { const A = at(j * st); const Bp = at(j * st + 0.62 * st); outline.push({ x: Bp[0], y: Bp[1] }); addTo(ob, outline.length - 1, [line(A[0], A[1], Bp[0], Bp[1]), line(A[0], A[1], Bp[0], Bp[1])]); } for (let qn = route.length ? 1 : 0; qn <= m * 4; qn++) { const s = (qn * st) / 4; const pt = at(s); n1 = base + Math.min(m, Math.max(0, Math.floor((s - 0.62 * st) / st + 1e-6) + 1)); const prev = route[route.length - 1]; const a = prev ? near(dir(s), prev.a) : dir(s); push(pt[0], pt[1], a, 0.1 + 0.3 * (0.5 - 0.5 * Math.cos((qn / 4) * TAU)), 0); } n1 = base + m; route[route.length - 1].n1 = n1; penAt = at(q.per); } } /* the needle turns with the edge, but smoothly: an average of the nearby directions */ const sm = route.map((r, i) => { let sum = 0; let cnt = 0; for (let j = Math.max(0, i - 2); j <= Math.min(route.length - 1, i + 2); j++) { sum += route[j].a; cnt++; } return sum / cnt; }); route.forEach((r, i) => { r.a = sm[i]; }); const U1 = route.length ? route[route.length - 1].u : 0; const outEnd = route.length; /* the satin: a slanted direction that changes a little every time */ const ang = ((ANGLE + (round % 2 ? 6 : -6)) * Math.PI) / 180; let area = 0; for (const p of pieces) for (let i = 3; i < p.R.data.length; i += 4) if (p.R.data[i] >= 128) area++; area *= S.g * S.g; const maxL = Math.max(0.34 * h, 3 * S.sp); if (area / (S.sp * Math.min(maxL, h * 0.2)) > 2600) { S.sp = area / (2600 * Math.min(maxL, h * 0.2)); S.sw = S.sp * 1.3; } const sw2 = S.sw; const buckets = new Map(); const bucketFor = (key, colours) => { if (!buckets.has(key)) { const attr = (cls, w, extra) => ({ class: cls, 'stroke-width': w.toFixed(2), ...extra }); const b = bundle([ make('path', attr(colours ? 'ombra-punto' : 'punto-ombra', sw2 * 1.12, colours ? { stroke: colours[0] } : {}), layer.shadow), make('path', attr(colours ? 'punto-colore' : key, sw2, colours ? { stroke: colours[1] } : {}), layer.fill), make('path', attr(colours ? 'punto-colore' : 'punto-luce', sw2 * 0.36, colours ? { stroke: colours[2], opacity: 0.8 } : {}), layer.light), ]); buckets.set(key, b); } return buckets.get(key); }; let sheen = ''; const ox = sw2 * 0.22; const oy = sw2 * 0.3; const jitter = S.sp * 0.12; for (const p of pieces) { const runs = satin(p.R, ang); for (const rn of runs) { const segs = rn.segs; if (!segs.length) continue; const first = segs[0]; const aF = near(ang + Math.PI, route.length ? route[route.length - 1].a : ang + Math.PI); if (route.length) jump(first.a, aF); segs.forEach((sg, j) => { /* long rows are split into shorter stitches, staggered like bricks */ const cuts = [sg.ua]; const len = sg.ub - sg.ua; if (len > maxL) { let c = sg.ua + maxL * (0.45 + 0.3 * (sg.r % 3)); while (c < sg.ub - 0.3 * maxL) { cuts.push(c); c += maxL; } } cuts.push(sg.ub); const gap = cuts.length > 2 ? sw2 * 0.25 : 0; for (let i = 0; i < cuts.length - 1; i++) { const A = sg.pt(cuts[i] + (i ? gap : 0) + rand(-jitter, jitter), sg.v + rand(-jitter, jitter) * 0.5); const Bp = sg.pt(cuts[i + 1] - (i < cuts.length - 2 ? gap : 0) + rand(-jitter, jitter), sg.v + rand(-jitter, jitter) * 0.5); let key; let colours = null; if (p.pic && !p.blind) { const [r, g, b] = p.R.rgb((A[0] + Bp[0]) / 2, (A[1] + Bp[1]) / 2); const q = (v) => Math.min(255, (v >> 4) * 16 + 8); const [qr, qg, qb] = [q(r), q(g), q(b)]; key = `c${qr},${qg},${qb}`; const mix = (t2, to) => [qr, qg, qb].map((v) => Math.round(v + (to - v) * t2)).join(','); colours = [`rgb(${mix(0.55, 0)})`, `rgb(${qr},${qg},${qb})`, `rgb(${mix(0.55, 255)})`]; } else { const pick = Math.random(); key = pick < 0.55 ? 'punto' : pick < 0.8 ? 'punto-chiaro' : 'punto-scuro'; } fill.push({ x: Bp[0], y: Bp[1] }); const lA = [A[0] + (Bp[0] - A[0]) * 0.12 - ox * 0.7, A[1] + (Bp[1] - A[1]) * 0.12 - oy * 0.7]; const lB = [A[0] + (Bp[0] - A[0]) * 0.58 - ox * 0.7, A[1] + (Bp[1] - A[1]) * 0.58 - oy * 0.7]; const light = line(lA[0], lA[1], lB[0], lB[1]); sheen += light; addTo(bucketFor(key, colours), fill.length - 1, [line(A[0] + ox, A[1] + oy, Bp[0] + ox, Bp[1] + oy), line(A[0], A[1], Bp[0], Bp[1]), light]); } n2 = fill.length; /* the needle swings across the column every second row, always pointing the same way */ if (j % 2 === 0 || j === segs.length - 1) { const side = (j >> 1) % 2; const at2 = side ? sg.b : sg.a; push(at2[0], at2[1], aF + (side ? 0.12 : -0.12), side ? 0.32 : 0.1, 0); } }); route[route.length - 1].n2 = n2; } } /* nothing to sew (a name of spaces, an empty picture): the needle crosses the logo all the same */ if (route.length < 2) { route.length = 0; push(S.left, S.B - h / 2, 0, 0.1, 0); push(S.right, S.B - h / 2, 0, 0.1, 0); } for (let i = outEnd; i < route.length; i++) route[i].n1 = n1; for (let i = 1; i < route.length; i++) route[i].a = near(route[i].a, route[i - 1].a); const end = route[route.length - 1]; Object.assign(S, { route, outline, fill, ob, fb: [...buckets.values()], U1: Math.max(U1, 0.001), U2: Math.max(end.u, U1 + 0.002), K: { x: end.x, y: end.y }, }); el.sheen.setAttribute('d', sheen); el.sheen.setAttribute('stroke-width', (sw2 * 0.55).toFixed(2)); } /* the needle on its route: where it is, how many stitches are done, where the thread comes out of the cloth */ function routeAt(p) { const R = S.route; let lo = 0; let hi = R.length - 1; while (lo < hi) { const m = (lo + hi + 1) >> 1; if (R[m].u <= p) lo = m; else hi = m - 1; } const A = R[lo]; const B = R[Math.min(lo + 1, R.length - 1)]; const f = B.u > A.u ? Math.min(1, Math.max(0, (p - A.u) / (B.u - A.u))) : 0; const mix = (k) => A[k] + (B[k] - A[k]) * f; return { x: mix('x'), y: mix('y'), a: mix('a'), d: mix('d'), lift: mix('lift'), n1: A.n1 + Math.floor((B.n1 - A.n1) * f + 1e-6), n2: A.n2 + Math.floor((B.n2 - A.n2) * f + 1e-6), }; } function anchorFor(n1, n2) { if (n2 > 0) return S.fill[n2 - 1]; if (n1 > 0) return S.outline[n1 - 1]; return S.route[0]; } function apply(p) { const r = routeAt(p); N.x = r.x; N.y = r.y; N.a = r.a; N.d = r.d; N.lift = r.lift; showStitches(r.n1, r.n2); const an = anchorFor(r.n1, r.n2); TH.a = 1; TH.ax = an.x; TH.ay = an.y; drawNeedle(); } /* ------------------------------------------------------------------ small effects */ function shake(t, amount, time) { const a = amount; T.to(world, { keyframes: { x: [0, -a, a * 0.8, -a * 0.6, a * 0.35, 0], y: [0, a * 0.5, -a * 0.4, a * 0.3, -a * 0.1, 0] }, duration: time, ease: 'none' }, t); } function puff(t, x, y, r, dx, dy) { const c = make('circle', { class: 'polvere', cx: x, cy: y, r }, layer.fx); gsap.set(c, { scale: 0, opacity: 0, transformOrigin: '50% 50%' }); T.set(c, { opacity: 0.85 }, t); T.to(c, { scale: 1, x: dx, y: dy, duration: 0.5, ease: 'power2.out' }, t); T.to(c, { opacity: 0, scale: 1.3, duration: 0.35, ease: 'power1.in' }, t + 0.25); } /* little curls of fluff and thread that jump off the cloth */ function fibres(t, x, y, n, spread, threadToo = true) { for (let j = 0; j < n; j++) { const a = rand(0, TAU); const len = S.h * rand(0.035, 0.07); const own = threadToo && j % 2; const c = make('path', { class: own ? 'pelo' : 'peluria', d: `M${fix(x)} ${fix(y)}q${fix(len * 0.5)} ${fix(-len * 0.5)} ${fix(len)} 0t${fix(len)} 0`, 'stroke-width': Math.max(1, S.h * 0.012).toFixed(2), }, layer.fx); gsap.set(c, { opacity: 0, transformOrigin: '0% 50%' }); const time = rand(0.45, 0.75); T.set(c, { opacity: 1 }, t); T.to(c, { x: Math.cos(a) * spread * rand(0.5, 1), y: Math.sin(a) * spread * rand(0.5, 1) - spread * 0.25, rotation: rand(-220, 220), duration: time, ease: 'power2.out' }, t); T.to(c, { opacity: 0, duration: 0.25 }, t + time - 0.2); } } function burst(t, x, y, n, from, len, a0, spread) { for (let j = 0; j < n; j++) { const a = a0 + (n > 1 ? (j / (n - 1) - 0.5) * spread : 0); const x1 = x + Math.cos(a) * from; const y1 = y + Math.sin(a) * from; const c = make('line', { class: 'colpo', x1, y1, x2: x1 + Math.cos(a) * len, y2: y1 + Math.sin(a) * len, 'stroke-width': Math.max(1.6, S.h * 0.022) }, layer.fx); gsap.set(c, { opacity: 0 }); T.set(c, { opacity: 0.8 }, t); T.to(c, { x: Math.cos(a) * len * 0.8, y: Math.sin(a) * len * 0.8, opacity: 0, duration: 0.3, ease: 'power2.out' }, t); } } /* moves of the needle: each changes only the values it names, from where the previous move left them */ let cur = null; function go(t, dur, ease, to) { const from = {}; for (const k in to) from[k] = cur[k]; const o = { v: 0 }; const e = gsap.parseEase(ease); T.to(o, { v: 1, duration: dur, ease: 'none', onUpdate: () => { const q = e(o.v); for (const k in to) N[k] = from[k] + (to[k] - from[k]) * q; drawNeedle(); }, }, t); Object.assign(cur, to); } function scissorsTo(t, dur, ease, to) { T.to(SC, { ...to, duration: dur, ease, onUpdate: drawScissors }, t); } /* ------------------------------------------------------------------ the story */ function story(from) { const { W, h, os, route, K: KN, Q, aQ, M, nx, ny, pin, aPin, dPin } = S; T = gsap.timeline({ paused: true }); Object.assign(N, { x: -W, y: -W, a: 0, d: 0, lift: 1, sx: 1, on: 0 }); cur = { ...N }; Object.assign(TH, { on: 0, a: 0, len: os * 0.9, slack: h * 0.3 }); Object.assign(SC, { x: -W, y: -W, a: 0, on: 0 }); drawNeedle(); drawScissors(); showStitches(0, 0); if (S.over) gsap.set(S.over, { opacity: 0 }); /* the hoop drops onto the cloth and its screw pulls the cloth taut */ let t = 0.1; T.addLabel('start', t); if (HOOP) { T.fromTo(el.hoop, { opacity: 0 }, { opacity: 1, duration: 0.18, ease: 'none' }, t); T.fromTo(el.hoop, { scale: 1.4, y: -h * 0.5 }, { scale: 1, y: 0, duration: 0.5, ease: 'power3.in' }, t); T.fromTo(S.ringShadow, { x: h * 0.45, y: h * 0.7, opacity: 0.05 }, { x: h * 0.05, y: h * 0.09, opacity: 0.2, duration: 0.5, ease: 'power3.in' }, t); const land = t + 0.5; T.addLabel('land', land); T.to(el.hoop, { scaleX: 1.035, scaleY: 0.94, duration: 0.07, ease: 'power2.out' }, land); T.to(el.hoop, { scaleX: 1, scaleY: 1, duration: 0.7, ease: 'elastic.out(1, 0.32)' }, land + 0.07); shake(land, h * 0.06, 0.3); T.to(S.folds, { scaleY: 1.25, duration: 0.1, ease: 'power2.out', yoyo: true, repeat: 1 }, land); for (let j = 0; j < 9; j++) { const a = Math.PI * (0.1 + (0.8 * j) / 8) + (j % 2 ? 0 : Math.PI); const x = S.cx + Math.cos(a) * (S.rx + S.rw); const y = S.cy + Math.sin(a) * (S.ry + S.rw); puff(land + rand(0, 0.05), x, y, S.rw * rand(0.5, 0.8), Math.cos(a) * S.rw * 1.6, Math.sin(a) * S.rw * 1.6); } fibres(land, S.cx - S.rx * 0.6, S.cy + S.ry, 4, h * 0.6, false); fibres(land, S.cx + S.rx * 0.6, S.cy + S.ry, 4, h * 0.6, false); /* the thumb screw turns: its ridges and the threads slide, the two wooden blocks close up */ const tight = land + 0.4; T.addLabel('tighten', tight); T.to(el.threads, { x: -36, duration: 0.6, ease: 'power1.inOut' }, tight); T.to(el.knurl, { x: -24, duration: 0.6, ease: 'power1.inOut' }, tight); T.to(el.tabL, { x: 3.5, duration: 0.6, ease: 'power2.in' }, tight); T.to(el.tabR, { x: -3.5, duration: 0.6, ease: 'power2.in' }, tight); T.to(S.folds, { scaleY: 0.02, opacity: 0, duration: 0.45, ease: 'back.in(1.6)', stagger: 0.07 }, tight + 0.15); const taut = tight + 0.62; T.addLabel('taut', taut); T.to(el.hoop, { scale: 1.014, duration: 0.07, ease: 'power2.out', yoyo: true, repeat: 1 }, taut); shake(taut, h * 0.025, 0.22); burst(taut, S.cx, S.cy - S.ry - S.rw * 2.6, 3, S.rw * 0.3, S.rw * 0.9, -Math.PI / 2, 1.4); t = taut + 0.25; } else { T.to(S.folds, { scaleY: 0.02, opacity: 0, duration: 0.55, ease: 'back.in(1.4)', stagger: 0.08 }, t + 0.2); t += 0.95; } T.addLabel('arrive', t); /* the needle runs in with its thread, turns to the first edge, draws back and stabs the cloth */ const k0 = route[0]; const side = round % 2 ? 1 : -1; const a0 = near(side < 0 ? 0.12 : Math.PI - 0.12, k0.a); const hov = { x: k0.x - Math.cos(k0.a) * h * 0.4, y: k0.y - Math.sin(k0.a) * h * 0.4 - h * 0.2 }; go(t, 0.001, 'none', { on: 1, x: side < 0 ? -os * 1.6 : W + os * 1.6, y: k0.y - h * 0.9, a: a0, d: 0, lift: 1, sx: 1 }); T.set(TH, { on: 1, a: 0, len: os * 0.9 }, t); go(t + 0.01, 0.6, 'power3.out', { x: hov.x, y: hov.y }); go(t + 0.01, 0.16, 'power2.out', { sx: 1.3 }); go(t + 0.2, 0.55, 'elastic.out(1, 0.4)', { sx: 1 }); go(t + 0.32, 0.4, 'back.out(2.2)', { a: k0.a }); const stab = t + 0.85; go(stab - 0.13, 0.13, 'power3.in', { x: k0.x, y: k0.y, d: k0.d, lift: 0 }); T.addLabel('stab', stab); T.set(TH, { a: 1, ax: k0.x, ay: k0.y, slack: h * 0.35 }, stab); shake(stab, h * 0.015, 0.15); fibres(stab, k0.x, k0.y, 4, h * 0.3); /* the running stitch round every edge, then the satin, letter after letter */ const trk = { p: 0 }; const sewOut = 1.5; const sewFill = 1.6; T.to(trk, { p: S.U1, duration: sewOut, ease: 'sine.inOut', onUpdate: () => apply(trk.p) }, stab + 0.02); const fillAt = stab + 0.02 + sewOut; T.addLabel('fill', fillAt); T.set(el.tMain, { attr: { class: 'filo' } }, fillAt); T.to(trk, { p: S.U2, duration: sewFill, ease: 'sine.inOut', onUpdate: () => apply(trk.p) }, fillAt); for (let s = stab + 0.25; s < fillAt + sewFill - 0.1; s += 0.3) { const tt = s < fillAt ? (s - stab - 0.02) / sewOut : (s - fillAt) / sewFill; const e = gsap.parseEase('sine.inOut')(Math.min(1, Math.max(0, tt))); const p = s < fillAt ? e * S.U1 : S.U1 + e * (S.U2 - S.U1); const r = routeAt(p); fibres(s, r.x, r.y, 2, h * 0.25); } const end = route[route.length - 1]; Object.assign(cur, { x: end.x, y: end.y, a: end.a, d: end.d, lift: end.lift }); t = fillAt + sewFill; T.addLabel('reveal', t); if (S.over) T.to(S.over, { opacity: 0.92, duration: 0.5 }, t - 0.3); /* the knot: the needle comes out, loops twice round the last stitch and dives in */ t += 0.04; go(t, 0.1, 'power2.out', { d: 0, lift: 0.5 }); const loopA = cur.a - Math.PI / 2; const kr = h * 0.16; const lo = { v: 0 }; T.to(lo, { v: 1, duration: 0.42, ease: 'sine.inOut', onUpdate: () => { const a = loopA + lo.v * 2 * TAU; const r = kr * Math.sin(Math.PI * lo.v); N.x = KN.x + Math.cos(a) * r; N.y = KN.y + Math.sin(a) * r * 0.7; N.a = a + Math.PI / 2; drawNeedle(); }, }, t + 0.1); cur.a = loopA + 2 * TAU + Math.PI / 2; go(t + 0.52, 0.1, 'power3.in', { d: 0.5, lift: 0 }); const knotAt = t + 0.62; T.addLabel('knot', knotAt); T.set(TH, { ax: KN.x, ay: KN.y }, t); T.fromTo(S.knot, { scale: 0 }, { scale: 1, duration: 0.4, ease: 'back.out(3)', immediateRender: false }, knotAt); fibres(knotAt, KN.x, KN.y, 3, h * 0.25); /* it pulls the thread tight, the scissors come in from below and snip it */ go(knotAt + 0.06, 0.1, 'power2.out', { d: 0, lift: 0.4 }); const aQu = near(aQ, cur.a); go(knotAt + 0.16, 0.38, 'power2.inOut', { x: Q.x, y: Q.y, a: aQu, lift: 0.8 }); T.to(TH, { slack: h * 0.02, duration: 0.3 }, knotAt + 0.16); const aS = Math.atan2(-ny, -nx); const reach = 52 * S.sk; const pv = { x: M.x + nx * reach, y: M.y + ny * reach }; const fromS = { x: pv.x + nx * os * 2.2 + Math.cos(aS + 1.2) * os * 0.4, y: pv.y + ny * os * 2.2 }; T.set(SC, { on: 1, x: fromS.x, y: fromS.y, a: aS + 0.35, onComplete: drawScissors }, knotAt + 0.25); T.set(el.halfA, { rotation: -10 }, knotAt + 0.25); T.set(el.halfB, { rotation: 10 }, knotAt + 0.25); scissorsTo(knotAt + 0.26, 0.38, 'back.out(1.4)', { x: pv.x, y: pv.y, a: aS }); T.to(el.halfA, { rotation: -26, duration: 0.3, ease: 'power2.out' }, knotAt + 0.3); T.to(el.halfB, { rotation: 26, duration: 0.3, ease: 'power2.out' }, knotAt + 0.3); const snip = knotAt + 0.72; T.to([el.halfA, el.halfB], { rotation: 0, duration: 0.07, ease: 'power4.in' }, snip - 0.07); T.addLabel('snip', snip); T.set(TH, { a: 0, len: S.cutLen }, snip); T.set(S.tail, { opacity: 1 }, snip); T.fromTo(S.tail, { rotation: -14, transformOrigin: '0% 50%' }, { rotation: 0, duration: 0.5, ease: 'elastic.out(1, 0.35)', immediateRender: false }, snip); shake(snip, h * 0.02, 0.15); burst(snip, M.x, M.y, 3, h * 0.12, h * 0.16, Math.atan2(-ny, -nx) + Math.PI, 1.6); fibres(snip, M.x, M.y, 4, h * 0.3); T.to(el.halfA, { rotation: -14, duration: 0.15, ease: 'power2.out' }, snip + 0.08); T.to(el.halfB, { rotation: 14, duration: 0.15, ease: 'power2.out' }, snip + 0.08); scissorsTo(snip + 0.15, 0.35, 'power2.in', { x: pv.x + nx * os * 2.6, y: pv.y + ny * os * 2.6, a: aS - 0.3 }); T.set(SC, { on: 0, onComplete: drawScissors }, snip + 0.52); /* the embroidery puffs up a little */ T.to(el.work, { scale: 1.04, duration: 0.18, ease: 'power2.out' }, snip + 0.12); T.to(el.work, { scale: 1.018, duration: 0.8, ease: 'elastic.out(1, 0.35)' }, snip + 0.3); T.to(layer.shadow, { x: S.sw * 0.35, y: S.sw * 0.45, duration: 0.3, ease: 'power2.out' }, snip + 0.12); /* the needle flies to the side and is pinned in the cloth, where it sways */ const aP = near(aPin, cur.a); go(snip + 0.22, 0.42, 'power2.inOut', { x: pin.x - Math.cos(aP) * h * 0.3, y: pin.y - Math.sin(aP) * h * 0.3 - h * 0.15, a: aP + 0.35, lift: 1 }); const pinAt = snip + 0.76; go(pinAt - 0.12, 0.12, 'power3.in', { x: pin.x, y: pin.y, d: dPin, lift: 0, a: aP + 0.28 }); T.addLabel('pin', pinAt); go(pinAt, 0.9, 'elastic.out(1.1, 0.25)', { a: aP }); shake(pinAt, h * 0.012, 0.12); fibres(pinAt, pin.x, pin.y, 3, h * 0.2, false); t = pinAt + 0.45; T.addLabel('rest', t); /* the rest: the light runs over the thread, the loose cloth moves, the needle sways */ const rest = t; const out = rest + REST; if (!LOOP) { T.call(() => calm(), null, rest); } else { for (let s = rest + 0.1; s < out - 0.9; s += 2.3) sweep(T, s); let s = pinAt + 0.9; let side2 = 1; while (s + 0.8 <= out) { go(s, 0.8, 'sine.inOut', { a: aP + side2 * 0.06 }); side2 = -side2; s += 0.8; } if (s < out) go(s, out - s, 'sine.inOut', { a: aP }); T.to(layer.drapes, { x: h * 0.08, y: h * 0.05, duration: REST / 2, ease: 'sine.inOut', yoyo: true, repeat: 1 }, rest); T.to(el.work, { scale: 1.028, duration: REST / 2, ease: 'sine.inOut', yoyo: true, repeat: 1 }, rest); /* it is unpicked: the needle comes out, takes the end by the knot and pulls, the stitches come away in reverse */ let u = out; T.addLabel('unpick', u); T.to(el.sheen, { opacity: 0, duration: 0.2 }, u); go(u, 0.18, 'power2.out', { d: 0, lift: 1 }); const aK = near(Math.atan2(KN.y - pin.y, KN.x - pin.x), cur.a); go(u + 0.18, 0.35, 'power2.inOut', { x: KN.x, y: KN.y, lift: 0.3, a: aK }); T.to(S.knot, { scale: 0, duration: 0.15, ease: 'back.in(2)' }, u + 0.5); T.set(S.tail, { opacity: 0 }, u + 0.5); T.set(TH, { a: 1, ax: KN.x, ay: KN.y, slack: h * 0.05 }, u + 0.52); T.to(el.work, { scale: 1, duration: 0.4, ease: 'power2.inOut' }, u + 0.3); T.to(layer.shadow, { x: 0, y: 0, duration: 0.4 }, u + 0.3); if (S.over) T.to(S.over, { opacity: 0, duration: 0.3 }, u + 0.3); const Pu = S.Pu; const ripAt = u + 0.55; const aPu = near(Math.atan2(Pu.y - KN.y, Pu.x - KN.x), cur.a); go(ripAt, 0.45, 'power2.out', { x: Pu.x, y: Pu.y, a: aPu, lift: 0.9 }); const rip = { n1: S.outline.length, n2: S.fill.length }; const ripDraw = () => { const n1 = Math.round(rip.n1); const n2 = Math.round(rip.n2); showStitches(n1, n2); const an = anchorFor(n1, n2); TH.ax = an.x; TH.ay = an.y; }; T.to(rip, { n2: 0, duration: 1.0, ease: 'power1.in', onUpdate: ripDraw }, ripAt + 0.2); T.to(rip, { n1: 0, duration: 0.7, ease: 'power1.in', onUpdate: ripDraw }, ripAt + 1.2); const ca = Math.cos(aPu); const sa = Math.sin(aPu); for (let j = 0; j < 3; j++) { const tj = ripAt + 0.5 + j * 0.42; go(tj, 0.12, 'power2.out', { x: Pu.x + ca * h * 0.18, y: Pu.y + sa * h * 0.18 }); go(tj + 0.12, 0.25, 'power2.inOut', { x: Pu.x, y: Pu.y }); } for (let j = 0; j < 6; j++) { const tj = ripAt + 0.3 + j * 0.27; const tt = tj < ripAt + 1.2 ? (tj - ripAt - 0.2) / 1.0 : (tj - ripAt - 1.2) / 0.7; const e = gsap.parseEase('power1.in')(Math.min(1, Math.max(0, tt))); const an = tj < ripAt + 1.2 ? anchorFor(S.outline.length, Math.round(S.fill.length * (1 - e))) : anchorFor(Math.round(S.outline.length * (1 - e)), 0); fibres(tj, an.x, an.y, 2, h * 0.3); } const leave = ripAt + 1.95; T.set(TH, { a: 0, len: os * 0.9 }, leave); go(leave, 0.4, 'power3.in', { x: Pu.x + ca * W, y: Pu.y + sa * W }); T.call(() => start('arrive'), null, leave + 0.5); } T.timeScale(SPEED); if (from) T.seek(from, false); T.play(); } /* the light running over the satin, and a glint sliding along the needle */ function sweep(tl, s) { tl.fromTo(el.sheenRect, { attr: { x: S.left - S.band * 2 } }, { attr: { x: S.right + S.band }, duration: 1.2, ease: 'power1.inOut', immediateRender: false }, s); tl.fromTo(el.glint, { x: 50 }, { x: -120, duration: 0.8, ease: 'power1.inOut', immediateRender: false }, s + 0.6); } /* without LOOP: the logo stays embroidered, the light keeps running over it and the needle keeps swaying */ function calm() { if (idle) idle.kill(); idle = gsap.timeline({ repeat: -1 }); sweep(idle, 0.2); const a = N.a; idle.to(N, { a: a + 0.06, duration: 0.8, ease: 'sine.inOut', onUpdate: drawNeedle }, 0); idle.to(N, { a: a - 0.04, duration: 1.6, ease: 'sine.inOut', onUpdate: drawNeedle }, 0.8); idle.to(N, { a, duration: 0.8, ease: 'sine.inOut', onUpdate: drawNeedle }, 2.4); idle.to(layer.drapes, { x: S.h * 0.08, y: S.h * 0.05, duration: 1.6, ease: 'sine.inOut', yoyo: true, repeat: 1 }, 0); idle.timeScale(SPEED); } /* less motion: nothing moves, the moments of the story follow one another in fades */ function quiet() { const { pin, aPin, dPin } = S; T = gsap.timeline({ paused: true, repeat: LOOP ? -1 : 0, repeatDelay: 0.6 }); showStitches(S.outline.length, S.fill.length); gsap.set(S.knot, { scale: 1 }); gsap.set(S.tail, { opacity: 1 }); gsap.set(S.folds, { opacity: 0 }); gsap.set(el.sheen, { opacity: 0 }); if (S.over) gsap.set(S.over, { opacity: 0.92 }); Object.assign(N, { x: pin.x, y: pin.y, a: aPin, d: dPin, lift: 0, sx: 1, on: 1 }); drawNeedle(); Object.assign(TH, { on: 1, a: 0, len: S.cutLen }); Object.assign(SC, { on: 0 }); drawScissors(); const work = [layer.outline, layer.shadow, layer.fill, layer.light, layer.knot, el.tools]; T.fromTo(layer.outline, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: 'none' }, 0.3); T.fromTo([layer.shadow, layer.fill, layer.light], { opacity: 0 }, { opacity: 1, duration: 0.6, ease: 'none' }, 1.1); T.fromTo([layer.knot, el.tools], { opacity: 0 }, { opacity: 1, duration: 0.5, ease: 'none' }, 1.9); if (LOOP) T.to(work, { opacity: 0, duration: 0.5, ease: 'none' }, 2.6 + REST); T.play(); } /* ------------------------------------------------------------------ start, replay, resize */ function start(from) { if (T) T.kill(); if (idle) idle.kill(); idle = null; if (from === 'arrive') round++; build(); if (REDUCED) quiet(); else story(from); } function loadPicture() { return new Promise((done) => { if (!IMAGE.trim()) return done(null); const im = new Image(); im.crossOrigin = 'anonymous'; im.onload = () => done(im); im.onerror = () => { /* a server that refuses to share its picture: try again without asking, the stitches then cannot read it */ const again = new Image(); again.onload = () => done(again); again.onerror = () => done(null); again.src = IMAGE.trim(); }; im.src = IMAGE.trim(); }); } const face = getComputedStyle(stage); Promise.all([ document.fonts ? document.fonts.load(`${face.fontWeight} 100px ${face.fontFamily}`).catch(() => null) : null, loadPicture(), ]).then(([, im]) => { picture = im; start(); }); document.querySelector('.scena').addEventListener('click', () => start()); let wait = null; addEventListener('resize', () => { const W = stage.clientWidth; const H = stage.clientHeight; /* on a phone the address bar changes the height a little while scrolling: only a real change starts again */ if (W === size.w && Math.abs(H - size.h) < 120) return; if (wait) wait.kill(); wait = gsap.delayedCall(0.25, () => start(T && T.labels && T.time() > T.labels.arrive ? 'arrive' : 0)); });