{
"id": "opus-showcase-05-photon-journey",
"css": "",
"fps": 30,
"html": "CHAPTER ONE
Born in the sun’s core
CHAPTER TWO
Tens of thousands of years of bumping
CHAPTER THREE
Eight minutes and twenty seconds
CHAPTER FOUR
Caught by a leaf
CHAPTER FIVE
Every sweet thing began as sunlight
",
"name": "The Journey of a Photon · Watercolour storybook",
"width": 1920,
"format": "jsoncut-html",
"height": 1080,
"values": {},
"version": 1,
"duration": 32,
"safeArea": {
"top": 0,
"left": 0,
"right": 0,
"bottom": 0
},
"variables": [],
"customBlocks": [
{
"inputs": {
"seed": 5
},
"adapter": "canvas-2d",
"layerId": "custom-1",
"javascript": "// The journey of a photon, painted as a watercolour storybook. Every frame derives from jsoncut.time.\nconst ctx = context, W = width, H = height;\nconst clamp = v => Math.max(0, Math.min(1, v));\nconst span = (t, a, b) => clamp((t - a) / (b - a));\nconst inOut = v => { v = clamp(v); return v < .5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) / 2; };\nconst outBack = v => { v = clamp(v); const c = 1.7; return 1 + (c + 1) * Math.pow(v - 1, 3) + c * Math.pow(v - 1, 2); };\nconst mix = (a, b, v) => a + (b - a) * v;\nconst hash = n => { const q = Math.sin(n * 127.1 + 311.7) * 43758.5453; return q - Math.floor(q); };\n\nfunction canvas(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; return c; }\n// one watercolour wash: several translucent irregular layers with a darker pigment edge\nfunction wash(g, x, y, r, rgb, alpha, seed, squash = 1) {\n for (let l = 0; l < 5; l++) {\n g.beginPath();\n for (let k = 0; k <= 22; k++) {\n const a = k / 22 * 6.2832, n = 1 + .22 * (hash(seed * 7 + l * 31 + k) - .5) + .1 * Math.sin(a * 3 + seed + l);\n const px = x + Math.cos(a) * r * n * (1 + l * .03), py = y + Math.sin(a) * r * n * squash;\n k ? g.lineTo(px, py) : g.moveTo(px, py);\n }\n g.closePath();\n g.fillStyle = `rgba(${rgb},${alpha * (.55 + .2 * l)})`; g.fill();\n if (l === 0) { g.strokeStyle = `rgba(${rgb},${alpha * 1.6})`; g.lineWidth = 2.5; g.stroke(); }\n }\n}\nfunction paperGrain(g, w, h, dark) {\n for (let i = 0; i < 26000; i++) { g.fillStyle = hash(i * 1.3) > .5 ? (dark ? 'rgba(255,255,255,.035)' : 'rgba(255,255,255,.25)') : 'rgba(90,60,30,.06)';\n g.fillRect(hash(i * 2.9) * w, hash(i * 4.1) * h, 1.6, 1.6); }\n}\n\n// ---------- pre-painted backdrops (deterministic, built once)\nconst core = canvas(W, H), cg = core.getContext('2d');\ncg.fillStyle = '#F8EEDC'; cg.fillRect(0, 0, W, H);\nfor (let i = 0; i < 60; i++) wash(cg, hash(i) * W, hash(i + 50) * H, 90 + hash(i + 9) * 260, ['232,120,60', '240,170,70', '220,80,60', '250,200,110'][i % 4], .07, i);\nwash(cg, 1790, 540, 520, '255,230,150', .16, 77, 1.4);\npaperGrain(cg, W, H, false);\n\nconst space = canvas(W, H), sg = space.getContext('2d');\nsg.fillStyle = '#1B2140'; sg.fillRect(0, 0, W, H);\nfor (let i = 0; i < 26; i++) wash(sg, hash(i + 3) * W, hash(i + 70) * H, 160 + hash(i + 12) * 300, ['48,60,120', '70,50,110', '30,40,90'][i % 3], .12, i + 200);\nfor (let i = 0; i < 220; i++) { sg.fillStyle = `rgba(255,246,220,${.3 + .6 * hash(i + 400)})`; sg.beginPath(); sg.arc(hash(i + 300) * W, hash(i + 500) * H, .8 + hash(i + 600) * 2, 0, 6.28); sg.fill(); }\nwash(sg, W + 60, 540, 560, '240,140,60', .22, 901, 1.1); wash(sg, W + 60, 540, 420, '255,200,90', .26, 902, 1.1);\npaperGrain(sg, W, H, true);\n\nconst meadow = canvas(W, H), mg = meadow.getContext('2d');\nmg.fillStyle = '#F4F1DF'; mg.fillRect(0, 0, W, H);\nfor (let i = 0; i < 30; i++) wash(mg, hash(i + 31) * W, hash(i + 61) * H * .7, 160 + hash(i + 91) * 260, ['170,210,230', '200,225,170', '250,225,150'][i % 3], .08, i + 700);\nfor (let i = 0; i < 18; i++) wash(mg, i * 120, 1000, 260, '120,170,90', .1, i + 760, .5);\npaperGrain(mg, W, H, false);\n\nconst cell = canvas(W, H), clg = cell.getContext('2d');\nclg.fillStyle = '#EEF3DC'; clg.fillRect(0, 0, W, H);\nfor (let i = 0; i < 26; i++) wash(clg, hash(i + 11) * W, hash(i + 41) * H, 150 + hash(i + 71) * 240, ['190,220,150', '160,200,130', '220,235,170'][i % 3], .08, i + 1100);\nwash(clg, 960, 560, 640, '110,170,90', .12, 1200, .55); wash(clg, 960, 560, 560, '90,150,80', .1, 1201, .5);\nfor (let s = 0; s < 5; s++) for (let d = 0; d < 6; d++) wash(clg, 520 + s * 220, 470 + d * 34 + (s % 2) * 20, 70, '60,120,60', .12, 1300 + s * 9 + d, .22);\npaperGrain(clg, W, H, false);\n\n// ---------- the photon character\nfunction photon(x, y, s, t, mood = 0) {\n ctx.save(); ctx.translate(x, y); ctx.scale(s, s);\n const g = ctx.createRadialGradient(0, 0, 4, 0, 0, 120);\n g.addColorStop(0, 'rgba(255,236,140,.9)'); g.addColorStop(.35, 'rgba(255,214,90,.35)'); g.addColorStop(1, 'rgba(255,200,80,0)');\n ctx.fillStyle = g; ctx.fillRect(-120, -120, 240, 240);\n ctx.fillStyle = '#FFE680'; ctx.beginPath(); ctx.arc(0, 0, 28, 0, 6.2832); ctx.fill();\n ctx.strokeStyle = 'rgba(214,150,40,.8)'; ctx.lineWidth = 3; ctx.stroke();\n const blink = ((t % 2.6) > 2.45) ? .15 : 1;\n ctx.fillStyle = '#3B2A20';\n for (const ex of [-9, 9]) { ctx.beginPath(); ctx.ellipse(ex, -4, 3.6, 5.2 * blink, 0, 0, 6.2832); ctx.fill(); }\n ctx.strokeStyle = '#3B2A20'; ctx.lineWidth = 2.6; ctx.lineCap = 'round';\n ctx.beginPath(); ctx.arc(0, 6, 7 + mood * 2, .25 * Math.PI, .75 * Math.PI); ctx.stroke();\n ctx.fillStyle = 'rgba(240,120,90,.45)'; for (const cx of [-17, 17]) { ctx.beginPath(); ctx.arc(cx, 6, 5, 0, 6.2832); ctx.fill(); }\n ctx.restore();\n}\n\n// random walk inside the core, biased towards the bright surface on the right\nconst WALK = [[700, 560]];\nfor (let i = 1; i < 42; i++) { const p = WALK[i - 1]; WALK.push([Math.min(1720, Math.max(300, p[0] + (hash(i * 3.1) - .38) * 260)), Math.min(930, Math.max(360, p[1] + (hash(i * 5.7) - .5) * 380))]); }\nWALK[41] = [1760, 600];\nfunction walkPos(t) {\n if (t < 7) return [700 + Math.sin(t * 1.1) * 30, 560 + Math.sin(t * 1.7) * 22];\n const u = clamp((t - 7.4) / 6.2) * 41, i = Math.min(40, Math.floor(u)), f = u - i;\n const a = WALK[i], b = WALK[i + 1], e = 1 - Math.pow(1 - f, 3);\n return [mix(a[0], b[0], e), mix(a[1], b[1], e)];\n}\nfunction photonPos(t) {\n if (t < 14) return walkPos(t);\n if (t < 21) { const u = inOut(span(t, 14.1, 20.6)); return [mix(1760, 470, u), mix(600, 560, u) + Math.sin(u * 9) * 26 * (1 - u)]; }\n if (t < 27) { const u = inOut(span(t, 21, 23.6)); return [mix(470, 870, u), mix(560, 460, u) - Math.sin(u * Math.PI) * 220 + Math.sin((t - 21) * 3) * 6 * u]; }\n const u = inOut(span(t, 27, 27.6)); return [mix(870, 960, u), mix(460, 560, u)];\n}\n\nfunction scene(i, t) {\n if (i === 0) {\n const z = 1 + .12 * Math.sin(t * .2);\n ctx.save(); ctx.translate(W / 2, H / 2); ctx.scale(z, z); ctx.drawImage(core, -W / 2, -H / 2); ctx.restore();\n // jostling atoms\n for (let k = 0; k < 46; k++) {\n const x = hash(k + 3) * W + Math.sin(t * (1.2 + hash(k)) + k) * 40, y = hash(k + 33) * H + Math.cos(t * (1 + hash(k + 1)) + k) * 40;\n ctx.fillStyle = `rgba(214,96,60,${.18 + .2 * hash(k + 8)})`; ctx.beginPath(); ctx.arc(x, y, 10 + hash(k + 5) * 16, 0, 6.28); ctx.fill();\n }\n // the walked path\n if (t > 7.4) {\n const u = clamp((t - 7.4) / 6.2) * 41, n = Math.floor(u);\n ctx.strokeStyle = 'rgba(200,120,30,.75)'; ctx.lineWidth = 4; ctx.setLineDash([2, 12]); ctx.lineCap = 'round';\n ctx.beginPath(); ctx.moveTo(WALK[0][0], WALK[0][1]); for (let k = 1; k <= n; k++) ctx.lineTo(WALK[k][0], WALK[k][1]);\n const p = walkPos(t); ctx.lineTo(p[0], p[1]); ctx.stroke(); ctx.setLineDash([]);\n for (let k = 1; k <= n; k++) { ctx.fillStyle = 'rgba(230,110,60,.55)'; ctx.beginPath(); ctx.arc(WALK[k][0], WALK[k][1], 7, 0, 6.28); ctx.fill(); }\n }\n } else if (i === 1) {\n ctx.drawImage(space, 0, 0);\n const er = mix(60, 230, inOut(span(t, 14.5, 20.8)));\n ctx.save(); ctx.globalAlpha = .95;\n const eg = ctx.createRadialGradient(240 - er * .3, 560 - er * .3, er * .1, 240, 560, er);\n eg.addColorStop(0, '#9AD3E8'); eg.addColorStop(.6, '#4E8FC0'); eg.addColorStop(1, '#2C5E92'); ctx.fillStyle = eg;\n ctx.beginPath(); ctx.arc(240, 560, er, 0, 6.28); ctx.fill();\n ctx.fillStyle = 'rgba(120,170,90,.8)';\n for (let c = 0; c < 4; c++) { ctx.beginPath(); ctx.ellipse(240 + Math.cos(c * 1.7 + t * .2) * er * .45, 560 + Math.sin(c * 2.3) * er * .4, er * .22, er * .12, c, 0, 6.28); ctx.fill(); }\n ctx.restore();\n // light streak behind the photon\n const p = photonPos(t), q = photonPos(t - .35);\n const sg2 = ctx.createLinearGradient(q[0], q[1], p[0], p[1]);\n sg2.addColorStop(0, 'rgba(255,220,120,0)'); sg2.addColorStop(1, 'rgba(255,230,140,.75)');\n ctx.strokeStyle = sg2; ctx.lineWidth = 46; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(q[0] + 220, q[1]); ctx.lineTo(p[0], p[1]); ctx.stroke();\n } else if (i === 2) {\n ctx.drawImage(meadow, 0, 0);\n const sway = Math.sin(t * .9) * .03, glow = span(t, 23.4, 24.4);\n ctx.save(); ctx.translate(980, 760); ctx.rotate(-.35 + sway);\n ctx.fillStyle = 'rgba(96,150,70,.9)'; ctx.fillRect(-8, 0, 16, 300);\n const leaf = () => { ctx.beginPath(); ctx.moveTo(0, 0); ctx.bezierCurveTo(-330, -120, -300, -520, 0, -640); ctx.bezierCurveTo(300, -520, 330, -120, 0, 0); };\n for (let l = 0; l < 4; l++) { leaf(); ctx.fillStyle = `rgba(${l % 2 ? '110,175,80' : '90,155,70'},${.35 + l * .12})`; ctx.save(); ctx.scale(1 - l * .05, 1 - l * .03); ctx.fill(); ctx.restore(); }\n leaf(); ctx.strokeStyle = 'rgba(50,100,40,.55)'; ctx.lineWidth = 4; ctx.stroke();\n ctx.strokeStyle = 'rgba(60,110,50,.6)'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -610); ctx.stroke();\n ctx.lineWidth = 3; for (let v = 1; v < 8; v++) { const y = -v * 72; for (const sd of [-1, 1]) { ctx.beginPath(); ctx.moveTo(0, y); ctx.quadraticCurveTo(sd * 90, y - 30, sd * (200 - Math.abs(v - 4) * 30), y - 90); ctx.stroke(); } }\n if (glow > 0) { const gg = ctx.createRadialGradient(0, -300, 10, 0, -300, 520); gg.addColorStop(0, `rgba(255,240,150,${.55 * glow})`); gg.addColorStop(1, 'rgba(255,240,150,0)'); ctx.fillStyle = gg; ctx.fillRect(-520, -820, 1040, 1040); }\n ctx.restore();\n } else {\n ctx.drawImage(cell, 0, 0);\n const born = t - 27.6;\n for (let s = 0; s < 9; s++) {\n const a = born - s * .32; if (a < 0) continue;\n const x = 960 + Math.sin(s * 2.4) * 380 + Math.sin(a * 1.2 + s) * 30, y = 560 - a * 90 - s * 4, r = 38 + (s % 3) * 12;\n ctx.save(); ctx.translate(x, y); ctx.rotate(a * .6 + s); ctx.globalAlpha = clamp(a * 2) * clamp((y + 40) / 200);\n ctx.beginPath(); for (let k = 0; k < 6; k++) { const an = k / 6 * 6.2832; k ? ctx.lineTo(Math.cos(an) * r, Math.sin(an) * r) : ctx.moveTo(r, 0); } ctx.closePath();\n ctx.fillStyle = 'rgba(255,252,240,.85)'; ctx.fill(); ctx.strokeStyle = 'rgba(200,160,90,.8)'; ctx.lineWidth = 3; ctx.stroke();\n ctx.restore();\n }\n }\n}\n\nconst CUTS = [0, 14, 21, 27];\njsoncut.onFrame(() => {\n const t = jsoncut.time;\n let cur = 0; for (let i = 0; i < CUTS.length; i++) if (t >= CUTS[i]) cur = i;\n scene(cur, t);\n // watercolour bleed into the next chapter, centred on the photon\n const nx = CUTS[cur + 1];\n if (nx !== undefined && t > nx - .9) {\n const p = photonPos(t), r = outBack(span(t, nx - .9, nx)) * 2300;\n ctx.save(); ctx.beginPath();\n for (let k = 0; k <= 48; k++) { const a = k / 48 * 6.2832, rr = r * (1 + .08 * Math.sin(a * 5 + t * 3) + .05 * Math.sin(a * 11)); k ? ctx.lineTo(p[0] + Math.cos(a) * rr, p[1] + Math.sin(a) * rr) : ctx.moveTo(p[0] + rr, p[1]); }\n ctx.closePath(); ctx.clip(); scene(cur + 1, t); ctx.restore();\n }\n const p = photonPos(t);\n const pop = outBack(span(t, .6, 1.4));\n if (t < 27.6) photon(p[0], p[1], pop * (cur === 2 ? 2.3 : 2.1), t, cur === 2 ? 1 : 0);\n else { const m = span(t, 27.6, 28.6); ctx.save(); ctx.globalAlpha = 1 - m * .5; photon(p[0], p[1] - m * 40, 2.3 + m * .4, t, 1); ctx.restore(); }\n // soft vignette like a painted page\n const v = ctx.createRadialGradient(W / 2, H / 2, H * .45, W / 2, H / 2, W * .72);\n v.addColorStop(0, 'rgba(0,0,0,0)'); v.addColorStop(1, cur === 1 ? 'rgba(5,8,20,.5)' : 'rgba(120,80,40,.22)'); ctx.fillStyle = v; ctx.fillRect(0, 0, W, H);\n});\n"
}
],
"aspectVariants": [],
"compositionKind": "video",
"canvasBackground": "#000000",
"editabilityTarget": "hybrid"
}