Processing workshop

ProcessingWorkshop

Processing

電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。（Wikipedia より抜粋）

ProcessingWorkshop

Runプログラムを実行

Stop実行中のプログラムを停止

Editorプログラムを記述するところ

Consoleエラーがあるとここに表示される

Setup

Run

初期化設定を書くところ。Runを押した瞬間に一度だけ呼ばれる。

Draw描画処理を書くところ。デフォルトだと一秒間に 60回同じ処理が繰り返される。

ProcessingWorkshop

void setup(){ }

void draw(){ }

Stop

ProcessingWorkshop

Coordinate - Axis

x( 0, 0 )

y

Math

x( 0, 0 )

y

Program

数学とプログラムでは y軸の向きが逆なので注意！

ProcessingWorkshop

Coordinate - Example

x10030

y

100

50

70

80

line( 30, 50, 70, 80 );

( x 30, y 50 ) から ( x 70, y 80 ) に線を引く

ProcessingWorkshop

Primitives - Line

line( x1, y1, x2, y2 );

Point1 Point2

Point1( x,1 y1 ) と Point2( x,2 y2 ) を結ぶ直線を引く

ProcessingWorkshop

Primitives - Line

//---------------------------------------- setupvoid setup(){ // set window size size( 100, 100 );}

//---------------------------------------- drawvoid draw(){ // draw line line( 30, 50, 70, 80 );}

ProcessingWorkshop

Primitives - Rect

rect( x, y, width, height );

Point

Point( x, y ) を左上とした、幅width、高さ height の矩形を描くrectMode( CENTER ) で Point( x, y ) を中心として描画する

ProcessingWorkshop

Primitives - Rect


//---------------------------------------- drawvoid draw(){ // draw rect rect( 100, 100, 50, 50 ); // set rect mode CENTER rectMode( CENTER ); // draw rect rect( 100, 100, 50, 50 );}

ProcessingWorkshop

Primitives - Ellipse

ellipse( x, y, width, height );

Point

Point( x, y ) を中心とした、幅width、高さ height の楕円を描く正円を描く場合は、width と height に同じ数値を入れる

ProcessingWorkshop

Primitives - Ellipse


//---------------------------------------- drawvoid draw(){ // draw circle ellipse( 100, 100, 50, 50 ); // draw ellipse ellipse( 100, 100, 100, 10 );}

ProcessingWorkshop

Primitives - Triangle

Point1( x1, y1 ), Point2( x2, y2 ), Point3( x3, y3 ) を結ぶ三角形を描く

triangle( x1, y1, x2, y2, x3, y3 );

Point1 Point2 Point3

ProcessingWorkshop

Primitives - Triangle


//---------------------------------------- drawvoid draw(){ // draw top triangle triangle( 0, 0, 200, 0, 100, 100 ); // draw bottom triangle triangle( 0, 200, 200, 200, 100, 100 );}

ProcessingWorkshop

Color - Background

background( red, green, blue );background( gray );

( red, green, blue ) または ( gray )、それぞれ 0から 255までの数値で背景色を指定

ProcessingWorkshop

Color - Background


//---------------------------------------- drawvoid draw(){ // fill background background( 128, 0, 0 );}

ProcessingWorkshop

Color - Stroke

stroke( red, green, blue );stroke( gray );noStroke();

( red, green, blue ) または ( gray )、それぞれ 0から 255までの数値で線色を指定noStroke() で線なし指定しない場合は黒になる

ProcessingWorkshop

Color - Stroke


//---------------------------------------- drawvoid draw(){ // fill background background( 128, 0, 0 ); // set stroke color stroke( 255, 255, 0 ); // draw bottom circle ellipse( 100, 130, 100, 100 ); // disable stroke noStroke(); // draw top circle ellipse( 100, 70, 70, 70 );}

ProcessingWorkshop

Color - Fill

fill( red, green, blue );fill( gray );noFill();

( red, green, blue ) または ( gray )、それぞれ 0から 255までの数値で塗りつぶし色を指定noFill() で塗りつぶしなし指定しない場合は白になる

ProcessingWorkshop

Color - Fill


//---------------------------------------- drawvoid draw(){ // fill background background( 255, 200, 200 ); // set fill color fill( 255, 255, 128 ); // draw bottom circle ellipse( 100, 130, 100, 100 ); // disable fill noFill(); // draw top circle ellipse( 100, 70, 70, 70 );}

ProcessingWorkshop

Drawing


//---------------------------------------- drawvoid draw(){ // fill background background( 192, 128, 64 ); // no stroke noStroke(); // set fill color fill( 0 ); // left eye ellipse( ( 320 - 150 ), 170, 80, 80 ); // right eye ellipse( ( 320 + 150 ), 170, 80, 80 ); // mouth triangle( 320, 280, ( 320 - 80 ), ( 280 + 70 ), ( 320 + 80 ), ( 280 + 70 ) );}

ProcessingWorkshop

Variables

変数数値を入れておく箱のようなもの。変数にはそれぞれ種類があり、それを「型」という。値を保存しておきたい場合や、同じ値を何度も使用する場合、計算をする場合に使う。変数を使う前には、使いたい変数の型と名前を宣言する必要がある。

int 型：　整数float型：　小数（浮動小数点数） int型 float型

5 255

1024

127

68 9416 5.99

255.1 127.0

68.34

94.21

16.08

//---------------------------------------- global// declare variablesint x;int y;int diameter;

//---------------------------------------- setupvoid setup(){ // set window size size( 640, 480 ); // assign values to variables x = 320; y = 240; diameter = 200;}

//---------------------------------------- drawvoid draw(){ // fill background background( 255 ); // disable stroke noStroke(); // set fill color fill( 255, 0, 0 ); // draw ellipse with variables ellipse( x, y, diameter, diameter );}

ProcessingWorkshop

Variables - Declaration



//---------------------------------------- drawvoid draw(){ // fill background background( 255 ); // disable stroke noStroke(); // set fill color fill( 255, 0, 0 ); // draw ellipse with variables ellipse( x, y, diameter, diameter ); // update x x = x + 1;}

ProcessingWorkshop

Variables - Animation

ProcessingWorkshop

Conditional

i f 文特定の条件下だけ通常とは違う処理をさせたいときに使う。

if( 条件 ){ // ここに処理を描く}

関係演算子// aが bと等しいときif( a == b ){ // ここに処理}

// aが bと等しくないときif( a != b ){ // ここに処理}

// aが bより小さいときif( a < b ){ // ここに処理}

// aが b以下のときif( a <= b ){ // ここに処理}

// aが bより大きいときif( a > b ){ // ここに処理}

// aが b以上のときif( a >= b ){ // ここに処理}



//---------------------------------------- drawvoid draw(){ // fill background background( 255 ); // disable stroke noStroke(); // set fill color fill( 255, 0, 0 ); // draw ellipse with variables ellipse( x, y, diameter, diameter ); // update x x = x + 1; // reset x when x is over window width if( x > width ) { x = 0; }}

ProcessingWorkshop

Conditional - Animation


//---------------------------------------- setupvoid setup(){ // set window size size( 640, 480 ); // assign values to variables diameter = 200; x = -( diameter / 2 ); y = 240;}

//---------------------------------------- drawvoid draw(){ // fill background background( 255 ); // disable stroke noStroke(); // set fill color fill( 255, 0, 0 ); // draw ellipse with variables ellipse( x, y, diameter, diameter ); // update x x = x + 1; // reset x when x is over window width if( ( x - ( diameter / 2 ) ) > width ) { x = -( diameter / 2 ); }}

ProcessingWorkshop

Conditional - NaturalAnimation

ProcessingWorkshop

SerialCommunication

ProcessingWorkshop

SerialCommunication //---------------------------------------- import// import serial libraryimport processing.serial.*;

//---------------------------------------- global// serial objectSerial serial;

int val = 0;

//---------------------------------------- setupvoid setup(){ // set window size size( 480, 480 ); // listup serial devices to console println( Serial.list() ); // setup serial serial = new Serial( this, serial.list()[ 5 ], 9600 ); // clear serial serial.clear(); // buffer serial until '\n' serial.bufferUntil( '\n' );}

//---------------------------------------- drawvoid draw(){ // fill background background( 0 );}

//------------------------------------------------------------ serialEventvoid serialEvent( Serial _serial ){ // read string until '\n' from serial buffer String str = _serial.readStringUntil( '\n' ); // if str is not null if( str != null ) { // trim str str = trim( str ); // convert string to int val = int( str ); // print value to console println( val ); }}

ProcessingWorkshop

SerialCommunication//---------------------------------------- import// import serial libraryimport processing.serial.*;

//---------------------------------------- global// serial objectSerial serial;int val = 0;

float angle = 0.0;float centerX, centerY;

//---------------------------------------- setupvoid setup(){ // set window size size( 480, 480 ); // fill background background( 0 );

centerX = width / 2; centerY = height / 2; // listup serial devices to console println( Serial.list() ); // setup serial serial = new Serial( this, serial.list()[ 5 ], 9600 ); // clear serial serial.clear(); // buffer serial until '\n' serial.bufferUntil( '\n' );}

//---------------------------------------- drawvoid draw(){ // disable stroke noStroke(); // fill background slowly fill( 0, 2 ); rect( 0, 0, width, height ); // set stroke color stroke( 0, 255, 0 ); // update angle ++angle; float radius = val / 4; float x = centerX + ( cos( radians( angle ) ) * radius ); float y = centerY + ( sin( radians( angle ) ) * radius ); // draw line line( centerX, centerY, x, y );}

// serialEventは変更しないので割愛

Education

Processing workshop