ここでは動きに曲線や円などを取り入れるための方法を紹介する。

// 動きのサンプル1：sinカーブを描いて動く void setup() { size(300, 300); } float x = 0.0; float y = 0.0; void draw() { background(255); fill(0, 255, 0); x = 100.0*sin(y/20.0) + 150.0; ellipse(int(x), int(y), 10, 10); y = y + 1; }

このプログラムでは下へsinカーブを描く。 sinカーブを描く時の数式には次のようになる。
x = (振幅）* sin (y * 周期) + (オフセット)
sin()は正弦関数で角度を指定するとその結果が得られる。 ここで指定する角度は通常ラジアン角を使用する。 processingではsin()関数に指定する角度は実数（float）にする。 上のプログラムではxとyを入れ替えているので、 図とは異なり左右に振幅するカーブとなる。 また、周期を大きくするためには1より小さい数値を掛ける。 sinカーブの動きは両端で速度が落ちるような動きにも応用できる。 processing付属のSketchBookのサンプルSine Cosine、Sineなどを参照のこと。

float x = 0; float y = 0;
変数の宣言。 このプログラムはxとyを実数で使用すると宣言している。 宣言と同時にそれぞれの変数に0.0を代入している。 このように変数の宣言と同時に数値の代入を行うことを初期化という。

int(x)
キャスト。 一旦実数で宣言した変数を一時的に整数で使用する場合に使う。 これとは逆に整数で宣言した変数を一時的に実数で使用する場合はfloat(変数名)のようにする。

// 動きのサンプル２：円形に動かす void setup() { size(300, 300); } float x = 0.0; float y = 0.0; int deg = 0; void draw() { background(255); fill(0,255,0); x = width / 2 + 100.0*cos(radians(deg)); // 式1 y = height / 2 + 100.0*sin(radians(deg)); // 式2 ellipse(int(x), int(y), 20, 20); deg = deg + 1; }

円は、コンパスで描くときのように、中心と半径を決めた位置（点）を360度回転させて描く。 円の位置に使う変数にはx、yを使用する。 上のソースコードで円を描くための各点のx座標の表示位置が式1、y座標の表示位置が式２である。 それぞれ、次のような意味がある。
x = (ｘの中心座標) + (ｘ方向の半径）* cos (角度)
y = (ｙの中心座標) + (ｙ方向の半径）* sin (角度)
ｘ方向の半径とｙ方向の半径を同じにすると円が描ける。 ｘ方向の半径とｙ方向の半径を変えると楕円を描くこともできる。

sin関数とcos関数

sin関数とcos関数は、図形の変換（回転）に必ず使う関数である。 それぞれの基本式は次のようになる。
　　　cosθ = x / r
　　　sinθ = y / r
この基本式によれば、角度（θ）と半径（r）を与えるとx座標値、ｙ座標値を求めることができる。つまり、
x = r * cosθ
y = r * sinθ
となる。円はX軸上のrの位置にある点を回転して描かれている。 θには一般にラジアン角を使う。ラジアン角はPI（3.1415）を基準とする角度で、180度=PI(3.1415)である。 processingでは通常の角度（degree）をラジアン角に変換するには、radians()関数を使用する。

// 動きのサンプル３：螺旋状に動かす void setup() { size(300, 300); } float x = 0; float y = 0; int deg = 0; float r = 0; void draw() { background(255); fill(0,255,0); x = width / 2 + r*cos(radians(deg)); y = height / 2 + r*sin(radians(deg)); ellipse(int(x), int(y), 20, 20); deg = deg + 1; r = r + 0.1; }

サンプル２で半径を少しずつ増やすように変更すると螺旋状に図形が移動するようになる。

// 動きのサンプル４：線を回転する // void setup() { size(300, 300); } float x = 0; float y = 0; int deg = 0; void draw() { background(255); fill(0,255,0); x = width / 2 + 100.0*cos(radians(deg)); y = height / 2 + 100.0*sin(radians(deg)); line(width/2, height/2, int(x), int(y)); deg = deg + 1; }

円の動きを線図形に応用したサンプルである。 線の1点を同じ位置で表示し、もう1点を円形に動かしている。