Processingによるプログラミング
Processingとは（ウィキペディアより）
Processing（プロセッシング）は，Casey Reas と Benjamin Fry によるオープンソースプロジェクトであり，かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり，統合開発環境 (IDE) である。 視覚的なフィードバックが即座に得られるため，初心者がプログラミングを学習するのに適しており，電子スケッチブックの基盤としても利用できる。Javaを単純化し，グラフィック機能に特化した言語といえる。
Processing から派生したプロジェクトとして Wiring があり，Processing の IDE に単純化したC言語を組み合わせて，アーティストがマイクロコントローラをプログラムできるようにするものである。Wiring を使ったハードウェアプロジェクトとして Arduino がある。
Processingのインストール
http://processing.org/download/index.html このサイトからダウンロード可能
プログラム実行方法
画面左上の「RUN」ボタン(三角形)を押す。
基本命令
1. 画面のサイズを指定する
size(横のピクセル数, 縦のピクセル数) ;
例 / 縦に480ピクセル，横に480ピクセルの画面サイズを設定する
size(640, 480);
2. 長方形を描く
rect(x座標, y座標, 幅, 高さ);
例 / 座標(100,10)に幅20高さ30の長方形を描く
rect( 100, 10, 20, 30);
3. 円を描く
ellipse(x座標, y座標, 横の直径, 縦の直径);
例 / 座標(100,10)に横20縦30の楕円を描く
ellipse( 100, 10, 20, 30);
4. 背景に色をつける
background( 明度 );
または
background( red, green, blue);
数値は0から255の値の範囲内で指定する
例
background(0); //黒色背景
background(255,165,0); //オレンジ色
background(255); //白色背景
色の指定方法について
processingの標準設定では色を0から255までの数値で指定する。
メニューバーの「Tools→ColorSelector」を使用し，色の選択を行ってもよい。
5. 色を塗りつぶす
fill( 明度 );
または
fill( red, green, blue);
例/ オレンジ色で塗りつぶした円を描く
fill(255,165,0);
ellipse(40, 40, 50, 50);
＜課題1＞円を使って絵を描く
size(300,300);
fill(200,100,50);
ellipse(150,170,220,220);
ellipse(60,60,80,80);
ellipse(240,60,80,80);
fill(255);
ellipse(150,220,120,120);
ellipse(100,150,50,50);
ellipse(200,150,50,50);
fill(0);
ellipse(150,200,40,40);
ellipse(100,150,30,30);
ellipse(200,150,30,30);
アニメーション
アニメーションの為のsetup関数とdraw関数
void setup(){
//ここに最初に一度だけ実行させたいコードを書く
frameRate(フレーム数); 一秒間の描写回数を決める（setup関数の中に記述)
}
void draw(){
//繰り返し呼び出されるコードを書く
}
変数
変数は数値（データ）を納める入れ物
変数を宣言する (代入も同時に行う）
例
int abc = 10; 変数abcを作り10を代入する
変数を使用する前に，必ず定義すること
変数の名称は英数字であれば任意に設定出来る。大文字小文字は区別される。
条件式
条件によって処理の内容を変える- if ~ else 文
if( 条件式 ){
条件式がtrueの場合の処理
}else{
条件式がfalseの場合の処理
}
備考: elseは省略可能
スカッシュゲームをつくろう
＜課題2＞円を連続して描く。
int x=20;
int sx=2;
void setup(){
size(300,300);
}
void draw(){
ellipse(x,100,20,20);
x=x+sx;
}
＜課題3＞ボールが左右を往復する。
int x=20;
int sx=2;
void setup(){
size(300,300);
}
void draw(){
background(100);
ellipse(x,100,20,20);
x=x+sx;
if(x>width){
sx=-2;
}
if(x<0){
sx=2;
}
}
＜課題4＞ボールが上下左右にはねかえる。
int x=20;
int y=20;
int sx=2;
int sy=3;
void setup(){
size(300,300);
}
void draw(){
background(100);
ellipse(x,y,20,20);
x=x+sx;
y=y+sy;
if(x>width){
sx=-2;
}
if(x<0){
sx=2;
}
if(y>height){
sy=-3;
}
if(y<0){
sy=3;
}
}
システム変数 mouseX は現在のマウスの垂直座標を保持する。
＜課題5＞ラケットを動かす。
void setup(){
size(300,300);
}
void draw(){
background(100);
rect(mouseX-15,290,30,10);
}
＜課題6＞ボールとラケット
int x=20;
int y=20;
int sx=2;
int sy=3;
void setup(){
size(300,300);
}
void draw(){
background(100);
ellipse(x,y,20,20);
rect(mouseX-15,290,30,10);
x=x+sx;
y=y+sy;
if(x>width){
sx=-2;
}
if(x<0){
sx=2;
}
if(y>height){
sy=-3;
}
if(y<0){
sy=3;
}
}
delay() 指定した時間停止する
指定した時間だけプログラムを停止する。ミリ秒で単位で時間を指定。
＜課題7＞スカッシュゲームを完成させる。
int x=20;
int y=20;
int sx=2;
int sy=3;
void setup(){
size(300,300);
}
void draw(){
background(100);
ellipse(x,y,20,20);
rect(mouseX-15,290,30,10);
x=x+sx;
y=y+sy;
if(x>width){
sx=-2;
}
if(x<0){
sx=2;
}
if(y>height-18){
if(x<mouseX-20){
delay(3000);
}
if(x>mouseX+20){
delay(3000);
}
sy=-3;
}
if(y<0){
sy=3;
}
}
前のページへもどる