p5js

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

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

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

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

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

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

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

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

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

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

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

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

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

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