Sketch-n-Sketch
JSSST2023 チュートリアル
アウトライン
タイトル:「試して作って知る ライブプログラミング入門」
加藤淳（産業技術総合研究所）
橋本麦（産業技術総合研究所、INS Studio）
それぞれの自己紹介スライド
加藤淳 - 道具鍛冶研究者。プログラマやアーティスト向けの道具をつくるHuman-Computer Interaction分野の研究者。
橋本麦 - 映像作家、ビジュアルアーティスト。generative art, creative codingの手法を用いて、MV・Web、インスタレーション、ライブパフォーマンスなど多岐にわたって制作している。
Live Programmingとは？
弓をワンショットで狙うのではなく、ホースで水を出し狙い続ける (Chris Hancock, 2003)
> The archer and the waterer are engaged in qualitatively different processes, and the key to the difference is this: the waterer never stops aiming. The only movements the waterer needs to make are corrections to a single, evolving aim.
ちなみに指導教官は Scratch で有名な Mitchel Resnick (MIT)
橋本のモチベーション: ビジュアルな出力を探索するうえで直接操作は必須
加藤のモチベーション: 探索的プログラミングにおいて、またソーシャルなプログラミング環境の要素技術として重要
例と共に紹介
> 「利便性をとるか（普遍的可視化），大量の情報に圧倒されないようにするか（明示的挿入）というトレードオフ」の設計
ライブプログラミングによる滑らかなプログラミング体験
1) ビジュアルな出力の直接操作
2) ライブなコード編集
3) ライブなテスト記述
4) Live Programmingの広がり
例と共に紹介 1) ビジュアルな出力の直接操作
昔1: Visual Programming
VIVA Steven Tanimoto
この系譜は最近だと Max/MSP, TouchDesigner, Houdini
昔2: ビジュアルな出力をインタラクティブにする
出力を選ぶと「なぜその出力になったの？」に答える
テキストベースの言語（Java）でも使えるところが最近のLive Programming事例につながる
CHI 2004
最近: 出力をいじるとソースコードが変更される
GUI のライブプログラミング
その後 MakeCode へ
電子工作のライブプログラミング
麦さんのGlisp
例と共に紹介 2) ライブなコード編集
GUI開発
Bret VictorのデモやEveはこれ
It's Alive! (TouchDevelop)
要素技術: 型ごとのGUIを出す
The Book of Shaders Editor - GLSL入門サイトのエディタ。数値やベクタにカーソルをあわせた時に、型に合ったtweak UIがポップアップする仕様が面白い。
電子工作の筐体設計
f3.js, 簡単なbi-directional editing
深層学習のグラフ構築
ODEN: Live Programming for Neural Network Architecture Editing
画像処理の最適化用言語 Halide
Guided Optimization for Image Processing Pipelines
群ロボットの直接操作
いわゆるテキストベースの「エディタ」が存在しないがプログラムを編集しているケースもあるという例
Reactile: Programming Swarm User Interfaces Through Direct Physical Manipulation
Notebook Programmingのライブ化はここで紹介してもいいかも Live Coding (音楽のライブ生成)
アーティストに親しまれている系のうち、とくにオーディオ
Systems level liveness with extempore
Tidal
例と共に紹介 3) ライブなテスト記述
デバッガとの組み合わせ
情報のオーバーロードをコントロールする: probe (探査針) を挿すイメージ
"Usable Live Programming", SPLASH Onward! 2013
エディタ内で可視化したいコールスタックの条件をインタラクティブに指定していける
CHI 2014
可視化するスコープをプログラマが指定できる
CHI 2020
SPLASH 2015
<Programming> 2019
例と共に紹介 4) Live Programmingの広がり
デバッグをライブに
Whyline (既出)
可視化したい変数をインタラクティブに選べる
UIST 2012
コンソールログがインタラクティブになる
CHI 2023
アーティストに親しまれている系
シェーダー系
Interactive Shader Format Editor - GLSLベースの画像フィルターフォーマット。VJソフト等で使わている。uniformについてのメタデータをコメントアウトしたJSON形式で記述することで、ホストアプリケーション側で適切なUIを表示することが出来る。
100R - Ronin（Tutorial）- The Hundred Rabbits発のLispベースのベクター描画ツール。Glispのdeclarativeな記述方法の逆で、実行することで現在のキャンバスに破壊的に新しいシェイプが上書きされていく。（
clear コマンド等） 100R、ヨットで世界旅行しながら活動するアーティストデュオ。ソフトウェア・アート、ニューメディアアート的なシーンに近い。
ShaderToy, Processing IDE
Live Programming性を主目的に作られた訳ではないので、おまけ程度に
既存のデザインツールの拡張としてのプログラミング環境（Liveかどうかはさておき）
Jurg Lehni - Scriptographer （後のPaper.js）
立花ハジメ - 信用ベータ
-- ここでチュートリアル？ --
Live Programmingが盛り上がっている背景
Bret Victor の伝説的？デモ「Inventing on Principles」(2012)
学問的新規性はともかく、このあと盛り上がったことは確か
学問的にはHuman-Computer Interaction, プログラミング言語, ソフトウェア工学にまたがる学際領域
HCI的には開発環境を作りやすくなってきたタイミング
プログラミング言語的には言語だけデザインしていてもつまらなくなってきたタイミング
ソフトウェア工学的には exploratory programming の重要性が認識されてきたタイミング
社会的にはスタートアップ界隈で盛り上がっている（いた）
Chris Granger - Eve (2014-2018)
> Several big-name investors have gotten behind Eve. In its seed round, Granger and his two co-founders have raised $2.3 million from Andreessen Horowitz partner Chris Dixon, Y Combinator president Sam Altman, and Sep Kamvar (the guy who personalized Google search results).
Sam Altman
ChatGPT で有名になりすぎたきらいがあるが、かつては Programming Tools に興味があった
> Y Combinator -- Requests for Startups -- PROGRAMMING TOOLS
> Software developers are shaping more and more of our daily lives.
> YC Research, now OpenResearch, and its portfolio of research projects are no longer affiliated with Y Combinator.
かつてYCRに Human Advancement Research Community というのがあった
上の Bret Victor も、「ライブプログラミングによる滑らかなプログラミング体験」の Sean McDirmid や、 大島 芳樹 さんも、この一員だった
Jonathan Edwards や Jennifer Jacobs も Extended Community にいる
Live Programmingのtheory
How Live are Live Programming Systems?: Benchmarking the Response Times of Live Programming Environments
人間の認知機能に照らして「ライブだと思える」時間内に処理を終えることをライブプログラミングの要件とする考え方
VIVA (Steven Tanimoto) では 4 レベルの liveness を定性的に定義
その後、6レベルに拡張
ライブかどうかは本質ではなくて、ドメインにあわせて使い勝手のよいワークフローを提供するプログラミング環境の設計を行うことが大事
UI➡UXのように、個々のツールではなく全体としてのエクスペリエンスが重要
そもそもの問題意識
Software is eating the world (Marc Andressen, 2011)
ソフトウェアの影響力の大きさ
これに対するプログラミングツールの貧弱さ
さらにはビジュアルアートのためのツールの帝国主義的状況
"Designing and Programming Malleable Software" (Philip Tchernavskij, 2019)
Webstrates (Clemens Klokmose, 2015)
> software entities that can evolve over time and shift roles, acting as what are traditionally considered documents in one context and applications in another, or a mix of the two
プログラマのための Live Programming からコミュニティのための Live Programming へ
Rethinking Programming "Environment" (Jun Kato, 2020)
Tools for Conviviality (Ivan Illich)
<Programming> 2020 Convivial Computing Salon
なぜHCI研究者とビジュアルアーティストがいっしょにチュートリアルしているのか
カラーパレットの今昔
Nolwenn Maudet: "Designing Design Tools" (2017)
見た目がほとんど変わっていないカラーパレット
デスクトップメタファのデザインではオフィスを参考にした。それはエグゼクティブの秘書のオフィスだった。原稿のリファインやファイル（物理のやつ）整理など。生産性と効率性のための環境であった。こうした仕事は、いわゆるデザインのそれとは大きく異なる。
> It was not any kind of office that inspired this (the desktop metaphor) design, it was a executive secretary office, occupied with copy-editing, file organization and focusing on production and efficiency. A type of work very different from what is generally considered design work.
最終成果物に最高速で到達することを重視するあまり、デザインの過程における試行錯誤の中間的な過程を無視してはいないか。
> By focusing on the final outcome, current design tools neglect the intermediary steps in the design process.
もっと自由なカラーパレットのデザイン
Color Portraits: Color Portraits: From Color Picking to Interacting with Color (CHI 2015)
> Even post 50+ years of computing, we are trapped in local optimas of GUIs where your average UI designer cargo cults and replicates current paradigmatic components and reasons in a nudge theory style: “why bother changing this when they are so familiar with it?”
かつての職人は、自分の道具を自作していた。むしろ、道具をつくること、手を入れること、使うこととが、今ほど厳密に区別されず、なだらかに繋がっていた。
ビジュアルアートにおいては、道具を自作することで、「Adobeが考えるアート」から自由になれる
そのための Live Programming 環境 (Glisp)
プログラミング環境の今昔
加藤: "Integrated Graphical Representations" (2013)
見た目がほとんど変わっていない統合開発環境
大多数のソフトウェア開発現場で使われるのはテキストベースのもの
ビジュアルプログラミングですら（記号的表現が中心で）グラフィカルではない
"Up and Down the Ladder of Abstraction" (Bret Victor, 2011)
> This interactive essay presents the ladder of abstraction, a technique for thinking explicitly about these levels, so a designer can move among them consciously and confidently.
> I believe that an essential skill of the modern system designer will be using the interactive medium to move fluidly around the ladder of abstraction.
システム設計においては抽象から具体までを自由に行き来できるべきである
もっと自由な統合開発環境のデザイン
写真を貼り込む (https://junkato.jp/ja/picode/ CHI 2013)
動画プレイヤーのようにビジュアルなデバッガを組み込む (https://junkato.jp/ja/dejavu/ UIST 2012)
道具としてのコンピュータの硬直性（ソフトウェアなのに柔らかくない）に課題を感じる二人
LIVE 2023 (宣伝)
Co-chair: 加藤, Peter von Hardenberg
Ink and Switch は独立系ラボ
(デモ実演 -
2h? ) CodePenかと思ったけど、npm + vite + Vanilla JSでのローカル開発の方がシンプルそう？
Viteセットアップ
ボイラープレートの余計なものを消す
Direct Manipulation機能の実装
Live Programming環境を実装する
無限ループでアプリ全体が動かんくなるのをどう防ぐか
たとえば、auto-closing brackets が有効なエディタで for 文を書くと、途中
for (let i = 0; i < 10;) まで入力したときにフリーズする 実行前に静的解析は出来ない（∵停止性問題）。
break の無い while (true) など自明な場合はさておき。 解決法1: Auto Update のオンオフを切り替えられる仕様にする
解決法2: runする頻度を下げる
UIからフォーカスが外れた時にrun
Houdiniの
On Mouse Up モードなど。 onInputにthrottleを走らせる
はこれで解決させがち。ただ、数値リテラルなどをtweakした時のレスポンスの悪さがLPとしてあまり愉快じゃない 解決法3: UIとインタプリタをスレッド分離する
文字通り、Workerで走らせる
JS Interpreterの
step などで、メインスレッドに処理を戻しながらステップ実行する。 シェーダー系のLP環境は、スレッドというかハードウェアごと分離されているので、ある意味でこのタイプに該当
そもそもGLSLのようなシェーダ言語だと、繰り返し処理に強い制限が掛かっているので無限ループしない
なるほど！ コードの更新時に、それ以前のステートを保持するか、リセットするか
REPL的な使用感とするなら前者
上記の100R - Roninはこのタイプ
Direct Manipulation、tweakingとの食い合わせを考えると後者
あるいは、コード更新ごとに現在の状態のスナップショット + 現在のコード実行 を繰り返す。「確定」アクションによって、実行後の状態をスナップショットする。
関係ないですが、コードを左右どちらのペインに割り当てるかに、ツール開発者としてのアティチュードが表れる気がする
（組版/Web的なセオリーでは）左側のほうが目につきやすいので
左側にコード: コードが主、その実行結果を従とする
左側にキャンバス: 何らかの画ってのがまず第一にあって、その設計図としてのコードが脇に収まってる
が作った/使っているライブプログラミング環境 主としてパフォーマンスやリアルタイム性のあるものに使われるイメージがあるが
六本木のSuperDeluxeがそういうシーンの中心地だった気がする。Tidalで演奏されてる方とか
「インタラクティブなものじゃなくても良い」という感覚
Purist / Hybrids でいうと、ハイブリッド派な環境
実例
Houdini
TouchDesigner
EASTEAST
p5, openFrameworks（これはただのクリエイティブコーディングであって、LIVEではない）
Programmable Pen Tool
Glisp
CG Worldに提供したグラフィック
