プログラミング向上雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり。Twitterはこちら→ @niishi_8

「ビジュアルプログラミング言語×ライブプログラミング×Processing」新たなプログラミング環境を作ってみる

本記事はProcessing Advent Calendar 2016の18日目の記事となります。

去年に引き続き2回目の記事投稿で良ければ去年の記事もどうぞ。

niisi.hatenablog.jp

目次

概要

まずは今回紹介するものの全体像とどういった動作をするのか示したものをご覧ください。

f:id:kirari0831:20161217233041g:plain

 

一言でいえば、プログラミング初心者にもとっつきやすいプログラミング環境を作っています。ちょっと専門的な言葉使うとビジュアルプログラミング言語とライブプログラミングを取り入れたProcessing環境作ってます。

 

Processingは初心者向けとして有名ですが、それでも文字だけでプログラムするのは敷居が高い…ということでビジュアルプログラミングを導入。遊び感覚でプログラム組めるし文法や構文覚えなくていいしと良い事尽くめ。

しかし、やっぱり色んなプログラムを組めるようになるためにはテキストでプログラムを書けるようになった方が良い、ということでテキストプログラミングはそのままに。

また、いちいちソースコード書いてから実行ボタンを押さないと実行結果が確認できないのは面倒だし、プログラム編集と実行にタイムラグがあると各命令や制御構造などの理解の邪魔になると思ってライブプログラミングも導入。ソースコードを書けばすぐに実行結果が表示されるように。

 

ちなみに、これを作るのに7500行弱ソースコードを書きました。私のプログラミング人生で最長のものとなってます。ライブラリなどを使わず、見えているものや裏で動いているものは全部自分でProcessingで作っています。(サウンド関連はSoundライブラリを使用していますが…)

 

予備知識

Processingとは

プログラミング言語の一種です。グラフィック系に特化しており、プログラミング初心者やアート系の学生にも扱いやすいようなものになっています。文法はJavaと非常に似ていますが、おまじないが少なくプログラミングしやすくなっています。

ビジュアルプログラミングとは

一般的にはテキスト形式でプログラムを組みますが、ブロックのような視覚的なものでプログラミングできるようにしたものです。多くのビジュアルプログラミング言語はプログラムの各命令をブロックで表現しブロックの組み合わせでプログラミングできるようにしてあります。代表的なものとしては、ScratchGoogleが開発したBlocklyなどがあります。

 今年のProcessing Advent Calendarの7日目に投稿された方もこのビジュアルプログラミングでp5.js(ProcessingのJavaScript版)を作れる作品を公開されています⇒ブロックで亀 2016 | catch.jp blog

 

ライブプログラミングとは

一般的なプログラミングシステムでは①プログラムを書く②コンパイルする③実行する、と実行までにこのような手順を踏むと思います。EclipseのようなIDEでは実行ボタンを押せばコンパイルと実行を同時にやってくれるものもありますが、それでもプログラムを書き実行ボタンを押すまでは実行結果が分かりません。

ライブプログラミングではプログラムの実行中でもソースコードの変更を許容し、ソースコードの編集がリアルタイムに実行結果となってフィードバックされます。

 

機能紹介

 ライブプログラミング×ビジュアルプログラミング

タイルを置いた瞬間に即その命令の実行結果が出ます。これでその命令がどういう命令なのかすぐにわかり、与える引数を変えた時にどういう挙動の変化が起こるのか一目でわかります。

f:id:kirari0831:20161217205234g:plain

 

もちろん変数を使うこともできます。変数の中身を変えても実行結果はすぐに変わります。

f:id:kirari0831:20161217210348g:plain

 

ビジュアルプログラミング×テキストプログラミング

テキスト形式の記述にも対応してあり、テキストとタイル間はリアルタイムに相互変換します。タイルを組み合わせればテキストコードが出力されるのはもちろんのこと、テキストを記述するとリアルタイムにタイルに変換されます。テキストの中身やタイルの中身を書き換えただけでも変更が他方に反映されます。

f:id:kirari0831:20161217220857g:plain

ライブプログラミング×テキストプログラミング

もちろんテキスト編集からのライブプログラミングも可能。

f:id:kirari0831:20161217223259g:plain

ステップ実行つき

初心者にはありがたいステップ実行つき!ステップ実行モードに入れば右矢印キー左矢印キーを押すだけで1命令ずつ進むか戻るかすることができます。これでfor文やwhile文などの制御構造文やメソッドがどういう流れで処理されるかわかる。

 

f:id:kirari0831:20161217224617g:plain

 

 

drawメソッドでアニメーション

drawメソッドも使えるのでアニメーションをライブプログラミングすることも。

 

f:id:kirari0831:20161217225734g:plain

Processingおなじみの変数も使える

mouseX, mouseYやwidth, heightなども使える!関係ない話だけど条件式がtrueやfalseの値に応じて色が変わるのも見ていただけたらなと。

f:id:kirari0831:20161217230143g:plain

配列も使える、エラーのフィードバックも

 配列も使えます。普通の書き方でも糖衣構文でも。

エラーも適宜指摘します。不適切な構文を記入したりIndexOutOfBoundsExceptionやArithmeticExceptionなどが起きたらツールチップで表示させます。

f:id:kirari0831:20161217231430g:plain

おわりに

現在作成しているシステムを紹介していきましたがどうでしょうか。

まだまだ作成途中で色々とあらかったりバグがあったり機能が足りなかったりしょぼかったりとするんですが、少しずつ自分の思い描いているものに近づいているかなと思います。

もし、少しでも「良いな」と思ったらスターやブックマークしていただけると凄い励みになります!コメントもお待ちしてますので是非よろしくお願いします!