Upload
wataru-kani
View
364
Download
0
Embed Size (px)
Citation preview
ProcessingWorkshop
Processing
電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。(Wikipedia より抜粋)
Setup
Run
初期化設定を書くところ。Runを押した瞬間に一度だけ呼ばれる。
Draw描画処理を書くところ。デフォルトだと一秒間に 60回同じ処理が繰り返される。
ProcessingWorkshop
void setup(){ }
void draw(){ }
Stop
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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 200, 200 );}
//---------------------------------------- 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
//---------------------------------------- setupvoid setup(){ // set window size size( 640, 440 );}
//---------------------------------------- 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
//---------------------------------------- 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 ); // 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 ){ // ここに処理}
//---------------------------------------- global// declare variablesint x;int y;int diameter;
//---------------------------------------- setupvoid setup(){ // set window size size( 640, 480 ); // assign values to variables x = 0; 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 ); // update x x = x + 1; // reset x when x is over window width if( x > width ) { x = 0; }}
ProcessingWorkshop
Conditional - Animation
//---------------------------------------- global// declare variablesint x;int y;int diameter;
//---------------------------------------- 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 //---------------------------------------- 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は変更しないので割愛