From 856f4d44c7fc17d9b86e8256587883ff2c2cf809 Mon Sep 17 00:00:00 2001 From: Jeffrey Alan Scudder Date: Mon, 30 Mar 2026 12:37:17 -0700 Subject: [PATCH] papers: add Japanese card translations and new paper entries --- papers/arxiv-ac/ac-cards.tex | 24 +- papers/arxiv-ac/ac-ja.tex | 522 ++++++++++++ papers/arxiv-api/api-cards.tex | 24 +- papers/arxiv-api/api-ja.tex | 765 ++++++++++++++++++ .../arxiv-archaeology/archaeology-cards.tex | 24 +- papers/arxiv-archaeology/archaeology-ja.tex | 348 ++++++++ papers/arxiv-calarts/calarts-cards.tex | 168 ++++ papers/arxiv-calarts/calarts-ja.tex | 205 +++++ papers/arxiv-complex/complex-cards.tex | 30 +- papers/arxiv-complex/complex-ja.tex | 237 ++++++ papers/arxiv-dead-ends/dead-ends-cards.tex | 24 +- papers/arxiv-dead-ends/dead-ends-ja.tex | 276 +++++++ papers/arxiv-diversity/diversity-cards.tex | 24 +- papers/arxiv-diversity/diversity-ja.tex | 338 ++++++++ papers/arxiv-folk-songs/folk-songs-cards.tex | 24 +- papers/arxiv-folk-songs/folk-songs-ja.tex | 298 +++++++ papers/arxiv-futures/futures-cards.tex | 349 ++++++++ papers/arxiv-futures/futures-ja.tex | 429 ++++++++++ papers/arxiv-goodiepal/goodiepal-cards.tex | 26 +- papers/arxiv-goodiepal/goodiepal-ja.tex | 205 +++++ papers/arxiv-identity/identity-cards.tex | 493 +++++++++++ papers/arxiv-identity/identity-ja.tex | 592 ++++++++++++++ .../kidlisp-cards-cards.tex | 20 +- .../arxiv-kidlisp-cards/kidlisp-cards-ja.tex | 564 +++++++++++++ .../kidlisp-reference-cards.tex | 20 +- .../kidlisp-reference-ja.tex | 530 ++++++++++++ papers/arxiv-kidlisp/kidlisp-cards.tex | 20 +- papers/arxiv-kidlisp/kidlisp-ja.tex | 558 +++++++++++++ .../network-audit-cards.tex | 24 +- .../arxiv-network-audit/network-audit-ja.tex | 278 +++++++ papers/arxiv-notepat/notepat-cards.tex | 26 +- papers/arxiv-notepat/notepat-ja.tex | 315 ++++++++ .../arxiv-open-schools/open-schools-cards.tex | 441 ++++++++++ papers/arxiv-open-schools/open-schools-ja.tex | 435 ++++++++++ papers/arxiv-os/os-cards.tex | 28 +- papers/arxiv-os/os-ja.tex | 468 +++++++++++ papers/arxiv-pieces/pieces-cards.tex | 24 +- papers/arxiv-pieces/pieces-ja.tex | 265 ++++++ papers/arxiv-plork/plork-cards.tex | 2 +- .../score-analysis-cards.tex | 20 +- .../score-analysis-ja.tex | 261 ++++++ .../sustainability-cards.tex | 24 +- .../sustainability-ja.tex | 285 +++++++ .../arxiv-whistlegraph/whistlegraph-cards.tex | 34 +- papers/arxiv-whistlegraph/whistlegraph-ja.tex | 228 ++++++ papers/cards-convert.mjs | 44 +- papers/metadata.json | 8 +- papers/papermill.mjs | 34 +- 48 files changed, 10155 insertions(+), 226 deletions(-) create mode 100644 papers/arxiv-ac/ac-ja.tex create mode 100644 papers/arxiv-api/api-ja.tex create mode 100644 papers/arxiv-archaeology/archaeology-ja.tex create mode 100644 papers/arxiv-calarts/calarts-cards.tex create mode 100644 papers/arxiv-calarts/calarts-ja.tex create mode 100644 papers/arxiv-complex/complex-ja.tex create mode 100644 papers/arxiv-dead-ends/dead-ends-ja.tex create mode 100644 papers/arxiv-diversity/diversity-ja.tex create mode 100644 papers/arxiv-folk-songs/folk-songs-ja.tex create mode 100644 papers/arxiv-futures/futures-cards.tex create mode 100644 papers/arxiv-futures/futures-ja.tex create mode 100644 papers/arxiv-goodiepal/goodiepal-ja.tex create mode 100644 papers/arxiv-identity/identity-cards.tex create mode 100644 papers/arxiv-identity/identity-ja.tex create mode 100644 papers/arxiv-kidlisp-cards/kidlisp-cards-ja.tex create mode 100644 papers/arxiv-kidlisp-reference/kidlisp-reference-ja.tex create mode 100644 papers/arxiv-kidlisp/kidlisp-ja.tex create mode 100644 papers/arxiv-network-audit/network-audit-ja.tex create mode 100644 papers/arxiv-notepat/notepat-ja.tex create mode 100644 papers/arxiv-open-schools/open-schools-cards.tex create mode 100644 papers/arxiv-open-schools/open-schools-ja.tex create mode 100644 papers/arxiv-os/os-ja.tex create mode 100644 papers/arxiv-pieces/pieces-ja.tex create mode 100644 papers/arxiv-score-analysis/score-analysis-ja.tex create mode 100644 papers/arxiv-sustainability/sustainability-ja.tex create mode 100644 papers/arxiv-whistlegraph/whistlegraph-ja.tex diff --git a/papers/arxiv-ac/ac-cards.tex b/papers/arxiv-ac/ac-cards.tex index 20fbbaee16..ecc2158240 100644 --- a/papers/arxiv-ac/ac-cards.tex +++ b/papers/arxiv-ac/ac-cards.tex @@ -105,20 +105,22 @@ \thispagestyle{empty} \vspace*{\fill} \begin{center} -\includegraphics[height=8em]{pals}\par\vspace{0.3em} -{\acbold\fontsize{20pt}{24pt}\selectfont\color{acdark} \acrandname{} '26}\par -\vspace{0.3em} -{\fontsize{10pt}{12pt}\selectfont\color{acpink} A Mobile-First Runtime for Creative Computing}\par -\vspace{0.8em} -{\normalsize\color{cyan!70!blue}\textbf{@jeffrey}}\par +\includegraphics[height=9em]{pals}\par\vspace{0.1em} +{\acbold\fontsize{18pt}{22pt}\selectfont\color{acdark} \acrandname{} '26}\par +\vspace{0.1em} +{\fontsize{9pt}{11pt}\selectfont\color{acpink} A Mobile-First Runtime for Creative Computing}\par +\vspace{0.4em} +{\normalsize\color{cyan!70!blue}\href{https://prompt.ac/@jeffrey}{\textbf{@jeffrey}}}\par {\small\color{acgray} Aesthetic.Computer}\par {\small\color{acgray} ORCID: \href{https://orcid.org/0009-0007-4460-4913}{0009-0007-4460-4913}}\par -\vspace{0.8em} -\rule{0.6\textwidth}{1pt}\par \vspace{0.4em} -{\small\color{acpink!40}\textit{working draft --- not for citation}}\par -\vspace{0.3em} -{\footnotesize\color{acgray} March 2026}\par +\rule{0.5\textwidth}{0.5pt}\par +\vspace{0.15em} +\colorbox{yellow!60}{\small\color{red!80!black}\textbf{\textit{working draft --- not for citation}}}\par +\vspace{0.1em} +{\footnotesize\color{acgray} March 2026 · \href{https://github.com/whistlegraph/aesthetic-computer/commit/2113ef735}{2113ef735}}\par +\vspace{0.1em} +{\footnotesize\color{acgray}\href{https://papers.aesthetic.computer/aesthetic-computer-26-arxiv-da-cards.pdf}{Dansk} · \href{https://papers.aesthetic.computer/aesthetic-computer-26-arxiv-es-cards.pdf}{Español} · \href{https://papers.aesthetic.computer/aesthetic-computer-26-arxiv-zh-cards.pdf}{{\accjk 中文}} · \href{https://papers.aesthetic.computer/aesthetic-computer-26-arxiv-ja-cards.pdf}{{\accjk 日本語}}}\par \end{center} \vspace*{\fill} diff --git a/papers/arxiv-ac/ac-ja.tex b/papers/arxiv-ac/ac-ja.tex new file mode 100644 index 0000000000..3b8a3305eb --- /dev/null +++ b/papers/arxiv-ac/ac-ja.tex @@ -0,0 +1,522 @@ +% !TEX program = xelatex +\documentclass[10pt,letterpaper,twocolumn]{article} + +% === GEOMETRY === +\usepackage[top=0.75in, bottom=0.75in, left=0.75in, right=0.75in]{geometry} + +% === FONTS === +\usepackage{fontspec} +\usepackage{unicode-math} +\usepackage{xeCJK} +\setCJKmainfont{Droid Sans Japanese} + +\setmainfont{Latin Modern Roman} +\setsansfont{Latin Modern Sans} + +% Custom AC fonts +\newfontfamily\acbold{ywft-processing-bold}[ + Path=../../system/public/type/webfonts/, + Extension=.ttf +] +\newfontfamily\aclight{ywft-processing-light}[ + Path=../../system/public/type/webfonts/, + Extension=.ttf +] +\setmonofont{Latin Modern Mono}[Scale=0.85] + +% === PACKAGES === +\usepackage{xcolor} +\usepackage{titlesec} +\usepackage{enumitem} +\usepackage{booktabs} +\usepackage{tabularx} +\usepackage{multicol} +\usepackage{fancyhdr} +\usepackage{hyperref} +\usepackage{graphicx} +\graphicspath{{figures/}} +\usepackage{ragged2e} +\usepackage{listings} +\usepackage{natbib} +\usepackage[colorspec=0.92]{draftwatermark} + +% === COLORS (AC palette) === +\definecolor{acpink}{RGB}{180,72,135} +\definecolor{acpurple}{RGB}{120,80,180} +\definecolor{acdark}{RGB}{64,56,74} +\definecolor{acgray}{RGB}{119,119,119} +\definecolor{draftcolor}{RGB}{180,72,135} + +% === DRAFT WATERMARK === +\DraftwatermarkOptions{ + text=WORKING DRAFT, + fontsize=3cm, + color=draftcolor!18, + angle=45, + pos={0.5\paperwidth, 0.5\paperheight} +} + +% === KIDLISP SYNTAX COLORS === +\definecolor{klfn}{RGB}{0,136,170} +\definecolor{klform}{RGB}{119,51,170} +\definecolor{klrepeat}{RGB}{170,0,170} +\definecolor{klnum}{RGB}{204,0,102} +\definecolor{klstr}{RGB}{170,120,0} +\definecolor{klcmt}{RGB}{102,102,102} +\definecolor{klmath}{RGB}{0,136,0} +\definecolor{klvar}{RGB}{204,102,0} +\definecolor{klembed}{RGB}{0,136,0} + +% === JS SYNTAX COLORS === +\definecolor{jskw}{RGB}{119,51,170} +\definecolor{jsfn}{RGB}{0,136,170} +\definecolor{jsstr}{RGB}{170,120,0} +\definecolor{jsnum}{RGB}{204,0,102} +\definecolor{jscmt}{RGB}{102,102,102} + +% Inline color macros +\newcommand{\kn}[1]{\textcolor{klnum}{#1}} +\newcommand{\kt}[1]{\textcolor{klstr}{#1}} +\newcommand{\kv}[1]{\textcolor{klvar}{#1}} +\newcommand{\ke}[1]{\textcolor{klembed}{\textbf{#1}}} +\newcommand{\km}[1]{\textcolor{klmath}{#1}} + +% === HYPERREF === +\hypersetup{ + colorlinks=true, + linkcolor=acpurple, + urlcolor=acpurple, + citecolor=acpurple, + pdfauthor={@jeffrey}, + pdftitle={Aesthetic Computer '26：クリエイティブコンピューティングのためのモバイルファーストランタイム}, +} + +% === SECTION FORMATTING === +\titleformat{\section} + {\normalfont\bfseries\normalsize\uppercase} + {\thesection.} + {0.5em} + {} +\titlespacing{\section}{0pt}{1.2em}{0.3em} + +\titleformat{\subsection} + {\normalfont\bfseries\small} + {\thesubsection} + {0.5em} + {} +\titlespacing{\subsection}{0pt}{0.8em}{0.2em} + +% === HEADER/FOOTER === +\pagestyle{fancy} +\fancyhf{} +\renewcommand{\headrulewidth}{0pt} +\fancyhead[C]{\footnotesize\color{acpink}\textit{作業草稿 --- 引用不可}} +\fancyfoot[C]{\footnotesize\thepage} + +% === CUSTOM COMMANDS === +\newcommand{\acdot}{{\color{acpink}.}} +\newcommand{\ac}{\textsc{Aesthetic.Computer}} + +% === LISTINGS === +\lstdefinelanguage{kidlisp}{ + morekeywords=[1]{wipe,ink,line,box,circle,write,wiggle,shape,scroll,spin,zoom,blur,contrast,embed,layer,width,height,frame,time,form,trans,cube,move,scale,hop,overtone,melody,mic,resolution,sort,fade,stamp,paste,flood,poly,noise,flip}, + morekeywords=[2]{def,let,if,cond,once,later,lambda,do}, + morekeywords=[3]{repeat}, + morekeywords=[4]{random,sin,cos,tan,floor,ceil,round,abs,sqrt,min,max}, + sensitive=true, + morecomment=[l]{;}, + morestring=[b]", + escapeinside={|}{|}, +} + +\lstdefinelanguage{acjs}{ + morekeywords=[1]{function,export,const,let,var,return,if,else,new,async,await,import,from}, + morekeywords=[2]{wipe,ink,line,box,circle,write,screen,params,colon,jump,send,store,net,sound,speaker}, + sensitive=true, + morecomment=[l]{//}, + morestring=[b]", + morestring=[b]', + morestring=[b]`, + escapeinside={|}{|}, +} + +\lstdefinestyle{acjsstyle}{ + language=acjs, + keywordstyle=[1]\color{jskw}\bfseries, + keywordstyle=[2]\color{jsfn}\bfseries, + commentstyle=\color{jscmt}\itshape, + stringstyle=\color{jsstr}, +} + +\lstdefinestyle{kidlispstyle}{ + language=kidlisp, + keywordstyle=[1]\color{klfn}\bfseries, + keywordstyle=[2]\color{klform}\bfseries, + keywordstyle=[3]\color{klrepeat}\bfseries, + keywordstyle=[4]\color{klmath}, + commentstyle=\color{klcmt}\itshape, + stringstyle=\color{klstr}, +} + +\lstset{ + basicstyle=\ttfamily\small, + breaklines=true, + frame=single, + rulecolor=\color{acgray!30}, + backgroundcolor=\color{acgray!5}, + xleftmargin=0.5em, + xrightmargin=0.5em, + aboveskip=0.5em, + belowskip=0.5em, +} + +% === LIST SETTINGS === +\setlist[itemize]{nosep, leftmargin=1.2em, itemsep=0.1em} +\setlist[enumerate]{nosep, leftmargin=1.2em} + +% === COLUMN SEPARATION === +\setlength{\columnsep}{1.8em} + +% === PARAGRAPH SETTINGS === +\setlength{\parindent}{1em} +\setlength{\parskip}{0.3em} + +% Hyphenation for narrow two-column layout +\tolerance=800 +\emergencystretch=1em +\hyphenpenalty=50 + +\begin{document} + +% ============ TITLE BLOCK ============ + +\twocolumn[{% +\begin{center} +\includegraphics[height=4em]{pals}\par\vspace{0.5em} +{\acbold\fontsize{24pt}{28pt}\selectfont\color{acdark} Aesthetic\acdot Computer '26}\par +\vspace{0.2em} +{\aclight\fontsize{11pt}{13pt}\selectfont\color{acpink} クリエイティブコンピューティングのためのモバイルファーストランタイム}\par +\vspace{0.6em} +{\normalsize @jeffrey}\par +{\small\color{acgray} Aesthetic.Computer}\par +{\small\color{acgray} ORCID: \href{https://orcid.org/0009-0007-4460-4913}{0009-0007-4460-4913}}\par +\vspace{0.3em} +{\small\color{acpurple} \url{https://aesthetic.computer}}\par +\vspace{0.6em} +\rule{\textwidth}{1.5pt} +\vspace{0.5em} +\end{center} + +\begin{center} +{\small\color{acpink}\textbf{[ 作業草稿 --- 引用不可 ]}} +\end{center} +\vspace{0.3em} + +\begin{quote} +\small\noindent\textbf{概要。} +\ac{}（AC）は、ブラウザ上で完全に動作するクリエイティブコンピューティングのためのモバイルファーストランタイム兼ソーシャルネットワークである。主要なインターフェースはGUIではなくテキストプロンプトであり、ユーザーはこれを通じて354の組み込みインタラクティブプログラム（「ピース」）と265のユーザー公開ピースからなる名前空間をナビゲートする。各ピースは単一のJavaScriptまたはKidLispファイルであり、即時モードグラフィックスAPIを受け取るライフサイクル関数（boot、paint、act、sim、leave）をエクスポートする。本プラットフォームは、ソーシャルインフラストラクチャ——ユーザーID、リアルタイムチャット、ムードフィード、プロフィール——をアドオンレイヤーとしてではなく、ランタイムに直接統合している。パッケージングシステムはピースをオフライン配布用のスタンドアロンHTMLファイルにバンドルする。本稿では、アーキテクチャ（コアランタイムコード63,000行）、ピースモデル、多言語対応、公開・配布インフラストラクチャについて記述し、登録ユーザー2,801名の採用指標を報告する。プログラミングインターフェースを\emph{楽器}として扱うこと——ユーザーが即興的な探索を通じて記憶可能なパスを発見すること——が、クリエイティブソフトウェアとの質的に異なる関係を生み出すことを論じる。 +\end{quote} +\vspace{0.5em} +}] + +% ============ 1. INTRODUCTION ============ + +\section{はじめに} + +クリエイティブコーディングプラットフォームは、計算による表現の敷居を段階的に下げてきた。Processing~\citep{reas2007processing}はスケッチブックの比喩を導入し、p5.js~\citep{mccarthy2015p5js}はそれをブラウザに持ち込み、Scratch~\citep{resnick2009scratch}はブロックベースのビジュアルプログラミングによって子供たちにもプログラミングを可能にした。しかし、これらのツールは共通の前提を共有している——ユーザーは\emph{エディタ}と対話するということだ。コードエディタ、ブロックキャンバス、統合開発環境である。 + +\ac{}は異なる前提から出発する。その主要なインターフェースは\textbf{テキストプロンプト}——短く記憶しやすい名前を入力してインタラクティブプログラムを起動するコマンドラインである。ファイルブラウザもプロジェクトパネルもメニューバーもない。この体験は開発環境よりも楽器に近い。ユーザーは探索を通じてコマンドを発見し、反復によって筋肉記憶を構築し、最終的にはピースを流暢に再構成することで即興演奏する。 + +本プラットフォームは、ピクセルペイントツールであるNo Paint（2020年）の開発中の観察から生まれた。技術的な背景を持たないユーザーコミュニティがカスタムブラシやスタンプを寄稿し始めたのである。手動の統合プロセス——各寄稿に数時間から数日を要した——が、誰でもインタラクティブプログラムを即座に公開できるシステムの構築を推進した。開発は2021年に始まり、現在のリポジトリには2022年12月から2026年3月までの11,045件のコミットが含まれている。 + +本稿では、設計原則（\S\ref{sec:principles}）、システムアーキテクチャ（\S\ref{sec:architecture}）、ピースモデル（\S\ref{sec:pieces}）、多言語ランタイム（\S\ref{sec:languages}）、プロンプトインターフェース（\S\ref{sec:prompt}）、ソーシャルインフラストラクチャ（\S\ref{sec:social}）、公開と配布（\S\ref{sec:publishing}）、開発の歴史（\S\ref{sec:history}）、および採用状況（\S\ref{sec:evaluation}）について記述する。関連論文~\citep{scudder2026kidlisp}ではKidLisp言語について詳述している。 + +% ============ 2. DESIGN PRINCIPLES ============ + +\section{設計原則} +\label{sec:principles} + +\begin{enumerate} + \item \textbf{IDEではなく楽器。}インターフェースは楽器のように機能するよう設計されており、ユーザーはコマンドと公開ピースのネットワークの中で自分だけの記憶可能なパスを発見する。遊びを通じてリテラシーが向上するにつれ、ユーザーは即興し、再構成し、レパートリーを拡張する。 + \item \textbf{モバイルファースト。}すべてのインタラクションはスマートフォンとタブレットでのタッチ入力を対象としている。デスクトップ対応は自然に付随する——その逆は成り立たない。 + \item \textbf{URLアドレス可能。}すべてのピース、すべてのパラメータの組み合わせ、すべてのユーザーのピースがURLである。共有がナビゲーションであり、ナビゲーションが共有である。 + \item \textbf{単一ファイルプログラム。}Processingのスケッチブックモデルと、Unixの小さく組み合わせ可能なプログラムの哲学に従い、各ピースは1つのファイルである——プロジェクト構造もビルドステップも依存関係もない。 + \item \textbf{デフォルトでソーシャル。}ユーザーID、チャット、ムードフィード、プロフィールはランタイムの一部であり、追加サービスではない。 +\end{enumerate} + +% ============ 3. ARCHITECTURE ============ + +\section{アーキテクチャ} +\label{sec:architecture} + +本システムは4つの主要コンポーネントで構成される：ブートローダー、BIOSランタイム、Disk API、モジュールローダー。 + +\subsection{ブートローダー} + +ブートローダー（\texttt{boot.mjs}、1,948行）は3つのサブシステムを並列に初期化する：セッションサーバーへのWebSocket接続（800ミリ秒のタイムアウトとHTTPへのフォールバック付き）、永続的なモジュールキャッシュのためのService Worker、オフラインモジュールストレージのためのIndexedDBストレージ。ブートテレメトリはブラウザ、デバイスタイプ、画面解像度、パフォーマンスタイミングデータを\texttt{/api/boot-log}に記録する。 + +\subsection{BIOS} + +BIOS（\texttt{bios.mjs}、20,935行）はランタイムコーディネーターである。60fpsのレンダリングループを管理し、入力イベント（キーボード、タッチ、マウス、ゲームパッド、MIDI）をルーティングし、ピースのライフサイクル遷移を調整し、ポストプロセッシングエフェクト用のWebGL合成レイヤー（「glaze」）を維持する。BIOSはまた、同期オーディオ付きフレームシーケンスとしてピースの演奏をキャプチャする録画システムも管理する。 + +\subsection{Disk API} + +Disk（\texttt{disk.mjs}、15,879行）はピースが使用する完全なAPIサーフェスを提供する。ピースのロード、ライフサイクルのディスパッチを管理し、描画プリミティブ、オーディオ、入力、ネットワーク、UIコンポーネントを公開する。すべてのグラフィックス操作は即時モードであり、保持されるシーングラフはない。 + +\subsection{モジュールローダー} + +モジュールローダーはセッションサーバーからWebSocket経由でJavaScriptモジュールをストリーミングし、HTTPプロキシチェーンをバイパスしてロードを高速化する。最初のロード時にモジュールはIndexedDBにキャッシュされる。以降のアクセスではキャッシュからロードし、セッションサーバーが利用できない場合はHTTPにフォールバックする。これにより、リピート訪問時のピースロードがほぼ瞬時になる。 + +% ============ 4. THE PIECE MODEL ============ + +\section{ピースモデル} +\label{sec:pieces} + +ピースは単一の\texttt{.mjs}（JavaScript）または\texttt{.lisp}（KidLisp）ファイルであり、最大5つのライフサイクル関数をエクスポートする： + +\begin{lstlisting}[style=acjsstyle] +function boot({ wipe, screen, params }) { + // Runs once when piece loads +} + +function paint({ wipe, ink, line, circle }) { + wipe(|\textcolor{jsstr}{"navy"}|) + ink(|\textcolor{jsstr}{"pink"}|) + circle(screen.width / |\textcolor{jsnum}{2}|, + screen.height / |\textcolor{jsnum}{2}|, |\textcolor{jsnum}{50}|) +} + +function act({ event: e }) { + if (e.is(|\textcolor{jsstr}{"keyboard:down:space"}|)) { } +} + +function sim() { } // Per-frame logic + +export { boot, paint, act, sim }; +\end{lstlisting} + +各関数に渡されるAPIオブジェクトは以下を提供する： + +\begin{table}[h] +\small +\centering +\begin{tabularx}{\columnwidth}{lX} +\toprule +\textbf{カテゴリ} & \textbf{関数} \\ +\midrule +グラフィックス & \texttt{wipe}, \texttt{ink}, \texttt{line}, \texttt{box}, \texttt{circle}, \texttt{poly}, \texttt{paste}, \texttt{plot}, \texttt{flood} \\ +テキスト & \texttt{write}, \texttt{form}, \texttt{TextInput} \\ +入力 & \texttt{event}, \texttt{pen}, \texttt{hand}, \texttt{gamepad} \\ +オーディオ & \texttt{sound}, \texttt{speaker}, \texttt{microphone}, \texttt{melody} \\ +UI & \texttt{ui.Button}, \texttt{ui.TextInput}, \texttt{cursor} \\ +システム & \texttt{screen}, \texttt{jump}, \texttt{store}, \texttt{net}, \texttt{send} \\ +\bottomrule +\end{tabularx} +\caption{ピースAPIのカテゴリ分類。} +\label{tab:api} +\end{table} + +ピースはProcessingのスケッチブックモデル——探索したい各アイデアに1つのソースファイル——を、小さく単一目的のプログラム間のユーザーレベルの組み合わせ可能性というUnixの哲学と組み合わせている。 + +% ============ 5. MULTI-LANGUAGE RUNTIME ============ + +\section{多言語ランタイム} +\label{sec:languages} + +ACは2つのプログラミング言語をサポートする：JavaScript（ESモジュール、\texttt{.mjs}）とKidLisp（最小限のLisp方言、\texttt{.lisp}）。システムには現在336のJavaScriptピースと18のKidLispピースが含まれている。 + +JavaScriptピースはWeb APIとDisk APIサーフェスに完全にアクセスできる。KidLispピースは15,161行のツリーウォーキング評価器~\citep{scudder2026kidlisp}を使用し、描画、色、変換、数学、アニメーション、オーディオ用の118の組み込み関数を提供する——ファイルI/O、ネットワーク、文字列操作はなく、任意のユーザー投稿コードの安全な実行を可能にしている。 + +KidLispプログラムはURL上で直接入力することもできる。式\texttt{(wipe blue)}はURLエンコードされ、\texttt{aesthetic.computer/(\%28wipe\%20blue\%29)}で実行できる。ショートコード（\texttt{\$cow}、\texttt{\$27z}）はMongoDBルックアップを通じて保存されたプログラムに解決される。 + +このアーキテクチャは追加の言語バックエンドをサポートする。ピースのライフサイクル（boot/paint/act/sim/leave）をターゲットにしてDisk APIを呼び出せる言語であれば、新しい評価器として統合できる。 + +% ============ 6. THE PROMPT ============ + +\section{プロンプト} +\label{sec:prompt} + +プロンプト（\texttt{prompt.mjs}、9,386行）はそれ自体がピースであり、システム内で最も複雑なものである。主要なナビゲーションインターフェースとして機能し、60以上のコマンドを実装している。 + +\subsection{URLルーティング} + +すべてのピースはパーサー（\texttt{parse.mjs}）を通じてURLアドレス可能であり、複数のパラメータ規約をサポートする： + +\begin{itemize} + \item \textbf{シンプル}：\texttt{aesthetic.computer/notepat} + \item \textbf{コロンパラメータ}：\texttt{tone:440:sine} + \item \textbf{スペースパラメータ}：\texttt{notepat 180 major}（URL内ではチルダにエンコード） + \item \textbf{ユーザーピース}：\texttt{@bash/hub} + \item \textbf{KidLispコード}：\texttt{\$cow} + \item \textbf{ショートコード}：\texttt{!abc}（動画）、\texttt{*bako}（時計メロディ） +\end{itemize} + +\subsection{コマンドカテゴリ} + +プロンプトはナビゲーション（\texttt{list}、\texttt{back}）、制作（\texttt{publish}、\texttt{source}、\texttt{pack}）、ソーシャルインタラクション（\texttt{chat}、\texttt{mood}、\texttt{profile}）、アイデンティティ（\texttt{handle}、\texttt{login}）、録画（\texttt{tape}、\texttt{share}）、およびピースのオーケストレーション（\texttt{merry}：ピースを時系列で連鎖させる）のためのコマンドを実装している。 + +% ============ 7. SOCIAL INFRASTRUCTURE ============ + +\section{ソーシャルインフラストラクチャ} +\label{sec:social} + +ソーシャル機能が外部サービス（GitHub、Discord）として提供されるプラットフォームとは異なり、ACはソーシャルインフラストラクチャをランタイムに直接統合している。 + +\subsection{アイデンティティ} + +ユーザーはプロンプトで\texttt{@handles}（識別子）を登録する。ハンドルはMongoDBのユーザーレコードに解決され、公開ピースの名前空間として機能する（\texttt{@handle/piece-name}）。2026年3月時点で2,801のハンドルが登録されている。 + +\subsection{リアルタイム通信} + +セッションサーバーはWebSocketベースのリアルタイム機能を提供する：パブリックチャット（18,020件のメッセージ）、プレゼンストラッキング（各ユーザーが現在閲覧中のピース）、および協働ピースのマルチプレイヤー状態同期。 + +\subsection{ムードフィード} + +ユーザーはプロフィールに表示される短いテキスト更新（「ムード」）を投稿する。ムードフィードはMongoDBとATProto（Blueskyの基盤プロトコル）の両方に書き込まれ、より広いソーシャルネットワークとの連合を実現している。 + +\subsection{ライブプロフィール} + +プロフィールピースはリアルタイムのスコアカードを表示する：オンライン/オフライン状態、現在のピース、WebSocketレイテンシ、そして描画作品、公開ピース、KidLispプログラム、チャットメッセージ、ムードフィードの数——すべてWebSocketストリームを通じてリアルタイムで更新される。 + +% ============ 8. PUBLISHING & DISTRIBUTION ============ + +\section{公開と配布} +\label{sec:publishing} + +\subsection{公開とソース} + +\texttt{publish}コマンドはピースをDigitalOcean Spacesにアップロードし、MongoDBにユーザーのハンドルで登録する。\texttt{source}コマンドは任意のピースのソースコードをフォークテンプレートとしてダウンロードする。 + +\subsection{パッケージングシステム} + +\texttt{pack}コマンドはovenサービスを通じてピースを自己完結型のHTMLファイルにバンドルする。出力にはピースコード、すべてのランタイム依存関係、埋め込みフォントが含まれ、サーバーなしでオフラインで動作する単一ファイルとなる。これにより、メール、USBドライブ、ブロックチェーンミンティング（Tezos/Teia）、アーカイブを通じた配布が可能になる。 + +\subsection{カスタムドメイン} + +ピースはカスタムドメイン上でスタンドアロンアプリケーションとして提供できる。\texttt{notepat.com}は\texttt{notepat}音楽シーケンサーピースにルーティングされ、\texttt{kidlisp.com}はKidLisp IDEを提供する。Netlifyエッジ関数がホスト名を検出し、ソーシャル共有用のカスタムOpen Graphメタタグを含めて適切にルートを書き換える。 + +\subsection{メディアエクスポート} + +ovenサービス（\texttt{oven.aesthetic.computer}）はFFmpegを使用して録画セッションをMP4動画に変換し、ソーシャル共有用のOpen Graphプレビュー画像を生成し、ピースURLのQRコードを提供する。録画はフレーム単位のタイミングデータとオプションのオーディオを含むフレームシーケンスをキャプチャする。 + +% ============ 9. DEVELOPMENT HISTORY ============ + +\section{開発の歴史} +\label{sec:history} + +以下のタイムラインは、Aesthetic Computerリポジトリのgit履歴（2022年12月から2026年3月までの11,045件のコミット）から再構成したものである。プロジェクトの概念的起源は2020年のNo Paintに遡る。 + +\subsection{起源：No Paint（2020--2021年）} + +No Paintは2020年にリリースされたピクセルペイントツールで、カスタムブラシやスタンプを寄稿する非技術的なユーザーコミュニティを構築した。手動統合のボトルネック——各寄稿に開発者の介入が必要だった——が、誰でもインタラクティブプログラムを即座に公開できるプラットフォームの構築を推進した。 + +\subsection{基盤期（2022--2023年）} + +現在のリポジトリは2022年12月に始まった。2023年を通じて（3,766件のコミット）、コアランタイムが形成された：BIOSレンダリングループ、Disk API、プロンプトインターフェース、ピースライフサイクル、および初期の組み込みピースセット。2023年9月に初期の活動ピーク（542件のコミット）を迎え、マルチプレイヤーセッションサーバーとリアルタイムチャットが統合された。 + +\subsection{拡張期（2024年）} + +2024年（2,698件のコミット）にKidLisp（4月）、ペイントシステム、ハンドル登録、ムードフィード、録画インフラストラクチャが追加された。活動は4月（379件のコミット）と10月（336件のコミット）にピークを迎えた。 + +\subsection{プラットフォーム統合（2025--2026年）} + +開発は2025年後半に急激に加速した：10月に700件のコミット、11月に663件、12月に525件。KidLisp IDEが\texttt{kidlisp.com}で公開され（2025年11月）、ATProto/Bluesky連合が追加され、パッケージングシステムが成熟し、ovenサービスがソーシャルプレビュー画像の生成を開始した。2026年1月は月間最多（1,095件のコミット）であり、KidLispの改善、カオスモード、3Dプリミティブ、ライブパフォーマンス用のステージモードが推進力となった。 + +\begin{table}[h] +\small +\centering +\begin{tabular}{lrl} +\toprule +\textbf{期間} & \textbf{コミット数} & \textbf{マイルストーン} \\ +\midrule +2020--2021年 & --- & No Paint；AC構想 \\ +2022年12月 & 47 & リポジトリ作成 \\ +2023年 & 3{,}766 & コアランタイム、プロンプト、マルチプレイヤー \\ +2024年 & 2{,}698 & KidLisp、ペイント、ハンドル、ムード \\ +2025年1--5月 & 318 & メンテナンス期間 \\ +2025年6--12月 & 2{,}962 & IDE、パッケージング、oven、連合 \\ +2026年1--3月 & 2{,}149 & カオスモード、3D、ステージモード \\ +\midrule +\textbf{合計} & \textbf{11{,}045} & \\ +\bottomrule +\end{tabular} +\caption{各期間の開発活動。} +\label{tab:history} +\end{table} + +本プロジェクトは主に単一の著者によるものである：@jeffreyがコミットの約98\%を占め、他に14名の協力者が参加している。 + +% ============ 10. EVALUATION ============ + +\section{評価} +\label{sec:evaluation} + +2026年3月時点の採用指標を表~\ref{tab:adoption}に示す。 + +\begin{table}[h] +\small +\centering +\begin{tabular}{lr} +\toprule +\textbf{指標} & \textbf{値} \\ +\midrule +組み込みピース & 354（336 JS + 18 KidLisp） \\ +ユーザー公開ピース & 265 \\ +APIエンドポイント & 78 \\ +登録ハンドル & 2,801 \\ +作成された描画 & 4,404 \\ +KidLispプログラム & 16,244 \\ +チャットメッセージ & 18,020 \\ +コアランタイム（行数） & $\sim$63,300 \\ +\bottomrule +\end{tabular} +\caption{プラットフォーム指標（2026年3月）。} +\label{tab:adoption} +\end{table} + +\subsection{観察} + +\textbf{発見メカニズムとしてのプロンプト。}ユーザーはプロンプトに推測を入力することでピースを発見したと報告している——\texttt{piano}、\texttt{draw}、\texttt{chat}といった単語を試し、既存のコンテンツを見つける。このセレンディピティはフラットな名前空間の意図的な設計成果である。 + +\textbf{モバイルでのエンゲージメント。}モバイルファーストの設計は、ユーザーが通勤中、待合室、教室でスマートフォンからACと対話することを意味する——デスクトップのクリエイティブコーディングツールでは到達できないコンテキストである。 + +\textbf{ソーシャル構造がリテンションを促進。}チャット、ムードフィード、プロフィールの統合がソーシャルコンテキストを創出し、ユーザーを継続的に呼び戻している。ユーザーはムードを確認し、チャットで返信し、検索ではなくソーシャルアクティビティを通じて新しいピースを発見する。 + +\subsection{限界} + +単一ファイルのピースモデルはプログラムの複雑性を制限する。ピースは共有ライブラリをインポートしたり、複数のモジュールに分割したりできない（ただし\texttt{\$code}参照を通じてKidLispプログラムを埋め込むことは可能である）。プロンプトインターフェースは経験豊富なユーザーにとって強力であるが、視覚的なガイダンスを期待する新規ユーザーにとっては急な発見曲線がある。 + +% ============ 11. RELATED WORK ============ + +\section{関連研究} + +\textbf{クリエイティブコーディング。}Processing~\citep{reas2007processing}とp5.js~\citep{mccarthy2015p5js}がスケッチブックパラダイムを確立した。ACは単一ファイルモデルを継承しつつ、エディタをプロンプトに置き換え、ソーシャルインフラストラクチャを追加した。 + +\textbf{ソーシャルプログラミング。}Scratch~\citep{resnick2009scratch}は、ソーシャルな共有が教育プログラミングへのエンゲージメントを促進することを実証した。OpenProcessing~\citep{openprocessing2009}とGlitch~\citep{glitch2017}はクリエイティブコードのためのWebベースの共有プラットフォームを提供している。ACの違いは、ソーシャル機能を周辺のウェブサイトの機能としてではなく、ランタイム自体の一部にしている点にある。 + +\textbf{ライブコーディング。}Hydra~\citep{hydra2019}はブラウザベースのライブビジュアルコーディングを提供する。Sonic Pi~\citep{aaron2016sonic}はライブコーディングREPLを備えた音楽教育向けツールである。ACのステージモード（全画面キャンバス上の透過エディタオーバーレイ）は同様のライブパフォーマンスシナリオをサポートする。 + +\textbf{モバイルクリエイティブツール。}ほとんどのクリエイティブコーディングツールはデスクトップ利用を前提としている。ACのモバイルファースト設計——タッチ入力、プロンプトナビゲーション、スマートフォンサイズのキャンバス——は、デスクトップツールでは到達できないコンテキストを対象としている。 + +% ============ 12. CONCLUSION ============ + +\section{結論} + +\ac{}は、クリエイティブコンピューティングプラットフォームがグラフィカルIDEではなくテキストプロンプトを中心に構成できること、ソーシャルインフラストラクチャをランタイムに直接統合することで外部ソーシャルレイヤーとは異なるエンゲージメントパターンを生み出すこと、そしてモバイルファーストでブラウザネイティブなアプローチによりデスクトップツールでは到達できないコンテキストでクリエイティブコーディングをアクセス可能にすることを実証している。 + +本プラットフォームの354の組み込みピース、265のユーザー公開ピース、16,244のKidLispプログラムは、成長を続けるクリエイティブコンピューティング作品のコーパスを構成している。プロンプトが楽器であるという比喩——ユーザーがメニューナビゲーションではなく記憶と即興を通じて流暢さを構築すること——は、人々とクリエイティブソフトウェアとの関係のオルタナティブモデルを提供する。 + +ACはISCライセンスの下でオープンソースであり、\url{https://github.com/digitpain/aesthetic.computer}で公開されている。 + +\vspace{0.5em} +\noindent\textit{英語原版からの翻訳。原版は \url{https://papers.aesthetic.computer} を参照。} + +\vspace{0.5em} +\noindent\textbf{ORCID:} \href{https://orcid.org/0009-0007-4460-4913}{0009-0007-4460-4913} + +% ============ REFERENCES ============ + +\bibliographystyle{plainnat} +\bibliography{references} + +\end{document} diff --git a/papers/arxiv-api/api-cards.tex b/papers/arxiv-api/api-cards.tex index 3214c1c32c..b3b0204481 100644 --- a/papers/arxiv-api/api-cards.tex +++ b/papers/arxiv-api/api-cards.tex @@ -107,20 +107,22 @@ \thispagestyle{empty} \vspace*{\fill} \begin{center} -\includegraphics[height=8em]{pals}\par\vspace{0.3em} -{\acbold\fontsize{20pt}{24pt}\selectfont\color{acdark} From \texttt{setup()} to \texttt{boot()}}\par -\vspace{0.3em} -{\fontsize{10pt}{12pt}\selectfont\color{acpink} Processing at the Core of the Piece API}\par -\vspace{0.8em} -{\normalsize\color{cyan!70!blue}\textbf{@jeffrey}}\par +\includegraphics[height=9em]{pals}\par\vspace{0.1em} +{\acbold\fontsize{18pt}{22pt}\selectfont\color{acdark} From \texttt{setup()} to \texttt{boot()}}\par +\vspace{0.1em} +{\fontsize{9pt}{11pt}\selectfont\color{acpink} Processing at the Core of the Piece API}\par +\vspace{0.4em} +{\normalsize\color{cyan!70!blue}\href{https://prompt.ac/@jeffrey}{\textbf{@jeffrey}}}\par {\small\color{acgray} Aesthetic.Computer}\par {\small\color{acgray} ORCID: \href{https://orcid.org/0009-0007-4460-4913}{0009-0007-4460-4913}}\par -\vspace{0.8em} -\rule{0.6\textwidth}{1pt}\par \vspace{0.4em} -{\small\color{acpink!40}\textit{working draft --- not for citation}}\par -\vspace{0.3em} -{\footnotesize\color{acgray} March 2026}\par +\rule{0.5\textwidth}{0.5pt}\par +\vspace{0.15em} +\colorbox{yellow!60}{\small\color{red!80!black}\textbf{\textit{working draft --- not for citation}}}\par +\vspace{0.1em} +{\footnotesize\color{acgray} March 2026 · \href{https://github.com/whistlegraph/aesthetic-computer/commit/2113ef735}{2113ef735}}\par +\vspace{0.1em} +{\footnotesize\color{acgray}\href{https://papers.aesthetic.computer/piece-api-26-arxiv-da-cards.pdf}{Dansk} · \href{https://papers.aesthetic.computer/piece-api-26-arxiv-es-cards.pdf}{Español} · \href{https://papers.aesthetic.computer/piece-api-26-arxiv-zh-cards.pdf}{{\accjk 中文}} · \href{https://papers.aesthetic.computer/piece-api-26-arxiv-ja-cards.pdf}{{\accjk 日本語}}}\par \end{center} \vspace*{\fill} diff --git a/papers/arxiv-api/api-ja.tex b/papers/arxiv-api/api-ja.tex new file mode 100644 index 0000000000..1f4a38b63f --- /dev/null +++ b/papers/arxiv-api/api-ja.tex @@ -0,0 +1,765 @@ +% !TEX program = xelatex +\documentclass[10pt,letterpaper,twocolumn]{article} + +% === GEOMETRY === +\usepackage[top=0.75in, bottom=0.75in, left=0.75in, right=0.75in]{geometry} + +% === FONTS === +\usepackage{fontspec} +\usepackage{unicode-math} +\usepackage{xeCJK} +\setCJKmainfont{Droid Sans Japanese} +\setmainfont{Latin Modern Roman} +\setsansfont{Latin Modern Sans} +\setmonofont{Latin Modern Mono}[Scale=0.85] +\newfontfamily\acbold{ywft-processing-bold}[ + Path=../../system/public/type/webfonts/, + Extension=.ttf +] +\newfontfamily\aclight{ywft-processing-light}[ + Path=../../system/public/type/webfonts/, + Extension=.ttf +] + +% === PACKAGES === +\usepackage{xcolor} +\usepackage{titlesec} +\usepackage{enumitem} +\usepackage{booktabs} +\usepackage{tabularx} +\usepackage{fancyhdr} +\usepackage{hyperref} +\usepackage{graphicx} +\usepackage{ragged2e} +\usepackage{listings} +\usepackage{natbib} +\usepackage[colorspec=0.92]{draftwatermark} + +% === COLORS === +\definecolor{acpink}{RGB}{180,72,135} +\definecolor{acpurple}{RGB}{120,80,180} +\definecolor{acdark}{RGB}{64,56,74} +\definecolor{acgray}{RGB}{119,119,119} +\definecolor{draftcolor}{RGB}{180,72,135} + +% === DRAFT WATERMARK === +\DraftwatermarkOptions{ + text=WORKING DRAFT, + fontsize=3cm, + color=draftcolor!18, + angle=45, + pos={0.5\paperwidth, 0.5\paperheight} +} + +% === JS SYNTAX COLORS === +\definecolor{jskw}{RGB}{119,51,170} +\definecolor{jsfn}{RGB}{0,136,170} +\definecolor{jsstr}{RGB}{170,120,0} +\definecolor{jsnum}{RGB}{204,0,102} +\definecolor{jscmt}{RGB}{102,102,102} + +% === PROCESSING SYNTAX COLORS === +\definecolor{pjkw}{RGB}{204,102,0} +\definecolor{pjfn}{RGB}{0,102,153} +\definecolor{pjcmt}{RGB}{102,102,102} + +% === HYPERREF === +\hypersetup{ + colorlinks=true, + linkcolor=acpurple, + urlcolor=acpurple, + citecolor=acpurple, + pdfauthor={@jeffrey}, + pdftitle={setup()からboot()へ：ピースAPIの核心におけるProcessingの継承}, +} + +% === SECTION FORMATTING === +\titleformat{\section} + {\normalfont\bfseries\normalsize\uppercase} + {\thesection.} + {0.5em} + {} +\titlespacing{\section}{0pt}{1.2em}{0.3em} + +\titleformat{\subsection} + {\normalfont\bfseries\small} + {\thesubsection} + {0.5em} + {} +\titlespacing{\subsection}{0pt}{0.8em}{0.2em} + +\titleformat{\subsubsection} + {\normalfont\itshape\small} + {\thesubsubsection} + {0.5em} + {} +\titlespacing{\subsubsection}{0pt}{0.6em}{0.1em} + +% === HEADER/FOOTER === +\pagestyle{fancy} +\fancyhf{} +\renewcommand{\headrulewidth}{0pt} +\fancyhead[C]{\footnotesize\color{draftcolor}\textit{作業草稿 --- 引用不可}} +\fancyfoot[C]{\footnotesize\thepage} + +% === LIST SETTINGS === +\setlist[itemize]{nosep, leftmargin=1.2em, itemsep=0.1em} +\setlist[enumerate]{nosep, leftmargin=1.2em} + +% === COLUMN SEPARATION === +\setlength{\columnsep}{1.8em} + +% === PARAGRAPH SETTINGS === +\setlength{\parindent}{1em} +\setlength{\parskip}{0.3em} + +% Hyphenation for narrow two-column layout +\tolerance=800 +\emergencystretch=1em +\hyphenpenalty=50 + +% === LISTINGS === +\lstdefinelanguage{processing}{ + morekeywords=[1]{void,int,float,boolean,color,String,class,new,if,else,for,while,return,public,private,extends,import}, + morekeywords=[2]{setup,draw,mousePressed,mouseDragged,keyPressed,size,background,stroke,noStroke,fill,noFill,line,rect,ellipse,point,triangle,beginShape,endShape,vertex,translate,rotate,scale,pushMatrix,popMatrix,frameRate,width,height,mouseX,mouseY,pmouseX,pmouseY,key,keyCode,mouseButton,frameCount}, + sensitive=true, + morecomment=[l]{//}, + morecomment=[s]{/*}{*/}, + morestring=[b]", +} + +\lstdefinelanguage{p5js}{ + morekeywords=[1]{function,let,const,var,if,else,for,while,return,new,class,export}, + morekeywords=[2]{setup,draw,mousePressed,mouseDragged,keyPressed,createCanvas,background,stroke,noStroke,fill,noFill,line,rect,ellipse,point,triangle,beginShape,endShape,vertex,translate,rotate,scale,push,pop,frameRate,width,height,mouseX,mouseY,pmouseX,pmouseY,key,keyCode,mouseButton,frameCount,createGraphics,random,noise,map,constrain,dist,lerp}, + sensitive=true, + morecomment=[l]{//}, + morestring=[b]", + morestring=[b]', + morestring=[b]`, +} + +\lstdefinelanguage{acjs}{ + morekeywords=[1]{function,export,const,let,var,return,if,else,new,async,await,import,from,for}, + morekeywords=[2]{wipe,ink,line,box,circle,write,screen,params,colon,jump,send,store,net,sound,speaker,pen,event,boot,paint,act,sim,leave,paste,plot,poly,flood,form,cursor,handle,num,geo,ui}, + sensitive=true, + morecomment=[l]{//}, + morestring=[b]", + morestring=[b]', + morestring=[b]`, +} + +\lstdefinestyle{processingstyle}{ + language=processing, + keywordstyle=[1]\color{pjkw}\bfseries, + keywordstyle=[2]\color{pjfn}\bfseries, + commentstyle=\color{pjcmt}\itshape, + stringstyle=\color{jsstr}, +} + +\lstdefinestyle{p5style}{ + language=p5js, + keywordstyle=[1]\color{jskw}\bfseries, + keywordstyle=[2]\color{pjfn}\bfseries, + commentstyle=\color{jscmt}\itshape, + stringstyle=\color{jsstr}, +} + +\lstdefinestyle{acjsstyle}{ + language=acjs, + keywordstyle=[1]\color{jskw}\bfseries, + keywordstyle=[2]\color{jsfn}\bfseries, + commentstyle=\color{jscmt}\itshape, + stringstyle=\color{jsstr}, +} + +\lstset{ + basicstyle=\ttfamily\small, + breaklines=true, + frame=single, + rulecolor=\color{acgray!30}, + backgroundcolor=\color{acgray!5}, + xleftmargin=0.5em, + xrightmargin=0.5em, + aboveskip=0.5em, + belowskip=0.5em, + numbers=none, + tabsize=2, +} + +\newcommand{\acdot}{{\color{acpink}.}} +\newcommand{\ac}{\textsc{Aesthetic.Computer}} + +\begin{document} + +% ============ TITLE BLOCK ============ + +\twocolumn[{% +\begin{center} +{\acbold\fontsize{22pt}{26pt}\selectfont\color{acdark} \texttt{setup()} から \texttt{boot()} へ}\par +\vspace{0.2em} +{\aclight\fontsize{11pt}{13pt}\selectfont\color{acpink} ピースAPIの核心におけるProcessingの継承}\par +\vspace{0.6em} +{\normalsize @jeffrey}\par +{\small\color{acgray} Aesthetic.Computer}\par +{\small\color{acgray} ORCID: \href{https://orcid.org/0009-0007-4460-4913}{0009-0007-4460-4913}}\par +\vspace{0.3em} +{\small\color{acpurple} \url{https://aesthetic.computer}}\par +\vspace{0.6em} +\rule{\textwidth}{1.5pt} +\vspace{0.5em} +\end{center} + +\begin{center} +{\small\color{draftcolor}\textbf{[ 作業草稿 --- 引用不可 ]}} +\end{center} +\vspace{0.3em} + +\begin{quote} +\small\noindent\textbf{概要。} +すべてのクリエイティブコーディングプラットフォームはコアAPIを定義する——プログラムが世界を感知し、その上に描画するための基本関数のセットである。Processingは2001年に\texttt{setup()}/\texttt{draw()}とグローバル描画プリミティブ（\texttt{background()}、\texttt{stroke()}、\texttt{ellipse()}）によるパターンを確立し、このパターンは20年にわたるクリエイティブコーディングツールに影響を与えた。p5.jsは2014年にこのモデルをブラウザに持ち込み、JavaScriptとDOMに適応させながらAPIサーフェスを維持した。\ac{}（AC）は2021年に開始され、その核心においてProcessingの思想を継承しつつ、複数の構造的次元で拡張している：2関数ライフサイクルを5つ（\texttt{boot}、\texttt{paint}、\texttt{act}、\texttt{sim}、\texttt{leave}）に拡張し、グローバル状態をデストラクチャリングによるAPI注入に置き換え、シミュレーションとレンダリングを異なる周波数で分離し、各プログラムをビルドステップなしでURLアドレス可能にしている。本稿では、Processingの理念がACピースAPIにどのように存在しているかを追跡し、Design By Numbers、Processing、p5.js、ACのライフサイクルモデル、描画プリミティブ、入力処理、状態管理戦略を比較する。ACのAPI設計——Processingの即時モードグラフィックスモデルを基盤として——が\emph{スケッチブック}の比喩（書く、実行する、捨てる）を\emph{楽器}の比喩（起動する、演奏する、練習する、戻る）へと拡張することを論じる。 +\end{quote} +\vspace{0.5em} +}] + +% ============ 1. INTRODUCTION ============ + +\section{はじめに} + +クリエイティブコーディングAPIの歴史は、プログラマーが最初に何を言うべきかを決定する歴史である。Design By Numbers~\citep{maeda2001dbn}では、最初のステートメントは座標とグレースケール値だった：\texttt{Paper 50}。Processing~\citep{reas2003processing}では、\texttt{setup()}内の\texttt{size(200, 200)}だった。p5.js~\citep{mccarthy2015p5js}では、\texttt{createCanvas(400, 400)}だった。\ac{}では、プログラマーはキャンバスを宣言する必要が一切ない——ランタイムが\texttt{screen.width}と\texttt{screen.height}を既成事実として提供し、最初の意味のあるステートメントは通常\texttt{wipe()}——描画を開始するための画面クリア——である。 + +これらは恣意的な違いではない。それぞれがプラットフォームの前提とプログラマーが指定すべきものとの間の決定を反映しており、これらの決定が蓄積されることで、著者とマシンの間に根本的に異なる関係が形成される。本稿ではProcessingからp5.jsを経てACへのAPI系譜を追跡し、各遷移を一連の設計決定として捉える：何が保持され、何が変更され、その変更が何を意味するか。 + +本稿の貢献は3つある：（1）Processing、p5.js、ACのライフサイクルモデル、描画API、入力システム、状態管理戦略の詳細な技術比較、（2）ACがProcessingモデルから逸脱した背景にある設計思想の分析、（3）ACピースAPIがスケッチブックの比喩から\emph{楽器の比喩}と呼ぶものへの移行を体現しているという議論——プログラマーとプログラムの関係が、探索的で使い捨てのものではなく、継続的で、パフォーマティブで、練習に基づくものであるモデル。 + +% ============ 2. THE PROCESSING MODEL ============ + +\section{Processingモデル（2001年）} +\label{sec:processing} + +Processing~\citep{reas2007processing}はビジュアルアーティストのための「ソフトウェアスケッチブック」として設計された。そのAPIは2つのライフサイクル関数とグローバル描画プリミティブのセットを中心としている。 + +\subsection{ライフサイクル：\texttt{setup()}と\texttt{draw()}} + +\begin{lstlisting}[style=processingstyle,caption={最小限のProcessingスケッチ。}] +void setup() { + size(400, 400); + background(0); +} + +void draw() { + stroke(255); + ellipse(mouseX, mouseY, 20, 20); +} +\end{lstlisting} + +\texttt{setup()}は1回実行され、\texttt{draw()}はデフォルト60fpsの頻度で毎フレーム実行される。この2関数モデルはProcessingの最も影響力のある設計決定である。アニメーションの認知的オーバーヘッドを、レンダリングループの管理から2つの空欄を埋めることに削減した：「1回だけ起こることは何か？」と「毎フレーム起こることは何か？」 + +このモデルは意図的に最小限に保たれている。明示的な\texttt{input()}関数はなく、マウスとキーボードの状態は自動更新されるグローバル変数（\texttt{mouseX}、\texttt{mouseY}、\texttt{key}、\texttt{keyCode}）として利用可能である。イベントコールバック（\texttt{mousePressed()}、\texttt{keyPressed()}）は存在するが、必須のエントリポイントではなくオプションの補助である。 + +\subsection{描画プリミティブ} + +Processingの描画APIはPostScriptとOpenGLから継承した\emph{ステートフルパイプライン}モデルを採用している：状態設定呼び出し（\texttt{stroke()}、\texttt{fill()}、\texttt{strokeWeight()}）が永続的なグラフィックスコンテキストを変更し、形状呼び出し（\texttt{ellipse()}、\texttt{rect()}、\texttt{line()}）がそのコンテキストを使用してレンダリングする。コンテキストは明示的にリセットされない限りフレーム間で持続する。 + +\begin{lstlisting}[style=processingstyle,caption={ステートフル描画コンテキスト。}] +void draw() { + fill(255, 0, 0); // Set fill: red + stroke(0); // Set stroke: black + strokeWeight(3); // Set weight: 3px + ellipse(100, 100, 50, 50); // Uses above + rect(200, 100, 50, 50); // Also uses above + // State persists into next frame +} +\end{lstlisting} + +この状態の持続性は強力（統一されたスタイルに必要なコードが少ない）であると同時にエラーを招きやすい（忘れられた状態がフレーム間でリークする）。Processingは\texttt{pushStyle()}/\texttt{popStyle()}と\texttt{pushMatrix()}/\texttt{popMatrix()}で対処しているが、これらは上級者向けツールである。 + +\subsection{グローバルスコープ} + +すべてのProcessingプログラムは単一のグローバル名前空間を共有する。\texttt{setup()}と\texttt{draw()}の外部で宣言された変数はどこからでもアクセス可能である。描画関数（\texttt{line()}、\texttt{ellipse()}、\texttt{background()}）はグローバルである。入力変数（\texttt{mouseX}、\texttt{mouseY}）はグローバルである。これによりスコープ、インポート、依存性注入の理解が不要になる——初心者にとって極めて重要——が、プログラムを組み合わせたり分離したりすることが不可能になる。 + +% ============ 3. THE P5.JS TRANSITION ============ + +\section{p5.jsへの移行（2014年）} +\label{sec:p5js} + +p5.js~\citep{mccarthy2015p5js}はProcessingのJavaScript再実装である。主要な貢献はProcessingモデルをブラウザに持ち込んだことだが、移植にはいくつかの適応が必要だった。 + +\subsection{ライフサイクルの維持} + +\begin{lstlisting}[style=p5style,caption={最小限のp5.jsスケッチ。}] +function setup() { + createCanvas(400, 400); +} + +function draw() { + background(220); + ellipse(mouseX, mouseY, 50, 50); +} +\end{lstlisting} + +\texttt{setup()}/\texttt{draw()}モデルはそのまま維持された。認知モデルは同一：2つの関数、グローバル描画プリミティブ、自動アニメーションループ。この連続性は意図的であった——p5.jsはWeb上のProcessingであることを目指しており、新しい言語ではなかった。 + +\subsection{キャンバス作成} + +最も明白な変更は\texttt{createCanvas()}が\texttt{size()}を置き換えたことである。これは表面的な変更ではない：Processingでは\texttt{size()}がアプリケーションウィンドウを構成するが、p5.jsでは\texttt{createCanvas()}がDOM内にHTML \texttt{}要素を作成する。スケッチは表示領域全体を占有するのではなく、既存のページと折り合いを付けなければならない。 + +\subsection{インスタンスモード} + +p5.jsはグローバル名前空間からの重要な脱出口を導入した：\emph{インスタンスモード}。 + +\begin{lstlisting}[style=p5style,caption={p5.jsインスタンスモード。}] +const sketch = (p) => { + p.setup = () => { + p.createCanvas(400, 400); + }; + p.draw = () => { + p.background(220); + p.ellipse(p.mouseX, p.mouseY, 50, 50); + }; +}; +new p5(sketch); +\end{lstlisting} + +インスタンスモードはすべてのAPI関数を名前空間（\texttt{p.}）の後ろにラップし、1つのページ上に複数のスケッチを配置でき、グローバル汚染を回避できる。しかし、ほとんどのp5.jsコードはグローバルモードで書かれ、インスタンスモードはスケッチをより大きなアプリケーションに埋め込むときにのみ使用される。プレフィックス記法（\texttt{p.ellipse}対\texttt{ellipse}）は冗長性を増し、Processingを魅力的にした「直接書く」品質を低下させる。 + +\subsection{変わったものと変わらなかったもの} + +p5.jsが維持したもの：2関数ライフサイクル、グローバル描画プリミティブ、ステートフルグラフィックスコンテキスト、フレームベースアニメーション、「スケッチ」のアイデンティティ。適応したもの：DOM向けキャンバス作成、レンダラー選択（2D/WebGL）、ブラウザイベント向けイベント処理、組み合わせ用インスタンスモードの追加。解決しなかったもの：シミュレーションとレンダリングの混同、構造化された入力処理の欠如、単一ファイル分離の問題。 + +% ============ 4. THE AC PIECE API ============ + +\section{ACピースAPI（2021年--）} +\label{sec:ac} + +\ac{}のピースAPI~\citep{scudder2026ac}はProcessingの核心的な洞察——即時モードグラフィックス、単一ファイルプログラム、ライフサイクル関数——の上に構築され、2つではなく5つの関心事を中心に拡張している。 + +\subsection{5つのライフサイクル関数} + +\begin{lstlisting}[style=acjsstyle,caption={最小限のACピース。}] +function boot({ screen, params }) { + // Runs once on load +} + +function paint({ wipe, ink, line, screen }) { + wipe("navy"); + ink("pink").circle( + screen.width / 2, + screen.height / 2, + 50 + ); +} + +function act({ event: e }) { + if (e.is("keyboard:down:space")) { + // Handle spacebar + } +} + +function sim() { + // Update state at 120fps +} + +export { boot, paint, act, sim }; +\end{lstlisting} + +5つの関数は： + +\begin{itemize} + \item \texttt{boot(\$api)} --- ピースのロード時に1回実行される。Processingの\texttt{setup()}を拡張し、プログラマーが構成するのではなくランタイムが画面を提供する。 + \item \texttt{paint(\$api)} --- レンダリングが必要なフレームごとに実行される。\texttt{draw()}の即時モードモデルを継承するが、純粋にビジュアル：慣例としてロジックを含まず、状態を変更しない。 + \item \texttt{act(\$api)} --- 各入力イベントにつき1回呼び出される。Processingのイベントコールバック（\texttt{mousePressed()}、\texttt{keyPressed()}）を単一の統一エントリポイントに統合する。 + \item \texttt{sim(\$api)} --- 固定120Hzで実行され、各レンダリングフレーム中に複数回実行される可能性がある。Processingに等価物はない；最も近い類似物は固定タイムステップゲームループ~\citep{nystrom2014game}である。 + \item \texttt{leave(\$api)} --- 終了時のクリーンアップ。Processingに等価物はなく、スケッチは単純に終了する。 +\end{itemize} + +各関数はオプションである。\texttt{paint}のみをエクスポートするピースも有効で実行可能なプログラムである。 + +\subsection{デストラクチャリングによるAPI注入} + +Processingモデルに対する最も構造的に重要な拡張は、\textbf{グローバルスコープにAPI関数が一切存在しない}ことである。ピースが使用するすべての関数はパラメータとして受け取る： + +\begin{lstlisting}[style=acjsstyle,caption={ACにおけるAPIデストラクチャリング。}] +function paint({ wipe, ink, line, box, + circle, screen, num }) { + wipe(0, 0, 30); + ink(255, 100, 180); + const cx = num.lerp(0, screen.width, 0.5); + circle(cx, screen.height / 2, 40); +} +\end{lstlisting} + +この設計にはいくつかの帰結がある： + +\begin{enumerate} + \item \textbf{グローバル汚染なし。}モジュールレベルの変数はピースの状態であり、API関数はパラメータである。衝突しうる環境名前空間は存在しない。 + \item \textbf{自己文書化するインポート。}各関数の先頭にあるデストラクチャリングパターンが、その関数が使用するAPIサーフェスを正確に宣言し、インライン依存性マニフェストとして機能する。 + \item \textbf{組み合わせ可能性。}複数のピースがAPI衝突なしに同一のJavaScriptコンテキスト内で共存でき、プラットフォームのピース切り替えと埋め込みメカニズムを実現する。 + \item \textbf{発見可能性。}エディタの自動補完がデストラクチャリングされたパラメータオブジェクトに対して動作し、APIを探索する自然な方法を提供する。 +\end{enumerate} + +これはp5.jsのインスタンスモードパターンを結論まで推し進めたものである：プログラマーは各呼び出しの前に\texttt{p.}をプレフィックスする代わりに、関数シグネチャで必要な関数のみをデストラクチャリングし、1回で済ませる。 + +\subsection{シミュレーションとレンダリングの分離} +\label{sec:simsep} + +Processingの\texttt{draw()}は2つの関心事を混同している：状態の更新とピクセルのレンダリング。これは単純なスケッチでは機能するが、複雑さが増すと問題が生じる：物理シミュレーションがフレームレートに束縛される、入力遅延がレンダリングコストに結合する、「何が起こったか」と「どう見えるか」の分離が困難になる。 + +ACはこれらを明示的に分離する： + +\begin{itemize} + \item \texttt{sim()}は表示リフレッシュレートに関係なく固定120Hzで実行される。60Hzディスプレイでは\texttt{sim()}は各\texttt{paint()}呼び出しごとに2回実行される。144Hzディスプレイでは比率が相応に調整される。 + \item \texttt{paint()}はディスプレイのリフレッシュレート（上限約165fps）で実行され、現在の状態のレンダリングのみを担当する。 + \item \texttt{act()}はイベント到着時に即座に実行され、各入力イベントにつき1回。 +\end{itemize} + +この3方向の分離は現代のゲームエンジンアーキテクチャ~\citep{nystrom2014game}を反映している：決定論的ロジックのための固定更新レート、滑らかな表示のための可変レンダリングレート、入力のためのイベントキュー。違いは、ACがこのアーキテクチャをフレームワークの背後に隠すのではなく、第一級APIとして公開していることである。 + +\subsection{統一されたイベント処理} + +Processingは入力処理をグローバル変数とオプションのコールバックに分散させている： + +\begin{lstlisting}[style=processingstyle] +// Processing: scattered input model +void draw() { + if (mousePressed) { /* poll state */ } +} +void mousePressed() { /* callback */ } +void keyPressed() { /* callback */ } +void mouseDragged() { /* callback */ } +\end{lstlisting} + +ACは文字列ベースのイベントマッチングシステムにより、すべての入力を\texttt{act()}に統合する： + +\begin{lstlisting}[style=acjsstyle] +function act({ event: e, pen }) { + if (e.is("touch")) { } + if (e.is("draw")) { } + if (e.is("lift")) { } + if (e.is("keyboard:down:a")) { } + if (e.is("keyboard:down:space")){ } + if (e.is("gamepad:a")) { } + if (e.is("reframed")) { } +} +\end{lstlisting} + +\texttt{event.is()}パターンは、入力モダリティ（タッチ、マウス、キーボード、ゲームパッド、MIDI、ハンドトラッキング）を横断する統一インターフェースを単一の関数で提供する。イベント文字列は階層的（\texttt{keyboard:down:a}）であり、任意の特異性レベルでマッチングできる。これはProcessingコールバックの組み合わせ爆発を、単一のフィルタ可能なストリームに置き換える。 + +\subsection{描画プリミティブ：デフォルトでステートレス} + +Processingとp5.jsは、\texttt{fill()}、\texttt{stroke()}、変換呼び出しが明示的に変更されるまで持続するステートフルグラフィックスコンテキストを使用する。ACはこれを反転する：\texttt{ink()}関数は\emph{直後の}描画呼び出しのために色を設定し、チェーン呼び出しをサポートするAPIオブジェクトを返す： + +\begin{lstlisting}[style=acjsstyle] +function paint({ wipe, ink, line, circle }) { + wipe("black"); + ink("red").circle(50, 50, 20); + ink("blue").line(0, 0, 100, 100); + // No state leaks between calls +} +\end{lstlisting} + +\texttt{ink()}の戻り値チェーンパターンにより、色-形状のペアが視覚的にアトミックになる：各描画操作はコンテキスト変更のシーケンスではなく、自己完結した式である。これにより、あるカテゴリのバグが排除される：前のフレーム（または前の関数）から忘れられた\texttt{fill()}や\texttt{stroke()}呼び出しが無関係な描画操作に漏れ出すことがなくなる。 + +\texttt{wipe()}関数はProcessingの\texttt{background()}を置き換え、より短く能動的な動詞を使用している。この命名は意図的である：「wipe」（拭く）は属性設定ではなく物理的動作（表面を拭く）を暗示する。 + +\subsection{キャンバス構成不要} + +Processingでは\texttt{setup()}の最初の行は通常\texttt{size(w, h)}である。p5.jsでは\texttt{createCanvas(w, h)}である。ACでは等価の呼び出しがない。ランタイムがデバイスのネイティブ解像度でキャンバスを提供し、ピースは読み取り専用プロパティ\texttt{screen.width}と\texttt{screen.height}を通じて受け取る。 + +これはモバイルファーストの設計思想を反映している：スマートフォンとタブレットでは「正しい」キャンバスサイズはデバイスの画面である。プログラマーにサイズを指定させると、固定キャンバスと可変ビューポートの間にミスマッチが生じる。ACはキャンバスをデフォルトでアダプティブにすることで、このミスマッチを排除する。 + +% ============ 5. API SURFACE COMPARISON ============ + +\section{APIサーフェス比較} +\label{sec:comparison} + +表~\ref{tab:lifecycle}はライフサイクルモデルを比較する。表~\ref{tab:drawing}は描画プリミティブを比較する。 + +\begin{table}[h] +\small +\centering +\begin{tabularx}{\columnwidth}{lXXX} +\toprule + & \textbf{Processing} & \textbf{p5.js} & \textbf{AC} \\ +\midrule +初期化 & \texttt{setup()} & \texttt{setup()} & \texttt{boot(\$)} \\ +レンダリング & \texttt{draw()} & \texttt{draw()} & \texttt{paint(\$)} \\ +ロジック & （draw内） & （draw内） & \texttt{sim(\$)} \\ +入力 & コールバック & コールバック & \texttt{act(\$)} \\ +クリーンアップ & --- & \texttt{remove()} & \texttt{leave(\$)} \\ +\midrule +レンダリング周波数 & 60fps & 60fps & ディスプレイHz \\ +ロジック周波数 & 60fps & 60fps & 120fps固定 \\ +スコープ & グローバル & グローバル/インスタンス & 注入 \\ +\bottomrule +\end{tabularx} +\caption{ライフサイクル比較。\texttt{\$}はデストラクチャリングによるAPI注入を示す。} +\label{tab:lifecycle} +\end{table} + +\begin{table}[h] +\small +\centering +\begin{tabularx}{\columnwidth}{lXX} +\toprule +\textbf{Processing/p5} & \textbf{AC} & \textbf{備考} \\ +\midrule +\texttt{background()} & \texttt{wipe()} & 動詞、属性ではない \\ +\texttt{fill() + stroke()} & \texttt{ink()} & 統合、チェーン可能 \\ +\texttt{ellipse()} & \texttt{circle()} & 形状で命名 \\ +\texttt{rect()} & \texttt{box()} & より短い名前 \\ +\texttt{line()} & \texttt{line()} & 変更なし \\ +\texttt{point()} & \texttt{plot()} & グラフィックスの比喩 \\ +\texttt{text()} & \texttt{write()} & 能動的動詞 \\ +--- & \texttt{flood()} & 領域塗りつぶし \\ +--- & \texttt{paste()} & バッファ合成 \\ +--- & \texttt{form()} & 3Dレンダリング \\ +\bottomrule +\end{tabularx} +\caption{描画プリミティブ比較。} +\label{tab:drawing} +\end{table} + +\subsection{命名哲学} + +ProcessingのAPI名は記述的な名詞と形容詞である：\texttt{background}、\texttt{ellipse}、\texttt{rect}、\texttt{stroke}、\texttt{fill}。設定または描画される\emph{もの}を記述する。ACの名前は能動的な動詞である：\texttt{wipe}、\texttt{ink}、\texttt{plot}、\texttt{write}、\texttt{flood}、\texttt{paste}。\emph{プログラマーが何をしているか}——表面に対して行う物理的動作——を記述する。 + +記述的命名から命令的命名への移行は楽器の比喩と一致する：楽器のインターフェースは動詞（押す、吹く、叩く、弾く）で理解されるのであり、名詞ではない。AC APIは一連の動作として読める：「画面を拭く、ピンクのインクを付ける、円を描く、テキストを書く。」 + +\subsection{カラーモデル} + +Processingは独立した\texttt{fill()}と\texttt{stroke()}呼び出しを使用し、それぞれがRGB、HSB、16進値を受け取る。fill/strokeの区別はベクターグラフィックス（SVG、PostScript）にマッピングされ、形状が内部色と境界色を持つ。 + +ACは単一の\texttt{ink()}呼び出しを使用し、後続のすべての操作の色を設定する。fill/strokeの区別はない：\texttt{circle()}がフィルかストロークかは環境コンテキストではなく引数に依存する。\texttt{ink()}関数は以下を受け取る： + +\begin{itemize} + \item RGB値：\texttt{ink(255, 100, 50)} + \item 名前付き色：\texttt{ink("pink")}、\texttt{ink("navy")} + \item グレースケール：\texttt{ink(128)} + \item アルファ：\texttt{ink(255, 0, 0, 128)} +\end{itemize} + +名前付き色は初心者にとって重要なユーザビリティの選択である。Processingがピンクを得るために\texttt{fill(255, 192, 203)}を必要とするところ、ACは\texttt{ink("pink")}を受け付ける。名前付き色のボキャブラリーは意図的に小さく喚起力に富み、パレットよりも絵具箱に近い。 + +% ============ 6. STATE MANAGEMENT ============ + +\section{状態管理} +\label{sec:state} + +\subsection{Processing：グローバル変数} + +\begin{lstlisting}[style=processingstyle] +int x = 100; +int y = 100; + +void draw() { + background(0); + x += 1; + ellipse(x, y, 20, 20); +} +\end{lstlisting} + +Processingにおける状態はグローバル変数に存在する。これはシンプルだが、よく知られた問題がある：すべての状態がどこからでも変更可能で、カプセル化がなく、プログラム状態とAPI状態が区別できない。 + +\subsection{AC：モジュールレベルクロージャ} + +\begin{lstlisting}[style=acjsstyle] +let x = 100; +let y = 100; + +function sim() { + x += 1; +} + +function paint({ wipe, ink, circle }) { + wipe(0); + ink(255).circle(x, y, 20); +} + +export { sim, paint }; +\end{lstlisting} + +ACピースはESモジュールである。モジュールスコープで宣言された変数はピースにプライベートであり、ランタイム、他のピース、グローバルスコープからは見えない。\texttt{export}文はライフサイクル関数のみを可視にする。これはドキュメントで強制される慣例ではなく、JavaScriptモジュールシステムによる保証である。 + +状態の変更（\texttt{sim}）と状態のレンダリング（\texttt{paint}）の分離は、\texttt{paint}がモジュール状態の純粋関数であるという規律を促進する——変数を読み取り描画するが、変更しない。これは強制されないが、API構造がそれを自然なパターンにする。 + +% ============ 7. THE GENEALOGY ============ + +\section{系譜} +\label{sec:genealogy} + +\subsection{Design By Numbers（1999年）} + +MaedaのDesign By Numbers~\citep{maeda2001dbn}は核心的な洞察を導入した：最もシンプルなAPIを持つビジュアル出力のためのプログラミング環境。DBNにはアニメーションループがなく、プログラムは上から下へ1回実行される。プリミティブセットは最小限：\texttt{Paper}（背景）、\texttt{Pen}（線の太さ）、\texttt{Line}、\texttt{Set}（ピクセル）、および制御フロー。言語全体が午後のうちに学べる。 + +ACはDBNの命名のミニマリズム（短い能動的動詞）と、APIは網羅的に学習可能であるべきだという確信を継承している。 + +\subsection{Processing（2001年）} + +Processing~\citep{reas2003processing}はDBNに欠けていたものを追加した：アニメーション（\texttt{draw()}ループ）、インタラクション（\texttt{mouseX/Y}）、より豊富なプリミティブセット。またDBNが意図的に避けたものも追加した：状態（グラフィックスコンテキスト）、標準ライブラリ（数学、タイポグラフィ、画像読み込み）、コンパイルステップ（Java）。Processingの最大のイノベーションは個々の関数ではなく、\texttt{setup()}/\texttt{draw()}のペア：インタラクティブアニメーションの最も単純な表現である。 + +ACはライフサイクル関数モデルを継承するが、\texttt{draw()}を3つの関心事（\texttt{paint}、\texttt{sim}、\texttt{act}）に分割する。 + +\subsection{p5.js（2014年）} + +p5.js~\citep{mccarthy2015p5js}はProcessingをブラウザに持ち込み、スケッチをURL経由で即座に共有可能にした。これはACの前提条件：クリエイティブプラットフォームとしてのブラウザ。p5.jsはまたインスタンスモードを導入し、ACのAPI注入パターンを先取りした。 + +ACはブラウザネイティブの前提と共有可能性の原則（すべてのピースがURL）を継承するが、ページ内ライブラリモデルを完全なランタイムに置き換えた：ピースは\texttt{