P5 更新履歴
履歴
2014年11月27日
サーバーへのデータの保存 のページを作成。
2014年10月29日
ブラウザ上で動かす、作者／サイトの制作動機 のページを作成。
2014年9月23日
2AFC課題(...
P5
P5 P5 サーバーへのデータの保存
jQuery/AjaxとPHPを用いてデータをサーバーに送信する。
var myp5 = new p5( function( sketch ) {
var counter = 0;
var response =...
P5 作者／サイトの制作動機
このサイトの作者
津田裕之
詳しくは をご覧下さい。
このサイトを作った動機
素直な本心として。以下殴り書きの雑文で失礼します。
動機系列１
世の中に心理実験プログラミングについてきっちり書かれたウ...
P5 このサイトの構成
このサイトの方針について
Processing は(特にメディアアートや工学系において)最近人気の言語であるため、情報は比較的得やすいです。書籍は多く出ていますし、web上にも解説ページは多いです。勉強するための素材は十分あり、図形や...
P5 このサイトの動作環境
閲覧環境
このサイトは Firefox と Chrome を用いて動作確認をしています。それ以外のブラウザ、例えば IE (Internet Explorer) などでは表示崩れなどが生じている可能性があります。また、モバイル端末...
P5 ブラウザ上で動かす
Processing のコードをブラウザ上で動かす方法について。
Processing の js ライブラリを使う
このサイト内では、プログラムコードの実行例を動画や画像ではなくブラウザ上で実際に動作させて表示してい...
P5 Processingの利点と欠点
Processingを心理実験用の言語として使うことの利点と欠点について。
利点
インストール・文法・開発環境が平易である
導入コストが低い
簡潔な文法と描画APIを持つ
ラピッドプロトタイピン...
P5 Processingとは
そもそも Processing って？
Processing は Java をベースにしたプログラミング言語です。プログラミング初心者でも容易に習得可能な言語となるよう開発され、グラフィックや音を使ったプログラミングが手軽に作成できま...
P5 2AFC課題(画像版)
課題内容
左右に提示される画像のうち、好きな方の画像をキーボードの矢印キー(左キー or 右キー)で回答する課題です。回答には制限時間があり、4秒以内に回答しないと次の試行に進みます。回答をするとその時点ですぐ次の試行が始まります...
P5 text, PFont
文字を描画する
text( 文字列, x, y ); 文字列を描画する
例：text( "Hello", 100, 100 ); // Helloという文字を座標(100, 100)に描画する
textSize(...
P5 透過色
色の不透明度を指定する
fill 関数や stroke 関数で図形や線の色を指定する際に、引数を１つ付け足すと、その値は不透明度の値として使われます。不透明度を指定することで、透明な色を使うことができます。
fill...
P5 アンチエイリアス : smooth, noSmooth
図形の輪郭の描画を滑らかにする
smooth(); 図形の輪郭にアンチエイリアスをかける
例：smooth( 4 ); // 引数は 2, 4, 8 のいずれか
例：smooth(); // 引数を与えない場合は 2 が与...
P5 面の色 : fill, noFill
図形の色を指定する
fill( カラー値 ); 図形の色を指定する
例：fill( 128 ); // 灰色
例：fill( 0, 0, 255 ); // 青色
noFill(); 色を無くし、輪郭線のみで...
P5 線の色と太さ : stroke, noStroke, strokeWeight
線や輪郭線の色や太さを変える
stroke( カラー値 ); 線や図形の輪郭線の色を指定する
例：stroke( 128 ); // 灰色の線
例：stroke( 0, 0, 255 ); // 青色の線
...
P5 背景色 : background
背景色を指定する
background 関数を使うことで画面の背景色を変えることができます。
background( グレースケール値 );
グレースケール値で背景色が指定されます。
例：background...
P5 カラーモード : colorMode
Processing における色の表現方法
色を指定する方法(カラーモード)には次の４つがあります。
グレースケールモード
１つの数値を使い、黒から白までの明るさを、256段階の間で指定するモードです。
0で...
P5 複雑な形 : beginShape, endShape
beginShape, endShape
beginShape と endShape という２つの命令の間に頂点の座標を任意の数だけ指定することで、それらを結んだ図形を描くことができます。
サンプル
var s...
P5 曲線 : curve, bezier
シンタックス：curve
curve( c1x, c1y, x1, y1, x2, y2, c2x, c2y )
C1とC2を制御点とする、(x1, y1)と(x2, y2)を通る曲線を引く
サンプル
...
P5 基本図形 : rect, triangle, quad, ellipse, arc
シンタックス
rect( X座標, Y座標, 幅, 高さ ) 長方形を描く
triangle( X1, Y1, X2, Y2, X3, Y3 ) 三角形を描く
quad( X1, Y1, X2, Y2, X3, Y3, X4,...
P5 点と直線 : point, line
シンタックス
point( X座標, Y座標 )
line( 始点のX, 始点のY, 終点のX, 終点のY )
サンプル
var swidth = 600;
var sheight = 400;
...
P5 反応時間の取得
概要
反応時間を計測するサンプルコードです。
緑色の円が表示されたらキーボードのキーをどれでもいいので押して下さい(zキーとか)。
押されたキーのキー番号と、円が出てからキーが押されるまでの時間(RT)が画面左上に表示されます...
P5 p5.jsテスト
簡単なコードを用いてこの２つの関数の挙動を確認してみましょう。
var myp5 = new p5( function( sketch ) {
var counter = 0;
var response = ;...
P5 ウィンドウを開く : size
size 関数
size 関数を使って、プログラムの実行時に開かれるウィンドウをサイズを指定して開くことができます。
void setup(){
size( 600, 400 ); // 横幅600px, 縦幅...
P5 関数の利用
関数
Processing における関数の作り方は以下のようになります。
戻り値のデータ型 関数名(引数){
ここに関数内の処理を書く
}
具体例を示します。
void setup(...
P5 setupとdraw
初期化関数とメインループ関数
Processing を使ったプログラミングでは、初期化関数( setup 関数)とメインループ関数( draw 関数)という２つの関数を使ってプログラムコードを構成するというスタイルが一般的に行なわ...
P5 三項演算子
三項演算子
三項演算子 ? を使うことで、if else 文のような条件分岐を簡潔に記述できます。
color c;
background( 245 );
colorMode( HSB, 100 );
noSt...
P5 while 文
while 文
while 文とは、指定した条件が満たされる限り、ブロック内の処理を繰り返し実行する命令です。繰り返しを行なうという点で for 文と似ていると言えます。Processing における while 文の書き方を以下...
P5 for 文
for 文
for 文とは、ブロック内の処理を指定した条件が満たされるまで繰り返し実行する命令です。Processing における for 文の書き方を以下に示します。
size( 400, 400 );
back...
P5 switch 文
switch 文
switch 文とは、変数の値に応じて処理するブロックを切り替えることのできる命令です。機能的には if 文と似ています。Processing における switch 文の書き方を以下に示します。
...
P5 if 文
if 文
if 文とは、条件の真偽に応じてブロック内の処理を実行するかしないかを切り替えることのできる命令です。Processing における if 文の書き方を以下に示します。
int a = 10;
int b...
P5 配列
配列とは
変数を配列データとして定義することで、１つの変数に複数の値を保存しておくことができます。
配列データの作成
配列データの宣言や初期化は以下のように行ないます。
int[] array1;...
P5 変数のスコープ
変数はスコープを持つ
変数にはそれが使える範囲というものがあり、これを 変数のスコープ と言います。例をもとに説明します。
int outer = 0;
if( true ){
int inner = 1...
P5 予約語とシステム変数
予約語とシステム変数とは
変数の名前は基本的にユーザが自由に付けることができますが、一部の名前はあらかじめ Processing の側で定義されており、自由に使うことはできません(予約語)。そのような例としては：
- 制御構造...
P5 変数とデータ型
変数とは
一般に、プログラミングでは様々なデータを使って計算や命令を行なうことになります。そのデータを保存しておくための入れ物のようなものを「変数」と言います。
データ型
変数にはデータ型というものがあり、例えば整数値...
P5 学習のための情報源
このページでは Processing を学ぶための情報源について解説します。下にも書きましたが、公式サイトが充実しているのでまずはそこを読むのが良いと思います。英語が苦手な人は田所氏のスライド資料を当たりましょう。
Web
...
P5 2AFC課題
どのような課題か
画面の左右に２つの円が提示され、どちらの円の方が明るいかを解答する課題です。
まずは実際にプログラムを動かしてみましょう。
下記のリンク先のプログラムコードをコピーして、Processingの...
P5 簡単なプログラムの実行
簡単なプログラムの実行
それでは、簡単なプログラムを使って Processing を実際に動かしてみましょう。以下のようなコードをエディタに記述し、実行ボタンを押してください。
size(600, 400);
line(0...
P5 ファイルとフォルダ構成
作成したプログラムファイルの保存場所
Processingエディタで作成したプログラムはフォルダ単位で整理されるようになっています。Processingエディタを起動し、何もコードを書かなくても良いのでそのまま保存をしてみましょう。シ...
P5 ダウンロードとエディタの使い方
ダウンロード
Processing は公式サイト からダウンロードできます。
公式サイトの左側のメニューからダウンロードページへ進んで下さい。最初に寄付を募る画面が表示されますが、「No Donation」を選択してダウン...