お絵かきプログラミング
Blockly 版

香川大学工学部 電子・情報工学科 香川研究室
香川研究室について

データのダウンロードは、 こちら

Java/C 版はこちら

はじめに

コンピューターはテレビ・自動車・炊飯器など、現代の世の中のあらゆるところで使われています。 コンピューターは、計算をしたりゲームをしたり、いろいろなことができる魔法の杖(ツエ)です。その魔法の杖を自由にあやつる魔術師になるためには、ちょっとした呪文体系(プログラミング言語)をマナぶ必要があります。 ここでは、その呪文の一部を使って、コンピューターにおえかきさせる体験をしましょう。コンピューターが得意なのは、規則的なくり返しのある絵を描くことです。できた作品は印刷して、ブックカバーやシールなどにできます。

(もう少し詳しく…)

コンピューターの素晴らしいところは、人間では不可能なくらい正確に数値を計算したり、複雑な条件判断を何度も間違えずにこなしたり、数万回でも同じことをいやがらずにくり返したりすることです。そのコンピューターはプログラムという指令(手順)がなければ動きません。ここでは、コンピューターのプログラムとはどういうものかあらましを紹介するために、プログラムによるお絵かきを紹介します。

プログラムの中で最も基本となるカタチは順次反復分岐の 3 つです。

順次(逐次)
いくつかの処理を、順に一つずつ実行していくこと。
(コンピューターはもちろんできます。)
反復
同じ処理を繰り返すこと。
(コンピューターが一番得意なことです。)
分岐(選択)
条件が成り立つか否かによって、処理を選ぶこと。
(繰り返すたびに全く同じことをしていては面白いことはできません。)

この 3 つはどんなプログラミング言語にも必ずある、もっとも基本的なカタチです。 この 3 つのカタチを使って、お絵かきしていきます。

作品例

サンプル 1
サンプル 2
サンプル 3
サンプル 4

さっそく、やってみよう

ここでは、 香川研究室が Processing を参考にして開発したプログラム部品集(ライブラリー)の BookCover.js と、 Blockly という Google が作ったブロック式のプログラム編集環境(エディター)を BookCover.js 向けに拡張したもの、 を使って、プログラムを作成していきます。

シール(カード)またはブックカバーを作ることができます。 好きなほうのチュートリアルを選んでください。

シール・カードブックカバー
サンプル
ここをクリック → チュートリアル シール・カード編 チュートリアル ブックカバー編

(管理者用)Blockly, CodeMirror

または、直接、サンプル集のページへ飛ぶ。
(気に入ったデザインのものを選んで、 Blockly ではじめる、をクリックして下さい。呪文(プログラム)が表示されますので、 数や文字列などを書き換えて実行してみて下さい。)

印刷の仕方

参考リンク

参考リンク(外部)


香川研究室