HN 日本語サマリー

← 一覧へ戻る
Web開発

SMILのみを使用して純粋なSVGで映画を作成する

Making a movie in pure SVG using SMIL (zeyaddeeb.com)

5 pointsby zdeeb0 コメント

要約

この記事では、Scalable Vector Graphics (SVG)とSynchronized Multimedia Integration Language (SMIL)のみを使用して、ウェス・アンダーソン監督風の短編映画を作成した実験について解説しています。SVGの描画機能とSMILのアニメーション機能を組み合わせることで、外部ライブラリやフレームワークに依存せず、ブラウザネイティブで動作するインタラクティブなアニメーションを実現しています。

全文翻訳

INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M. SH. 01 / 08 HOTEL KUBERNETES 101102103104105 RÉCEPTION PÂTISSERIE PART TWO DESIRED STATE NARRATOR Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries. Shot 01 / 08 · Wide NARRATOR Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries. Run the scene 00:00 / 00:47 Scrub the scene in seconds Music Crosshair 01 Wide 8s Square to the wall. Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest. NARRATOR: Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries. 02 Lateral dolly 6s Track at the speed of the walk. Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast. OTTO: Room 104 is ready again. I rescued your croissant. 03 Whip pan 6s Turn the head, not the body. From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure. M. VALENTIN: We guarantee one guest, madame. You are the one. 04 Overhead insert 6s God’s eye on the evidence. A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other. ANNA: Checkout accepted. Then why does my key still work? 05 Portrait, snap zoom 6s Punch in on the understatement. Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement. ANNA: Don't delete the room. Set the reservation to zero. 06 Chapter card 3s Announce the chapter. PART TWO: DESIRED STATE 07 Elevator tableau 5s Rise with the cab. Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping. OTTO: Reservations is upstairs. They only accept pull requests. 08 Pull back 7s Show the whole house. The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified. NARRATOR: Her checkout was approved. The next release was in November. Choose a shot to watch its camera move across the drawing. The yellow outline follows the camera; the dashed outline marks where it finishes. Whole drawing Shot detail 01 02 03 04 05 06 07 08 Shot 01 / 08 Wide Tap a shot to zoom in and play its move. 01 Wide 02 Lateral dolly 03 Whip pan 04 Overhead insert 05 Portrait, snap zoom 06 Chapter card 07 Elevator tableau 08 Pull back Replay camera move Checkout Pending INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M. [[WIDE 8]] Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest. NARRATOR Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries. [[DOLLY 6]] Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast. OTTO Room 104 is ready again. I rescued your croissant. [[WHIP 6]] From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure. M. VALENTIN We guarantee one guest, madame. You are the one. [[OVERHEAD 6]] A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other. ANNA Checkout accepted. Then why does my key still work? [[PORTRAIT 6]] Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement. ANNA (with surgical patience) Don't delete the room. Set the reservation to zero. [[CARD 3]] PART TWO: DESIRED STATE [[TABLEAU 5]] Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping. OTTO Reservations is upstairs. They only accept pull requests. [[PULL 7]] The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified. NARRATOR Her checkout was approved. The next release was in November. Thread this script Restore the original Change a line, a cue, or a duration, then thread it. INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M. [[WIDE 8]] Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest. NARRATOR Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries. [[DOLLY 6]] Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast. OTTO Room 104 is ready again. I rescued your croissant. [[WHIP 6]] From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure. M. VALENTIN We guarantee one guest, madame. You are the one. [[OVERHEAD 6]] A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other. ANNA Checkout accepted. Then why does my key still work? [[PORTRAIT 6]] Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement. ANNA (with surgical patience) Don't delete the room. Set the reservation to zero. [[CARD 3]] PART TWO: DESIRED STATE [[TABLEAU 5]] Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping. OTTO Reservations is upstairs. They only accept pull requests. [[PULL 7]] The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified. NARRATOR Her checkout was approved. The next release was in November. Notes on how it works Notes The camera The camera is an SVG viewBox. Every shot is a rectangle on one drawing, framed in Academy ratio by default on phones. The lateral dolly, the whip pan, the three-step snap zoom, the elevator crane and the pull-back are all one attribute changing. The clock SMIL, the browser’s own declarative animation timeline, which Chrome nearly removed in 2015. The screenplay compiles into begin and dur attributes. Play, pause and scrub are unpauseAnimations() and setCurrentTime(). No animation library. The storyboard Each frame is a <use> of the same drawing with its own viewBox, so the board is live while the scene runs, and the master sheet shows all eight rectangles at once. Both print as vectors. The voice The Web Speech API reads each line, rate and pitch lowered until the delivery is flat enough. The music is a Karplus–Strong plucked string rendered once through OfflineAudioContext. The grade Fifteen colours registered with @property. Switching a palette transitions every fill in the drawing, the board and the sheet in one move. The script A Fountain-style screenplay: scene heading, action, character, parenthetical, dialogue, with camera cues in double brackets. A small parser turns it into a shot list, tested.