スクラッチプログラミング - ペンで図形(ずけい)をえがく

Scratch をつかって円(えん)や多角形(たかっけい)をえがいてみましょう。円(えん)はペンをぐるりと一周(いっしゅう)うごかし、多角形(たかっけい)は「まっすぐ線(せん)をひく」と「むきをかえる」をくりかえしてえがきます。

スクラッチプログラミング - ペンで図形(ずけい)をえがく

円(えん)や多角形(たかっけい)をえがいてみよう

この記事(きじ)では、Scratch (スクラッチ)のペンで図形(ずけい)をえがく方法(ほうほう)を紹介(しょうかい)します。

Scratch をつかって図形(ずけい)をえがくときにカギとなるのが、角(かく)のおおきさです。シンプルな円(えん)や三角形(さんかっけい)だけでなく、五角形(ごかっけい)や六角形(ろっかっけい)、さらには星型(ほしがた)など、色々(いろいろ)な図形(ずけい)のえがきかたを一緒(いっしょ)にみていきましょう!

サンプルプロジェクト

下(した)にあるのは、図形(ずけい)をえがくサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、線(せん)がえがかれる様子(ようす)をみておいてください。

Scratch|ペンで図形を描くサンプルGIF
Scratch|ペンで図形を描くサンプルGIF

ペンを追加(ついか)しよう

Scratch でなにかをえがくときにつかうのは、ペンです。拡張機能(かくちょうきのう)のペンを追加(ついか)してから、スクリプトをつくっていきましょう。

ペンのブロック
ペンのブロック

ペンをつかうのがはじめての方(かた)は、以下(いか)の記事(きじ)を参照(さんしょう)してください。

スクラッチプログラミング - かくちょうきのう「ペン」のつかいかた
拡張機能(かくちょうきのう)の中から「ペン」をえらんで、あたらしいブロックを追加(ついか)してみましょう。「ペン」をつかうと、スプライトで線(せん)や絵(え)をかけるようになりますよ。

ペンをつかうときの最初(さいしょ)の設定(せってい)は、次(つぎ)のようにしておきます。ペンの色(いろ)やふとさは、おこのみです。この下(した)に、図形(ずけい)をえがくブロックをつなげていきます。

ペンの設定
ペンの設定

円(えん)をえがこう

最初(さいしょ)に、円(えん)をえがいてみましょう。

円(えん)のえがきかたはとても単純(たんじゅん)です。ペンをぐるっと一周(いっしゅう)うごかします。

  1. えがきはじめる位置(いち)と方向(ほうこう)をきめます。
  2. ペンをおろして、えがきはじめます。
  3. すこしずつ位置(いち)をかえながら角度(かくど)もかえて、360°うごかします。
  4. えがきおわったら、ペンをあげます。
左回りで円を描く
左回りで円を描く

まわすむきをかえると、図形(ずけい)の位置(いち)がかわります。

右回りで円を描く
右回りで円を描く

えがきはじめる方向(ほうこう)をかえた場合(ばあい)も、図形(ずけい)の位置(いち)はかわります。

下へ向けて、左回りで円を描く
下へ向けて、左回りで円を描く

サイズのちがう円(えん)

円(えん)の1周(しゅう)は、360°ですね。そのため、円(えん)をえがくときは、◯ かいくりかえす◯ どまわす の数(かず)をかけざんして、360になるようにします。

たとえば、それぞれの数(かず)をかえてみると、下(した)のように、円(えん)のおおきさもかわります。

色々なサイズの円
色々なサイズの円

三角形(さんかっけい)をえがこう

次(つぎ)は、三角形(さんかっけい)をえがきましょう。

三角形(さんかっけい)は辺(へん)が3つあるので、「まっすぐ線(せん)をひく」と「むきをかえる」を3回(かい)くりかえします。

  • ◯ ほうごかす にはいる数(かず)は、一辺(いっぺん)のながさです。
  • ◯ どまわす にはいる数(かず)は、外角(がいかく)のおおきさです。
三角形を描く
三角形を描く

三角形(さんかっけい)にかぎらず、多角形(たかっけい)をえがくときは、「線(せん)をひいた後(あと)に、何度(なんど)まわすか」がポイントになります。まわす角度(かくど)は、「外角(がいかく)」です。

外角(がいかく)とは?

外角(がいかく)とは、図形(ずけい)の外側(そとがわ)にある角(かく)のことです。

たとえば、正三角形(せいさんかっけい)の外角(がいかく)は120°です。外角(がいかく)がどこの部分(ぶぶん)なのか、下(した)の図(ず)で確認(かくにん)してみましょう。

正三角形の外角
正三角形の外角

角度(かくど)の話(はなし)がでてきて、むずかしい!っておもいましたか?でも、大丈夫(だいじょうぶ)。実(じつ)は、外角(がいかく)は簡単(かんたん)にもとめることができるのです。

外角(がいかく)のもとめかた

正多角形(せいたかっけい)の外角(がいかく)1つ分(ぶん)のおおきさは、次(つぎ)の式(しき)でもとめることができます。

外角(がいかく) = 360° ÷ 辺(へん)の数(かず)

たとえば、正三角形(せいさんかっけい)をこの式(しき)にあてはめてみると、「120 = 360 ÷ 3」です。

正多角形の外角の求め方
正多角形の外角の求め方

正多角形(せいたかっけい)には、「すべての内角(ないかく)のおおきさが、ひとしい」という特徴(とくちょう)がありますね。そのため、外角(がいかく) 1つ分(ぶん)のおおきも、すべてひとしくなります。

一方(いっぽう)、ことなる内角(ないかく)をもつ多角形(たかっけい)では、上(うえ)の式(しき)はつかえません。「外角 = 180° − 内角」で、それぞれの角(かく)の外角(がいかく)をもとめる必要(ひつよう)があります。

この記事(きじ)では、正多角形(せいたかっけい)をメインに紹介(しょうかい)していくので、「 外角(がいかく) = 360° ÷ 辺(へん)の数(かず)」を頭(あたま)にいれておいてくださいね。

四角形(しかっけい)をえがこう

つづいては、四角形(しかっけい)です。

  • 四角形(しかっけい)は辺(へん)が4つあるので、「まっすぐ線(せん)をひく」と「むきをかえる」を4回(かい)くりかえします。
  • 四角形(しかっけい)の外角(がいかく)は「360 ÷ 4」で「90」です。
  • 90°むきをかえながら、ペンをうごかします。
四角形を描く
四角形を描く

五角形(ごかっけい)、六角形(ろっかっけい)をえがこう

五角形(ごかっけい)、六角形(ろっかっけい)などをえがくときも、かんがえかたはおなじです。

「まっすぐ線(せん)をひく」と「むきをかえる」を、辺(へん)の数(かず)だけくりかえします。むきをどれだけまわすかは「 外角(がいかく) = 360° ÷ 辺(へん)の数(かず)」でもとめましょう。

五角形、六角形を描く
五角形、六角形を描く

変数(へんすう)をつかおう

さて、外角(がいかく)のもとめかたは「 外角(がいかく) = 360° ÷ 辺(へん)の数(かず)」だと説明(せつめい)しました。簡単(かんたん)な計算(けいさん)ではありますが、自分(じぶん)でやらずに、自動的(じどうてき)に計算(けいさん)できたら楽(らく)ですよね。やってみましょう!

  1. 変数(へんすう) n 角形(かっけい) を用意(ようい)します。n は、三角形(さんかっけい)の場合(ばあい)は 3、五角形(ごかっけい)の場合(ばあい)は 5 など、なにかしらの数字(すうじ)をあらわします。
  2. 変数(へんすう) 外角(がいかく) を用意(ようい)します。360 / n 角形(かっけい) で、外角(がいかく)をもとめます。
  3. くりかえす回数(かいすう)と、まわす角度(かくど)に、変数(へんすう)をつかいます。
変数を使って図形を描く
変数を使って図形を描く

このように変数(へんすう)を利用(りよう)すれば、 n 角形(かっけい) にいれる数(かず)をかえるだけで、下(した)のように色々(いろいろ)な正多角形(せいたかっけい)を簡単(かんたん)にえがけるようになります。

変数の値に応じて描かれる多角形
変数の値に応じて描かれる多角形

複雑(ふくざつ)な図形(ずけい)をえがこう

正多角形(せいたかっけい)のえがきかたがわかると、下(した)のような複雑(ふくざつ)な図形(ずけい)もえがけるようになります。どの正多角形(せいたかっけい)を、何個(なんこ)えがくかによって、図形(ずけい)のみためがかわります。

10角形を10個描いた図形|Scratch 図形をえがく by Pyxofy
10角形を10個描いた図形|Scratch 図形をえがく by Pyxofy

Scratch 図形をえがく by Pyxofy は、スライダーをうごかすだけで、複雑(ふくざつ)な図形(ずけい)を簡単(かんたん)に描画(びょうが)することができるプロジェクトです。ぜひためしてみてください!

星(ほし)をえがこう

最後(さいご)は星型(ほしがた)です。3種類(しゅるい)の星(ほし)をえがいてみましょう。

  1. 五芒星(ごぼうせい)は、144°まわしながら線(せん)をひきます。
  2. ペンをふとくすると、中(なか)がぬりつぶされた、まるみのある星(ほし)になります。
  3. 輪郭(りんかく)だけの星型(ほしがた)は、「左(ひだり)へ72°」「右(みぎ)へ144°」まわしながら線(せん)をひきます。
五芒星、丸みのある星、輪郭だけの星
五芒星、丸みのある星、輪郭だけの星

星型(ほしがた)をえがくときに必要(ひつよう)な外角(がいかく)は「144°」と「72°」です。下(した)の図(ず)にしめしましたので、確認(かくにん)してみてください。

星型の外角
星型の外角

「きょうからはじめるスクラッチプログラミング入門」Pyxofy (著)

Pyxofy が Scratch の基本をまとめた電子書籍を出版しました。
Kindle・Apple Books からご購入ください。

詳細はこちら

まとめ

今回(こんかい)は、Scratch のペンをつかって、円(えん)や正多角形(せいたかっけい)、星型(ほしがた)をえがく方法(ほうほう)を紹介(しょうかい)しました。

図形(ずけい)をえがくときに必要(ひつよう)になるのが、角度(かくど)の知識(ちしき)です。特(とく)に、「外角(がいかく)」のおおきさがキーポイントになります。ペンのふとさをかえると、図形(ずけい)のみためもかわるので、色々(いろいろ)とためしてみてくださいね。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNS で Pyxofy とつながりましょう! LinkedInThreadsBlueskyMastodon X (Twitter) @pyxofyFacebook

関連記事

Scratch - Pyxofy
Scratch 3.0の使い方を、プログラミング初心者や子どもにも分かりやすく紹介しています。
JavaScript - Canvas に図形を描く方法
HTML の canvas 要素を利用すると、JavaScript でグラフィックを描くことができます。基本的なメソッドを学んで、四角形や三角形、円やテキストなど簡単な図形を描画できるようになりましょう。
CSS Art – How to Make Image Masks and Knockout Text
Ever wondered how colorful CSS gradients can be combined with mask and text. Step-by-step article to create CSS mask and knockout text.
CSS Animation
Articles for creating CSS Animation.