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

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

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

niisi.hatenablog.jp

概要

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

f:id:kirari0831:20161217233041g:plain

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

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

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

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

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

予備知識

Processingとは

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

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

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

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