線の伸縮…定速的変化
線が伸長収縮します。画面の中央を起点に水平に、widthの半分の長さまで、左右に線が伸び、縮みします。
画面の中央を起点にした動きをするので、座標の原点が画面の中央にあると考えやすいです。【リスト Elastic1】では座標の移動をする関数translate()を使って、座標の原点を画面中央へ置いています。座標の移動はdraw()関数を実行するたびにクリアされるので、draw()関数の先頭に書いています。
translate(width/2, height/2); //座標原点を画面中央へ移動線の長さsは、dsの速さで変化します。増加するか、減少するかはdsの正負で決まります。線の長さがwidth/2.0より大きくなった時、あるいは-width/2.0より小さくなった時、dsの正負を逆転させます。
if(x>width/2.0) { s = 0; //移動速度の初期化 x = width/2.0; //右端へのめり込み補正 ds = -ds; }else if(x<-width/2.0){ s = 0; //移動速度の初期化 x = -width/2.0; //左端へのめり込み補正 ds = -ds; }
クリックで停止⇔再開
【リスト Elastic1】 float len; // 線の長さ float x, y; // 線のもう一方の座標 float s; // 移動速度 float ds = 0.2; // 加速 void setup() { size(150,150); strokeWeight(5); // 線の太さ } void draw() { background(255); //画面の背景を白でクリア translate(width/2, height/2); //座標原点を画面中央へ移動 if(x>width/2.0) { s = 0; //移動速度の初期化 x = width/2.0; //右端へのめり込み補正 ds = -ds; }else if(x<-width/2.0){ s = 0; //移動速度の初期化 x = -width/2.0; //左端へのめり込み補正 ds = -ds; } s = s + ds; x = x + s; // 位置を変化。 line(0, 0, x, y); }