特別実習A/2017

Whiteboard

特別実習A｜特別実習A/受講生?｜映像アニメーション領域・3年前期

↑

実習お疲れ様でした。

最終的なアップロードの締め切りは 7月27日(木)です。
特別実習A/受講生?

↑

第14・15回

↑

サンプルプログラムを応用した実験的な小作品の制作

この演習の成果物となるWORKフォルダの中身（4つのファイル）
- index.html：Webブラウザ上で描画を実現するための舞台
- style.css：舞台のビジュアルデザイン（タイトル、背景等）
- myScript.js：作品となる描画プログラム
- p5.js（p5.min.jsでも可）：Processing の JSライブラリー

p5.jsの公式サンプルはこちら

アップロード締め切り：第15回終了30分前まで
最後の30分を相互閲覧の時間とします。
相互閲覧　終了前30分〜
＞特別実習A/受講生?

↑

完成作品のアップロードについて

学内サーバーに接続する
アプリケーションの中にあるFileZillaを起動して下さい。
- 接続サーバー　→　ftp.ip.kyusan-u.ac.jp
- ユーザID　→　学園サーバー用のユーザID（K'sLifeで用いているもの）
- パスワード　→　学園サーバー用のパスワード（K'sLifeで用いているもの）
- Quick Connect (クイック接続)をクリック
アップロード
接続先のディレクトリの中に、Web公開用に用意されたWWW-KSUという名前のフォルダがあるので、その中に作成したフォルダ( WORK )をアップして下さい。WWW-KSUの直下に WORK が見える状態が正解です。

↑

↑

p5.js によるプログラミング体験

↑

はじめに

p5.jsとは、「デザイン/アートのためのプログラミング言語」といわれるProcessingをJavaScriptに移植したライブラリです。オープンソース。自由にダウンロードして利用することができます。

公式サイト　http://p5js.org/
ダウンロード　http://p5js.org/download/
圧縮パッケージには複数のファイルがありますが、
とりあえず必要なのは、p5.min.js です。
リファレンスマニュアル　http://p5js.org/reference/
サンプル　http://p5js.org/examples/

↑

開発準備

開発に必要なのは、ブラウザとテキストエディタだけです。

一般に一つのコンテンツは、複数のファイルから構成されます。すべての構成ファイルを１つのフォルダにまとめるのが一般的です。

デスクトップに、work という名前のフォルダをひとつ作って下さい。

そこに、以下のファイルを投入します。
- index.html：Webブラウザ上で描画を実現するための舞台
- style.css：舞台のビジュアルデザイン（タイトル、背景等）
- myScript.js：描画を指示する親会社（作品となるプログラム）
- p5.js（p5.min.jsでも可）：Processing の JSライブラリー

動作確認するには
index.htmlファイルを、ブラウザへドラッグ＆ドロップするだけです。
参考：アドレスバーに表示されるURLの違い
- 通常のネット接続の場合：　http://www.example.com/index.html
- ファイルを表示した場合：　file://・・・・ /index.html

具体的には以下にある「演習用ファイル」のソースコードをCopy&Pasteして、それぞれテキストファイルとしてフォルダに投入します。

↑

演習用のファイル

index.html
以下のようにCSSファイルのリンク、および、p5.jsの舞台となる div 領域を用意して、そこに任意のIDを設定します（ここでは myCanvas）。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="p5.min.js"></script>
    <script src="myScript.js"></script>
    <link rel="stylesheet" href="style.css" >
   <title>Sample Page</title>
  </head>
  <body>
    <h1>SAMPLE</h1>
    <div id="myCanvas"></div>
  </body>
</html>

style.css

body{
  background: #333;
}

h1{
  margin-bottom: 80px;
  text-align: center;
  color: white;
}

#myCanvas{
  width: 1280px;
  margin: auto;
}

myScript.js

//外部変数
var x=0;

// 初期設定
function setup() {
  var cv=createCanvas(1280, 400);
  cv.parent("myCanvas");
  frameRate(60);

      //   ここにその他の初期設定

}

// アニメーションループ
function draw() {

    //ここに描画プログラム
 
}

↑

p5.js プログラムの基本構造

myScript.jsに書く描画プログラムは、
setup()とdraw()の２つの関数で成り立ちます。

function setup(){・・・}
- 一回だけ実行されます。
- 描画領域の設定、フレームレートの設定などはここに書きます。
- アニメーションのない静止画の描画はここだけで完結します。

function draw(){・・・}
- ページが表示されている間、繰り返し実行されます。
- アニメーションさせたい内容をここに書きます。

↑

描画の基本事項

↑

座標

画面上のｘ座標は画面左から、y 座標は画面上からの値です。
- windowWidth, windowHeight はブラウザのウインドウの幅と高さを意味します。CANVASをブラウザのサイズに合わせる場合に使います。
- width, height はCANVASの幅と高さを意味します。

↑

色モード

colorMode
RGBモードとHSBモードで、意味が変わります。
- colorMode(RGB, R最大値, G最大値, B最大値, 不透明度最大値);
```
colorMode(RGB, 255, 255, 255,100);
```
- colorMode(HSB, 色相最大値, 彩度最大値, 明度最大値, 不透明度最大値);
```
colorMode(HSB, 360, 100, 100, 100);
```

↑

塗りと線

fill()：塗り色の設定
描画命令の直前に fill(R, G, B, α); などと書くことで図形に適用します。
```
fill(255,255,0,100);　←　黄色になります。
```

noFill()：塗りなし設定

stroke()：線色の設定
描画命令の直前に stroke(R, G, B, α); などと書くことで図形に適用します。
```
stroke(0,255,0,100);　←　緑になります。
```

strokeWeight()：線の太さの設定

strokeWeight(4);　←　4pxの太さの線。

noStroke()：線なし設定

↑

図形の描画

矩形　rect( x, y, 幅, 高さ);
楕円　ellipse( x, y, 幅, 高さ);

↑

文法確認

↑

代入

一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」
という意味になります。
xという変数に100という数値を代入するには・・
```
x = 100;
```
現在の x に、別の値を足した（掛けた）結果を、再び x に代入するには・・
```
x = x+10; （ x = x*10; ）
```
以下のような書き方でも同じ結果になります。
```
x += 10; （ x *= 10; ）　
```
ひとつ増やす（減らす）には・・ ※ x = x+1（ x = x-1 ）と同じです。
```
x++;　（　x--;　）
```

↑

配列変数

同じ種類のデータを複数セットで扱う場合には、配列を用います。
以下のように、宣言して利用します。

d = new Array(7);  　// 配列オブジェクトを new
d[0] = "Sun";　　// 要素の格納
d[1] = "Mon";
  :
d[6] = "Sat";

上の例では、いずれも d[0] ～ d[6]までの7個の値を扱うことができます。
このとき、0や6といった [ ] 内の数字を「添字」といいます。
d[ i ] などの表記で、添字を変数化すると連続的な処理が可能になります。

↑

条件判断 if

if：条件によって分岐します。

if( 条件 ) {
   処理;
} else if( 条件 ) {
   処理;
} else {
   処理;
}

関係演算子（条件部分の記載に使用）

== (equality)
> (greater than)
>= (greater than or equal to)
!= (inequality)
< (less than)
<= (less than or equal to)

論理演算子（条件部分の記載に使用）

&& (logical AND)
! (logical NOT)
|| (logical OR)

例：もし x が負の数であれば円を描く、そうでない時は正方形を描く

if( x<0 ){
    ellipse( PX, PY, S, S );
}else{
    rect( PX, PY, S, S );
}

↑

ループ制御 for, while

for：条件が満たされている間、値を更新しながら処理を繰り返します。

for (初期値; ループ条件; 更新) {
   処理;
}

例

for (var i = 0; i < 80; i = i+5) {
   処理;
}

while：条件が満たされている間、処理を繰り返します。

while (条件) {
  処理;
}

例

var i=0;
while(i<80) {
  処理;
  i = i + 5;
}

↑

関数

はじめに
関数とは処理機能の集合体で、一連の処理を一括実行します。
中学の数学では・・
```
 y = f(x)  　（ 例えば　 y = 2x + 1 ） 
```
と書きましたが、これは、入力データ x に対して、処理 f、つまり２倍して１加えるという一連の処理を施し、結果を y に渡す事を意味します。

関数の定義
実際のプログラムでは、以下のように書いて準備します。
```
function f( x ){
    var y = 2*x + 1;
    return y;
}
```
この関数が存在すれば、プログラム中で、以下のように書くだけで、入力データの値を2倍して1加えた値、すなわち11が y にセットされます。
```
y = f(5);
```

例：２つの値を足し算して、結果を返す関数
```
function add(x, y) {
    var z = x + y;
    return z;
}
```
「親」プログラムの中に以下のように書くと、ans には５が代入されます。
```
var  ans = add(3,2);
```

例えて言うと・・
システム全体が親会社だとすると、個々の関数は、親会社からデータを受け取って、それを処理・加工して、親会社へ戻す「子会社」の役割を担うもの、と言うことができます。

↑

インタラクション

マウスの座標を検知する
- mouseX, mouseY で座標を取得できます。
乱数をつかう
- random(100);：0 -99の値がランダムに得られます。
- random(50,100); ：50 -99の値がランダムに得られます。

イベントプロシージャ
p5.jsのプログラムは、基本的に setup() と draw() の２つの関数からなりますが、マウスがクリックされたときの処理、キーボードが押されたときの処理を記述するための関数も用意されています。以下例です。
- マウスクリック時の動作を記述するには　
```
function mousePressed() {
  ellipse(mouseX, mouseY, 5, 5);
}
```

キーボードが押された時の動作を記述するには

function keyTyped() {
  if (key === 'x') {
     ( 押されたキーが [ x ] の場合の処理 )
  } 
}

参考：JavaScript/Syntax

↑