<link>https://changshenghsun.com/</link></image><item><title>GridStage</h1> <article> <h1>GridStage</h1> <p>Sat, 20 Jun 2026 00:00:00 +0000</p> <p><strong>2026 — in active development</strong></p> <h2 id="why-i-built-this">Why I built this</h2> <p>As a dancer, formations were always the part nobody wanted to handle. How do you place everyone so the stage actually looks right? Will two people run into each other halfway through a transition? Those questions bothered me every time we put a piece together. I went looking for an open-source tool and there was none — and I was not about to pay a subscription for the commercial ones. So I built <strong>GridStage</strong>.</p> <h2 id="what-it-is">What it is</h2> <p>A top-down 2D stage where you place performers, add formations along a timeline synced to the music, and preview the walk-in transitions in 2D or 3D. It exports walk-chart PDFs (one page per dancer), videos, and GIFs. Several people can edit the same piece at once — live cursors, presence, and undo that only reverts your own changes — over a CRDT, a data structure where concurrent edits merge without a central referee. The part I care most about is the vision pipeline: pause a rehearsal video on a formation, click the four stage corners once, and the app detects the dancers, maps their foot positions onto the stage floor, and drops them into the editor as a normal editable formation. All of it runs in the browser.</p> <h2 id="where-it-stands">Where it stands</h2> <p>v0.8.6 · 130 commits · ~16k lines of strict-mode TypeScript in a pnpm monorepo · 24 unit-test files plus a Playwright end-to-end suite. Three ways to run it, none requiring an account: a Windows/macOS desktop app, an installable PWA that works offline on a phone, and a Docker self-host stack.</p> <p>Measured, not claimed:</p> <ul> <li><strong>60 performers × 4 formations</strong> in a permanent end-to-end stress test — dragging stays accurate and playback holds ~57 fps (CI floor 20).</li> <li><strong>Video → formation capture</strong> runs entirely client-side (YOLOX-nano through onnxruntime-web, WebGPU with a wasm fallback): 6 of 7 dancers recovered from a real six-dancer rehearsal photo, ~1.8 s per frame on CPU alone. Zero server cost, and no one’s rehearsal footage leaves their laptop.</li> </ul> <p>Against <strong>ArrangeUs</strong>, the category leader, and the other commercial formation apps I audited before starting, these are the things they do not do at all (checked July 2026; their feature lists do move):</p> <table> <thead> <tr> <th>Capability</th> <th>GridStage</th> <th>ArrangeUs & other commercial apps</th> </tr> </thead> <tbody> <tr> <td>Real-time multi-user editing</td> <td>CRDT (Yjs) — live cursors, presence, per-user undo</td> <td>one editor at a time, files passed around</td> </tr> <tr> <td>Formations captured from a rehearsal video</td> <td>on-device detection + homography</td> <td>nothing on the market does this</td> </tr> <tr> <td>Rehearsal-vs-plan review</td> <td>per-dancer drift, C-position centering, left–right asymmetry</td> <td>—</td> </tr> <tr> <td>Transition collision warnings</td> <td>Hungarian matching + sweep-line crossing detection</td> <td>—</td> </tr> <tr> <td>3D preview</td> <td>camera presets + follow-a-performer</td> <td>limited</td> </tr> <tr> <td>Video / GIF export with music</td> <td>yes</td> <td>limited</td> </tr> <tr> <td>Price and licence</td> <td>free, MIT, self-hostable</td> <td>subscription, closed source</td> </tr> </tbody> </table> <p>The place I am clearly behind is distribution, not capability: ArrangeUs has 457k+ users and years of tutorials, GridStage has an install page.</p> <h2 id="whats-next">What’s next</h2> <ul> <li><strong>Building a user community.</strong> The capability gap is closed; the distribution one is not. Demo videos and an in-app guide are already in progress, and the next step is getting the editor in front of real dance teams and cheer squads and running on their feedback — the work that decides whether GridStage stays a portfolio piece or becomes a tool people actually choreograph with.</li> <li><strong>Accounts and cloud sync.</strong> Today a piece lives on one machine and travels as a <code>.gridstage</code> file. This is the largest remaining gap against commercial tools, and the one architectural decision I still owe the project — self-host or a hosted backend.</li> <li><strong>Full rehearsal-vs-plan deviation report.</strong> The first cut compares one paused frame against the plan. Scanning a whole rehearsal into a per-formation error timeline is the version that closes the plan → rehearse → correct loop, and it is the hardest part for anyone to copy.</li> <li><strong>Stage lighting and cue sheets.</strong> Colored lights on the 2D stage and a 3D wash, cues on the timeline, exported as a printable cue sheet — the other half of what a stage manager actually needs.</li> <li><strong>Plugins and a community template library</strong>, so formation libraries can grow without me writing every one of them.</li> </ul> </article> <article> <h1>MakeNTU</h1> <p>Fri, 08 May 2026 00:00:00 +0000</p> <p><strong>May 8–10, 2026</strong></p> <h2 id="the-brief">The brief</h2> <p>AUO makes display panels, and the sponsor prompt came down to a single question: if the windshield itself becomes the display, what is actually worth putting on it? The easy answer is a bigger speedometer. We treated it as an interface problem instead — the glass should show what the driver’s current state calls for, and stay out of the way otherwise.</p> <h2 id="what-we-built">What we built</h2> <p>A first-person driving simulator that runs entirely in the browser, built on real map data: the Xinyi district road network pulled live from OpenStreetMap Overpass, routes from OSRM, and procedurally generated buildings filling the blocks in between. Four scenarios ship — city, highway, coastal drive, and a parked rest stop.</p> <p>The windshield is composed in four layers, so the result reads as glass rather than as a game overlay:</p> <table> <thead> <tr> <th>Layer</th> <th>What is in it</th> </tr> </thead> <tbody> <tr> <td>4 · Glass</td> <td>Vignette, film grain, top tint, A-pillars and mirror silhouettes</td> </tr> <tr> <td>3 · HUD</td> <td>Frosted DOM/SVG panels — speed, compass, nav card, ETA, climate, now playing, minimap</td> </tr> <tr> <td>2 · AR</td> <td>POI cards projected into screen space onto building facades, fading when occluded</td> </tr> <tr> <td>1 · World</td> <td>Three.js — roads, buildings, cabin, traffic agents, route arrows, destination pillar</td> </tr> </tbody> </table> <p>And the subsystems that make it more than a renderer:</p> <table> <thead> <tr> <th>Subsystem</th> <th>How it works</th> </tr> </thead> <tbody> <tr> <td><strong>Driver monitoring</strong></td> <td>MediaPipe FaceLandmarker blendshapes feed one state machine with two outputs. Hard warning: both eyes shut past 1.2 s, cooldown-gated so it does not machine-gun at a driver who is genuinely asleep. Continuous 0–1 fatigue score: rolling PERCLOS (a one-minute EMA of eyelid closure) combined with yawn rate — a jaw held open past 0.55 for 800 ms counts as a yawn, over a two-minute window.</td> </tr> <tr> <td><strong>Fatigue-driven HUD</strong></td> <td>The score is the interesting half. As fatigue climbs the HUD raises contrast on rear traffic, sheds non-essential chrome, and drifts wake-up particles across the glass — the display responds to the driver instead of shouting at them.</td> </tr> <tr> <td><strong>Head-pose lane-change intent</strong></td> <td>Looking more than 18° to one side for 800 ms reads as a shoulder check, and the panel surfaces rear traffic in that adjacent lane. Releases at a looser 8° with a 500 ms cooldown — hysteresis, so a brief glance forward does not flicker the panel on and off.</td> </tr> <tr> <td><strong>Door-opening safety gate</strong></td> <td>In rest mode the car is parked roadside with traffic flowing past. Asking to get out forward-simulates the traffic schedule: if any vehicle will come within 12 m of the door in the next 4 s the gate stays red, otherwise a tap confirms.</td> </tr> <tr> <td><strong>Voice + AI reservation call</strong></td> <td>Speech recognition is always listening. Say 「找餐廳」and five nearby POIs come back from Overpass; pick one by number and the in-car assistant dials it, speaking a reservation script over TTS while the overlay renders the transcript as chat bubbles. Phone numbers carry a separate spoken form so Chinese TTS reads them digit by digit instead of turning 09 into a place value.</td> </tr> <tr> <td><strong>Four-screen cabin</strong></td> <td>Each screen runs the same app with <code>?role=driver / passenger / left / right</code>. The driver publishes state snapshots to a small WebSocket relay that fans them out unparsed; each role applies its own camera offset — passenger 0.45 m inboard of the right door, side windows yawed ±90° — and keeps its own mouse-look on top, so a passenger can still turn their head independently.</td> </tr> <tr> <td><strong>Physical steering wheel</strong></td> <td>You drive it with an actual wheel. Steering angle comes off a six-axis IMU (three-axis accelerometer plus gyroscope) mounted on the wheel itself, so the rotation is read directly from how the wheel moves — no shaft encoder or mechanical end-stops to fabricate in three days. An Arduino Nano packages the reading as one JSON line per packet at 115200 baud, roughly 20 packets a second, which the browser reads through Web Serial. Every value is clamped on arrival so a noisy reading cannot push the vehicle physics past its own caps, and the 60 fps render interpolates between packets rather than stepping.</td> </tr> </tbody> </table> <p> <figure id="figure-demoing-to-the-judges--hands-on-the-laser-cut-control-rig-the-simulator-running-on-the-screen-in-front-of-me"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> Demoing to the judges — hands on the laser-cut control rig, the simulator running on the screen in front of me. </figcaption></figure> </p> <h2 id="my-role">My role</h2> <p>I was the team lead. The sponsor prompt named a display, not a product, so most of the work up front was deciding what a windshield should actually do — I ran that ideation with the team, and then led the software side through to a working demo. My own commits landed the highway, coastal and rest-stop scenarios, the driver-monitoring pipeline and everything the fatigue score drives, collision handling, the head-pose lane-change intent, and the exit gate.</p> <p>Roughly 20k lines of TypeScript went in over the three days, with 194 unit tests across 16 files covering the pure logic — the state machines, geometry and traffic simulation are all written as pure functions precisely so they could be tested at hackathon speed instead of debugged through the UI.</p> <p> <figure id="figure-team-37-nothingunique--劉允中-賴泓安-鄭竣陽-胡軒綸-張勝勛--at-our-bench-on-the-auo-track"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> Team 37, NoThingUnique — 劉允中, 賴泓安, 鄭竣陽, 胡軒綸, 張勝勛 — at our bench on the AUO track. </figcaption></figure> </p> <h2 id="results">Results</h2> <p>First place, AUO corporate award.</p> </article> <article> <h1>KPOP 舞台演出</h1> <p>Mon, 23 Mar 2026 00:00:00 +0000</p> <h2 id="緣起">緣起</h2> <p>都是一群很可愛的人們啊！大一的時候揪了一群人一起來跳女舞，真的是我做過最快樂的決定。</p> <p>去年的大一女舞只能說第一次吧，只能說一個人吧！有很多做的不夠好的地方。</p>  <h2 id="練習">練習</h2> <p>再來是大二 KPOP，必須感謝三位負責人（idk 你們怎麼分工，但感覺就是三位）潘葦軒、石晏禎、張宸嘉，第一次選歌跑去圖書館開會到底是怎樣啦！是要多鬧！</p> <p>但必須說練 KPOP 是我過去這幾個月內心感到最踏實最無憂無慮的一段時間，照著你們排好的步調，盡可能地達成你們的期望，真的真的很喜歡跟一群自己很喜歡的人們一起完成一件喜歡的事。</p> <p>然後感謝林若潔帶我去挑衣服！真的很好看，難得帥了一次之後還要帶我去挑衣服哇！</p>  <h2 id="表演當天">表演當天</h2>  <p> <figure id="figure-紅光下的一個定格"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 紅光下的一個定格 </figcaption></figure> </p> <p> <figure id="figure-下台前的最後一個畫面"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 下台前的最後一個畫面 </figcaption></figure> </p> <p>謝謝今年你們把它變成一部很好很好的作品。明年這個時間我不知道我還有沒有足夠的心力投入到另一個舞上，但還是希望能夠跟你們一起哇！跟一群自己很喜歡的人一起做事就是很幸福。</p> </article> <article> <h1>中國舞演出</h1> <p>Mon, 23 Mar 2026 00:00:00 +0000</p> <h2 id="緣起">緣起</h2> <p>先來說說中國舞吧，承載了我許許多多的心力與期盼。這個故事應該是從高中時在 B 站滑到了白小白老師的國風爵士吧！從此便被這種舞風深深吸引，打開了新世界的大門，只能說很想把我眼中的這股美分享給大家啊！每次裙擺轉動、每次扇子飄揚總令我醉心不已，我就是偏愛著這種優雅、含蓄、克制卻又迸發出強烈生命力與美感的視覺效果。</p> <p> <figure id="figure-每次裙擺轉動每次扇子飄揚總令我醉心不已就是這種畫面"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 每次裙擺轉動、每次扇子飄揚總令我醉心不已，就是這種畫面 </figcaption></figure> </p>  <h2 id="準備">準備</h2> <p>謝謝，真的謝謝鄭安妤學姊 @anyu_0526 當初跑來跟我講說想加中國舞，沒有你，這個中國舞就算開成也絕不是如今這般萬人稱頌的演出。你對於美的理解遠在我之上，服飾、裝造、編曲各個方面都是，我在只是維持住中國舞的下限，有你中國舞的美才算是真正被展現出來。跟你合作我很愉快，事到如今，我對你剩下的只有感激而已，再來一次，我依然會希望跟你一起開這支舞。</p>  <h2 id="表演當天">表演當天</h2>  <p> <figure id="figure-雙人段落"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 雙人段落 </figcaption></figure> </p> <p> <figure id="figure-團扇"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 團扇 </figcaption></figure> </p> <p>也想謝謝何文璦 @ambaa_.10 ，電夜總算有一支和你一起跳的舞了，支持我做的許多決定，聽到你說你很喜歡中國舞、明年還會想要跳的時候，我發自內心的有種被認同、被接納的感覺。張勝勛是個很奇怪很不正常的人，謝謝你接受了也支持了他的奇思妙想。</p> <p>明年沒意外的話還是會有跨屆中國舞，希望會有更多喜歡跳舞（maybe 擅長跳舞）的人加入，也希望這東西在我離開台大後也能被傳承改良下去。</p> </article> <article> <h1>串場劇</h1> <p>Mon, 23 Mar 2026 00:00:00 +0000</p> <h2 id="準備">準備</h2> <p>串場劇，說實在的一開始本來只是想要進去混個配角當當而已，但默默地好像也幫了不少忙，跟同屆的很多人變得更要好，也認識了很多很有意思的學弟們！（赫然發現串場劇都只有男生！！！）</p> <p> <figure id="figure-證據如上真的全部都是男生"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 證據如上，真的全部都是男生 </figcaption></figure> </p>  <h2 id="表演">表演</h2>  <p>最後串場劇的效果很好笑，為眾人帶來了許多歡樂真是太好了！</p> <p>但說回來串場劇最大的收穫就是跟謝濟遠 @ikandoit_1014 變得很熟吧！一個令人尊敬的學弟，活到 20 歲，總不時會有這種感覺：「這個人一定能比我更強更有成就！」，你也讓我有這種感覺呢！負責認真、聰明能幹，嘛……老實說我應該幫你更多的，有太多時候我的心態有點閃躲飄，讓你焦慮煩惱了很多次我真的很抱歉。雖然你走得比我快很多，能幫上你的應該不多，但有什麼需要還是讓我知道吧！</p> <p>是說今年演完劇有點演上癮了，明年有點想把跨屆劇魔改成古裝劇（畢竟應該也很多人手上會有漢服了），可以問問電機系的大家會有人有興趣嗎？</p> </article> <article> <h1>台大杜鵑花節</h1> <p>Sat, 14 Mar 2026 00:00:00 +0000</p> <p>台大杜鵑花節闖關遊戲組。</p> </article> <article> <h1>泳渡日月潭</h1> <p>Mon, 15 Sep 2025 00:00:00 +0000</p> <h2 id="緣起">緣起</h2> <p>「ㄟ要不要去游日月潭？」那時候還沒考分科，每天就是一直在刷題吃飯睡覺、刷題吃飯睡覺，吃飯滑手機的時候看到了賴泓安傳來的訊息，也沒想太多吧！3.3公里一定游得完，而且也是台灣人特有的成就之一（對啊是說我們什麼時候要來單車環島），所以我就回了「好啊！」，男人的對話框就是這樣，哪有那麼多彎彎繞繞。最後去的人就是我、賴泓安、王元粲、陳彥臻、李允中。</p> <h2 id="前一天">前一天</h2> <p>必須說，整個泳渡日月潭我覺得最難的完全不是游泳，最難的是上山和下山。我們到台中車站出來，一大堆人都在排公車，就在我們絕望於到底要怎麼上山的時候，旁邊有兩個大哥問了我們要不要拼車一起上山。現在想想能遇到那兩位大哥還真是幸運，不然我們到飯店可能都凌晨了。一路上我們聊了很多東西，只能說台大的身分還是蠻好用的，大哥聽到之後講話都變得客氣不少。而且大哥很酷耶，一天到晚去各種不同的地方騎腳踏車、參加鐵人三項，哪天我四十幾歲也蠻想活成他那樣子的，四十幾歲的人了還那麼有精神，看著健康的人我就很喜歡。</p> <p>到了之後，因為飯店是陳彥臻訂的，我們當下又聯絡不上他，只能在大廳休息。飯店的人也蠻好的，還準備了一些紅燒肉、滷蛋、湯讓來這邊的人吃，那個時候好像沒吃晚餐吧，狼吞虎嚥了一波，說實在還蠻爽的。ㄟ不對，我記得那一次一個晚上一個人要四千，是前一天的兩倍！貴死了，我只能說準備這些是應該的。當天晚上……好像也沒有特別幹嘛，休息完就早一點回去睡覺了。</p> <h2 id="當天">當天</h2> <p>必須說很震撼耶，真的是萬人泳渡日月潭，前往下水點的一路上滿滿的都是人，一眼望過去都是主辦單位發的紅色泳帽。我們好像是八點下水，那一天天氣還蠻炎熱的，一開始下水的時候真的挺冰涼，水沒有說特別髒，我游完身體也沒有任何紅腫發癢，挺不賴的。而且這是我第一次在開放水域游泳，那種踩不到地的感覺說實話還真的有點可怕。反正就開始游啊，游一游就只剩我跟賴泓安在最前面。主辦單位還蠻讚的，每隔50公尺就會有人餵水，我們就像魚一樣蹲在旁邊把嘴張開。到現在唯一還有印象的，大概就是人很密集，所以一直踢到別人、還有被別人踢吧！超級可怕。</p> <p> <figure id="figure-一眼望過去都是主辦單位發的紅色泳帽"> <div class="flex justify-center "> <div class="w-full" > </div> </div><figcaption> 一眼望過去都是主辦單位發的紅色泳帽 </figcaption></figure> </p> <p>游過去差不多是十一點，說實話上岸之後的事情我都忘了，好像身上扛了一個人的感覺，走起路來特別重。我只記得我們走了很久，真的是很久很久很久，最後是靠陳彥臻他爸 carry 我們，才有回台北的客運車票。必須說真的超遠，大概開了快六個小時吧，兩三點的車到台北都八九點了……整體來說我覺得推薦嗎？也還好，就有一種解鎖人生成就的感覺吧，但也真的是找罪受就是了。每年都去的話，除非你像馬英九一樣有專車接送，不然都挺麻煩的。</p> <p>是說什麼時候要游澎湖灣啊</p> </article> <article> <h1>RecoveryDAgger</h1> <p>Mon, 01 Sep 2025 00:00:00 +0000</p> <p><strong>Sep – Dec 2025</strong></p> <h2 id="the-problem">The problem</h2> <p>Imitation learning lets an agent pick up complex behaviour from expert demonstrations, but plain behaviour cloning drifts. Small errors push the agent into states the expert never demonstrated, and from there the mistakes compound.</p> <p>DAgger fixes the drift by querying the expert on the states the learner actually visits. That works, but it asks constantly — and expert supervision is the expensive part of the whole setup.</p> <h2 id="what-we-built">What we built</h2> <p>RecoveryDAgger keeps DAgger’s interactive loop but adds a cheaper first response to trouble. In a risky state the agent does not call the expert straight away. It first runs a <strong>recovery policy</strong> that corrects itself locally by ascending the gradient of a learned <strong>Success Q-function</strong> — a network that estimates the probability the task will still be completed from the current state. The expert is queried only when recovery is unreliable, which is to say only when the state is genuinely novel.</p> <p>The point is to spend expert supervision on new information, rather than on situations the agent could have dug itself out of.</p> <h2 id="my-role">My role</h2> <p>I led a four-person team and built the expert policy and the training pipeline myself, in PyTorch and Stable-Baselines3. The expert is a rule-based controller that steers toward the goal from the current state — deterministic, 100% success on the task — and it generates the 100-trajectory offline dataset every method in the paper starts from. Behaviour cloning on that dataset lands at roughly 26% success, which is exactly the gap online training has to close.</p> <p>The design decision I care most about is how recovery actually produces an action. PointMaze has a continuous action space (forces along x and y), so the obvious version of recovery — enumerate candidate actions, take the arg max of the Success Q-function — is not available. We instead start from the action the imitation policy already proposed and run a few steps of gradient ascent on the Success Q-function with respect to the action, projecting back into the valid range after each step. Recovery is a local correction of the policy’s own intent, not a second controller fighting it.</p> <p>The other decision was to stop trusting a single Q-network. One learned Success Q is only an approximation, and recovery follows its gradient, so its errors get amplified rather than averaged out. We trained an ensemble instead: the ensemble mean defines risk, the ensemble variance defines novelty, and the recovery objective subtracts a penalty λ·Var(Q) so recovery never climbs toward states the ensemble disagrees about. One family of networks ends up serving all three roles — risk detector, novelty detector, and recovery direction.</p> <h2 id="results">Results</h2> <p>Evaluated on a four-room PointMaze navigation task against ThriftyDAgger, the standard query-efficient baseline. Every method starts from the same behaviour-cloned policy.</p> <table> <thead> <tr> <th>Method</th> <th>Expert queries</th> <th>Recovery queries</th> <th>Success rate</th> </tr> </thead> <tbody> <tr> <td>Behaviour cloning</td> <td>—</td> <td>—</td> <td>0.26</td> </tr> <tr> <td>ThriftyDAgger (baseline)</td> <td>20,048</td> <td>—</td> <td>0.81</td> </tr> <tr> <td>Single-Q recovery (ours)</td> <td>2,504</td> <td>9,232</td> <td>0.86</td> </tr> <tr> <td>Ensemble-Q recovery (ours)</td> <td>2,693</td> <td>9,296</td> <td>0.88</td> </tr> </tbody> </table> <p>Ensemble-Q recovery ends up more accurate than the baseline while querying the expert <strong>7.4× less often</strong>. Partway through training the gap is even wider: both recovery variants reach ~0.7 success after about 2k expert queries, where ThriftyDAgger needs roughly 20k to get to the same place.</p> <p>The interesting part is <em>where</em> the savings come from. Most of what a risk-gated method spends its query budget on is not genuinely unfamiliar — it is recoverable: local deviations near a doorway or a wall that the agent could fix by itself. Separating “novel” from “merely risky” is what buys the 7.4×.</p> <p>The project placed 3rd among 30 teams, most of them graduate students, and the work has been accepted to IEEE Potentials.</p> </article> <article> <h1>系學會 EE+</h1> <p>Sun, 01 Sep 2024 00:00:00 +0000</p> <p><strong>Sep 2024 – Jun 2027</strong></p>  <p>NTUEE 系學會 EE+。</p> </article> <article> <h1>Experience</h1> <p>Tue, 24 Oct 2023 00:00:00 +0000</p> </article> </main></body></html>