p5.js
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*p5.js
http://p5js.org/
~
p5.jsとは、''デザイン/アートのためのプログラミング言語'' ...
~
***CONTENTS
#contents2_1
~
~
**はじめに
p5.js は Processing による描画プログラムを HTMLのCANVAS要...
~
***準備するもの
開発に必要なものは、コードを記述するための[[__テキストエ...
p5.js のライブラリは、ダウンロードしてローカルに置いて利...
-''ライブラリをダウンロード''して利用する場合
--ダウンロードページ：https://p5js.org/download/
--フルパッケージ（p5.js Complete） ＞ p5.zip をダウンロード
--基本ライブラリ（p5.js Single） ＞ p5.min.js をダウンロ...
&small(基本的な描画プログラムであればこれだけでもOKです。);
--HTMLの <head> には以下のように記載します。
<script src="p5.min.js"></script>
-''CDN''を利用する場合
--最新のCDN情報：https://cdnjs.com/libraries/p5.js
--HTMLの <head> には以下のように記載します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.j...
~
***p5.js プロジェクトのはじめ方
-1) はじめにプロジェクトフォルダを作成します。
-2) 以下のファイルを準備してプロジェクトフォルダに投入し...
--index.html（必須：Webページとして表示するための基盤）
--style.css（任意：Webページとしてのスタイル定義が必要な...
--''script.js''（必須：ここに Processing と同様のスクリプ...
--p5.min.js（必須：基本ライブラリ）
-3) index.html をブラウザで表示することで、描画プログラム...
~
***即試したい方は・・
以下、公式サイトのエディタを使えば、スクリプトを直接書い...
-https://editor.p5js.org/
初期サンプルをご覧いただくとわかるとおり、プログラムは ''...
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
~
***サンプル
-授業用サンプルプログラム
ページを独立させました。＞ [[p5.js/Sample]]
-公式サンプル
以下に公式のサンプルが多数用意されています。これらを参考...
http://p5js.org/examples/
~
~
**プログラムの基本構造
p5.js（Processing）の描画プログラムは、''setup( )'' と ''...
~
***function setup( ){・・・}
-描画に関わる初期設定を行う部分です。
-setup は、ページ表示の際、一回だけ実行されます。
-描画領域の設定、フレームレートの設定などはここに書きます。
-アニメーションのない静止画の描画はここだけで完結します。
~
***function draw( ){・・・}
-ページが表示されている間、繰り返し実行されます。
-アニメーションさせたい内容をここに書きます。
~
~
**プロジェクトの構成１
CANVAS が <body> 直下に埋め込まれるシンプルな事例です。
~
***index.html
index.html には、ライブラリとしての p5.min.js と 描画プロ...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="p5.min.js"></script>
<script src="script.js"></script>
<title>Sample Site</title>
</head>
<body>
</body>
</html>
~
***script.js
setup() と draw() の枠組みのみ記載しています。実際のコー...
function setup() {
// CANVASを生成して <body> へ埋め込み
createCanvas(640, 480);
// ここにその他の初期設定
}
function draw() {
// ここに描画のコード
}
~
***サンプル
具体的なコードの事例は、以下をご覧下さい。
-[[p5.js/Sample#patternA]]
~
~
**プロジェクトの構成２
CANVAS を特定の要素内に埋め込む事例です（こちらが実用的で...
~
***index.html
以下のように、<body> 内に <div> 領域を用意しするとともに...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="p5.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" >
<title>Sample Page</title>
</head>
<body>
<h1>SAMPLE</h1>
<div id="container"></div>
</body>
</html>
~
***style.css
CANVAS を埋め込む要素に関する CSS が必要です。
：
#container {
width: 1280px;
margin: auto;
}
：
~
***script.js
setup() と draw() の枠組みのみ記載しています。実際のコー...
function setup() {
// CANVASオブジェクトを取得
var cv = createCanvas(1280, 400);
// CANVASの親要素として container を指定
cv.parent("container");
// ここにその他の初期設定
}
function draw() {
//ここに描画プログラム
}
~
***サンプル
具体的なコードの事例は、以下をご覧下さい。
-[[p5.js/Sample#patternB]]
~
~
**描画の基本事項
***座標
-画面上のｘ座標は画面左から、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 ] の場合の処理 )
}
}
~
~
***注意事項：無限ループについて
プログラミングでは、処理手順に間違いがあると、PCに大きな...
&color(red){以下は説明用の記述です。試さないでください。};
while (1) {
console.log("Hello, world");
}
そこで、PCの動作状況をモニタリングする方法を紹介します。
-Mac の場合：アクティビティーモニター
メニュー＞移動＞ユーティリティー＞アクティビティーモニター
-Windows の場合：タスクマネージャー
CTRL + ALT + DELETE ・・で起動します。
~
ちなみに、Macでフリーズした特定のソフトウエアを強制終了す...
Command + Option + ESC
これで、稼働中の一覧が表示されるので、終了したいものを選...
~
~
終了行:
*p5.js
http://p5js.org/
~
p5.jsとは、''デザイン/アートのためのプログラミング言語'' ...
~
***CONTENTS
#contents2_1
~
~
**はじめに
p5.js は Processing による描画プログラムを HTMLのCANVAS要...
~
***準備するもの
開発に必要なものは、コードを記述するための[[__テキストエ...
p5.js のライブラリは、ダウンロードしてローカルに置いて利...
-''ライブラリをダウンロード''して利用する場合
--ダウンロードページ：https://p5js.org/download/
--フルパッケージ（p5.js Complete） ＞ p5.zip をダウンロード
--基本ライブラリ（p5.js Single） ＞ p5.min.js をダウンロ...
&small(基本的な描画プログラムであればこれだけでもOKです。);
--HTMLの <head> には以下のように記載します。
<script src="p5.min.js"></script>
-''CDN''を利用する場合
--最新のCDN情報：https://cdnjs.com/libraries/p5.js
--HTMLの <head> には以下のように記載します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.j...
~
***p5.js プロジェクトのはじめ方
-1) はじめにプロジェクトフォルダを作成します。
-2) 以下のファイルを準備してプロジェクトフォルダに投入し...
--index.html（必須：Webページとして表示するための基盤）
--style.css（任意：Webページとしてのスタイル定義が必要な...
--''script.js''（必須：ここに Processing と同様のスクリプ...
--p5.min.js（必須：基本ライブラリ）
-3) index.html をブラウザで表示することで、描画プログラム...
~
***即試したい方は・・
以下、公式サイトのエディタを使えば、スクリプトを直接書い...
-https://editor.p5js.org/
初期サンプルをご覧いただくとわかるとおり、プログラムは ''...
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
~
***サンプル
-授業用サンプルプログラム
ページを独立させました。＞ [[p5.js/Sample]]
-公式サンプル
以下に公式のサンプルが多数用意されています。これらを参考...
http://p5js.org/examples/
~
~
**プログラムの基本構造
p5.js（Processing）の描画プログラムは、''setup( )'' と ''...
~
***function setup( ){・・・}
-描画に関わる初期設定を行う部分です。
-setup は、ページ表示の際、一回だけ実行されます。
-描画領域の設定、フレームレートの設定などはここに書きます。
-アニメーションのない静止画の描画はここだけで完結します。
~
***function draw( ){・・・}
-ページが表示されている間、繰り返し実行されます。
-アニメーションさせたい内容をここに書きます。
~
~
**プロジェクトの構成１
CANVAS が <body> 直下に埋め込まれるシンプルな事例です。
~
***index.html
index.html には、ライブラリとしての p5.min.js と 描画プロ...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="p5.min.js"></script>
<script src="script.js"></script>
<title>Sample Site</title>
</head>
<body>
</body>
</html>
~
***script.js
setup() と draw() の枠組みのみ記載しています。実際のコー...
function setup() {
// CANVASを生成して <body> へ埋め込み
createCanvas(640, 480);
// ここにその他の初期設定
}
function draw() {
// ここに描画のコード
}
~
***サンプル
具体的なコードの事例は、以下をご覧下さい。
-[[p5.js/Sample#patternA]]
~
~
**プロジェクトの構成２
CANVAS を特定の要素内に埋め込む事例です（こちらが実用的で...
~
***index.html
以下のように、<body> 内に <div> 領域を用意しするとともに...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="p5.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" >
<title>Sample Page</title>
</head>
<body>
<h1>SAMPLE</h1>
<div id="container"></div>
</body>
</html>
~
***style.css
CANVAS を埋め込む要素に関する CSS が必要です。
：
#container {
width: 1280px;
margin: auto;
}
：
~
***script.js
setup() と draw() の枠組みのみ記載しています。実際のコー...
function setup() {
// CANVASオブジェクトを取得
var cv = createCanvas(1280, 400);
// CANVASの親要素として container を指定
cv.parent("container");
// ここにその他の初期設定
}
function draw() {
//ここに描画プログラム
}
~
***サンプル
具体的なコードの事例は、以下をご覧下さい。
-[[p5.js/Sample#patternB]]
~
~
**描画の基本事項
***座標
-画面上のｘ座標は画面左から、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 ] の場合の処理 )
}
}
~
~
***注意事項：無限ループについて
プログラミングでは、処理手順に間違いがあると、PCに大きな...
&color(red){以下は説明用の記述です。試さないでください。};
while (1) {
console.log("Hello, world");
}
そこで、PCの動作状況をモニタリングする方法を紹介します。
-Mac の場合：アクティビティーモニター
メニュー＞移動＞ユーティリティー＞アクティビティーモニター
-Windows の場合：タスクマネージャー
CTRL + ALT + DELETE ・・で起動します。
~
ちなみに、Macでフリーズした特定のソフトウエアを強制終了す...
Command + Option + ESC
これで、稼働中の一覧が表示されるので、終了したいものを選...
~
~
ページ名:
