【Viscuit】Processingで作った動きと（ほぼ）同じ動きを新ビスケットで実現する

ビスケットは誰でも簡単に楽しめるプログラミング言語です。
「メガネ」という仕組みを使うことで、簡単に「絵」を動かすことが可能です。さらに「メガネ」の組み合わせによっては、より複雑な「絵」の動きも実現できます。

今回は初めにProcessingで見本を作成し、その動きをビスケットで実現してみたいと思います。

■Processing見本

■ビスケットで実現

目次

◯ Processingで見本作成
◯ Viscuitで作成
　◇ 作成する場所
　◇ 新ビスケット設定画面
　◇ 「ぶひん」作成
　　・回転体
　　・四角
　◇「ステージ」作成
　◇ 回転する「ぶひん」の作り方
　　・「ぶひん」を回転モードに切り替える
　　・「ぶひん」を回転する
　　・「ぶひん」の回転モードを終了する
　◇「メガネ」作成
　◇「メガネ」の内容で動く
◯ Processingで「四角」のみ表示する
◯ おわりに

◯ Processingで見本作成

見本として「回転体」を作りその先に「四角」を表示し、「回転体」の円周上に「四角」を並べるプログラムをProcessingで作成します。

ソースコード（Pythonモード）は以下となります。

cnt = 1    #四角表示数

def setup():
   size(712, 400)
   rectMode(CENTER)
   colorMode(HSB, 360, 100, 100)
   frameRate(1)

def draw():
   global cnt
   background(180, 30, 100)    #背景色：水色
   translate(width/2, height/2)
   
   #円周上の四角表示（前回描画分まで）
   noFill()                    #塗りつぶし:なし
   stroke(30, 70, 100)         #線の色:オレンジ
   strokeWeight(4)             #線の太さ:4

   for i in range(cnt-1):
       rect(0, -125, 50, 50)
       #30度回転
       rotate(radians(360/12))
   
   #回転体表示
   #パーツ（四角）
   stroke(240, 100, 100)       #パーツ（四角）の色:青
   fill(240, 100, 100)         #パーツ（四角）の色:青
   rect(0,0,50,50)
   #パーツ（棒）
   stroke(120, 100, 60)        #パーツ（棒）の色:緑
   line(0,-30,0,-95)

   #円周上の四角表示（今回描画）
   noFill()                    #塗りつぶし:なし
   stroke(30, 70, 100)         #線の色:オレンジ  
   rect(0, -125, 50, 50)

   #30度回転
   rotate(radians(360/12))
   
   cnt+=1

「回転体」と「四角」は座標を変更して表示するのではなく、rotate()で座標軸自体を30度ずつずらして表示しています。

◯ Viscuitで作成

Viscuitでも同様に、回転体を作りその先に四角を表示し、回転体の円周上に四角を並べるプログラムをビスケットで作成します。
以下に作成する手順を示します。

◇ 作成する場所

今回作成する「あそぶばしょ」は、「じゆうにつくる」あおはらっぱです。
※「じゆうにつくる」であれば、どこでも構いません。

◇ 新ビスケット設定画面

新ビスケット設定画面ですが、表示速度は「一番遅い」、方眼紙モードは「設定なし」です。

◇ 「ぶひん」作成

新ビスケット制作画面で、以下の「ぶひん」を作成します。

・回転体
・四角

・回転体

回転しながら「四角」を表示する位置を示します。

・四角

表示タイミングで「回転体」の円周上に表示されます。

◇ 「ステージ」作成

以下のように「回転体」を1つ置きます。

◇ 回転する「ぶひん」の作り方

今回、「メガネ」を作るときに予め回転させた「ぶひん」を用意する必要があります。
以下に回転させた「ぶひん」の作り方を示します。

・「ぶひん」を回転モードに切り替える

新ビスケット制作画面で、回転させたい「ぶひん」を作業場所にドラッグ＆ドロップした後、「回転」ボタンをタップします。

・「ぶひん」を回転する

「ぶひん」が回転モードに切り替わり、回転させたい「ぶひん」に回転用の目盛りが表示されるので、回転させたい角度まで目盛りをドラッグ＆ドロップします。

・「ぶひん」の回転モードを終了する

「ぶひん」の回転させたい角度が決まったら、「回転」ボタンをタップします。

回転モードが終了し、回転させたい「ぶひん」の目盛りが消えます。

◇ 「メガネ」作成

新ビスケット画面で以下の「メガネ」を作成します。

・「回転体」の上に「四角」を置き、回転する「回転体」に置き換える。

・「回転体」の上に「四角」を置き、回転する「回転体」に置き換える

「メガネ」については、一般的に以下のように解釈します。

　「メガネ」左側に表示されている状態であった場合、
　「メガネ」右側に表示されている状態に書き換える。

今回の「メガネ」ですが、以下のように解釈します。

　「メガネ」左側：「回転体」が表示されている場合、
　「メガめ」右側：「回転体」の上に「四角」を置き、
　　　　　　　　　「回転体」を回転する「回転体」に
　　　　　　　　　　置き換えます。

なお、回転する「回転体」は、上記の回転モードで作成した「回転体」を使用します。

◇ 「メガネ」の内容で動く

「ぶひん」と「メガネ」作成後、「ステージ」に「ぶひん」が置かれた状態で、「メガネ」の内容で回転体が動き、四角を置き始めます。

以下の動画で動きを確認できます。

◯ Processingで「四角」のみ表示する

ビスケットの「回転体」は「四角」の表示位置を決めるための「ぶひん」です。Processingでは「四角」の表示位置はrect()内で決まっているので、無理に「回転体」を表示しなくて良いのであれば、Processingのソースコードは以下となり、実際に「四角」を表示するコードは”### 四角表示部分”以下の2行となります。

rotate() → ビスケット：回転する「回転体」
rect() → ビスケット：「四角」を置く

cnt = 0    #四角表示数

def setup():
   size(712, 400)
   rectMode(CENTER)
   frameRate(1)

def draw():
   global cnt
   translate(width/2, height/2)

   ###
   ### 四角表示部分
   ###
   rotate(radians(30*cnt))    #回転体を30度回転させる
   rect(0, -125, 50, 50)      #四角を表示

   cnt+=1

◯ おわりに

Processingとビスケットを比べると、ほぼ同じ動きをしているにもかかわらず、ソースコードの違いに驚かれると思います。
ビスケットは書き換え型言語と呼ばれていて、「メガネ」左側の状態を右側の状態への書き換えを行っています。
今回、1つの「メガネ」で動作していますが、なぜこの記述で動くのか、「メガネ」作成の項をもう一度確認していただき、理解を深めていただければと思います。

◇Viscuit（ビスケット）について

ビスケットはとても簡単なプログラミング言語です。 メガネという仕組みたった一つだけで単純なプログラムからとても複雑なプログラムまで作ることができます。 仕組みは単純ですが組み合わせ方が様々なので複雑なことができるのです。
ビスケットを使うとアニメーション・ゲーム・絵本などを簡単に作ることができます。 ビスケットを使いこなすには難しいことを覚える必要はありません。 だれでもプログラミングの楽しさと可能性を感じ取ることができるでしょう。さあ、いっしょにプログラミングを楽しみましょう。
※Viscuit公式サイトより掲載

【Viscuit】ビスケット公式サイト
   https://www.viscuit.com/