イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Scratchでバブルソートを可視化してみた

おはようございます。エンジニア一年目のやすと申します。

今回は、前回に引き続き「Scratch」を利用していきたいと思います。

簡単な前書き

「Scratch」の説明については、前回のブログの前書きで述べているのでよろしければ読んでみてください! → http://tech.innovation.co.jp/2018/07/26/Scratch.html - Scratchでインスタ映えする図形描画をしてくれるもの作ってみた

前回、「せっかく自分のエンジニアの原点とも呼べるものなので、ゆくゆくは何か作品を作ってみたいと思い、今回は簡単に触れてみました!」
ということだったので、今回は色々な機能を使ってみました。 ブログ内容ですが、最近ソートアルゴリズムを復習した時に色々な方が行っていたソートアルゴリズムの可視化に+ 「Scratch」で挑戦し、出来上がったスクリプトを紹介したいと思います。

作ってみたもの

今回は、バブルソートを「Scratch」で可視化出来ないか挑戦しました。。
まずは、1から100までの数字でランダムに10個選び、配列に挿入したものを
バブルソートで昇順に並び替えるプログラムを作ってみました。 以下に画像を載せておきます。(1枚目、実行後の画面。2枚目、プログラム)

bubble_sort_result.png
↑dataはソート前の配列、sort_dataはソート後の配列

bubble_sort_script.png

プログラムについては、「〇〇を受け取ったとき」の処理の概要を説明したいと思います。
●initializeAllData・・・利用している全ての変数に初期値を代入する処理
●insertData・・・配列に指定した範囲の乱数を挿入する処理
●bubbleSort・・・バブルソートを行う処理
●swapData・・・配列のj番目とj-1番目の要素を入れ替える処理

おそらく、これでバブルソートを行えていると思うので、これをもとに可視化に挑戦してみました。 早速ですが、結果がこちらになります。↓↓↓

scratch_blog_2.gif

プログラムの以下の画像です。ロジックを説明すると長くなるので、 プログラムの概要と先ほどのように「〇〇を受け取ったとき」の処理の概要を説明したいと思います。

まず、概要ですが先ほど作ったバブルソートのプログラム内の配列要素に10個のモデル(画像)を対応させて、 モデルの大きさや位置を変化させることで、可視化っぽいことを行っています。
次にプログラムの流れですが、
1、データの初期化、モデルを初期位置に移動
2、配列にランダムな数字を挿入
3、配列の要素に応じてモデルの大きさを変更
4、バブルソートを行う+ 5、j番目とj-1番目の要素が入れ替わる時、モデルも同様に入れ換える

visual_bubble_sort_script.png
 ↑メインのプログラムとモデル1に対応する位置移動プログラム
visual_bubble_sort_script_2.png
 ↑モデル2に対応する位置移動プログラム(モデル3〜10もほぼ同じ)

処理の概要&変数の説明
◎「model_number」←モデル名を保持する配列(例えば対応する要素が1番目から2番目になった時、この配列での順番も同様に変更することで、モデルの位置を把握する)
changeSize・・・モデルと対応する配列の要素によって、モデルの大きさを%単位で変更
swapFirstModel_◯◯・・・〇〇の部分に移動させるモデル名が入る。入れ替えるモデルのうち、始めに片方の位置を一時的に保存してその片方だけ移動させる。
swapSecondModel_◯◯ ・・・ 〇〇の部分に移動させるモデル名が入る。指定されたモデルの位置を一時的に保存していた位置に移動させる。

まとめ

今回は、イメージしたものを躓かずにサラサラ実装できたのでとてもものづくり精神が活性化されました。
ある程度、基本的なロジックは完成したので、他のソートアルゴリズムにも挑戦して行こうかなと思います。
またまた、ニーズのないブログの内容になってしまいましたが、もう少しだけScratch触っていき自己満足できるものを作っていきたいと思います。

関連サイト:
https://scratch.mit.edu/studios/1168062/Scratch Studio - Scratchではじめよう!プログラミング入門

done