Processing.jsのシェイプが機能しない

Question

私は多角形を描画するための関数をいくつも持っています。しかし、私はそれをJavaスクリプトで実行するだけでは動作しません。どうして？

function sketchProc(processing) { 

function polygon (sides, centerX, centerY, radius, fillColor, strokeColor) { 
    processing.fill(fillColor); 
    processing.stroke(strokeColor); 
    var innerAngle = 360/sides; 
    var rotationAngle = innerAngle; 
    processing.beginShape(); 
    for (var i = 0; i < sides + 2; i++) { 
     processing.vertex(centerX + radius*Math.sin(rotationAngle), centerY + radius*Math.cos(rotationAngle)); 
    console.log(centerX + radius*Math.sin(rotationAngle), centerY + radius*Math.cos(rotationAngle)); 
     rotationAngle = innerAngle * i; 

    } 
    processing.endShape(); 
}} 

ちょうど奇妙なジグザグの形をしています。 （後ほど私のコードでこの関数を実装しても問題ありません。ちょうど形が乱れています）

Answer 1

今後、JSFiddleでコメントするのではなく、質問自体を編集したいかもしれません。あなたはまた、それを求めた各人を@リプライするかもしれません。それ以外の場合、私たちはそれを見ません！とにかく一緒に入れてくれてありがとう。

この行を見てみましょう：あなたはsin()とcos()機能にrotationAngleを供給している

processing.vertex(centerX + radius*Math.sin(rotationAngle), centerY + radius*Math.cos(rotationAngle)); 

注意してください。 rotationAngleが度で指定されていることにも注意してください。 （0〜360の値）

これはKhan Academyで正常に機能します。これは、デフォルトでは関数の実行に時間がかかるためです。

しかし、通常のProcessingとProcessing.jsは引数を取るラジアン！ （0〜2 PIの値）rotationAngle変数をラジアン値に変換する必要があります。便利なradians()関数を使ってそれを行うことができます。

さらに詳しい情報はthe referenceにあります。