LOG

バネ運動

結果
クリックで移動

let width    = 600;
let height   = 400;
let mousePos = new PIXI.Point(0,0);
let canvas   = document.getElementById('my-canvas');
let renderer = new PIXI.autoDetectRenderer(
    width,
    height,
    {
        'view'      : canvas,
        'antialias' : true
    }
);
let stage = new PIXI.Container();
renderer.backgroundColor = 0xFFFFFF;

let dot = new PIXI.Graphics();
dot.spring   = 0.1;
dot.friction = 0.8;
// vx,vyは各座標に加える距離の割合
dot.vx       = 0;
dot.vy       = 0;

// =============================================================================
// click event
// =============================================================================
let onClick = (e)=>{
    mousePos.x = e.offsetX;
    mousePos.y = e.offsetY;
}


// =============================================================================
// animation
// =============================================================================
let animate = ()=>{
    requestAnimationFrame(animate);
    // 1フレームの加速度を得て、速度に追加する
    dot.vx += (mousePos.x - dot.x) * dot.spring;
    dot.vy += (mousePos.y - dot.y) * dot.spring;
    // 加速度は距離に比例して小さくなるが、速度は増えていく。※1
    // そのため、摩擦係数を加える
    // ※1 目標位置を超えると負数になるため、一定の範囲内に止まる。
    dot.x += dot.vx *= dot.friction;
    dot.y += dot.vy *= dot.friction;
    renderer.render(stage);
}

// =============================================================================
// init
// =============================================================================
$(()=>{
    stage.addChild(dot);

    dot.clear();
    dot.beginFill(0x000000);
    dot.drawCircle(0,0,4);
    dot.endFill();
    dot.x = width / 2;
    dot.y = height / 2;
    animate();
    canvas.addEventListener('click',onClick,false);
});