#author("2017-07-20T13:23:19+00:00","default:inoue.ko","inoue.ko")
*Whiteboard
[[特別実習A]]｜[[特別実習A/受講生]]｜映像アニメーション領域・3年前期
//-[[文法の概説>JavaScript/Syntax]]
~
***実習お疲れ様でした。
''最終的なアップロードの締め切りは 7月27日(木)です''。
[[特別実習A/受講生]]
~
**第14・15回
***サンプルプログラムを応用した実験的な小作品の制作
-この演習の成果物となるWORKフォルダの中身（4つのファイル）
--index.html：Webブラウザ上で描画を実現するための舞台
--style.css：舞台のビジュアルデザイン（タイトル、背景等）
--''myScript.js''：作品となる描画プログラム
--p5.js（p5.min.jsでも可）：Processing の JSライブラリー
-[[p5.jsの公式サンプルはこちら>https://p5js.org/examples/]]
-アップロード締め切り：''第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'' が見える状態が正解です。
~
***これまでの内容
#contents2_1
~
~
**p5.js によるプログラミング体験
***はじめに
p5.jsとは、「デザイン/アートのためのプログラミング言語」といわれる[[Processing>Google: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]]
~
~
**サンプルプログラム
***サンプル１：基本アニメーション
黒バックの描画領域が現れて白い正方形が右へ動きます。 ＞[[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_animation1/]]
''myScript.js''：以下をCopy&Pasteでお試し下さい。
//外部変数
var x=0;
// 初期設定
function setup() {
var cv=createCanvas(1280, 400);
cv.parent("myCanvas");
frameRate(60);
}
// アニメーションループ
function draw() {
background(0);
rect(x, 200, 40, 40);
x++;
if(x>width) x=0;
}
~
***サンプル２：インタラクティブ
マウスを用いたインタラクティブなプログラムの例 ＞[[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_mouse/]]
''myScript.js''：以下をCopy&Pasteでお試し下さい。
//外部変数
var cnt=0;
// 初期設定
function setup(){
var cv=createCanvas(1280, 400);
cv.parent("myCanvas");
colorMode(HSB,100);
noStroke();
frameRate(30);
}
// アニメーションループ
function draw(){
fill(99,10);
// 白10%
rect(0,0,width,height);
// 全画面塗りつぶし
fill((cnt++)%100,50,99);
// 順次変化する色相で
ellipse(mouseX,mouseY,64,64);
// マウスの位置に円を描く
}
~
***サンプル３：if文、論理演算子を使ったアニメーション
ボールがウインドウの壁で反射して動きます。＞ [[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_animation2/]]
''myScript.js''：以下をCopy&Pasteでお試し下さい。
var x,y;
var vx=vy=5.0;
function setup(){
var cv=createCanvas(1280, 720);
cv.parent("myCanvas");
x=width/2;
y=height/2;
colorMode(RGB);
frameRate(60);
}
function draw(){
fill(0,0,0); //Black
rect(0,0,width,height);
x = x + vx;
y = y + vy;
if(x < 0 || width<x ) vx = vx * -1;
if(y < 0 || height<y ) vy = vy * -1;
fill(255,0,0); //Red
ellipse(x,y,40,40);
}
~
***サンプル４：ループを使ったパターングラフィックス
これは setup()のみのプログラムで、一回描画して終了します。＞ [[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_pattern/]]
myScript.jsの部分のみ掲載します。
''myScript.js''：以下をCopy&Pasteでお試し下さい。
function setup() {
var cv=createCanvas(1280, 720);
cv.parent("myCanvas");
colorMode(RGB);
background(0,0,0);
noStroke();
rectMode(CENTER);
for( var y = 16 ; y < height; y += 32 ){
for( var x = 16 ; x < width ; x += 32 ){
fill( 0, x%256, y%256);
rect(x, y, 24, 24);
}
}
}
~
***サンプル５：オリジナル関数の利用
ランダムなRGB値で塗りを設定する関数を使っています。＞ [[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_function/]]
myScript.jsの部分のみ掲載します。
''myScript.js''：以下をCopy&Pasteでお試し下さい。
function setup() {
var cv=createCanvas(1280, 720);
cv.parent("myCanvas");
colorMode(RGB);
noStroke();
ellipseMode(CORNER);
frameRate(3);
}
function draw() {
var step = 32;
for( var y=0; y<height; y+=step ){
for( var x=0; x<width; x+=step ){
randomColor();
ellipse(x,y,step,step);
}
}
}
function randomColor(){
var r = random(256);
var g = random(256);
var b = random(256);
fill(r,g,b);
}
~
~
***サンプル６：配列変数を使った複数要素のアニメーション
マウスのクリックでボールが発生し、ウインドウの壁で反射して動きます。マウスのクリック時の処理を記述する関数も加えています。＞ [[DEMO>http://art.kyusan-u.ac.jp/koichi_inoue/SampleSite/p5js_animation3/]]
''myScript.js''：以下をCopy&Pasteでお試し下さい。
var N = 0;
var r = new Array(1000);
var c = new Array(1000);
var x = new Array(1000);
var y = new Array(1000);
var vx= new Array(1000);
var vy= new Array(1000);
function setup(){
var cv=createCanvas(1280, 720);
cv.parent("myCanvas");
colorMode(HSB,100);
noStroke();
frameRate(60);
}
function draw(){
fill(0,0,0,10);
rect(0,0,width,height);
for(i=0; i<N; i++){
x[i] += vx[i];
y[i] += vy[i];
if(x[i] < 0 || x[i] > width) vx[i] *= -1;
if(y[i] < 0 || y[i] > height) vy[i] *= -1;
fill(c[i],50,100);
ellipse(x[i],y[i],r[i],r[i]);
}
}
function mousePressed() {
if( N >= 999 ) return;
x[N] = mouseX;
y[N] = mouseY;
vx[N] = random(20)-10;
vy[N] = random(20)-10;
r[N] = random(5,50);
c[N] = random(100);
N++;
}
~
この例では、var x = new Array(1000); という書き方で配列を準備していますが、以下のように「空の配列をつくる」という準備の仕方でも動作します。
var x = [];
~
~
**補足
***テキストエディタについて
プログラミングに用いる、最もシンプルなツールがテキストエディタです。
ただ単に文字を入力・編集する・・・というだけのソフトで、
それによって作られる文字だけのデータを「テキストファイル」といいます。
テキストファイルはコンピュータの世界では最も原始的なファイルで、
どんなソフトでも、それを読んで表示することができます。
基本的に、それだけで十分。特別なソフトウエアは不要です。
-[[TextEditor]]
~
***ATOMの動作環境について
混乱を避けるため、不要なファイルは開かない方が賢明です。
-動時に前回のウインドウ状態を復元しないようにする
ATOM > 環境設定 > Core > 起動時に前回のウインドウ状態を復元
の部分で''チェックを外します''。
-ツリービューに見えているものが現在のディレクトリとは異なる場合があり、混乱することがあります。見えないようにした方が賢明かもしれません。
表示 > ツリービュー （これはトグルになっています）。
~
***注意事項：無限ループ
プログラミングでは、処理手順に間違いがあると、PCに大きな負荷がかかってフリーズすることもあります。例えば以下のような「無限ループ」などは、ブラウザを固まらせる原因になるので注意が必要です。
&color(red){以下は説明用の記述です。試さないでください。};
while (1) {
console.log("Hello, world");
}
そこで、PCの動作状況をモニタリングする方法を紹介します。
-Mac の場合：アクティビティーモニター
メニュー＞移動＞ユーティリティー＞アクティビティーモニター
-Windows の場合：タスクマネージャー
CTRL + ALT + DELETE ・・で起動します。
~
ちなみに、Macでフリーズした特定のソフトウエアを強制終了するには・・
Command + Option + ESC
これで、稼働中の一覧が表示されるので、終了したいものを選びます。
~
~
~
