processing3.0 workshop

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

2. ProcessingWorkshop
Run
プログラムを実行
Stop
実行中のプログラムを停止
Editor
プログラムを記述するところ
Console
エラーがあるとここに表示される

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( x1, y1 ) と Point2( x2, 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 ) を中心として描画する
rectMode( CORNER ) で Point( x, y ) を左上として描画する

9. ProcessingWorkshop
Primitives - Rect
//---------------------------------------- setup
void setup()
{
// set window size
size( 200, 200 );
}
//---------------------------------------- draw
void draw()
{
// set rect mode CORNER
rectMode( CORNER );
// 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( 127, 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( 127, 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, 127 );
// 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

27. ProcessingWorkshop
SerialCommunication

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
printArray( 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
printArray( 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 は変更しないので割愛