2a:null 2b:["$","title",null,{"children":"Replayable Drawing | Zihou Ng | Observable"}] 30:T4b6,render = { ctx.fillStyle = "#f2f2f2"; ctx.fillRect(0, 0, canvas.width, canvas.height); const cur = time * progress; for (const d of points) { ctx.beginPath(); const offset = cur - d.start; const t = clamp01(offset / d.duration); const t1 = d3.easeQuadOut(clamp01((offset - d.dir[0]) / d.dir[1])); const c = [d.c[0]+t1*d.dir[2][0],d.c[1]+t1*d.dir[2][1]]; const t2 = d3.easeBackOut(clamp01((offset - d.radius[0]) / d.radius[1])); const t0 = d3.easeCubicOut(t) const tc = 1 - t0; ctx.arc(c[0],c[1], t2*d.radius[2], 0, 2*Math.PI); ctx.fillStyle = `hsla(${d.hue},${tc*75+10}%,40%,${tc*0.9+0.03})`; ctx.fill(); ctx.lineWidth = 0.5; ctx.strokeStyle = `hsla(0,0%,50%,${t0*0.5})`; ctx.stroke(); } if (recording || waiting) { ctx.beginPath(); ctx.fillStyle = 'rgb(202,38,38)'; ctx.arc(15, 16, 5, 0, 2*Math.PI); ctx.fill(); textStyle(); ctx.fillText('REC', 25, 20); } else { textStyle(); ctx.fillText(`${playback.paused ? "PAUSED" : "PLAYING"}`, 10, 20); } textStyle(); ctx.fillText(`TIME: ${cur.toFixed(0)}`,10, 38); ctx.fillText(`SPEED: ${playback.speed.toFixed(2)}x`,10, 56); }31:T5678,rawData = [{"start":0.0050000089686363935,"duration":381.3780954841206,"dir":[0,1000,[0.5690858014063969,46.505318708402235]],"radius":[0,381.3780954841206,14.84695472124021],"hue":185.0595787315962,"c":[438,203]},{"start":32.4350000009872,"duration":345.0051758338344,"dir":[0,1000,[49.29610403775584,2.2482020372451204]],"radius":[0,345.0051758338344,30.14228951593386],"hue":94.28354600470183,"c":[437,194]},{"start":67.69999998505227,"duration":746.4892991581395,"dir":[0,1000,[17.929967705592464,26.822446375176398]],"radius":[0,746.4892991581395,16.572899861419472],"hue":84.7797090470153,"c":[429,178]},{"start":101.15499998209998,"duration":254.71945218694736,"dir":[0,1000,[-28.149295798568204,40.42921703007621]],"radius":[0,254.71945218694736,29.68257202251155],"hue":50.86579458421305,"c":[422,171]},{"start":133.9799999841489,"duration":372.9466264921446,"dir":[0,1000,[19.76539622287966,40.08786766697847]],"radius":[0,372.9466264921446,29.401573679847786],"hue":56.52709563859983,"c":[413,164]},{"start":168.13000000547618,"duration":1005.5880127927046,"dir":[0,1000,[-14.233212223609113,-44.09393215336477]],"radius":[0,1005.5880127927046,27.675739366190125],"hue":181.0132285957552,"c":[399,156]},{"start":218.99999998277053,"duration":675.0083353150953,"dir":[0,1000,[-46.410489110562295,14.077482589301736]],"radius":[0,675.0083353150953,27.777735211228133],"hue":45.755385511299366,"c":[376,146]},{"start":252.1100000012666,"duration":785.4638663092244,"dir":[0,1000,[12.165991012200086,-31.551282903177245]],"radius":[0,785.4638663092244,24.601325430333546],"hue":61.2920744081354,"c":[356,140]},{"start":284.55499999108724,"duration":562.858662083036,"dir":[0,1000,[15.59404913905356,26.00482418646013]],"radius":[0,562.858662083036,32.686378227894856],"hue":9.090684832844731,"c":[338,135]},{"start":318.15499998629093,"duration":839.1505159348603,"dir":[0,1000,[28.397945598875168,39.92742450479018]],"radius":[0,839.1505159348603,19.075642571860108],"hue":49.258766999970845,"c":[320,132]},{"start":351.8800000019837,"duration":836.8145181457718,"dir":[0,1000,[-34.81576542964848,-15.747360083439725]],"radius":[0,836.8145181457718,24.167490611197508],"hue":25.49222376889515,"c":[300,130]},{"start":385.34499998786487,"duration":1343.7947373998104,"dir":[0,1000,[22.900803050874107,-36.35318923656692]],"radius":[0,1343.7947373998104,15.619776354710753],"hue":115.74680040151821,"c":[286,130]},{"start":418.34999999264255,"duration":602.5952824240043,"dir":[0,1000,[8.277984724473777,-31.781588042330277]],"radius":[0,602.5952824240043,20.193344554590844],"hue":20.976158118584614,"c":[271,131]},{"start":452.1400000085123,"duration":407.99304558728335,"dir":[0,1000,[-8.706290792546636,38.50079300042569]],"radius":[0,407.99304558728335,21.22144497314028],"hue":67.43258783067216,"c":[257,134]},{"start":502.634999982547,"duration":787.1437122776226,"dir":[0,1000,[25.636191210258,34.071134347740774]],"radius":[0,787.1437122776226,25.69066169089011],"hue":165.47871886629906,"c":[240,139]},{"start":551.500000001397,"duration":1121.3409144263653,"dir":[0,1000,[25.634669129383045,25.618023179814955]],"radius":[0,1121.3409144263653,25.484746083202065],"hue":197.77112105723447,"c":[226,150]},{"start":584.3900000036228,"duration":995.4842074066978,"dir":[0,1000,[-15.55909163757222,43.91920295087787]],"radius":[0,995.4842074066978,24.991759895275024],"hue":192.04590723595675,"c":[217,160]},{"start":618.4650000068359,"duration":642.5541865145508,"dir":[0,1000,[19.658647971415494,30.917166757363866]],"radius":[0,642.5541865145508,11.211104853714218],"hue":199.79963327409283,"c":[205,178]},{"start":652.6500000036322,"duration":938.5607161205515,"dir":[0,1000,[-14.023589155486565,-33.65766891568444]],"radius":[0,938.5607161205515,15.797758570097011],"hue":55.15225017500548,"c":[199,191]},{"start":685.1599999936298,"duration":221.28610629075354,"dir":[0,1000,[2.905255969212474,-49.75533568120333]],"radius":[0,221.28610629075354,26.668404438774026],"hue":73.29075037687576,"c":[197,201]},{"start":718.8449999957811,"duration":1022.3555209829642,"dir":[0,1000,[47.29864794833987,9.904091634763565]],"radius":[0,1022.3555209829642,24.73637326356959],"hue":13.735215845460804,"c":[196,210]},{"start":752.585000009276,"duration":867.3977743359551,"dir":[0,1000,[-28.55676092384424,-27.016082885297738]],"radius":[0,867.3977743359551,36.788066250120735],"hue":195.8005300248746,"c":[198,222]},{"start":785.3100000065751,"duration":1162.9969038889187,"dir":[0,1000,[30.303280197043346,-5.3636828053873495]],"radius":[0,1162.9969038889187,35.21742873856022],"hue":10.08337053527166,"c":[201,230]},{"start":817.9299999901559,"duration":1476.3866142275183,"dir":[0,1000,[30.353426419026025,1.1198944048613615]],"radius":[0,1476.3866142275183,38.26276166918845],"hue":202.1115270728006,"c":[207,243]},{"start":851.5049999987241,"duration":823.0019258514893,"dir":[0,1000,[35.868735624373976,10.960350419590018]],"radius":[0,823.0019258514893,37.25979632615794],"hue":140.2145860444839,"c":[214,255]},{"start":885.3550000058021,"duration":482.2111962597482,"dir":[0,1000,[-6.127020445580039,46.658111421246986]],"radius":[0,482.2111962597482,23.526043617985806],"hue":175.0107100091172,"c":[222,263]},{"start":919.3499999819323,"duration":1125.1544811488131,"dir":[0,1000,[-2.0254622843512267,-38.91016981821027]],"radius":[0,1125.1544811488131,38.2561036703704],"hue":98.32900173014815,"c":[233,271]},{"start":952.4800000071991,"duration":1462.543015687705,"dir":[0,1000,[-25.200583427671287,-20.342330082625978]],"radius":[0,1462.543015687705,19.577198614371532],"hue":135.33771674878037,"c":[242,276]},{"start":985.1299999863841,"duration":1443.4494505212215,"dir":[0,1000,[-30.031872508996354,-7.8548934420875005]],"radius":[0,1443.4494505212215,34.42792299138198],"hue":156.95036420268048,"c":[256,282]},{"start":1019.0700000093784,"duration":1366.5246491021048,"dir":[0,1000,[-31.85440460745638,12.573437391596354]],"radius":[0,1366.5246491021048,37.58738760306568],"hue":139.03168981075996,"c":[270,287]},{"start":1052.0499999984168,"duration":781.5259273819025,"dir":[0,1000,[37.32563931203683,25.911117263805664]],"radius":[0,781.5259273819025,31.079696772036833],"hue":6.460973404993751,"c":[284,291]},{"start":1084.5099999860395,"duration":458.7826830530456,"dir":[0,1000,[-37.62379844617097,28.675002684012355]],"radius":[0,458.7826830530456,11.706867381856632],"hue":169.41418579398157,"c":[294,291]},{"start":1118.3399999863468,"duration":348.82973718820307,"dir":[0,1000,[-20.345473990058235,-29.019719424127018]],"radius":[0,348.82973718820307,35.744540297096734],"hue":32.43130113827657,"c":[306,291]},{"start":1151.9249999837484,"duration":718.6465361263657,"dir":[0,1000,[18.689645315759353,26.389752789011656]],"radius":[0,718.6465361263657,17.048097949062957],"hue":17.12848468125358,"c":[318,288]},{"start":1184.9099999817554,"duration":1440.64210890858,"dir":[0,1000,[26.81369434088401,18.186602855729973]],"radius":[0,1440.64210890858,12.827746107343742],"hue":194.38021448478372,"c":[328,284]},{"start":1222.3050000029616,"duration":423.70898737888496,"dir":[0,1000,[-7.022749621255972,-36.910168400601115]],"radius":[0,423.70898737888496,14.96560197647015],"hue":54.13409224456792,"c":[341,278]},{"start":1267.9899999930058,"duration":1065.3479199520675,"dir":[0,1000,[31.2216839167145,-1.5586937786927006]],"radius":[0,1065.3479199520675,14.682778559553038],"hue":25.648413096025408,"c":[351,271]},{"start":1301.5200000081677,"duration":371.6946636988862,"dir":[0,1000,[-36.72386699495531,-2.1872928002069045]],"radius":[0,371.6946636988862,12.955478919178349],"hue":194.7976235669432,"c":[363,261]},{"start":1334.9900000030175,"duration":480.99099287622397,"dir":[0,1000,[-31.15772194448587,2.3836038869252305]],"radius":[0,480.99099287622397,30.36405278647989],"hue":116.7484124231934,"c":[376,249]},{"start":1368.7799999897834,"duration":450.66486542644816,"dir":[0,1000,[9.087235556577824,44.347486346113435]],"radius":[0,450.66486542644816,10.706876330964064],"hue":147.0673378651519,"c":[389,235]},{"start":1418.630000000121,"duration":447.4136209879382,"dir":[0,1000,[-6.792947177060245,-42.92902545048074]],"radius":[0,447.4136209879382,11.28545447087222],"hue":96.71170512680848,"c":[412,210]},{"start":1451.8000000098255,"duration":858.9969031982315,"dir":[0,1000,[6.710161650450478,-45.89992684906648]],"radius":[0,858.9969031982315,21.265926790107024],"hue":88.10418239334413,"c":[425,196]},{"start":1484.5949999871664,"duration":414.28486942602956,"dir":[0,1000,[-45.427883513843284,-8.269262619913912]],"radius":[0,414.28486942602956,26.497065191091774],"hue":132.4999172237671,"c":[441,179]},{"start":1518.1900000025053,"duration":391.1207133676872,"dir":[0,1000,[47.593270928395,1.5838031051016594]],"radius":[0,391.1207133676872,13.283774808714773],"hue":171.16215789732487,"c":[460,164]},{"start":1551.8600000068545,"duration":465.8893065952856,"dir":[0,1000,[-38.92199961858565,13.791812026624939]],"radius":[0,465.8893065952856,33.37812714969439],"hue":152.29115909448828,"c":[480,150]},{"start":1586.3550000067335,"duration":853.8305986334813,"dir":[0,1000,[18.10730793051625,-41.80138746036851]],"radius":[0,853.8305986334813,37.28538631584376],"hue":109.97941962991115,"c":[504,138]},{"start":1635.0000000093132,"duration":573.6302613953535,"dir":[0,1000,[-27.067850391033613,-23.976404973447313]],"radius":[0,573.6302613953535,25.363862444085015],"hue":139.29239178678554,"c":[547,120]},{"start":1668.4749999840278,"duration":650.952553407802,"dir":[0,1000,[19.692072965250915,38.557613355646566]],"radius":[0,650.952553407802,15.845115357898482],"hue":24.51203108601518,"c":[580,108]},{"start":1701.230000006035,"duration":655.553972450233,"dir":[0,1000,[39.17827680790793,-13.733634591053546]],"radius":[0,655.553972450233,34.900719076627254],"hue":30.04197736256102,"c":[611,98]},{"start":1735.244999988936,"duration":1184.3194305793859,"dir":[0,1000,[30.468288337968325,26.192978139659342]],"radius":[0,1184.3194305793859,27.48440877862652],"hue":56.46643741518537,"c":[644,95]},{"start":1768.164999986766,"duration":417.14423600781396,"dir":[0,1000,[-40.99340060375558,-1.2228040256091965]],"radius":[0,417.14423600781396,18.545962346165332],"hue":151.49997500050068,"c":[663,96]},{"start":1801.1549999937415,"duration":439.61997444391216,"dir":[0,1000,[29.67605025026122,17.612342879277747]],"radius":[0,439.61997444391216,21.208227105710726],"hue":108.90904856479342,"c":[682,101]},{"start":1835.1299999922048,"duration":1334.8425413240827,"dir":[0,1000,[-20.67234306873312,23.841667641350316]],"radius":[0,1334.8425413240827,28.647263598645182],"hue":156.07334513697091,"c":[695,108]},{"start":1869.5200000074692,"duration":1096.116201539322,"dir":[0,1000,[30.130039171621746,-7.385327859586298]],"radius":[0,1096.116201539322,17.265717160785556],"hue":98.1552238887404,"c":[705,118]},{"start":1903.0599999823608,"duration":475.7353841774726,"dir":[0,1000,[36.32890401075914,6.92483659387057]],"radius":[0,475.7353841774726,32.81452516630297],"hue":15.521989166030627,"c":[712,133]},{"start":1935.4100000055041,"duration":252.61625142874942,"dir":[0,1000,[-28.902180096056046,-34.53612588834294]],"radius":[0,252.61625142874942,22.967808431893772],"hue":30.43756778778301,"c":[715,152]},{"start":1985.1250000065193,"duration":951.0932205515774,"dir":[0,1000,[-41.282398961613616,-6.561503176423743]],"radius":[0,951.0932205515774,11.977721473684383],"hue":206.21515419199417,"c":[718,187]},{"start":2018.7049999949522,"duration":594.9792914794725,"dir":[0,1000,[-46.6398241492198,15.067223166294614]],"radius":[0,594.9792914794725,26.503453433615835],"hue":68.37145409225461,"c":[718,205]},{"start":2052.8749999939464,"duration":1493.1764445681306,"dir":[0,1000,[-45.19777144139657,-15.274892293627866]],"radius":[0,1493.1764445681306,27.447240283228926],"hue":150.87107883051988,"c":[716,216]},{"start":2085.655000002589,"duration":949.4353052228215,"dir":[0,1000,[14.032932310902673,37.62654804591591]],"radius":[0,949.4353052228215,28.547765648073163],"hue":186.3120939515726,"c":[714,226]},{"start":2119.1950000065845,"duration":1335.3503736753235,"dir":[0,1000,[39.36115832788689,-25.60544534183175]],"radius":[0,1335.3503736753235,27.295011162544203],"hue":62.680081810029925,"c":[712,233]},{"start":2152.4050000007264,"duration":826.3840599148131,"dir":[0,1000,[-46.69993412757946,3.7408391868236106]],"radius":[0,826.3840599148131,19.632288121535908],"hue":62.527243545023126,"c":[706,241]},{"start":2185.074999986682,"duration":654.3859199054492,"dir":[0,1000,[-6.4328177503989,-40.85280596213378]],"radius":[0,654.3859199054492,16.54582067115964],"hue":36.822376670984944,"c":[699,248]},{"start":2217.9250000044703,"duration":687.676122851833,"dir":[0,1000,[30.2888451980387,10.100411285091537]],"radius":[0,687.676122851833,27.866389347884915],"hue":83.53809093146006,"c":[682,261]},{"start":2251.634999993257,"duration":1178.7551653832018,"dir":[0,1000,[-24.10460270628113,21.776510996277853]],"radius":[0,1178.7551653832018,31.701387534135158],"hue":140.61079634541127,"c":[666,269]},{"start":2284.560000000056,"duration":1057.8561005445456,"dir":[0,1000,[-31.04144711760806,-6.622447737782263]],"radius":[0,1057.8561005445456,19.590595276273078],"hue":199.12209017570066,"c":[652,276]},{"start":2318.6949999944773,"duration":1399.5220426347532,"dir":[0,1000,[-44.68755809236682,-2.3355498324157793]],"radius":[0,1399.5220426347532,35.58634243082452],"hue":138.89396196238943,"c":[639,279]},{"start":2352.194999984931,"duration":1289.4327212261778,"dir":[0,1000,[-16.57236903659856,41.24137858858626]],"radius":[0,1289.4327212261778,35.68342866818225],"hue":183.54100997747597,"c":[623,282]},{"start":2385.279999987688,"duration":1245.1032903790947,"dir":[0,1000,[36.72364718306505,-19.11867868443212]],"radius":[0,1245.1032903790947,16.319632350014267],"hue":145.0189253204801,"c":[609,284]},{"start":2418.5599999909755,"duration":1060.0316674537498,"dir":[0,1000,[-29.853019587170454,39.19741750854062]],"radius":[0,1060.0316674537498,25.444052888461847],"hue":125.89245720818347,"c":[597,283]},{"start":2451.100000005681,"duration":347.49498834949304,"dir":[0,1000,[-5.916457518093392,-33.67958480048367]],"radius":[0,347.49498834949304,29.401144359827565],"hue":179.4553579710906,"c":[580,279]},{"start":2485.389999987092,"duration":860.8771785332212,"dir":[0,1000,[-32.07903779062911,-12.55054056200544]],"radius":[0,860.8771785332212,14.657826056657584],"hue":88.15531674255169,"c":[564,274]},{"start":2519.2499999830034,"duration":294.89953276262884,"dir":[0,1000,[-43.39532058368889,2.9402208357882023]],"radius":[0,294.89953276262884,31.440339505484175],"hue":72.95085373702246,"c":[554,271]},{"start":2568.3349999890197,"duration":1254.973515373112,"dir":[0,1000,[-40.07046078745073,1.880666935781671]],"radius":[0,1254.973515373112,24.636938025167396],"hue":17.20377939575598,"c":[543,265]},{"start":2601.670000003651,"duration":720.387407917225,"dir":[0,1000,[-41.824942113001875,22.69658951216607]],"radius":[0,720.387407917225,24.470946591073222],"hue":194.09393997202096,"c":[537,262]},{"start":2635.6549999909475,"duration":986.9821508553009,"dir":[0,1000,[44.6857048559745,0.9516842856143752]],"radius":[0,986.9821508553009,15.291624915117364],"hue":151.89187322631943,"c":[532,260]},{"start":2668.2849999924656,"duration":486.8856520263293,"dir":[0,1000,[3.6171604447859798,47.112147625490884]],"radius":[0,486.8856520263293,29.894660551827556],"hue":41.605306722942785,"c":[526,256]},{"start":2700.875000009546,"duration":639.453666910818,"dir":[0,1000,[-13.200651709031506,-34.54231352233999]],"radius":[0,639.453666910818,21.468297974496245],"hue":148.69419650085777,"c":[519,251]},{"start":2735.114999988582,"duration":789.7486586890501,"dir":[0,1000,[30.468063967021127,34.596453378892654]],"radius":[0,789.7486586890501,11.908441737095671],"hue":99.92195456767176,"c":[513,244]},{"start":2767.950000008568,"duration":1497.049268057984,"dir":[0,1000,[23.067966783366852,-21.77146565995223]],"radius":[0,1497.049268057984,15.717682054657462],"hue":170.80984980703738,"c":[509,239]},{"start":2819.759999983944,"duration":341.16731594366456,"dir":[0,1000,[-1.8057101471068582,-49.48021744292824]],"radius":[0,341.16731594366456,17.02442820245974],"hue":84.30237118049547,"c":[501,231]},{"start":2853.2649999833666,"duration":350.0357900590188,"dir":[0,1000,[30.351453063806435,-3.833872165823438]],"radius":[0,350.0357900590188,30.022798809110785],"hue":57.424226165844054,"c":[495,224]},{"start":2901.9550000084564,"duration":695.4763433428235,"dir":[0,1000,[-21.573410979773456,-39.20954726431965]],"radius":[0,695.4763433428235,27.991755811857516],"hue":68.05327989517585,"c":[483,211]},{"start":2935.3849999897648,"duration":1001.0835695570678,"dir":[0,1000,[47.42533313513814,-3.1263108569981775]],"radius":[0,1001.0835695570678,21.903845564464284],"hue":97.8922091746086,"c":[476,201]},{"start":2967.9550000000745,"duration":1310.6581828584904,"dir":[0,1000,[-27.720624481194648,28.784415690102975]],"radius":[0,1310.6581828584904,33.3621510475968],"hue":2.4966292474296603,"c":[470,194]},{"start":3001.6949999844655,"duration":1395.3563737528286,"dir":[0,1000,[13.247455838829891,-39.3771179491927]],"radius":[0,1395.3563737528286,11.829483495128466],"hue":58.71327284404088,"c":[467,191]},{"start":3034.090000001015,"duration":499.0892033048459,"dir":[0,1000,[31.567124732219952,1.1147083154981297]],"radius":[0,499.0892033048459,37.24791762050609],"hue":111.26708641732475,"c":[465,188]},{"start":3068.295000004582,"duration":462.2131192423794,"dir":[0,1000,[22.52095038104349,34.971556169607105]],"radius":[0,462.2131192423794,16.543250834131157],"hue":99.88465895915202,"c":[464,187]},{"start":3100.2499999885913,"duration":296.48815068144313,"dir":[0,1000,[-29.037149067194918,-26.87741242042045]],"radius":[0,296.48815068144313,21.204172608170786],"hue":151.7473136003979,"c":[464,187]},{"start":3133.559999987483,"duration":998.183288691951,"dir":[0,1000,[-19.974609703631696,-30.282619455680045]],"radius":[0,998.183288691951,25.70137795440126],"hue":60.35289027016001,"c":[464,187]},{"start":3166.9399999955203,"duration":1170.7697970078705,"dir":[0,1000,[-35.54445712441205,-16.707935099191463]],"radius":[0,1170.7697970078705,14.186054834620077],"hue":70.56099444361404,"c":[464,187]},{"start":3199.8249999887776,"duration":414.473662969844,"dir":[0,1000,[14.130612366280804,39.64253066826569]],"radius":[0,414.473662969844,24.116840895014118],"hue":201.44697775170647,"c":[464,187]},{"start":3234.3999999866355,"duration":343.6770248177985,"dir":[0,1000,[-23.671024700928985,18.860253442120207]],"radius":[0,343.6770248177985,28.675874369484802],"hue":25.726052258662023,"c":[464,187]},{"start":3267.549999989569,"duration":1407.9207727771347,"dir":[0,1000,[-26.20071732145968,19.582963200314605]],"radius":[0,1407.9207727771347,10.73698611649574],"hue":178.5305211344438,"c":[464,187]},{"start":3300.4849999852013,"duration":911.4269526347622,"dir":[0,1000,[30.185562328219213,23.57379425065183]],"radius":[0,911.4269526347622,15.786859696365392],"hue":181.60532952813142,"c":[464,187]},{"start":3334.065000002738,"duration":346.45898615787195,"dir":[0,1000,[-5.099911247252421,46.78910824470035]],"radius":[0,346.45898615787195,21.94466704433056],"hue":70.99325313532785,"c":[464,187]},{"start":3367.0449999917764,"duration":626.7248183785275,"dir":[0,1000,[23.117409641203956,22.26132525767071]],"radius":[0,626.7248183785275,21.88073889217619],"hue":34.78480820459616,"c":[464,187]},{"start":3400.129999994533,"duration":396.22787671338347,"dir":[0,1000,[1.3983111441779268,-42.8551996335157]],"radius":[0,396.22787671338347,27.050140942240567],"hue":123.47952769541179,"c":[464,187]},{"start":3434.4599999894854,"duration":623.3485853461701,"dir":[0,1000,[-29.370514252406313,-13.46418908280644]],"radius":[0,623.3485853461701,16.766729508662912],"hue":9.514032499925422,"c":[464,187]},{"start":3466.889999981504,"duration":500.2120669888359,"dir":[0,1000,[32.790964152134244,18.340590930581623]],"radius":[0,500.2120669888359,13.799965366524226],"hue":23.006560315894387,"c":[464,187]},{"start":3500.6700000085402,"duration":217.72868877210846,"dir":[0,1000,[-34.371986556605634,-15.173212429188577]],"radius":[0,217.72868877210846,36.38526940579129],"hue":205.5294491203631,"c":[464,187]},{"start":3533.1549999827985,"duration":708.4606704352486,"dir":[0,1000,[14.067242845087021,47.02595469079913]],"radius":[0,708.4606704352486,13.816049857205105],"hue":25.549319664398016,"c":[464,187]},{"start":3566.484999988461,"duration":996.4259302200973,"dir":[0,1000,[-31.402913915597924,-32.98821868944762]],"radius":[0,996.4259302200973,20.5070647363209],"hue":149.6177141442162,"c":[464,187]},{"start":3600.4099999845494,"duration":960.067441638435,"dir":[0,1000,[21.804197227459497,-41.66741399065194]],"radius":[0,960.067441638435,20.015369790842243],"hue":86.14840606239113,"c":[464,187]},{"start":3633.3149999845773,"duration":492.86917803246797,"dir":[0,1000,[38.092302547765286,11.049914686180397]],"radius":[0,492.86917803246797,38.824847422149944],"hue":89.27920172375615,"c":[464,187]},{"start":3666.9049999909475,"duration":800.717784847358,"dir":[0,1000,[35.77994618262664,-28.520780301529424]],"radius":[0,800.717784847358,38.29804489743047],"hue":2.156605476641593,"c":[464,187]},{"start":3700.474999990547,"duration":297.2196987327112,"dir":[0,1000,[-18.349669707580638,-28.00440334650881]],"radius":[0,297.2196987327112,32.83861735186207],"hue":192.10508149743572,"c":[464,187]},{"start":3734.934999985853,"duration":902.4739534500616,"dir":[0,1000,[-1.5082947878204753,30.850504240071125]],"radius":[0,902.4739534500616,27.533049125678378],"hue":70.5616145953308,"c":[464,187]},{"start":3767.345000000205,"duration":986.6066997634208,"dir":[0,1000,[-10.19752646026828,-43.09055454567995]],"radius":[0,986.6066997634208,34.96736705258066],"hue":204.43709577399034,"c":[464,187]},{"start":3800.539999996545,"duration":1440.6352876697351,"dir":[0,1000,[-25.420880919604713,-31.889616956534432]],"radius":[0,1440.6352876697351,30.17454449126984],"hue":103.69784264938784,"c":[464,187]}]32:T728,controls = state => { const form = html`` const toggle = d3.select(form.elements['toggle']); const t = d3.select(form.elements['t']); const tv = d3.select(form).select('.t-value'); const speed = d3.select(form.elements['speed']); const sv = d3.select(form).select('.speed-value'); form.addEventListener("submit", event => event.preventDefault()); const toggleText = paused => paused ? 'play' : 'pause'; let playing = false; const play = time => { if (state.paused) { playing = false; } else { playing = true; state.x = time; updateView(state.y, form); requestAnimationFrame(play); } } const uiUpdate = ({ value }) => { toggle.text(toggleText(value.paused)); speed.property('value', value.speed); t.property('value', value.t); if (!playing) play(); tv.text(`${(state.y*100).toFixed(0)}%`); sv.text(`${value.speed.toFixed(2)}x`); updateView(value.t, form); }; state.addEventListener("input", uiUpdate); t.on('input', function() { state.y = this.valueAsNumber; state.paused = true; }); speed.on('input', function() { state.speed = this.valueAsNumber }); toggle.on('click', () => state.paused = !state.paused ); uiUpdate({ value: state.value }); return Generators.disposable(form, () => state.removeEventListener("input", uiUpdate)); }33:T708,class Playback { constructor(duration, speed = 1, paused = false) { Object.defineProperties(this, { _paused: { value: paused, writable: true }, _duration: { value: duration, writable: true}, _speed: { value: speed, writable: true }, _x: { value: 0, writable: true }, _list: { value: [], writable: true }, }); this.duration = duration; this.y = 0; this.paused = paused; this.speed = 1; } fract(v) { return v - Math.floor(v); } get value() { return { paused: this.paused, speed: this._speed, t: this.y, } } get paused() { return this._paused; } set x(time) { this._x = (time || performance.now()) - this.start; this.y = this.fract((this._x + this.b) / this.a); this.emit(); } set paused(v) { this._paused = v; if (v) { this._x = 0; this.b = this.y * this.a; } else { this.start = performance.now(); } this.emit(); } set duration(v) { this._duration = v; this.speed = this._speed; } set speed(v) { this._speed = Math.abs(v) < eps ? (v >= 0 ? eps : -eps) : v; this.a = this._duration / this._speed; this.b = this.y * this.a - this._x; this.emit(); } emit() { this.dispatchEvent({ type: "input", value: this.value }); } // EventTarget Interface from https://observablehq.com/@mbostock/synchronized-views addEventListener(type, listener) { if (type != "input" || this._list.includes(listener)) return; this._list = [listener].concat(this._list); } removeEventListener(type, listener) { if (type != "input") return; this._list = this._list.filter(l => l !== listener); } dispatchEvent(event) { const p = Promise.resolve(event); this._list.forEach(l => p.then(l)); } }34:[] 2e:{"id":"919ab2c32c6146b5","slug":"replayable-drawing","title":"Replayable Drawing","thumbnail":"8880f4e60c02c3b7ed242d319e9ec0ac54eddabc710b69e7086cbf1d900f1de0","access_level":"public","create_time":"$D2019-05-24T09:11:03.595Z","update_time":"$D2020-09-26T01:24:41.722Z","view_time":null,"first_public_time":"$D2019-05-26T02:47:19.090Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":967,"publish_version":967,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Replayable Drawing","cells":[{"id":0,"value":"md`# Replayable Drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"md`Experimenting [Synchronized Views](https://observablehq.com/@mbostock/synchronized-views). Draw to record, then use the UI to replay.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"canvas = ctx.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"viewof progress = controls(viewof playback)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"md`## Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"points = {\n const t = time * progress;\n return data.filter(d => d.start < t && d.start + d.duration > t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"makeCircle = {\n const randDir = d3.randomUniform(0,Math.PI * 2);\n const randRadius = d3.randomUniform(10, 40);\n const randDuration = d3.randomUniform(200, waitTime);\n const randDist = d3.randomUniform(30, 50);\n const rand = d3.randomUniform();\n const randHue = d3.randomUniform(0,210);\n return start => {\n const duration = randDuration();\n const theta = randDir();\n const dist = randDist();\n const dir = [0, 1000, [dist * Math.cos(theta), dist * Math.sin(theta)]];\n const radius = [0, duration, randRadius()];\n return {\n start, duration,\n dir, radius,\n hue: randHue(),\n c: mutable mouse,\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"data = {\n let data = this || defaultData;\n if (!recording) return yield data;\n const start = performance.now();\n data = [];\n while (true) {\n data.push(makeCircle(performance.now() - start));\n yield await Promises.delay(30, data);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":874,"value":"md`### State Handling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"time = {\n const start = performance.now();\n if (!recording) {\n while (waiting) {\n yield (this || 0) + performance.now() - start;\n }\n return yield this || defaultTime;\n } \n while (true) {\n yield performance.now() - start;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"mutable recording = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"waitTime = 1500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"mutable waiting = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":675,"value":"mutable mouse = [0,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"drag = {\n const elm = d3.select(canvas);\n const dragStart = () => {\n mutable recording = true;\n \n d3.event.on('drag', () => {\n mutable mouse = d3.mouse(canvas);\n }).on('end', async () => {\n mutable recording = false;\n mutable waiting = true;\n await Promises.delay(waitTime);\n mutable waiting = false;\n })\n };\n \n elm.call(\n d3.drag().container(function() { return this; })\n .on('start', dragStart)\n );\n return Generators.disposable(elm, () => elm.on('drag', null));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"{\n const paused = recording || waiting;\n viewof playback.y = paused ? 1 : 0;\n viewof playback.duration = time;\n viewof playback.paused = paused;\n return 'playback control';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"md`### Preset Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"defaultData = {\n const scale = d3.scaleLinear().domain([0,975]).range([0,width]);\n return rawData.map(d => ({ ...d, c: [scale(d.c[0]), d.c[1]]}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":835,"value":"defaultTime = 5227","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":741,"value":"md`## Playback Control`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"viewof playback = new Playback(5000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"textStyle = () => {\n ctx.fillStyle = '#333333';\n ctx.font = \"12px monospace\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"eps = 1e-3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"clamp01 = x => x < 0 ? 0 : x > 1 ? 1 : x;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"bounce = {\n const f = x => 3 * x * x - 2 * x * x * x;\n return x => f((1-x) * 1.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"updateView = (value, view) => {\n view.value = value;\n view.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"line = d3.line().curve(d3.curveLinear).context(ctx)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"ctx = DOM.context2d(size[0], size[1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"size = [width, 400]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"