数値の計算をしてみよう

チャプター1このレッスンのゴール

このレッスンで完成させるもの確認しよう

チャプター2数値を計算して場所を決めてみよう

写してみよう

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
  background(220);

  var x = width / 2;

  var y = height / 2;

  ellipse(x, y, 120 * 2, 120 * 2);

  ellipse(x, y, 120 + 30, 120 + 30);

  ellipse(x, y, 120 - 30, 120 - 30);
  
  ellipse(x, y, 120 / 2, 120 / 2);

  noLoop();
}

コードがかけたら実行してみよう。
円形が重なって表示されたら、OKだよ。

コードの解説

createCanvas(値1, 値2)

キャンバス要素を作成し、その寸法をピクセル単位で設定します。

値1： キャンバスの幅
値2： キャンバスの高さ

background(値1)

背景に使用する色を設定します。デフォルトの背景は透明
値1: 色

ellipse(値1, 値2, 値3, 値4)

スクリーンに円（楕円）を描きます。幅と高さが等しい楕円形は正円です。最初の2つのパラメーターで位置を設定し、3番目と4番目のパラメーターで図形の幅と高さを設定します。

値1： 楕円のx座標
値2： 楕円のy座標
値3： 楕円の幅
値4： 楕円の高さ

noLoop

draw（）内のコードを連続して実行するのを停止します。

システム変数

p5.jsには独自のシステム変数があるんだ。

これはp5.jsが自動的に値を設定するから、プログラム内では同じ名前の変数を使ってはだめなんだ。よく使われるものに、width や height があるよ。

すでにシステム変数として使ってるから予約語って呼んでるよ。

変数xは、 width / 2 で createCanvas()で設定した横幅(400) / 2= 200 の位置を算出、

変数yは、 height / 2 で createCanvas()で設定した縦幅(400) / 2= 200 の位置を算出しているよ。

演算子

算術演算子

+記号 や -記号 のことを演算子とよぶんだ。

演算子	意味	例	結果
+	足す	1 + 2	3
-	引く	10 - 3	7
*	掛ける	3 * 7	21
/	割る	100 / 5	20
%	余り	10 % 3	1

算術演算子で計算部分の実際の数値のところの計算結果は下記となります。

式計算前

  ellipse(x, y, 120 * 2, 120 * 2);

  ellipse(x, y, 120 + 30, 120 + 30);

  ellipse(x, y, 120 - 30, 120 - 30);
  
  ellipse(x, y, 120 / 2, 120 / 2);

計算結果

  ellipse(200, 200, 240, 240);

  ellipse(200, 200, 150, 150);

  ellipse(200, 200, 90, 90);
  
  ellipse(200, 200, 60, 60);

このように、計算結果を自分で算出しなくてもプログラムで自動計算することが可能になるよ。プログラミングでは演算をよく使うので、マスターしておこう。

ここまでの見本19

チャプター3チャレンジしよう

3. 1 完成形

次の完成形を参考に、プログラムを完成させよう。
電子機器のバッテーリー表示をイメージしているよ。

ヒント

• 長方形のサイズを決めて、座標については数値の計算をさせて効率よく仕上げよう