子どもプログラミング

Visucuit(ビスケット)講座 応用編- Visucuitで掛け算の計算機を作ろう(3)

昨日は、子供と一緒に苔テラリウム作りのワークショップに行ってきました。ゼニゴケを家で育てているのですが・・・なんだか瓶の中がぐちゃぐちゃで汚くなってしまったのでちゃんとプロの手ほどきを受けてみました。外で拾ってきた苔はカビや雑菌、他の植物のタネなんかが入っていて難しいそうです。
今回は、除菌した苔を使っているのでカビが生えるリスクは少ないとのこと。なるほどー。やっぱりプロは違いますね。
 
▼試薬瓶にピンセット、スポイト・・・学生時代の実験を思い出しました。

 
さて、今日もViscuit計算機の「掛け算」の続きです。
 
その前にこれまでのViscuitシリーズをまとめておきます。
 
基礎編
Visucuit(ビスケット)講座 入門編(1)
Visucuit(ビスケット)講座 入門編(2)-アイコン解説 ランド
Visucuit(ビスケット)講座 入門編(3)-アイコン解説 タッチ
Visucuit(ビスケット)講座 入門編(4)-アイコン解説 絵が増える
Visucuit(ビスケット)講座 入門編(5)-回転
Visucuit(ビスケット)講座 入門編(6)-タッチすると
Visucuit(ビスケット)講座 入門編(7)-ぶつかると
 
計算機シリーズ
Visucuitで2進数を勉強しよう
Visucuitで足し算の計算機を作ろう
Visucuitで掛け算の計算機を作ろう(1)
Visucuitで掛け算の計算機を作ろう(2)
 

1. 掛け算を分解してみる

前々回の記事では「足し算」型の掛け算計算機を。
前回の記事では「×2、×4、×8、×16」のの計算機を作りました。
 
今回はこれらのハイブリット型を作ります。その前に、掛け算を分解してみましょう。
 

1-1. 具体的な掛け算を分解してみよう

例えば、3×5という計算を分解してみましょう。
 
前回の記事で、「×2、×4、×8、×16」という計算がビスケットでできることがわかっていますので、この掛け算ができるように分解してみます。
 

3 × 5 = 3 × (1 + 4)
= (3 × 1) + (3 × 4)

 
ここで、5 を(1 + 2 + 2)ではなく、(1 + 4)としたのには理由があります。
 
それはこちらの図です。この計算機シリーズでは、この図のように2進数で「数」を表してきました。5はこの図に従えば(1 + 4)と表されるからです。

もちろん、2のところに「まる」を2個入れてもいいのですが、その場合、桁が繰り上がって結局(1 + 4)となるので同じことです。
 

1-2. 分解した結果を図にしてみよう

以下のように分解した結果を、Viscuitで図にしてみましょう。
 
3 × 5 = (3 × 1) + (3 × 4)
 
ということは・・・・前回の掛け算計算機と同じようにするとこんなかんじです。

前回のプログラムで、「×2、×4、×8、×16」を計算するところまでは作れていますので、最後にこの「まる」を足し合わせれば、掛け算計算機が作れますね。
 

2. Visucuit(ビスケット)で掛け算計算機を作ろう

だいたいのイメージができたところで、掛け算計算機を実際に作ってみたいと思います。
今回も部品とメガネが多くなりそうな予感・・・。頑張りましょう。
 
この作品もいつも通り
 ・ひとりでつくるで作ります。(みんなでつくるでは動作しません。)
 ・方眼紙モードで作ります。
 

2-1. 部品を準備しよう

前回の計算機も参考にしてつぎのように部品を用意しステージに並べました。


 
これとは別に、ステージに並べませんが以下の部品も準備します。

 

2-2. まるを並べるメガネを作る

最初に計算するためのまるを並べるメガネを作ります。まずはこちら。

これは、 3 × 5 の 「3」と「5」を入力するためのメガネです。
3を上の段に、5を右の縦列に、タッチで入れられるようにします。
 

 
次が、入力した上の段のまるを下の段にコピーするメガネです。

このメガネによって、計算の数値を入力すると自動的に下の段にまるが入ります。

 

2-3. 掛け算のきっかけのメガネを作る

まるの準備ができたら掛け算をスタートさせるメガネを作りましょう。
掛け算の「×」をタッチしたら掛け算がスタートするようにします。

続けてこんなメガネを作ります。


最後に、緑の矢印と青い矢印が消えるようにしましょう。

 

2-4. ×1、×2、×4のメガネを作る

次は、前回作った×1、×2、×4のメガネです。
×1はこんな感じです。

 
×2はこんな感じです。まるは1つ左にずれます。

 
×4はこんな感じです。まるは2つ左にずれます。

 
図は載せませんが、小さい×1、×2、×4を消すメガネも作っておきましょう。
 
ここまで作るとこんな感じになります。

 

2-4. 計算しない段を消すメガネを作る

上の図の場合、×2の段は今回の「3 × 5」では不要ですね。そこで、計算に不要な段を消すメガネを作ります。

最後に×を消すメガネも追加しておきます。
 
ここまで作って、タッチ画面で操作するとこのような結果になると思います。

 

今回、だいぶ長くなってしまったのでここまで。
最後に、この青い丸を足せば完成なのですが・・・まだまだ長くなりそうなので、続きは次回にしたいと思います。

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。