特別実習A/2017
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Whiteboard
[[特別実習A]]｜[[特別実習A/受講生]]｜映像アニメーション領...
//-[[文法の概説>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-KS...
~
***これまでの内容
#contents2_1
~
~
**p5.js によるプログラミング体験
***はじめに
p5.jsとは、「デザイン/アートのためのプログラミング言語」...
-公式サイト 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....
--ファイルを表示した場合： file://・・・・ /index.html
~
具体的には以下にある「演習用ファイル」のソースコードをCop...
~
***演習用のファイル
''index.html''
以下のようにCSSファイルのリンク、および、p5.jsの舞台とな...
<!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 はブラウザのウインドウの幅と...
--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、つ...
-関数の定義
実際のプログラムでは、以下のように書いて準備します。
function f( x ){
var y = 2*x + 1;
return 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]]
~
~
**サンプルプログラム
***サンプル１：基本アニメーション
黒バックの描画領域が現れて白い正方形が右へ動きます。 ＞[...
''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>...
''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:...
''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()のみのプログラムで、一回描画して終了します...
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値で塗りを設定する関数を使っています。＞ [[D...
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);
}
~
~
***サンプル６：配列変数を使った複数要素のアニメーション
マウスのクリックでボールが発生し、ウインドウの壁で反射し...
''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
これで、稼働中の一覧が表示されるので、終了したいものを選...
~
~
~
終了行:
*Whiteboard
[[特別実習A]]｜[[特別実習A/受講生]]｜映像アニメーション領...
//-[[文法の概説>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-KS...
~
***これまでの内容
#contents2_1
~
~
**p5.js によるプログラミング体験
***はじめに
p5.jsとは、「デザイン/アートのためのプログラミング言語」...
-公式サイト 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....
--ファイルを表示した場合： file://・・・・ /index.html
~
具体的には以下にある「演習用ファイル」のソースコードをCop...
~
***演習用のファイル
''index.html''
以下のようにCSSファイルのリンク、および、p5.jsの舞台とな...
<!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 はブラウザのウインドウの幅と...
--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、つ...
-関数の定義
実際のプログラムでは、以下のように書いて準備します。
function f( x ){
var y = 2*x + 1;
return 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]]
~
~
**サンプルプログラム
***サンプル１：基本アニメーション
黒バックの描画領域が現れて白い正方形が右へ動きます。 ＞[...
''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>...
''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:...
''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()のみのプログラムで、一回描画して終了します...
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値で塗りを設定する関数を使っています。＞ [[D...
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);
}
~
~
***サンプル６：配列変数を使った複数要素のアニメーション
マウスのクリックでボールが発生し、ウインドウの壁で反射し...
''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
これで、稼働中の一覧が表示されるので、終了したいものを選...
~
~
~
ページ名:
