教材：プログラミング – ページ 2

2021年5月12日2021年10月21日

2021プログラミング４：外部データの使用

p5jsでは外部のデータを扱うことができます。

画像ファイルの読み込み
まず始めにp5jsで使用したい画像ファイルを用意します。jpeg形式かpng形式の画像を用意しましょう。次にp5jsのエディターを開き、ログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

画像ファイルの表示
アップロードした画像ファイルをp5jsのプログラムで使用してみましょう。画像ファイルは、ここでは仮に test.jpg という名称のJPEGデータとします。

let img;

function preload() {
 img = loadImage('test.jpg');
}

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

function draw(){
 image(img, 0, 0,400,300);
}

上記のプログラムでは、始めに画像ファイル用の変数を作成し、img と名付けます。次に、preload()関数を設定します。変数　img　にloadImage()関数を使って画像ファイル test.jpg（testは任意の名称を各自で入力してください）を格納します。画像ファイル test.jpg　を格納した変数 img　をimage()関数を使って表示します。

image()関数の各パラメータは以下のようになります。

image(画像を格納した変数, x座標, y座標, 幅, 高さ)

複数の画像ファイルを表示する
複数の画像ファイルを表示する際のプログラム例を以下に記述します。画像ファイルは、ここでは仮に test1.jpg, test2.jpg という名称の２種類のJPEGデータとします。

let img1;
let img2;

function preload() {
 img1 = loadImage('test1.jpg');
 img2 = loadImage('test2.jpg');
}

function setup() {
 createCanvas(600, 400);
 background(0);
}

function draw(){
 image(img1, 0, 0,600,400);
 image(img2, mouseX, mouseY,200,100);
}

扱える画像フォーマット
Processingで扱うことのできるラスタ画像のファイルフォーマットは、JPEG、PNG、GIF になります。
ラスタ画像とは色のついた点（ドット）の集合として画像を表現するデータ形式のことです。もとの画像サイズより拡大するとジャギー（ギザギザ）が目立つようになるなど、拡大、縮小、変形には適さない形式ですが、写真などの複雑な画像の表現に適しています。

練習：PNGデータを使用し背景を透明化した画像データを作成する。
作成した画像データを使用して、画像データがマウスカーソルの動きに追従する作品を作成してください。

サウンドの再生

はじめに、サウンドの再生を実行します。まず、フリーの音源データをインターネット上から探してデスクトップにダウンロードします。ダウンロードする音源データは必ずmp3形式を選んでください。ダウンロードした音源データの名称をtest.mp3と変更します。

次に、画像データを扱った時と同じように、p5jsのエディターを開きログインしておきます。p5jsのエディターのスケッチエリアの上部左側の” > “ボタンを押すと、Sketch Filesメニューが表示されます。続けて”▼”ボタンを押すとメニューが表示されるので、Upload Fileを選択し、開いたウィンドウにファイルをドラッグ・アンド・ドロップします。Sketch Filesメニュー欄にアップロードしたファイル名が表示されるので確認しておきましょう。

以下のコードを記述して実行ボタンを押すと音源データが再生されます。

let sound;

function preload() {
 sound = loadSound("test.mp3");
}

function setup() {
 createCanvas(400, 400);
 sound.loop();
 sound.play();
}

function draw() {

}

マウスクリックでサウンドを再生する

次にマウスをクリックすることでサウンドが再生されるプログラムを作成してみましょう。（新規でプログラムを作成する場合は、先ほどと同じようにあらかじめ音源データを追加しておきます。）

let sound;

function setup() {
 sound = loadSound('test.mp3');
 createCanvas(400, 400);
 background(255, 0, 0);
}

function mousePressed() {
 if (sound.isPlaying()) {
   sound.stop();
   background(255, 0, 0);
 } else {
   sound.play();
   background(0, 255, 0);
 }
}

音量の視覚化

サウンドの音量（ボリューム）とグラフィックスを関連づけてみましょう。

let sound, analyzer;

function preload() {
 sound = loadSound('test.mp3');
}

function setup() {
  createCanvas(400, 200);
  analyzer = new p5.Amplitude();
  sound.pause();
  sound.loop();
  analyzer.setInput(sound);
}

function draw() {
    background(0);
    let rms = analyzer.getLevel();
    fill(255,0,0);
    ellipse(width/2, height/2, 10+rms*200, 10+rms*200);
}

練習：２種類のサウンドデータを用意する。
２種類のサウンドデータの音量に合わせて変化するグラフィック作品を作成してください。

2021年4月28日2021年4月28日

2021プログラミング３：条件分岐と繰り返し構造

条件分岐
プログラミングは通常は最初の１行から終わりの１行まで順番に処理されます。しかし、それでは複雑な処理をコンピューターに実行させることができません。複雑な処理をさせるための方法のひとつとして条件分岐という考え方が存在します。

単純な処理：
公園に行く。

複雑な処理：
晴れたら公園に行く。
そうでなければ、家で読書する。

上の例のように、条件によって行動（＝処理）が変化する（＝分岐する）ことを条件分岐といいます。上の複雑な処理の例は以下のように条件分岐命令の書式で記述することができます。

if( 晴れ）{ 公園に行く; }else{ 家で読書する; }

練習：if( 晴れ ）{ 公園に行く; }else{ 家で読書する; }のように、
あなたの行動を条件分岐命令の書式で記述してみましょう。

コードであらわす場合は以下のように記述します。

if( 条件式 ){ 条件式が真の場合に実行する内容; }else{ 条件式が真ではない場合に実行する内容; }

プログラミングでは、真であることをtrueと記述します。また真ではない場合は偽とあらわしfalseと記述します。

次に実際にProcessingのコードとして条件分岐命令を記述してみましょう。

if文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }

条件が真（true）の場合：

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}

条件が偽（false）の場合：

let i=0;
if( i>0 ){
 createCanvas(0,0,255);
}

if〜else文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }else{ 条件がfalseの場合に実行される内容; }

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}else{
 createCanvas(0,0,255);
}

条件分岐命令を使用してProcessingのストラクチャーを利用したコードを記述してみましょう。

let x=0;

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

function draw(){
   x = mouseX;
   if( x<200 ){
      background(255,0,0);
   }else{
      background(0,0,255); 
   }
}

上のコードではウィンドウを幅400ピクセル、高さ400ピクセルに設定しマウスのX座標がウィンドウの中心（200ピクセルの位置）より「小さい（=true)か否（=false)か」を条件式として判定し、背景色を切り替えています。

練習：if〜else文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

条件式
真偽を判定するために使用できる条件式を以下に記載します。

< 左辺が右辺より小さい

i<100

> 左辺が右辺より大きい

i>100

<= 左辺が右辺以下

i<=100

>= 左辺が右辺以上

i>=100

>== 左辺が右辺に等しい

i>==100

!= 左辺が右辺に等しくない

i>!=100

&& かつ (「かつ」はandとも表現する）

i>0 && i<100

|| または　(「または」はorとも表現する）

i<0 || i>100

さまざまな条件式を利用したコードを記述してみましょう。

let x=0;
let y=0;

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

function draw(){
 x = mouseX;
 y = mouseY;
 if( x<200 ){ background(255,0,0); } if( x>200 ){
  background(0,0,255); 
 } 
 if( x==200){
  fill(0,0,0);
  ellipse(width/2,height/2,300,300); 
 } 
 if( y>0 && y<100){
  fill(255,255,255);
  ellipse(width/2,height/2,200,200); 
 }
 if( x<100 || x>300){
  fill(0,255,0);
  ellipse(width/2,height/2,100,100); 
 }
 line(width/2,0,width/2,height);
 line(0,height/2,width,height/2);
}

上のコードの例ではマウスの座標に応じて背景色や円の表示が切り替わります。

練習：さまざまな条件式を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

繰り返し構造
プログラムでは繰り返しの構造を使うことで、ひとまとまりのコードを繰り返し実行することができます。繰り返しの構造を使うことで複雑な構造のプログラムを短いコードにできたり、プログラムにパターンを生み出すことなどができます。

forループ文
繰り返し構造を記述するコードとしてforループ文を使ったプログラムを作成してみましょう。
forループ文は以下のように記述します。

for(初期値; 条件式; 更新）{

繰り返し実行されるコード

}

例）
for(i = 0; i < 100; i+=10）{

ellipse(i,100,20,20);

}

・「初期値」で最初の値を設定します。　forループ文では慣例的に変数 i が使われることが多いです。
この例では変数iが宣言され、初期値は0に設定されています。
・「条件式」で変数 i を評価します。　変数　i の値を比べて条件にあわなくなるまで「繰り返し実行されるコード」を実行します。
この例では変数iの値が100以下の値である限り「繰り返し実行されるコード」が実行され続けます。
・「更新」で変数の値を変化させていきます。
この例では変数iの値は10ずつ加算されていきます。0,10,20,30,40〜のように変化します。

条件式の例
i > A　Aより大きい
i < A　Aより小さい　i >= A　A以上
i <= A　A以下
i == A　Aと等しい
i != A　Aと等しくない
「更新」で変数 i の値をどのように変化させるかの例
i+=10ならコードが実行されるごとに変数 i に10加算
i-=10なら10減算
i++は１加算
i–は1減算。

それでは、forループ文を使った繰り返し構造のプログラムを記述してみましょう。

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

function draw(){
  for(let i = 20; i < 400; i += 20){
    ellipse(i,100,20,20);
  }
}

二重の繰り返し構造
forループ文のなかにforループ文を記述することができます。
それでは、二重の繰り返し構造のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,400);
  background(0);
  noStroke();
}

function draw(){
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      fill(255,48,203);
      ellipse(i,j,15,15);
   }
  }
}

二重の繰り返し構造を使った別のプログラムを記述してみましょう。

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

function draw(){
  background(0);
  fill(252,145,3);
  stroke(250,240,48);
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      ellipse(i,j,10,10);
      line(i,j,mouseX,mouseY);
   }
  }
}

練習：forループ文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

2021年4月21日

2021プログラミング２：コードの基本と図形、色、変数

プログラミング最初の一歩
プログラミングの動作を記述する一連の文字のことをコード（ソースコード）と呼びます。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座標の値の変化が円の色の変化に反映されるようにしています。

練習：変数を使い、x座標とy座標の変化を利用したグラフィックス表現を、コードを用いて描いてみましょう。

2021年4月14日

2021プログラミング１： Processingについて

本講座ではプログラミングを学習するための環境としてProcessing[図1]を使用します。

図１　Processingのウェブサイト

Processingはグラフィックスをプログラムで生成するうえで困難な各種設定などを必要とせず、コーディングに専念できるという特長があります。
また、Processingはグラフィックスだけでなく、音声や動画なども扱うことができ、それらを組み合わせてインタラクティブ（双方向性のある）な表現を可能にしてくれます。

それでは最初にProcessingがどういう経緯で制作されたプログラミング環境なのかを解説します。

Processingは当時マサチューセッツ工科大学メディアラボに在籍していたCasey ReasとBen Fryによって2001年に誕生しました。
その後2002年から2008年まで開発が続き、2008年秋からバージョン1.0がリリースされ、2013年にはバージョン2.0が、つづく2015にはバージョン3.0がリリースされ現在に至っています。
ProcessingはJava(Java日本語サイト)というプログラミング言語の環境を活用してグラフィック機能などに特化したものだと言えます。

Processingの作者であるCasey ReasとBen Fryは著書「Processingをはじめよう」の中で影響を受けた先行するプログラミング環境をあげています。
ひとつはLOGO(LOGOファウンデーション)で、教育のために開発されたプログラミング環境でした。この言語は児童の発達心理学の成果などが活かされており子どもが思考するための道具としての工夫がなされていました。
ふたつめはDesign By Numbers(公式サイト)で、この言語はマサチューセッツ工科大学メディアラボのJohn Maedaによって開発されました。Design By Numbersはデザイナーやアーティストといったプログラミングを専門としていない人でもプログラミングが可能となる環境を目指して作られており、数値によるグラフィックデザインの研究や教育に使われました。

上のような先行するプログラミング環境の思想や特徴の影響を色濃く受けたProcessingは、初心者にもわかりやすく、特にアーティストやデザイナーなどが創造や表現のためにプログラミングを使うことを学ぶ最初の一歩を踏み出すのに最適な言語です。

プログラミングってどんなもの？
プログラミングとは、コンピューターと呼ばれる計算機に、特定の処理をさせるために命令を与えるための記述方法であると言えます。（記述することをコーディング、記述されたプログラムをコードなどと呼びます。）プログラミングは、プログラム言語と呼ばれる「言語」によって記述されます。

プログラミングに似た人間の活動として、「お菓子づくり」を例に説明します。皆さんはお菓子を作ったことはあるでしょうか。お菓子づくりは他の料理に比べると材料の分量や、材料を混ぜ合わせるタイミングなどが厳密で、ちょっと間違えるだけで、お菓子がふくらまなかったり、焦げたりします。筆者もシュークリームづくりに挑戦して、シュー皮がちっともふくらまず、クリームをしぼんだ皮に塗って食べた苦い経験があります。（全部おいしくいただきましたが。。。）この、お菓子づくりの「レシピ」に相当するものがプログラムです。厳密に書かれたレシピに沿って、材料を用意し、分量をはかり、材料を混ぜて加工すれば、完成目標であるお菓子ができあがります。皆さんが、これから学ぼうとしているプログラミングも、このレシピに非常に似ています。

実際には、皆さんはグラフィックスやサウンドを用いた作品をプログラムを用いて制作することになりますが、プログラミング言語を使って命令を書き、コンピューターに計算させて作品を仕上げることになります。

プログラミング言語について
コンピューターと呼ばれる電子計算機は、１９４０年代に戦争の道具として作られたと言われています。海をまたいだ敵国の目標地点に正確にミサイルを撃ち込むための弾道計算に使用されていたそうです。コンピューターは２進法と呼ばれる原理で動作しています。簡単な説明をすると、人間の指を折り曲げるか伸ばすかで、数字を表したり、お父さん指やお母さん指のように家族を表したりできるように、２通りの変化の組み合わせで、この世の多くの事物を表現できるという原理です。コンピューターは、その内部に一種のスイッチのような仕組みを大量に備えており、電気エネルギーを使って高速にスイッチのオンとオフを繰り返して、万物を計算したり表現したりする機械だと考えられます。

ただし、コンピューター内部で起きている、こうしたスイッチのオンとオフの変化は、人間には理解しづらく、コンピューターに命令通りに仕事をさせるためには、特別な言語が必要になります。そのために開発されたのが、コンピューターと人間が対話するために創られたプログラミング言語です。

さて、実はプログラミング言語は一種類ではありません。時代の変化によって、人間がコンピューターに計算させたい内容が変わってきたことなどが影響し、現在では数多くのプログラミング言語が存在します。それは、例えばインターネット用の言語や、スマフォ用の言語、AI（人工知能）用の言語といったように用途によって便利なプログラミング言語が開発されてきました。

プログラミングの開発環境について
プログラミング言語を使ってプログラムを記述するためには、その言語を記述するためのスケッチブックやノートブックに相当する開発環境が必要になります。現在では数多くのプログラミング言語が存在することは、先述したとうりですが、それら数多くのプログラミング言語に適した開発環境が存在します。

p5.jsについて

この授業では第1回で説明したとおり、processingというプグラミング言語を使用して学習を進めていきます。processingは、独自の開発環境を持っていますが、時代の変遷により、JavaScriptと呼ばれる言語環境で、processingを動作させるライブラリと呼ばれる仕組みが実現しています。JavaScriptはインターネット上のWEBサイトの構築などに用いられる言語で、この授業で扱う開発環境であるp5.jsもインターネット上で開発が進めらることが特徴になっています。

以下からp5.js にアクセスしてみましょう。

https://p5js.org/

アクセスできたら、Editorメニューをクリックして、プログラミングを記述するための編集環境を表示してみましょう。

練習
p5.jsのEditorを操作しサンプル・プログラムを動作させて,どのような作品が制作できるのか調べてみましょう。

１）p5.jsのEditorのFileメニューからExamplesを選択する。
２）サンプル・プログラムのリストが表示されるので、まず、ひとつ選ぶ。（サンプル名をクリックする）
３）再生ボタンを押すとサンプル・プログラムが実行され、実行結果がsketchエリアの右側のPreviewエリアに表示される。

p5.jsのサインアップ
この授業では、プログラミングを記述する（=コーディング）ためにp5.jsという開発環境を使用します。
p5.jsを活用するためには、アカウントを作成するためのサインアップが必要になります。

以下の手順に従ってサインアップしましょう。
１）ウェブブラウザからp5.jsのEDITOR画面にアクセスする。

https://editor.p5js.org/

２）EDITOR画面の右上にあるSign upボタンをクリックしてサインアップ画面を表示する。

３）必要な項目を入力する。
・User Name には開発環境で使用するハンドルネームを記載します。本名を使用する必要はありません。
・Email を入力します。
・Password を入力します。（パスワードは忘れないようにメモしておきましょう。）
・Confirm Password に上で入力したパスワードと同じ記号を確認のため入力します。
・Sign upボタンを押して登録ができれば準備完了です。

４）次回からp5.jsのEDITORを使用するときは、毎回 Log inして使用するようにしましょう。
・Log inにはメールアドレスとパスワードの入力が必要になります。

コーディングの準備
１）Examplesを選ぶ
FileメニューからExamplesを選択し、Examples画面で、Hello P5: shapesを選択します。

２）コードの複製
Hello P5: shapesのオリジナルのコードを複製しましょう。
FileメニューからDuplicateを選択すると、コードの複製が作成されます。
コードを記述するエリアの上部に、コード名が　Hello P5: shapes copy として表示されるので、コード名をクリックします。コード名を編集できるので、Hello P5: shapes 0000cmu などのように、名称を変更しておきましょう。
注意：日本語は使用できません。必ず文字入力を半角英数入力に設定を切り替えて名称を入力するようにしましょう。

コードを変更してみる
はじめに、オリジナルのコードの動作確認をしてみましょう。再生ボタンをクリックしコードを実行するとPreviewエリアにコーディング結果が表示されます。
次に、コードを変更してみましょう。コードの８行目　background(200); の数値を以下のように変更して実行してみましょう。

background(255,0,0);

コードの変更によって、背景色が赤く表示されます。（色表示の仕組みについては今後の授業で解説します）
更に、17行目の　ellipse(240, 240, 80, 80); の数値を自由に変更してみましょう。

コードの保存
コードの変更が出来たら保存をしてみましょう。FileメニューからSaveを選択するとクラウド上にコードが保存されます。次にコードを使用する際は、FileメニューからOpenを選択し、必要なコードを開きます。

コードのシェア
作成したコードをシェア（他者と共有）することができます。FileメニューからShareを選択すると、コードをシェアするためのウィンドウメニューが表示されます。メニューのPresentの欄に表示されている文字列をコピーしてメモ帳やWordなどにコピーすると、コーディングで作成した作品へのリンクができるようになります。

練習
p5.jsのEDITORで Hello P5: shapes プログラムを複製しコードを自由に書き換えてシェアしてください。

１）p5.jsのEDITORのFileメニューからExamplesを選択し、サンプル・プログラムのリストから　
   Hello P5: shapes を選ぶ。
２）Hello P5: shapes の名称を変更する。（例　Hello P5: shapes 0000cmu）
３）コード内の数値を自由に書き換えてオリジナルの作品を作る。
４）作品が完成したら保存のうえ、FileメニューからShareを選択し、ウィンドウメニューからPresentの欄に
   表示されている文字列をコピーして、文書作成ソフト（Wordなど）にペーストする。

2020年12月17日2020年12月17日

2020プログラミング講座７：インターフェイスデザイン

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

インターフェイスデザイン

インターフェース（interface）とは英語で境界や界面を表す言葉です。この講座では、ユーザーインターフェースと呼ばれる、人間と機械の境界を取り扱います。お絵かきソフトのインターフェースデザインを通して、プログラミングの過程を学んでいきましょう。

まず、はじめに作成するお絵かきソフトの画面サイズを決めます。ここでは400ピクセルx400ピクセルの画面で作成することにします。また背景色を白に設定します。

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

function draw(){
  
}

次に、幅20ピクセル・高さ20ピクセルの黒色の円がマウスの動きに付いてくるようにします。

let penX = 0;//円のX座標
let penY = 0;//円のY座標
let penSize = 20;//円の直径

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

function draw(){
  penX = mouseX;//円のX座標にマウスのX座標を代入
  penY = mouseY;//円のY座標にマウスのY座標を代入
  fill(0);//円の塗りを黒色にする
  noStroke();//円の輪郭線の描画を無効にする
  ellipse(penX,penY,penSize,penSize);//円の描画
}

円のサイズを変えるためのアイコンを配置します。アイコンが描線で隠れてしまわないようにアイコンの背景として長方形を配置します。

let penX = 0;
let penY = 0;
let penSize = 20;

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

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);//アイコンの背景
  fill(0);
  ellipse(50,350,20,20);//細い描線のアイコン
  ellipse(100,350,40,40);//太い描線のアイコン 
}

アイコンの上にマウスが重なると描線の太さが変わるように設定します。

let penX = 0;
let penY = 0;
let penSize = 20;

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

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(0);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40); 
  if(penX<60 && penY>340){ //小さい円のアイコンの座標にマウスが重なった場合
    penSize=20;
  }
  if(penX>60 && penX<120 && penY>340){ //太い円のアイコンの座標にマウスが重なった場合
    penSize=40;
  }
}

同じ手法を使って描線の色を変えてみましょう。

let penX = 0;
let penY = 0;
let penSize = 20;
let penR = 0;//描線の色・赤
let penG = 0;//描線の色・緑
let penB = 0;//描線の色・青


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

function draw(){
  penX = mouseX;
  penY = mouseY;
  fill(penR,penG,penB);
  noStroke();
  ellipse(penX,penY,penSize,penSize);
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){ //アイコンに描線が重なったら描線の色を赤色に変更する
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){ //アイコンに描線が重なったら描線の色を緑色に変更する
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){ //アイコンに描線が重なったら描線の色を青色に変更する
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

更に描線をline()関数を使用してスムーズにつなげてみましょう。１フレーム前のX座標、Y座標を格納するpmouseX、pmouseYという変数を使用します。

let penX = 0;
let penY = 0;
let penPX = 0;//pmouseXの値を格納する変数
let penPY = 0;//pmouseYの値を格納する変数
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;


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

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX; //１フレーム前のX座標を代入
  penPY = pmouseY; //１フレーム前のY座標を代入
  stroke(penR,penG,penB); //線の色を設定
  strokeWeight(penSize); //線の太さを設定
  line(penX,penY,penPX,penPY); //線を描画
  noStroke(); //以下のオブジェには線を描画しないよう設定
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

次にマウスボタンが押されているときだけ、描線が描画されるように改良しましょう。

let penX = 0;
let penY = 0;
let penPX = 0;
let penPY = 0;
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;


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

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){ //マウスボタンが押されている間だけコードが実行される
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
}

最後に、キーボードの特定のボタンを押すと描線がリセットされるようにしましょう。isKeyPressedおよびkeyという関数を用いることで、キーボードが押されているかどうか、また、どのキーが押されているかをif文で判定するコードを書き加えます。以下のコードでは、キーボードのDボタンが押されると、画面をリセット（白色の四角形を最前面に描画）するようにしています。

let penX = 0;
let penY = 0;
let penPX = 0;
let penPY = 0;
let penSize = 20;
let penR = 0;
let penG = 0;
let penB = 0;

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

function draw(){
  penX = mouseX;
  penY = mouseY;
  penPX = pmouseX;
  penPY = pmouseY;
  stroke(penR,penG,penB);
  strokeWeight(penSize);
  if(mouseIsPressed){
    line(penX,penY,penPX,penPY);
  }
  noStroke();
  fill(255);
  rect(0,300,400,100);
  fill(0);
  ellipse(50,350,20,20);
  ellipse(100,350,40,40);
  fill(255,0,0);
  ellipse(150,350,40,40);
  fill(0,255,0);
  ellipse(200,350,40,40);
  fill(0,0,255);
  ellipse(250,350,40,40);
  if(penX<60 && penY>340){
    penSize=20;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>60 && penX<120 && penY>340){
    penSize=40;
    penR = 0;
    penG = 0;
    penB = 0;
  }
  if(penX>120 && penX<170 && penY>340){
    penR = 255;
    penG = 0;
    penB = 0;
  }
  if(penX>170 && penX<220 && penY>340){
    penR = 0;
    penG = 255;
    penB = 0;
  }
  if(penX>220 && penX<270 && penY>340){
    penR = 0;
    penG = 0;
    penB = 255;
  }
  if ((isKeyPressed == true) && ((key == 'd') ||  (key == 'D'))) {
    fill(255);
    noStroke();
    rect(0,0,400,300);
  }
}

課題１
「2020プログラミング講座６：外部データの使用　音量の視覚化」で扱ったコードを用いて独自の作品を制作する。
ただし、以下の機能は全て必ず実装すること。
・サウンドの音量で独自に用意した画像を変形させる。
・背景画像を用意し配置する。

課題２
上記のお絵かきソフトを改良し独自のインターフェースデザインにリデザインする。 
ただし以下の機能は全て必ず実装すること。画面のサイズやアイコンの配置は自由とする。
・３段階以上の太さの描線で描画できるようにする。
・４色以上の色で描画できるようにする。
・消しゴム機能を追加する。（ヒント：白色の描線を描くことで代用できる）
その他、余裕のある学生は画像をアイコンにして、画像を円の代わりに配置し、
画像で絵を描く機能を実装するなどしても構わない。

課題１と２の提出方法
作成した作品へのリンク用文字列が記述された文書を、PDF形式のファイルにしてアップロードしてください。
A4サイズ・縦位置・横書き 
提出締切： 課題１と２とも、1月6日（水）まで

2020年12月3日

2020プログラミング講座６：外部データの使用

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