P5

NO IMAGE P5

更新履歴

履歴 2014年11月27日 サーバーへのデータの保存 のページを作成。 2014年10月29日 ブラウザ上で動かす、作者/サイトの制作動機 のページを作成。 2014年9月23日 2AFC課題(...
NO IMAGE P5

サーバーへのデータの保存

jQuery/AjaxとPHPを用いてデータをサーバーに送信する。 var myp5 = new p5( function( sketch ) { var counter = 0; var response =...
NO IMAGE P5

作者/サイトの制作動機

このサイトの作者 津田裕之 詳しくは をご覧下さい。 このサイトを作った動機 素直な本心として。以下殴り書きの雑文で失礼します。 動機系列1 世の中に心理実験プログラミングについてきっちり書かれたウ...
NO IMAGE P5

このサイトの構成

このサイトの方針について Processing は(特にメディアアートや工学系において)最近人気の言語であるため、情報は比較的得やすいです。書籍は多く出ていますし、web上にも解説ページは多いです。勉強するための素材は十分あり、図形や...
NO IMAGE P5

このサイトの動作環境

閲覧環境 このサイトは Firefox と Chrome を用いて動作確認をしています。それ以外のブラウザ、例えば IE (Internet Explorer) などでは表示崩れなどが生じている可能性があります。また、モバイル端末...
NO IMAGE P5

ブラウザ上で動かす

Processing のコードをブラウザ上で動かす方法について。 Processing の js ライブラリを使う このサイト内では、プログラムコードの実行例を動画や画像ではなくブラウザ上で実際に動作させて表示してい...
NO IMAGE P5

Processingの利点と欠点

Processingを心理実験用の言語として使うことの利点と欠点について。 利点 インストール・文法・開発環境が平易である  導入コストが低い 簡潔な文法と描画APIを持つ  ラピッドプロトタイピン...
NO IMAGE P5

Processingとは

そもそも Processing って? Processing は Java をベースにしたプログラミング言語です。プログラミング初心者でも容易に習得可能な言語となるよう開発され、グラフィックや音を使ったプログラミングが手軽に作成できま...
NO IMAGE P5

2AFC課題(画像版)

課題内容 左右に提示される画像のうち、好きな方の画像をキーボードの矢印キー(左キー or 右キー)で回答する課題です。回答には制限時間があり、4秒以内に回答しないと次の試行に進みます。回答をするとその時点ですぐ次の試行が始まります...
NO IMAGE P5

text, PFont

文字を描画する text( 文字列, x, y ); 文字列を描画する  例:text( "Hello", 100, 100 ); // Helloという文字を座標(100, 100)に描画する textSize(...
NO IMAGE P5

透過色

色の不透明度を指定する fill 関数や stroke 関数で図形や線の色を指定する際に、引数を1つ付け足すと、その値は不透明度の値として使われます。不透明度を指定することで、透明な色を使うことができます。 fill...
NO IMAGE P5

アンチエイリアス : smooth, noSmooth

図形の輪郭の描画を滑らかにする smooth(); 図形の輪郭にアンチエイリアスをかける  例:smooth( 4 ); // 引数は 2, 4, 8 のいずれか  例:smooth(); // 引数を与えない場合は 2 が与...
NO IMAGE P5

面の色 : fill, noFill

図形の色を指定する fill( カラー値 ); 図形の色を指定する  例:fill( 128 ); // 灰色  例:fill( 0, 0, 255 ); // 青色 noFill(); 色を無くし、輪郭線のみで...
NO IMAGE P5

線の色と太さ : stroke, noStroke, strokeWeight

線や輪郭線の色や太さを変える stroke( カラー値 ); 線や図形の輪郭線の色を指定する  例:stroke( 128 ); // 灰色の線  例:stroke( 0, 0, 255 ); // 青色の線 ...
NO IMAGE P5

背景色 : background

背景色を指定する background 関数を使うことで画面の背景色を変えることができます。 background( グレースケール値 );  グレースケール値で背景色が指定されます。  例:background...
NO IMAGE P5

カラーモード : colorMode

Processing における色の表現方法 色を指定する方法(カラーモード)には次の4つがあります。 グレースケールモード  1つの数値を使い、黒から白までの明るさを、256段階の間で指定するモードです。  0で...
NO IMAGE P5

複雑な形 : beginShape, endShape

beginShape, endShape beginShape と endShape という2つの命令の間に頂点の座標を任意の数だけ指定することで、それらを結んだ図形を描くことができます。 サンプル var s...
NO IMAGE P5

曲線 : curve, bezier

シンタックス:curve curve( c1x, c1y, x1, y1, x2, y2, c2x, c2y )  C1とC2を制御点とする、(x1, y1)と(x2, y2)を通る曲線を引く サンプル va...
NO IMAGE P5

基本図形 : rect, triangle, quad, ellipse, arc

シンタックス rect( X座標, Y座標, 幅, 高さ ) 長方形を描く triangle( X1, Y1, X2, Y2, X3, Y3 ) 三角形を描く quad( X1, Y1, X2, Y2, X3, Y3, X4,...
NO IMAGE P5

点と直線 : point, line

シンタックス point( X座標, Y座標 ) line( 始点のX, 始点のY, 終点のX, 終点のY ) サンプル var swidth = 600; var sheight = 400; ...
NO IMAGE P5

反応時間の取得

概要 反応時間を計測するサンプルコードです。 緑色の円が表示されたらキーボードのキーをどれでもいいので押して下さい(zキーとか)。 押されたキーのキー番号と、円が出てからキーが押されるまでの時間(RT)が画面左上に表示されます...
NO IMAGE P5

p5.jsテスト

簡単なコードを用いてこの2つの関数の挙動を確認してみましょう。 var myp5 = new p5( function( sketch ) { var counter = 0; var response = ;...
NO IMAGE P5

ウィンドウを開く : size

size 関数 size 関数を使って、プログラムの実行時に開かれるウィンドウをサイズを指定して開くことができます。 void setup(){ size( 600, 400 ); // 横幅600px, 縦幅...
NO IMAGE P5

関数の利用

関数 Processing における関数の作り方は以下のようになります。 戻り値のデータ型 関数名(引数){ ここに関数内の処理を書く } 具体例を示します。 void setup(...
NO IMAGE P5

setupとdraw

初期化関数とメインループ関数 Processing を使ったプログラミングでは、初期化関数( setup 関数)とメインループ関数( draw 関数)という2つの関数を使ってプログラムコードを構成するというスタイルが一般的に行なわ...
NO IMAGE P5

三項演算子

三項演算子 三項演算子 ? を使うことで、if else 文のような条件分岐を簡潔に記述できます。 color c; background( 245 ); colorMode( HSB, 100 ); noSt...
NO IMAGE P5

while 文

while 文 while 文とは、指定した条件が満たされる限り、ブロック内の処理を繰り返し実行する命令です。繰り返しを行なうという点で for 文と似ていると言えます。Processing における while 文の書き方を以下...
NO IMAGE P5

for 文

for 文 for 文とは、ブロック内の処理を指定した条件が満たされるまで繰り返し実行する命令です。Processing における for 文の書き方を以下に示します。 size( 400, 400 ); back...
NO IMAGE P5

switch 文

switch 文 switch 文とは、変数の値に応じて処理するブロックを切り替えることのできる命令です。機能的には if 文と似ています。Processing における switch 文の書き方を以下に示します。 ...
NO IMAGE P5

if 文

if 文 if 文とは、条件の真偽に応じてブロック内の処理を実行するかしないかを切り替えることのできる命令です。Processing における if 文の書き方を以下に示します。 int a = 10; int b...
NO IMAGE P5

配列

配列とは 変数を配列データとして定義することで、1つの変数に複数の値を保存しておくことができます。 配列データの作成 配列データの宣言や初期化は以下のように行ないます。 int[] array1;...
NO IMAGE P5

変数のスコープ

変数はスコープを持つ 変数にはそれが使える範囲というものがあり、これを 変数のスコープ と言います。例をもとに説明します。 int outer = 0; if( true ){ int inner = 1...
NO IMAGE P5

予約語とシステム変数

予約語とシステム変数とは 変数の名前は基本的にユーザが自由に付けることができますが、一部の名前はあらかじめ Processing の側で定義されており、自由に使うことはできません(予約語)。そのような例としては:  - 制御構造...
NO IMAGE P5

変数とデータ型

変数とは 一般に、プログラミングでは様々なデータを使って計算や命令を行なうことになります。そのデータを保存しておくための入れ物のようなものを「変数」と言います。 データ型 変数にはデータ型というものがあり、例えば整数値...
NO IMAGE P5

学習のための情報源

このページでは Processing を学ぶための情報源について解説します。下にも書きましたが、公式サイトが充実しているのでまずはそこを読むのが良いと思います。英語が苦手な人は田所氏のスライド資料を当たりましょう。 Web ...
NO IMAGE P5

2AFC課題

どのような課題か 画面の左右に2つの円が提示され、どちらの円の方が明るいかを解答する課題です。 まずは実際にプログラムを動かしてみましょう。 下記のリンク先のプログラムコードをコピーして、Processingの...
NO IMAGE P5

簡単なプログラムの実行

簡単なプログラムの実行 それでは、簡単なプログラムを使って Processing を実際に動かしてみましょう。以下のようなコードをエディタに記述し、実行ボタンを押してください。 size(600, 400); line(0...
NO IMAGE P5

ファイルとフォルダ構成

作成したプログラムファイルの保存場所 Processingエディタで作成したプログラムはフォルダ単位で整理されるようになっています。Processingエディタを起動し、何もコードを書かなくても良いのでそのまま保存をしてみましょう。シ...
NO IMAGE P5

ダウンロードとエディタの使い方

ダウンロード Processing は公式サイト からダウンロードできます。 公式サイトの左側のメニューからダウンロードページへ進んで下さい。最初に寄付を募る画面が表示されますが、「No Donation」を選択してダウン...