スペース・デジタルポケット「GWスペシャル①『ビスケットの作り方』4/29」

2014年4月29日(火)、スペース・デジタルポケットにてGWスペシャル企画「ビスケットの作り方」を実施しました。

この講座は、ビスケットの開発者であるNTTコミュニケーション科学基礎研究所 原田博士を迎え、4月29日と5月5日の2日、それぞれ同じ内容で実施するものです。

IMG_0782

1)ビスケットの中の人になって考えてみよう

ビスケットでは、絵を描いて、メガネに絵を入れて「動く」「ぶつかったら〜〜する」などの命令を作ります。今回の講座は、自分が描いた絵や動きが、文字の言語ではどのように記述されているのかを観察します。

・ビスケットで変化を作り、文字の言語の変化でみる
・文字の言語で変化を作り、ビスケットで見る

まず始めに、
ビスケットから、XMLで記述したデータ(絵や動きのもと)を表示し、文字と数字を変えて、どんな変化があるか試してみました。ビスケットで描いている絵や、メガネで作る動きが、どんなルールになっているかがよくわかります。

練習では、
・2つの絵(A、B)を用意し、
・BがAの2倍の速度になるように設定し、
本当にそのように動くかを観察しました。

このシミュレーションのために、原田博士特製の、3Dプリンタで作ったコマとビスケット用方眼紙も登場。
IMG_0791

方眼紙を使って、座標をとりながら絵を作ると、いつものビスケットとは違う、正方形などのきっちりした形の絵が描けます。

IMG_0796
▲星のような形や、車をがんばって座標で作っています

かなり頭を使う作業なので、ところどころ休憩をいれながら、みんなでがんばります。

2)ビスケットのプログラム(メガネ)と同じ動きをさせてみよう(Javascript入門)

次に、ビスケットのデータを使い、Javascriptで動かしてみます。

「http://jsbin.com/」というサイトのサービスを使い、ウェブブラウザ上でjavascriptを編集して動かしてみます。
ビスケットで描いた絵のデータを持ってきて、原田さんに教えてもらった方法で動かすと・・・・?
絵をいくつも出したり、絵と絵が「ぶつかったら消える」を作ったりと、頭と手をたくさん動かして、プログラムを作りました。

作品例1

作品例2

この講座の様子をコマ撮りで撮影しました:

休憩もたくさん入れましたが、10:00〜17:00まで、本当にみなさん良くがんばりました!おつかれさまでした。

日時:2014年4月29日(火祝) 10:00〜17:00
場所:スペース・デジタルポケット
講師:原田康徳さん(博士、NTTコミュニケーション科学研究所)
内容:ワークショップ