2020プログラミング講座４：コードの基本と図形、色、変数

＊＊＊課題はページ最下段に記載しています。＊＊＊

プログラミング最初の一歩
プログラミングの動作を記述する一連の文字のことをコード（ソースコード）と呼びます。p5.jsではEDITORのウィンドウを開いて、その中でコードを記述することができます。

それでは、はじめに以下のコードを記述して実行してみましょう。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(50, 50, 80, 80);
}

コードが書けたらEDITORウィンドウの実行ボタンを押してプログラムを実行してみましょう。円が描画できていれば最初のプログラムの完成です。

円あるいは楕円を描画するためには以下のようにコードを記述します。

ellipse(中心のX座標, 中心のY座標, 楕円の幅, 楕円の高さ);

先ほど描画した楕円（円）は、中心のX座標、Y座標がそれぞれ50ピクセル、幅と高さが80ピクセルの楕円（円）でした。
実行中のプログラムはEDITORウィンドウの停止ボタンを押して停止させます。

練習:　数値を変えて描画の位置、幅、高さが異なる様々な楕円を描画してみよう。

p5.jsのストラクチャー（構造）
p5.jsにおいて時間の経過とともに変化するグラフィックスを作成する場合には、p5.jsのストラクチャーを学び、効果的に利用することが必要になります。

それでは、まず以下のコードを記述してみましょう。

let x = 10;
let y = 10;
let w = 20;
let h = 20;

function setup(){
  createCanvas(400, 400);
  frameRate(60);
}

function draw(){
  background(220);
  ellipse(x+frameCount, y+frameCount, 20, 20);
}

このコードをもとにp5.jsのストラクチャーについて学んでいきましょう。

このプログラムは以下の３つの部位で成り立っています。
１）グローバル変数の宣言と初期化
グローバル変数とは以下に説明する関数（setup関数とdraw関数）などから参照することができる変数の一種です。

例）
let x = 10;
let y = 10;
let w = 20;
let h = 20;

２）setup関数
各種初期化で行う処理部分。アプリケーションが実行され、ウィンドウが開いたとき、最初に１度だけ実行されます。
setup関数では、画面（ウィンドウ）のサイズを決定するcreateCanvas関数などの記述を行います。

例）
function setup() {
// 一度だけ実行される処理
}

３）draw関数
アプリケーションが実行中に繰り返し実行し続ける処理部分。draw関数内に記述されたコードが終了するたびに新しいフレームがディスプレイ・ウィンドウに描画されコードが実行され続ける。
デフォルトの描画速度は１秒あたり６０フレーム（ １秒あたりのフレーム数はframeRate関数を使って変更することができる）。

例）
function draw() {
// 繰り返し実行される処理
}

練習： 上のコードの記述を変更して、様々なプログラムを作ってみましょう。
例）
・円が水平または垂直に移動するプログラム。 
・円の大きさが変化するプログラム。

画面サイズの設定
p5.jsでは、画面（実行ウィンドウ）のサイズを以下の関数*を使用して設定することができます。

createCanvas(画面の幅, 画面の高さ);

*関数とはプログラミングの構成単位であり、パラメータと呼ばれる数値などで定義することができます。

それでは、幅400ピクセル*、高さ200ピクセル*のウィンドウを以下のようにEDITORに記述して作成してみましょう。

function setup(){ 
  createCanvas(400, 200); 
} 

function draw(){ 
  background(220); 
}

*パラメータで扱う単位はコンピュータの画面上で画像を扱う際の最小単位であるピクセル（Pixcel）です。

座標について

座標とは空間上の１点を指定するための方法です。画面に図形を描くためには、図形の位置を決める必要があり、座標を利用します。p5.jsの画面（実行ウィンドウ）では以下のようにして画面上の１点を指定します。

画面の左上を基準点とし右に移動した距離xと下に移動した距離yで１点を指定する。

それでは、サイズが幅400ピクセル、高さ400ピクセルの画面（実行ウィンドウ）を作成し、x座標が200ピクセル、y座標が200ピクセルの位置に点を描画してみましょう。
点の描画にはpoint()関数を用います。point()関数は以下のように設定します。

point(x座標,y座標);

function setup(){
  createCanvas(400, 400);
}

function draw(){
  background(220);
  point(200,200);
}

練習:
・数値を変えて様々なサイズの画面（実行ウィンドウ）を作成してみよう。
・幅400ピクセル、高さ400ピクセルの画面（実行ウィンドウ）の四隅に点を描画してみよう。

基本図形について
p5.jsには、あらかじめ基本的な図形を描く関数が用意されています。以下に基本的な図形の描画方法を記載します。

点

point(x座標, y座標);

線
２つの座標(x座標1, y座標1)と(x座標2, y座標2)を結ぶ１本の直線を描きます。

line(x座標1, y座標1, x座標2, y座標2);

方形
方形（正方形や長方形）は、４つのパラメータで設定します。方形の左上の角を基準点にx座標, y座標で指定し、幅と高さを指定します。

rect(x座標, y座標, 幅, 高さ);

円形
円形（正円や楕円）は、４つのパラメータで設定します。円形の中心を基準点にx座標, y座標で指定し、幅と高さを指定します。

ellipse(x座標, y座標, 幅, 高さ);

三角形
三角形は６つのパラメータを指定して描きます。

triangle(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3);

四辺形
四辺形は８つのパラメータを指定して描きます。

quad(x座標1, y座標1, x座標2, y座標2, x座標3, y座標3, x座標4, y座標4);

描線の太さ
図形の描線の太さを変更できます。描線のデフォルトは1ピクセルですが、strokeWeight()関数を使って変更できます。

strokeWeight()

関数のパラメータは１つで、太さをピクセル数で指定します。
以下のように記述します。

function setup(){ 
  createCanvas(400, 400);
}

function draw(){
  background(220);
  strokeWeight(8);
  ellipse(200,200,200,200);
}

描画の順序
プログラムはコードの先頭１行目から順に読み込まれていくため、コードを書く順番は図形の重なり順などに大きく影響します。
重なり合う複数の図形がある場合は、最後に描かれた図形が一番上に重なって表示されます。

描画モード
図形を描画する際に、描画の基準点を設定することができます。
方形の記述ではrectMode()関数を使用して以下のように基準点を設定できます。

rectMode(CORNER)

rect(左上頂点のx座標, 左上頂点のy座標, 幅, 高さ);　//デフォルトではこの基準点を使う

rectMode(CORNERS)

rect(左上頂点のx座標, 左上頂点のy座標, 右下頂点のx座標, 右下頂点のy座標);

rectMode(CENTER)

rect(中心のx座標, 中心のy座標, 幅, 高さ);

rectMode(RADIUS)

rect(中心のx座標, 中心のy座標, 幅の半分, 高さの半分);

円形の記述ではellipseMode()関数を使用して以下のように基準点を設定できます。

ellipseMode(CENTER)

ellipse(中心のx座標, 中心のy座標, 幅（直径）, 高さ（直径）); //デフォルトではこの基準点を使う

ellipseMode(RADIUS)

ellipse(中心のx座標, 中心のy座標, 幅（半径）, 高さ（半径）);

ellipseMode(CORNER)

ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 幅（直径）, 高さ（直径）);

ellipseMode(CORNERS)

ellipse(円が収まる四角い領域の左上角のx座標, 円が収まる四角い領域の左上角のy座標, 円が収まる四角い領域の右下角のx座標, 円が収まる四角い領域の右下角のy座標);

コードは以下のように記述します。

function setup(){ 
  createCanvas(400, 400); 
} 

function draw(){ 
  background(220); 
  rectMode(CENTER);
  rect(100,50,80,80); 
  ellipseMode(CORNER); 
  ellipse(100, 50, 80, 80);
}

練習:　幅400ピクセル、高さ400ピクセルの画面にいろいろな基礎図形を描画してみよう。

カラーモードについて
p5.jsで色を表現するためにはカラーモデルを使って色を指定する必要があります。
p5.jsで用いられるカラーモデルにはRGBモデルとHSBモデルがあります。

RGBモデル
Red (赤)、Green (緑)、Blue (青) の三つの原色を混ぜて色を再現する加法混合の一種です。

HSBモデル
Hue（色相）、Saturation（彩度）、Brightness（明度）の三つの成分から色を再現する方法です。

p5.jsでは、カラーモードを指定することで、RGBモデルとHSBモデルのいずれのカラーモデルを選ぶことができます。

カラーモードは、以下のように設定します。

colorMode(mode, range1, range2, range3, range4);

mode 　RGBまたはHSB
range1 赤または色相の範囲:省略可
range2 緑または彩度の範囲:省略可
range3 青または明度の範囲:省略可
range4 透明度の範囲:省略可

p5.jsのデフォルトのカラーモデルはRGBモデルになるため、RGBモデルで各色256段階の範囲で指定する場合は特にcolorMode()関数を使用する必要はありません。
色の設定について
p5.jsでは、背景の色、図形の線の色、図形の面の色をそれぞれ設定することができます。色を設定するための関数を以下に記載します。

背景の色
background(R,G,B);
線の色
stroke(R,G,B);
面の色
fill(R,G,B);

上記の関数のR,G,Bは色を表すパラメータで、R(Red:赤)、G(Green:緑)、B(Blue:青) の三つの原色を表しており、それぞれ0〜255までの数値で色を指定します。
0は色の最小値でそれぞれの色の成分が表示されません。255は色の最大値となります。

例)
R, G, Bが0, 0, 0なら黒
255,0,0なら赤
255,255,255なら白

p5.jsでは色の選択に使えるツールが備わっています。メニューからTools>Color Selectorを選んで下記のウィンドウを表示し、カラーパレットから色を選択すると、RGB, HSBそれぞれの色の数値やカラーコードが表示されるので、この数値を参考にコード上の数値を記述します。

背景の色を設定する

背景の色を設定してみましょう。背景の色を設定するには、background()関数を使用します。

background(255,0,0);

*background()関数をsetup()関数内で使用するか、draw()関数内で使用するかによって完成するアプリケーションの動作に違いが生じるので注意が必要です。

線の色を設定する

基本図形の線の色を設定してみましょう。線の色を設定するにはstroke()関数を使用します。
また、線を描画しない場合にはnoStroke()関数を使用します。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(200);
  stroke(255,0,0);
  ellipse(100,200,100,100);
  noStroke();
  ellipse(300,200,100,100);
}

面の色を設定する
基本図形の面の色を設定してみましょう。面の色を設定するにはfill()関数を使用します。
また、面を描画しない場合にはnoFill()関数を使用します。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(255);
  fill(255,0,0);
  ellipse(150,200,300,300);
  noFill();
  ellipse(250,200,300,300);
}

透明度を設定する

図形の面の色や線の色を指定するstroke()関数やfill()関数に、透明度を設定する四つ目のパラメータを加えることで図形の透明度を設定できます。このパラメータをアルファ値と呼びます。

線の透明度設定：
stroke(R,G,B,alpha);
面の透明度設定：
fill(R,G,B,alpha);

アルファ値の値の範囲は0から255で、0にすると完全に透明になり（表示されない）、255にすると完全に不透明になります（アルファ値を指定しない場合と同じ）。
1から254までの値の範囲では半透明になり、下の色と混ざり合った透けた色が表現できます。

function setup(){ 
  createCanvas(400,400);
}

function draw(){
  background(200);
  stroke(255,0,0,125);
  fill(7,165,247,200);
  ellipse(150,200,300,300);
  stroke(0,255,0,100);
  fill(247,7,216,200);
  ellipse(250,200,300,300);
}

練習：基本図形と色の設定を使用してグラフィック作品を作成してみよう。

変数について

変数とは、ある値をコンピュータのメモリに保存しておき、プログラムのなかで再利用できるようにするための仕組みです。
変数の作成
変数を作成するには、データ型、変数の名前、変数の値を考えて設定します。
変数を使う前には必ず変数の宣言をします。宣言とは、コンピュータのメモリにデータの値を格納する領域を確保することです。
変数の宣言をするためには格納する値にあったデータ型を定義し、名前を決めて値を設定します。

変数の宣言は以下のように記述します。

データ型　変数の名前　＝　値；

例）

let x = 10;

上の例は以下のようにも記述することができます。
let x;

x = 10;

変数には任意の名前を付けて設定をします。データの内容がわかりやすい名前を選んで設定しましょう。
変数を使った描画
それでは、変数を使って基本図形を描画してみましょう。
let d = 100; //変数の宣言
size(400,400);
ellipse(100,200,d,d);
ellipse(200,200,d,d);
ellipse(300,200,d,d);

上の例では１行目の　let d = 100;　にて変数の宣言が行われています。let で整数のデータ型を定義し、変数の名前を d とし、変数 d に 100 という整数の値を代入しています。
変数を使うことで３つの円が同じ値を受け取ることができます。

練習：変数を２つ作成し、x座標とy座標に変数を使用した４つの方形を描いてみましょう。

コンソールへの表示p5.jsではプログラミングによる各種の値をコンソールに表示できます。コンソールとはスケッチを記述しているエディタの下の部分です。
コンソールへの値の表示には以下の関数を使用して記述します。

print(値);

それでは、コンソールを活用したコードを描いてみましょう。

let x = 10;//変数の宣言
let y = 20;//変数の宣言

function setup(){
  createCanvas(400, 400);
}

function draw(){
  background(220);
  print(x);//コンソールへの値の表示
  print(y);//コンソールへの値の表示
}

上のプログラミングでは２種類の変化する値がコンソールに表示されますが、何の値かわかりにくいので、少し改良してみましょう。
以下のように記述することで何の値を表示するのかを明示することができます。

println(“値の説明” + 値）;

例）
println(“x:” + x）;

それでは、先ほどのスケッチを改良してみましょう。座標の変化がわかりやすいようにラインの表示も加えてみましょう。

let x = 0;//変数の宣言
let y = 0;//変数の宣言

function setup(){
  createCanvas(400,400);
}

function draw(){
  background(255);
  x=mouseX;
  y=mouseY;
  print("x:"+x);//コンソールへの値の表示
  print("y:"+y);//コンソールへの値の表示
  line(x,0,x,height);
  line(0,y,width,y);
}

上のスケッチではwidthとheightというシステム変数を使用しています。システム変数とはp5.jsによってあらかじめ設定されている変数です。

width createCanvas関数で設定されたウィンドウの幅
height createCanvas関数で設定されたウィンドウの高さ

練習：変数を２つ作成し、マウスのx座標とy座標を中心にした円が描画されるスケッチを描く。
その際、円は画面に同時に１個だけ表示されていること。またx座標とy座標の値をコンソールに出力すること。

演算子について
演算子とは各種の演算を表わす記号のことです。以下のような演算子があります。

=  代入する
例）x = 0;

+  足す
例）x = x + 1;

–  引く
例）x = x – 1;

*  かける
例）x = x * 2;

/  割る
例）x = x / 2;

また演算子を組み合わせた記述もよく使われます。
+=
例）x += 1;
x=x+1と同じ計算結果となる

-=
例）x -= 1;
x=x-1と同じ計算結果となる

++
例）x++;
x+=1あるいは、x=x+1と同じ計算結果となる

—
例）x–;
x-=1あるいは、x=x-1と同じ計算結果となる

それでは、これまで学んだことを組み合わせたスケッチを描いてみましょう。

let x = 0;//変数の宣言
let y = 0;//変数の宣言
let d = 40;//変数の宣言

function setup(){
  createCanvas(128,128);
}

function draw(){
  background(0);
  x=mouseX;
  y=mouseY;
  print("x:"+x);
  print("y:"+y);
  noStroke(); // 線を消す
  fill(x+y,0,0);//塗りの色
  ellipse(width/4,height/4,d,d);
  fill(0,x+y,0);
  ellipse(width/2,height/2,d,d);
  fill(0,0,x+y);
  ellipse(width*0.75,height*0.75,d,d);
}

上の例ではカラーモードがRGBの場合、各色が256色であるのを利用してウィンドウサイズを256の半分の128ピクセルとし、マウスのx座標とy座標の値の変化が円の色の変化に反映されるようにしています。

課題４
オンデマンド課題と対面授業課題をそれぞれの締切日までに実施し提出してください。

１）オンデマンド課題 
以下の用語について調査し記述しなさい。 
「アルゴリズム」
課題提出方法 CSのレポート掲示板「デジタルコンテンツ実習Ⅵ(プログラミング) 第４回」にPDF形式の文書を
提出してください。 
A4サイズ 縦位置・横書き 
提出締切 10月28日（水）まで

２）対面授業課題 
対面授業を受講後、以下の内容に沿ってコードを作成し、コードのリンクを記載した書類を提出する。
「変数を使い、x座標とy座標の変化を利用したグラフィックス表現を、コードを用いて描いてください。」 
課題提出方法 作成した作品へのリンク用文字列が記述された文書を、PDF形式のファイルにしてアップロードしてください。
A4サイズ・縦位置・横書き　
提出締切　11月4日（水）まで

＊第4回授業用CSレポート掲示板の提出は11月4日（水）まで可能ですが、それぞれの締切日をこちらで
確認していますので、 締切日を守って提出するようにしてください。