![ProcessingWorkshop
SerialCommunication //---------------------------------------- import
// import serial library
import processing.serial.*;
//---------------------------------------- global
// serial object
Serial serial;
int val = 0;
//---------------------------------------- setup
void 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' );
}
//---------------------------------------- draw
void draw()
{
// fill background
background( 0 );
}
//------------------------------------------------------------ serialEvent
void 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 );
}
}](https://image.slidesharecdn.com/processingworkshop-150501040940-conversion-gate02/85/Processing-workshop-28-320.jpg)
![ProcessingWorkshop
SerialCommunication
//---------------------------------------- import
// import serial library
import processing.serial.*;
//---------------------------------------- global
// serial object
Serial serial;
int val = 0;
float angle = 0.0;
float centerX, centerY;
//---------------------------------------- setup
void 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' );
}
//---------------------------------------- draw
void 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 は変更しないので割愛](https://image.slidesharecdn.com/processingworkshop-150501040940-conversion-gate02/85/Processing-workshop-29-320.jpg)
Processing workshop
- 3. Setup Run 初期化設定を書くところ。Run を押した瞬間に一度だけ呼ばれる。 Draw 描画処理を書くところ。デフォルトだと一秒間に 60 回同じ処理が 繰り返される。 ProcessingWorkshop void setup() { } void draw() { } Stop
- 4. ProcessingWorkshop Coordinate - Axis x( 0, 0 ) y Math x( 0, 0 ) y Program 数学とプログラムでは y 軸の向きが逆なので注意！
- 5. ProcessingWorkshop Coordinate - Example x 10030 y 100 50 70 80 line( 30, 50, 70, 80 ); ( x 30, y 50 ) から ( x 70, y 80 ) に線を引く
- 6. ProcessingWorkshop Primitives - Line line( x1, y1, x2, y2 ); Point1 Point2 Point1( x,1 y1 ) と Point2( x,2 y2 ) を結ぶ直線を引く
- 7. ProcessingWorkshop Primitives - Line //---------------------------------------- setup void setup() { // set window size size( 100, 100 ); } //---------------------------------------- draw void draw() { // draw line line( 30, 50, 70, 80 ); }
- 8. ProcessingWorkshop Primitives - Rect rect( x, y, width, height ); Point Point( x, y ) を左上とした、幅 width、高さ height の矩形を描く rectMode( CENTER ) で Point( x, y ) を中心として描画する
- 9. ProcessingWorkshop Primitives - Rect //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void draw() { // draw rect rect( 100, 100, 50, 50 ); // set rect mode CENTER rectMode( CENTER ); // draw rect rect( 100, 100, 50, 50 ); }
- 10. ProcessingWorkshop Primitives - Ellipse ellipse( x, y, width, height ); Point Point( x, y ) を中心とした、幅 width、高さ height の楕円を描く 正円を描く場合は、width と height に同じ数値を入れる
- 11. ProcessingWorkshop Primitives - Ellipse //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void draw() { // draw circle ellipse( 100, 100, 50, 50 ); // draw ellipse ellipse( 100, 100, 100, 10 ); }
- 12. ProcessingWorkshop Primitives - Triangle Point1( x1, y1 ), Point2( x2, y2 ), Point3( x3, y3 ) を結ぶ三角形を描く triangle( x1, y1, x2, y2, x3, y3 ); Point1 Point2 Point3
- 13. ProcessingWorkshop Primitives - Triangle //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void draw() { // draw top triangle triangle( 0, 0, 200, 0, 100, 100 ); // draw bottom triangle triangle( 0, 200, 200, 200, 100, 100 ); }
- 14. ProcessingWorkshop Color - Background background( red, green, blue ); background( gray ); ( red, green, blue ) または ( gray )、それぞれ 0 から 255 までの数値で背景色を指定
- 15. ProcessingWorkshop Color - Background //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void draw() { // fill background background( 128, 0, 0 ); }
- 16. ProcessingWorkshop Color - Stroke stroke( red, green, blue ); stroke( gray ); noStroke(); ( red, green, blue ) または ( gray )、それぞれ 0 から 255 までの数値で線色を指定 noStroke() で線なし 指定しない場合は黒になる
- 17. ProcessingWorkshop Color - Stroke //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void 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 ); }
- 18. ProcessingWorkshop Color - Fill fill( red, green, blue ); fill( gray ); noFill(); ( red, green, blue ) または ( gray )、それぞれ 0 から 255 までの数値で塗りつぶし色を指定 noFill() で塗りつぶしなし 指定しない場合は白になる
- 19. ProcessingWorkshop Color - Fill //---------------------------------------- setup void setup() { // set window size size( 200, 200 ); } //---------------------------------------- draw void 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 ); }
- 20. ProcessingWorkshop Drawing //---------------------------------------- setup void setup() { // set window size size( 640, 440 ); } //---------------------------------------- draw void 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 ) ); }
- 21. ProcessingWorkshop Variables 変数 数値を入れておく箱のようなもの。 変数にはそれぞれ種類があり、それを「型」 という。 値を保存しておきたい場合や、同じ値を何 度も使用する場合、計算をする場合に使う。 変数を使う前には、使いたい変数の型と名 前を宣言する必要がある。 int 型： 整数 float 型： 小数（浮動小数点数） int 型 float 型 5 255 1024 127 68 94 16 5.99 255.1 127.0 68.34 94.21 16.08
- 22. //---------------------------------------- global // declare variables int x; int y; int diameter; //---------------------------------------- setup void setup() { // set window size size( 640, 480 ); // assign values to variables x = 320; y = 240; diameter = 200; } //---------------------------------------- draw void 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
- 23. //---------------------------------------- global // declare variables int x; int y; int diameter; //---------------------------------------- setup void setup() { // set window size size( 640, 480 ); // assign values to variables x = 320; y = 240; diameter = 200; } //---------------------------------------- draw void 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
- 24. 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 ) { // ここに処理 }
- 25. //---------------------------------------- global // declare variables int x; int y; int diameter; //---------------------------------------- setup void setup() { // set window size size( 640, 480 ); // assign values to variables x = 0; y = 240; diameter = 200; } //---------------------------------------- draw void 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
- 26. //---------------------------------------- global // declare variables int x; int y; int diameter; //---------------------------------------- setup void setup() { // set window size size( 640, 480 ); // assign values to variables diameter = 200; x = -( diameter / 2 ); y = 240; } //---------------------------------------- draw void 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
- 28. ProcessingWorkshop SerialCommunication //---------------------------------------- import // import serial library import processing.serial.*; //---------------------------------------- global // serial object Serial serial; int val = 0; //---------------------------------------- setup void 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' ); } //---------------------------------------- draw void draw() { // fill background background( 0 ); } //------------------------------------------------------------ serialEvent void 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 ); } }
- 29. ProcessingWorkshop SerialCommunication //---------------------------------------- import // import serial library import processing.serial.*; //---------------------------------------- global // serial object Serial serial; int val = 0; float angle = 0.0; float centerX, centerY; //---------------------------------------- setup void 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' ); } //---------------------------------------- draw void 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 は変更しないので割愛