小鳥の足跡

What

マウスを小鳥がついてきます。

birdFootprint関数のように、原点中心のカスタム図形(基本図形を組み合わせた図形)を関数化しておくと、 drawから1行で図形を描画できるので、たくさん図形を描くときは便利です。移動はtranslate、回転はrotate、拡大縮小はscaleで行います。

足跡の向きについては、一つ前に描いた足跡の位置と現在のマウスの位置からcosの値を求め、 acosという関数でcosの値から角度を算出しています。directionRadius関数が2つの足跡から角度を求める関数です。
そして、描画時にrotateで算出した角度分回転させると、今マウスが向いてる方向へ足跡もついてきます。

How

var w = 400;
var h = 400;
var c;
var preX, preY;
var position = "right";
function setup() {
  createCanvas(w, h);
  background(255);
  c = sqrt(3)/2;
  stroke(0);
}

function draw() {
  background(255, 3);
  var preD = sqrt(sq(mouseX - preX) + sq(mouseY - preY));
  if(preX === undefined){
    preX = mouseX;
    preY = mouseY;
  }
  if(preX !== undefined && preD > 30){
    push();
    var r = directionRadius(preX, preY, mouseX, mouseY);
    translate(mouseX, mouseY);
    rotate(r);
    birdFootprint(10)
    pop();
    preX = mouseX;
    preY = mouseY;
  }
}

function birdFootprint(l){
  strokeWeight(2);
  if(position === "right"){
    var d = l * 0.7;
    position = "left";
  }else{
    var d = -l * 0.7;
    position = "right";
  }
  line(d, 0, d, -l);
  line(d, 0, d, l);
  line(d, 0, l/2 + d, -c * l);
  line(d, 0, -l/2 + d, -c * l);
}

function directionRadius(x1,y1,x2,y2){
  var d = sqrt(sq(x1-x2) + sq(y1-y2));
  var cs = (x2 - x1) / d;
  var sn = (y2 - y1) / d;
  var t = acos(cs);
  if(sn < 0){
    t = TWO_PI - t;
  }
  return t + PI / 2;
}
        

Where

関連するチュートリアル・リファレンスへのリンクです。