見出し画像

高校数学をプログラミングで解く（準備編）「1-2 プログラムを書く」

MK's papa

マガジンリスト　＞　準備編 1.プログラム基礎　＞　1-2 プログラムを書く


はじめに

今回は、「高校数学をプログラミングで解く」を始めるための準備として、プログラミング言語「Processing」でのプログラムの書き方について説明していきます。

Processingでプログラムを書く

ここから、いよいよProcessingを利用してプログラムを書いていきます。今回は、別記事『高校数学をプログラミングで解く（準備編）「1-1 Processingの準備」』の最後で紹介した「円を描く」プログラムをもう少し詳しく解説することで、Processingでのプログラムの書き方を紹介していきたいと思います。

開発環境ウィンドウの立ち上げ

新しい開発環境ウィンドウを立ち上げ、スケッチの名前を「drawCircle」として準備します。別記事『高校数学をプログラミングで解く（準備編）「1-1 Processingの準備」』を読んで、すでにスケッチ「drawCircle」を作成している方はそちらを開いてテキストエディタ部分に書いているプログラムを一度消して準備してください。

図1　スケッチ「drawCircle」の開発環境ウィンドウ

キャンバスを準備する

Processingで図形を描く場合、最初に行うことはキャンバスを準備することです。このキャンバスに図形を描いていきます。開発環境ウィンドウのテキストエディタに、以下のように入力してみます。

void setup(){
  size(300,300);
}

開発環境ウィンドウでは、図2のようになります。

図2　テキストエディタ部分にプログラムを書く

そして、実行ボタンを押してみると、以下のような画面が表示されます。

図3　キャンバス

この実行ウィンドウのグレーの部分がキャンバスになります。この部分に図形を描いていきます。

setup関数

Processingで図形を描くとき、最初にかならず準備するものがsetup関数です。開発環境ウィンドウのテキストエディタ部分に

void setup(){
}

のように書きます。図形を描画させたり、計算をさせたりするプログラムはこの関数の { と } の間に書いていく必要があります。

size関数

また、Processingで図形を描くとき、size関数を利用することでキャンバスのサイズを設定することができます。今回のキャンバスはsize(300,300)としているので、このキャンバスは横に300個、縦に300個の画素が敷き詰められたものとなります。今後、キャンバスのサイズはこの画素数をもとに、「300×300」のように表すことにします。

円を描く

この準備したキャンバスに円を描いていきます。Processingでは、円、三角形、四角形などの基本的な図形の描画はそれぞれ１つの関数としてまとめられています。例えば、円については、circle関数で描けます。開発環境ウィンドウのテキストエディタに、以下のように入力してみます。

void setup(){
  size(300,300);
  circle(150.0, 150.0, 200.0);
}

ソースコード１　円を描くプログラム

図4　テキストエディタに円を描くプログラムを書く

このプログラムを実行すると、以下のような円がキャンバス上に描かれます。

図5　円を描く

前に説明した通り、setup関数の { と } の間にcircle関数を呼び出すことで、円を描くことができます。

各処理の最後に「;」

最後にもう一つ、Processingでプログラムを書く際に注意してほしいことは各処理の最後にセミコロン「;」を付けることです。ソースコード1では、size関数やcircle関数の最後に「size(300,300);」や「circle(150.0, 150.0, 200.0);」とセミコロンを付けています。このセミコロンを付けないと、プログラムは動かず、エラーとなります。

図6　セミコロンがないとエラーとなる

画素（ピクセル）について

ここで、画素（ピクセル）について説明しておきます。
画素とは、コンピュータで画像を扱う際の色情報を持つ最小単位、最小要素のことです。ピクセルとも呼びます。図3のキャンバスではグレーの色を持つ画素が横に300個、縦に300個並んでいます。
1つの画素は小さな正方形の形状をしています。これを見るために、図5の円の画像を拡大してみます。図5の円は一見滑らかに見えますが、円の輪郭部分を拡大していくと、図7のように、小さな正方形を並べて構成されていることが見えてきます。この小さな正方形が画素です。

図7　円の左上あたりを拡大

座標系について

もう一つ、キャンバスに設定される座標系についても解説しておきます。実行ウィンドウのキャンバスには以下のような座標系が設定されています。

図8　キャンバスの座標系

キャンバスの左上の画素を原点$${(0,0)}$$とし、右向きに$${x}$$軸の正の向き、下向きに$${y}$$軸の正の向きとする座標系となります。スケッチ「drawCircle」のキャンバスは横に300個、縦に300個の画素が敷き詰められたものですので、右上の画素は$${(299,0)}$$、左下の画素は$${(0,299)}$$、右下の画素は$${(299,299)}$$と表すことができます。左上の原点となる画素を$${(0,0)}$$としているので、右下の画素の座標は$${(300,300)}$$ではなく、$${(299,299)}$$になることに注意が必要です。また、高校数学では通常、上向きを$${y}$$軸の正の向きとしますので、Processingでグラフなどを描かせるときには注意が必要です。

circle関数

circle関数は円を描くための関数です。今回は

circle(150.0, 150.0, 200.0);

としています。circleの後の ( と ) の間にカンマ区切りで3つの数が設定されています。これらの数はcircle関数の「引数」と呼ばれます。円は中心位置と半径または直径を決めることで描くことができます。3つの引数は最初の２つの数が円の中心位置の座標、最後の1つの数が円の直径を表しています。つまり、中心位置を$${(150, 150)}$$、直径を$${200}$$とする円を描いています。

まとめ

今回は、「高校数学をプログラミングで解く」を始めるための準備として、プログラミング言語「Processing」でのプログラムの書き方について説明しました。
円を描くプログラムを例にして、Processingでのプログラムはsetup関数の { と } の間に書いていくこと、キャンバスのサイズや画素、座標系の考え方などを説明しました。このあたりを理解するだけでも様々な図形を描くことができます。ちょっとずつ理解していきましょう。

参考文献

Processingをはじめよう 第２版（オライリー・ジャパン、オーム社、ISBN9784873117737）

この記事が気に入ったらサポートをしてみませんか？