いろラボブログ

ビジュアルプロミング言語「Viscuit(ビスケット)」の使い方、プログラミング作品やゲーム、プログラミング教育のアイデアなどを掲載していきます。

『矢じるしオルゴールをつくろう!』ビスケット基本技マスターへの道!④重なったら…音がなる

f:id:koba1426:20190722112658p:image

「ビスケットプログラミング・基本技マスターへの道!」

今日は方眼紙(ほうがんし)モードを使って、

テクニックその④「重なったら…音がなる」

という技をしょうかいします!

 

♪マークの使い方が楽しく練習できます!

授業・ワークショップネタとしてもおススメです!

 

じゅんび  Viscuit(ビスケット)アプリを開く

f:id:koba1426:20190722114456j:image

「Viscuit(ビスケット)」のアプリをひらいて…

①「ひとりでつくる」をえらんで、

②どこでもいいので、すきな色のへやをえらんで、

③「えんぴつ」ボタンをおしてください。

 

せってい  ほうがんしモード

はぐるま⚙マークの「せっていボタン」をおして

f:id:koba1426:20190722114344j:image

「ほうがんしモード(ぼうをいちばん右)」にしよう!

f:id:koba1426:20190722114357j:image

 

ステップ1  絵をかいてならべよう!

それぞれちがう色で、ちがう向きの矢じるしをかこう!

(□の中からはみ出さないように絵をかきましょう)

上むき矢じるし

f:id:koba1426:20190722113959p:image

右むき矢じるし
f:id:koba1426:20190722114011p:image

下むき矢じるし
f:id:koba1426:20190722114018p:image

左むき矢じるし
f:id:koba1426:20190722114003p:image
今かいた矢じるし⬆︎➡︎⬇︎⬅︎こんなふうに4つずつをならべて、

四角のような形をつくってみよう!

f:id:koba1426:20190722114014p:image

そしてもう1つキャラの絵をなにかかこう!

キャラ(4分おんぷくん)

f:id:koba1426:20190722122951p:image

キャラをステージのこの場所にだそう!

f:id:koba1426:20190722123224j:image

 

ステップ2  矢じるしとキャラが重なったら、動く

こんなメガネをつくろう!

f:id:koba1426:20190722170746j:image

重なったら…動くメガネです。
f:id:koba1426:20190722220628j:image

上むき矢じるしとキャラが重なったとき

⇨キャラは上に動く(矢じるしはそのまま)

 

これをつくったら…

この場所にいたキャラが、

f:id:koba1426:20190722171737j:image

1マスずつ動いて、ここまできました!

f:id:koba1426:20190722171739j:image

 

はい、ここでもんだいです。

 

クイズ①

「右むき矢じるしとキャラが重なったとき、キャラは右に動く」

にはどんなメガネをつくればよいでしょう?

 

 

 

 

はい、答えはこれ!

f:id:koba1426:20190722173455j:image

こんなメガネですね。さっきのと同じ考え方でいいですね。

f:id:koba1426:20190722173441j:image

右むき矢じるしとキャラが重なったとき

⇨キャラは右に動く(矢じるしはそのまま)

 

このメガネをつくると…

この場所でとまっていたキャラが、

f:id:koba1426:20190722174550j:image

ここまで動きました!
f:id:koba1426:20190722174553j:image

 

ワンポイント 注意点!
f:id:koba1426:20190722174934j:imageこのの場所のように矢じるしをまちがえておいてしまうと、キャラは右むき矢じるしにうまく重なることができなくなってしまうので、気をつけましょう!本当はこのの場所には、右むき矢印➡︎をおかないといけません。

 

 

はい、では次です!

 

クイズ②

「下むき矢じるしとキャラが重なったとき、キャラは下に動く」

「左むき矢じるしとキャラが重なったとき、キャラは左に動く」

命令をくりかえして、キャラを最初の場所まで動かすにはどうすればよいでしょう?

 

 

 

 

そうです、⬇︎も⬅︎も同じようなメガネをつくればよいのですよね。

f:id:koba1426:20190722175820j:image

この2つのメガネですね!
f:id:koba1426:20190722175817j:image

上のメガネ

下むき矢じるしとキャラが重なったとき

⇨キャラは下に動く(矢じるしはそのまま)

下のメガネ

左むき矢じるしとキャラが重なったとき

⇨キャラは左に動く(矢じるしはそのまま)



この場所で止まっていたキャラが

f:id:koba1426:20190722180436j:image

ここまで動いて、
f:id:koba1426:20190722180441j:image

ここまで動いて、一周した!
f:id:koba1426:20190722180439j:image

⬆︎メガネのルールにそって、じつは

このあとキャラは⬆︎➡︎⬇︎⬅︎ずっとぐるぐるまわりつづけます!

(おつかれさまです)

 

 

ステップ3  矢じるしとキャラが重なったら、動いて音がなる

はい、ここでキャラが動いて音がなるしくみをつくってみたいとおもいます!

まず、これが音をならす命令にひつような「おんぷマーク」です。

f:id:koba1426:20190722182428j:image

この「おんぷマーク」をいちばん上のメガネの右のへやにいれましょう。

(右のへやなら、場所はどこでもいいです)

f:id:koba1426:20190722182510j:image

⬆︎これで「キャラが上に動くとき音がなる」ようになりました!

(画像だと伝わりにくいけど)

 

 

 

そして、ほかの➡︎⬇︎⬅︎に動くメガネの右のへやにも、

「おんぷマーク」をいれよう!

f:id:koba1426:20190722183330j:image

⬆︎これで、「キャラが上右下左に動くとき、それぞれちがう音なる」メガネのかんせいです!

 

ワンポイント おんぷマークのひみつ

f:id:koba1426:20190722184156j:image

おんぷマークはさわったらランダムにドレミファソラシド出てくるのですが、

f:id:koba1426:20190722184212j:image

かいてんマークを使って、出した♪をグルグルまわすと、好きな音がいろいろえらべます!

ここでは紹介していませんが、#や♭もあります!(オクターブ低い音・高い音もえらべます)

 

 

 

ステップ4  オリジナル矢じるしオルゴールをつくろう!

これだと、キャラ(4分おんぷくん)が進むと同じ音が4回ずつなるので

4びょうし風にきこえます

f:id:koba1426:20190722184806p:image

矢じるしを1つずつへらすと、3びょうし風に(あとで動画でかくにんしてみてください)
f:id:koba1426:20190722184802p:image

 

 

少しつけくわえて…

新しく絵をかいてみよう!

ゴールマーク

f:id:koba1426:20190722185304p:image

ゴールしたキャラ
f:id:koba1426:20190722185311p:image

 

オリジナルコースをつくって、ゴール地点にゴールマークをおきます。

そして、こういうメガネを新しくつくると…
f:id:koba1426:20190722185308j:image

f:id:koba1426:20190722190113j:image

ゴールマークとキャラが重なったとき

⇨音が2つ同時になって、キャラはゴールしたキャラに変わる

 

f:id:koba1426:20190722223035p:image

このメガネをつくることで、ゴールマークまで進むと、キャラが変わって動かなくなります。

「ここでおわってほしい!」というところで、オルゴールをストップすることもできます!

 

 

右のへやに♪をたくさん入れると、色んな音が同時にならせるので

工夫したら、きれいな和音もならすことができます。

 

めいろのコースをつくるような気分で、

矢じるしをならべて、作曲してみよう!

 

サンプルプログラム

いくつかオリジナルオルゴールをつくってみました!

さんこうにきいてみてください!

⬇︎プログラムを開くにはViscuitアプリが必要です

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company

オリジナルオルゴールその①「4notes beat」

f:id:koba1426:20190722222606p:image

https://develop.viscuit.com/env/view.html?control=edit%3A00300013%3A9845%2F1-1%2F023.json%3A1-1%3A

 

オリジナルオルゴールその②「Ancient Landscape」

f:id:koba1426:20190722235912p:image

https://develop.viscuit.com/env/view.html?control=edit%3A00300013%3A9846%2F1-1%2F004.json%3A1-1%3A

 

オリジナルオルゴールその③「Labyrinth」

f:id:koba1426:20190722222655p:image

https://develop.viscuit.com/env/view.html?control=edit%3A00300013%3A9821%2F1-1%2F029.json%3A1-1%3A

 

つくりかたを動画で見てみよう

動画でもつくりかたを説明しているので見てください!

オルゴールの音もかくにんできますよ〜

youtu.be

まとめ  テクニック④「重なったら…音がなる」

矢じるしをつかってオルゴールをつくるという

前代未聞の作曲プログラミング方法のしょうかいでした!

 

リズムあそび・メロディづくりが簡単に楽しめるので、

音楽の授業のプログラミングとしても良いかもしれません。

 

楽器を使って自力で作曲をするというのは、

なかなか難しい作業だと思いますが、プログラミングをつかうと

自分で思い浮かばないメロディが、思いがけず生まれることもあります。

 

「人間の感性とコンピュータの力の共同作業」

新しい時代の作曲法として、試してみるのも面白いかと思います!

今日もごらんいただき、ありがとうございました!

 

⬇︎ビスケットの使い方入門記事一覧です!

www.irolaboblog.com