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


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


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

Scratchでインスタ映えする図形描画をしてくれるもの作ってみた

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

初投稿の題材は、私がプログラミングに興味を持つきっかけになった「Scratch」の簡単な紹介を私の作ったものを踏まえて行いたいと思います。

簡単な前書き

ご存知の方もいらっしゃると思いますが、「Scratch」とはビジュアルプログラミング言語の1つで、主に子どもたちがプログラミングを学ぶのに利用されているそうです。
私も中学生の頃にScratchに触れ、プログラミングについて学びました。しかしそれ以降、触れ直すことがありませんでした。
せっかく自分のエンジニアの原点とも呼べるものなので、ゆくゆくは何か作品を作ってみたいと思い、今回は簡単に触れてみました!
タイトルで述べているものを作った経緯は、最近SNSである一定の動きをするペンが綺麗な図形を描くという投稿にハマっており、 後に紹介しますが、Scratchにそれを再現するのにちょうど良いものがあったので、それを利用してインスタ映えしそうな図形描画を行うプログラムを考えてみました。
まず、どのように開発するかさらっと紹介します。

Scratchの開発

ScrathはWeb上で開発ができ、ソフトウェアなどのインストールは不要です。
まず、Scratchのサイトにサクセスし、「作る」のタブから開発画面をに移動します。

以下のような画面が確認できると思います。

scratch_develop_window.png

プログラムは、スクリプトという欄から様々なスクリプト(ブロック)を選び、それらを組み合わせることで作ることができます。
プログラムの結果はネコ(キャラクタ)の動きで確認することができます。
例えば、以下の画像のようなプログラムは、フラグがクリックされた時にネコ?を10歩進ませる(x方向に+10)を10回繰り返してくれます。

scratch_sample.png

ざっとScratchの開発については、ここらへんにして私作ったものを簡単に紹介したいと思います。

作ってみたもの

今回は、円を色々と描画してインスタ映えを狙ってみようと考えました。
Scratchではキャラクタ自体の角度も変更できるため、進行方向が変化します。そしてキャラクタの軌跡を「ペン」という機能で描画することができます。 これらのことを行うことで、シンプルに円を描画できます。
また、歩数を変えることで円の直径を大きくできます。

scratch_sample2.gif

以上のものをベースとしてさらに、if文の動きとしてくれるスクリプトを利用し、様々なパターンで円を描画してみました。 そしてその結果、自分なりにインスタ映えしような図形描画ができたと思った形がこれです。(カクカクで伝わりずらいとは思いますが、、、)

scratch_blog_1.gif

プログラムのコードはこんな感じです。ロジックを説明すると長くなるので、利用したスクリプトを簡単に説明したいと思います。

scratch_code.png countを1ずつ変えるスクリプトは同じものです。ここ↑↓(長いので、途中で切れてしまいました。) scratch_code1.png

「ペンを下ろす」、「ペンを上げる」・・・これを配置することでキャラクタの座標を元に背景に点や線を描くことができるようになります。
「〇〇回繰り返す」・・・このブロックの範囲内にあるスクリプトを〇〇回実行する。
「iを1ずつ変える」 ・・・ i の部分に変数を選択し、その現在の値に1を加算する。減算したい場合は、マイナスの符号をつける。
「もし〇〇なら」・・・〇〇の部分に設置した条件文が一致している場合、範囲内のスクリプトを実行する。

まとめ

久しぶりにScratchに触れることで、自分の持っているものづくり精神が活性化されたような気がしました。ブログの内容については、
小学生の方々が読んでくれたら嬉しいなというレベルになっていましましたが、今後も自分の原点に立ち返り、色々作っていきたいと思っております。(ニーズはなさそうですが)

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

done