Pietのエディタを作った話
•
14 likes•15,728 views
難解プログラミング言語「Piet」の解説とそのエディタを作った話です。 2015/08/21 Pidet公開しました。 https://github.com/kndama/Pidet
Recommended
More Related Content
What's hot
What's hot (20)
More from 京大 マイコンクラブ
More from 京大 マイコンクラブ (20)
Recently uploaded
Recently uploaded (9)
Pietのエディタを作った話
- 5. 自己紹介 • ID: dama • 所属: 京都大学文学部⼈文学科2回生 • 役職: 代表(会⻑の繰り上がり) • 活動: 競プロ・DTMとか • 趣味: けん玉
- 6. 作った物(1) • Unambi Sweeper – こんなやつ。
- 7. 作った物(1) • Unambi Sweeper – Mine Sweeper とかいうパズルアクション ゲームを改良した。 – 運ゲーになるのがウザかったので、必ず論理 的に解けるようにした。 – キーボードプレイがし易いように、UIも若⼲ 改善した。
- 8. 作った物(2) • Unimbi Sweeper – さっきと何が違うんや。 • さっきのはUn a mbi、こっちはUn i mbi。 • UnambiはUnambiguous(=両義的でない)の略。 – Unambi SweeperをUnityに移植したやつ。 • だから Uni mbi。 – ただUnityを触りたいがために作った。
- 11. 難解プログラミング言語ってなんや • 意図的に読解が困難なように設計された プログラミング言語のこと。 • 英語でEsoteric programming language (略してesolang)とかいう。
- 12. 難解プログラミング言語の例 • Brainf*ck – コンパイラが非常に小さい。 – '>', '<', '+', '-', '.', ',', '[', ']'の8個の命令か ら成る。 – 詳しくは@_primenumberに聞いて下さい。 • Lazy K – 純粋関数型言語。 – 組み込み関数が3つしか無い。 – 詳しくは@nonamea774に聞いて下さい。
- 13. Pietってなんや(再) • ソースコードがドット絵。 • 抽象画っぽく⾒える。 • David Morgan-Mar氏がPiet Mondrianの 作品に影響を受けて考案した。 • "Hello, world!"と出⼒する ソースコードの⼀例。→ – ふつくしい。
- 14. Pietって誰や • Piet Mondrian(1872-1944) • オランダ、アメルスフォールト出身の画家。 • 本格的な抽象絵画を 描いた最初期の画家。 • このスライドの背景も Piet氏の作品。
- 15. 蛇足 • David Morgan-Mar氏は、他にも Ook! などいくつかのesolangを考案している。 – Ook!は、オランウータンの鳴き声"Ook.", "Ook!", "Ook?"の3つのトークンを2つずつ組 み合わせて、Brainf*ckの8個の命令を置き換 えたもの。 • A, Misa, NyarukoなどBrainf*ckの派生は多い。 • 最初はMondrianにしようとしたが、既に 使われていたのでPietにしたらしい。
- 17. 色 • Pietで使う⾊は、6*3+2=20⾊。 • ⾊相: 赤→⻩→緑→シアン→⻘→マゼンタ→赤 • 明度: 明⾊→普通→暗⾊→明⾊ • 追加⾊は処理系によって⽩や⿊になる。 #C00000 dark red #C0C000 dark yellow #00C000 dark green #00C0C0 dark cyan #0000C0 dark blue #C000C0 dark magenta #FFC0C0 light red #FFFFC0 light yellow #C0FFC0 light green #C0FFFF light cyan #C0C0FF light blue #FFC0FF light magenta #FF0000 red #FFFF00 yellow #00FF00 green #00FFFF cyan #0000FF blue #FF00FF magenta #FFFFFF white #000000 black
- 18. codel • Pietでは⼀つ⼀つの⾊の違いが重要。 – ⾒易くするために拡大することがよくある。 • それらを"pixel"と呼んでしまうと、 拡大前の尺度か後の尺度か紛らわしい。 • そこで拡大前の1pixel分を"codel"と呼ぶ。 – 要するにPiet上で意味を持つ最小単位。
- 19. カラーブロック • Pietの基本単位はカラーブロック。 • 縦か横に隣接した同⾊のcodelの塊。 – 斜めは違うよ。 • カラーブロック中に違う⾊の"穴"を内包す る場合、その穴はカラーブロックには含ま れず無視される。 – このシアンのカラーブロックは 8 codel。
- 20. スタック • Pietは記憶領域としてスタックを⼀つだけ 持っている。 • データは整数型しか持たない。 – コマンドを使うとUnicode値と解釈して文字を 出⼒することも出来る(後述)。
- 21. スタックとは • ⼀応スタックを知らない⼈のために。 • 後入れ先出しのデータ構造。 – 後から入れたデータから先に出していく。 – 積み木をどんどん上に積んでいって、取ると きも上から取っていく感じ。 • 入れる動作を"push"、出す動作を"pop"と いう。
- 22. 実⾏の流れ • Pietのインタプリタは左上のcodelから プログラムの実⾏を始める。 • インタプリタは"Direction Pointer"(DP)を 持っている。 – DPは上下左右のいずれかを指す。 • 初期値は右。 • 更に"Codel Chooser"(CC)も持っている。 – CCは左か右を指す。 • 初期値は左。
- 31. コマンド • コマンドは、プログラムポインタが移動す るときの、移動元と移動先のカラーブロッ クの⾊の差によって示される。 – ⾊の"差"とは「⾊相」と「明度」の変化量の こと。 – ⽩と⿊は処理が異なる(後述)。
- 32. コマンド一覧 • 例えば、移動元の⾊がlight redだとすると以下 のようになる。 • 次から各コマンドの説明。 pop multiply not switch in(number) out(char) なし add divide greater duplicate in(char) push substract mod pointer roll out(number) 変化なし 1段階 2段階 3段階 4段階 5段階 変化 なし 1段階 2段階
- 33. push & pop • push – 移動元のカラーブロックに含まれるcodelの数 をスタックにプッシュする。 • pop – スタックから1つポップしてその値を破棄する。
- 34. 四則演算 • add – スタックから2つポップして加算した結果を プッシュする。 • substract – スタックから2つポップして、2つ目にポップ した値から1つ目にポップした値を引いた結果 をプッシュする。 – 例えばスタックが{2, 3, 5, 7}となっていたら、 7, 5の順にポップされ 5 - 7 = -2 が積まれる。
- 35. 四則演算(続き) • multiply – スタックから2つポップして乗算した結果を プッシュする。 • divide – スタックから2つポップして、2つ目にポップ した値を1つ目にポップした値で割った"商"を プッシュする。 – 割る割られるの順序の考え方はsubstractと 同じ。
- 37. 論理値 • not – スタックから1つポップしてその値が0なら1を、 0以外なら0をプッシュする。 • greater – スタックから2つポップして2つ目の値が1つ目 より大きければ1を、そうでなければ0をプッ シュする。
- 38. DPとCC • pointer – スタックから1つポップしてその値の分だけ DPを時計回りに回転させる。 – 負数なら反時計回り。 • switch – スタックから1つポップしてその値の分だけ CCを切り替える。 – 要するに奇数なら切り替わって偶数なら切り 替わらない。
- 39. 仲間外れ • duplicate – スタックのトップの値をコピーしてプッシュ する。 • roll – スタックから2つポップして、2つ目分の深さ までのスタックの値を1つ目分の値の分だけ回 転させる。 – 1回転するというのは、トップの値をスタック の指定された深さに埋め込み、それ以降の値 が1つずつ上に上がっていくことを意味する。
- 40. roll詳説 • ちょっと分かりにくいので具体的に説明。 • {1, 2, 3, 4, 3, 2}とあった場合。 – 2, 3 とポップして、深さ3まで2回転すること になる。 – 深さ3とは{1, 2, 3, 4}のうち{2, 3, 4}の部分。 – まず1回転すると{1, 4, 2, 3}。 – もう1回転で{1, 3, 4, 2}。 • こんな感じ。
- 41. ⼊出⼒ • in(number) – 標準入⼒から数値を受け取りプッシュする。 • in(char) – 標準入⼒から1文字受け取りそのUnicode値を プッシュする。 • out(number) – スタックから1つポップして、標準出⼒に渡す。 • out(char) – スタックから1つポップして、その値を Unicode値として持つ1文字を標準出⼒に渡す。
- 42. 例外処理 • これらのコマンドが実⾏できない場合は、 単純に無視される。 • 例えば、 – ポップするしたい数の値がスタックに無い。 – 0で除算。 – rollの深さが負。
- 45. 白ブロック • ⽩ブロックはフリーゾーン。 • インタプリタが⽩ブロックに差し掛かった 場合、 1.DP方向に⼀直線に滑って⾏く。 2.カラーブロックに辿り着けばそこに移動する が、この移動によるコマンドは実⾏されない。 • コマンド無しで⾊が変わるのでループの実装に便利。 3.もし⾏き⽌まりにぶつかったら、先述の流れ と同様にCCやDPを切り替えていく。
- 49. カイソウ • Piet展覧会に向けて作品を作っていた頃。 • とりあえずエディタが欲しかった。 • で、とりあえずこんなのがあった。
- 50. PietDev
- 51. PietDev • ここ。 http://www.rapapaing.com/blog/?page_id=6 • JavaScriptで書かれてる。 • グラフィカルな編集が出来る。 • ステップ実⾏でデバッグも出来る。 • 便利︕ • だが……
- 52. PietDevのココが糞 • Canvasが使いづらい。 – ペンツールは1codelずつしか描けない。 • カラーブロックはポチポチポチ…… – かといって範囲選択が出来るわけではない。 • ポチポチポチ…… • Undo・Redoが出来ない。 • Canvasの幅、高さ、あるいはcodelの拡大 率を変えると…… – リセットされる︕︕︕︕︕ • 「あっ、codelが足りない」とかなったら死ぬ。
- 53. 対応 • 最初はPietDevで我慢していたが諦めた。 • 代わりに、Edge(ドット絵エディタ)で描 いたものをPietDevにアップロードしてデ バッグするという方法を採った。 – つらみ。
- 54. そういえば • 前に作ったUnambi Sweeperだって Canvasみたいなもんやし知⾒が活かせる だろうから自分で作ってみるか。 – 実は全く活かせなかった。 • というわけで作ることにした。 – 実は、作り始めてからちゃんと探してみたら (何故最初に探さなかったのか)他にもいくつか エディタがあるらしいことが判明したのだが、 今更そんなことはどうでもいい。
- 57. 命名 • PietのIDEを作るので、 P i e t IDE
- 61. Pidetの仕様 • 基本的には、PietDevを改良した感じ。 – ペンツールで線が引ける。 – 範囲選択が出来る。 – Undo・Redoが出来る。 – 編集中に高さ・幅・codel拡大率を変えられる。 • その他 – 選択した⾊を基準として、他の⾊に対応する コマンドがパレット上に表示される。 – codelをダブルクリックすると、そのcodelを 含むカラーブロックを選択できる。
- 62. Pidetの仕様(続き) • 20⾊以外の⾊は⽩ブロックとして扱う。 • 例外処理がPietDevと多少異なる。 – PietDevの場合、コマンドが実⾏できなくて無 視する場合でも、とりあえずスタックから ポップだけされている場合がある。 – Pidetでは、実⾏不能な場合は何も操作しない ようにしている。
- 64. 言語 • C#で作った。
- 66. やり残したこと • 範囲選択からのコピペ。 • 選択範囲内での⾊の循環変更。 – 要するに相対的な変化量が変わらないように (コマンドが変わらないように)⾊を変えたい。 • Pietで実⾏出来るいい感じのアイコン。 – "Pidet"とか出⼒させたい。 • (追記)後ろ2つは発表後に実装済み。 • (2015/9/6 追記)アイコンも作成済み。
- 70. FizzBuzz • 知らない⼈のために。 • FizzBuzzは、1から順に整数を言っていく ゲーム。 • ただし、 – 3の倍数の時は"Fizz" – 5の倍数の時は"Buzz" – 15の倍数の時は"FizzBuzz" • と言う。
- 71. FizzBuzz(簡易版)の仕様 • 入⼒として整数を1つ取り、 1からその数までFizzBuzzをして出⼒する。 • ただし、"Fizz"とか"Buzz"とかいう文字列 は⻑すぎるので、"F"とか"B"に省略。 • 区切り文字は改⾏文字ではなく半角空⽩。 – 何故そうしたかは覚えていない。
- 72. イメージ • 例えばこんな感じ(適当)。 int n; cin >> n; for(int i = 1; i < n + 1; ++i) { if (i % 15 == 0) cout << "FB"; else if (i % 3 == 0) cout << "F"; else if (i % 5 == 0) cout << "B"; else cout << i; if (i < n) cout<< " "; }
- 74. 解決策 • "F"を出⼒する部分と"B"を出⼒する部分を 作って15の倍数の時は両方通るようにする。 – 実際にはスペース的な問題で"F"の部分が2箇 所になってしまった。 – つまり、"F"の2箇所を"F1"、"F2"とすると、 • 3の倍数の時は、"F1" • 5の倍数の時は、"B" • 15の倍数の時は、"F2"と"B" – を通る。
- 75. イメージ • こんな感じ(超適当)。 void f1() {cout << "F";} void f2() {cout << "F";} void b() {cout << "B";} int n; cin >> n; for(int i = 1; i < n + 1; ++i) { if (i % 15 == 0) {f2(); b();} else if (i % 3 == 0) f1(); else if (i % 5 == 0) b(); else cout << i; if (i < n) cout<< " "; }
- 76. うおおおおおおおおおおお • お披露目。 • というわけで作ります。 – (追記)作りました。 – (追記)ライブコーディング⾒てない⼈⽤にざっ くりとした解説を⽤意しました。
- 78. 以上 • ありがとうございました。 – Pidetのpublishは考え中です、すみません。 – 2015/08/21 Pidet公開しました。 • https://github.com/kndama/Pidet