座標がセクタ内にあるかどうかを確認します。

Question

円のセクタ内にあるピクセルを強調表示しようとしています。私はこれを行うためのシェーダーを書いていますが、私はそれが正しくなるまでロジックをJavaScriptで実装しています。

本質的に、各画素は、キャンバスの座標は0と1の間になるようにスケーリングされ、及びキャンバスコンテキストと共に、次のコードに渡される：

function isWithinSector(ctx, x, y) { 
    let startAngle = degToRad(135), endAngle = degToRad(205); 

    // Distance of pixel from the circle origin (0.5, 0.5). 
    let dx = scaledX - 0.5; 
    let dy = scaledY - 0.5; 

    let angle = Math.atan2(dy, dx); 

    if (angle >= startAngle && angle <= endAngle) { 
    ctx.fillStyle = "rgba(255, 255, 0, .5)"; 
    ctx.fillRect(x, y, 1, 1); 
    } 
} 

これは、いくつかの角度のために正常に動作し、なくほかの人のため。画素135と205度の間でハイライトされ、この（すなわちだけ135〜180度が強調表示されている）ように見える：ハイライトされたピクセルは私のブラックアーク（真実のソース）と一致しないこと

注意。私はGoogleからあらゆる種類のものを試してきましたが、私は立ち往生しています。

私は問題を示すコードペンを持っています：https://codepen.io/chrisparton1991/pen/XRpqXb。誰かが私のアルゴリズムで間違っていることについて私を導くことはできますか？

ありがとうございます！

Answer 1

atan2関数は360°より小さい負の角度を返しますので、角度が180°より大きい場合は問題が発生します。これは

let angle = Math.atan2(dy, dx); 
if (angle<0) angle += 2*Math.PI; 

によって修正することができますしかし、あなたはそれは、0°の線を含む小さな部門で、350°から10°までのセクターを強調したい場合は、これはまだ十分ではありません。次に、以下の拡張正規化手順が役立ちます。

let angle = Math.atan2(dy, dx); 
let before = angle-startAngle; 
if(before < -Math.PI) 
    before += 2*Math.PI; 
let after = angle-endAngle; 
if(after < -Math.PI) 
    after += 2*Math.PI; 

画像は、画面の原点が右上の座標（0,1）を置くため、逆さになります。