LogoMark.png

特別実習A/2017

Whiteboard

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

実習お疲れ様でした。

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

第14・15回

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


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

これまでの内容




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

はじめに

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

開発準備

具体的には以下にある「演習用ファイル」のソースコードを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()の2つの関数で成り立ちます。

描画の基本事項

座標

色モード

塗りと線

図形の描画




文法確認

代入

配列変数

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

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

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

条件判断 if

ループ制御 for, while


関数

インタラクション

参考:JavaScript/Syntax



サンプルプログラム

サンプル1:基本アニメーション

黒バックの描画領域が現れて白い正方形が右へ動きます。 >DEMO

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;
}


サンプル2:インタラクティブ

マウスを用いたインタラクティブなプログラムの例 >DEMO

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);
  // マウスの位置に円を描く
}


サンプル3:if文、論理演算子を使ったアニメーション

ボールがウインドウの壁で反射して動きます。> DEMO

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);
}


サンプル4:ループを使ったパターングラフィックス

これは setup()のみのプログラムで、一回描画して終了します。> DEMO
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);
      }
    }
}


サンプル5:オリジナル関数の利用

ランダムなRGB値で塗りを設定する関数を使っています。> DEMO
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);
}




サンプル6:配列変数を使った複数要素のアニメーション

マウスのクリックでボールが発生し、ウインドウの壁で反射して動きます。マウスのクリック時の処理を記述する関数も加えています。> DEMO

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 = [];




補足

テキストエディタについて

プログラミングに用いる、最もシンプルなツールがテキストエディタです。
ただ単に文字を入力・編集する・・・というだけのソフトで、
それによって作られる文字だけのデータを「テキストファイル」といいます。
テキストファイルはコンピュータの世界では最も原始的なファイルで、
どんなソフトでも、それを読んで表示することができます。
基本的に、それだけで十分。特別なソフトウエアは不要です。

ATOMの動作環境について

混乱を避けるため、不要なファイルは開かない方が賢明です。

注意事項:無限ループ

プログラミングでは、処理手順に間違いがあると、PCに大きな負荷がかかってフリーズすることもあります。例えば以下のような「無限ループ」などは、ブラウザを固まらせる原因になるので注意が必要です。
以下は説明用の記述です。試さないでください。

while (1) {
  console.log("Hello, world");
}

そこで、PCの動作状況をモニタリングする方法を紹介します。

ちなみに、Macでフリーズした特定のソフトウエアを強制終了するには・・

Command + Option + ESC 

これで、稼働中の一覧が表示されるので、終了したいものを選びます。





PAGES

GUIDE

DATA

添付ファイル: fileWORK.zip 323件 [詳細] fileWORK_CSS.zip 341件 [詳細]
Last-modified: 2019-07-05 (金) 20:51:28