Processing.js形状不起作用

Question

I have a function that I wrote to draw a polygon with any number of sides. However, when I run it in Java-script only, it doesn't work. Why?

    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();
}}

It just draws a weird zigzag shape. (I implement this function later in my code and it works okay, just the shape is messed up.)

Answer 1

In the future, you might want to edit your question itself instead of just commenting with a JSFiddle. You might also @reply each person who asked for it. Otherwise we won't see it! Anyway, thanks for putting it together.

Take a look at this line:

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

Notice that you're feeding rotationAngle into the sin() and cos() functions. Also notice that rotationAngle is specified in degrees. (Values between 0 and 360.)

This works okay on Khan Academy because by default their functions take degrees.

However, normal Processing and Processing.js take arguments in radians ! (Values between 0 and 2 PI.) So you have to convert your rotationAngle variable into a radian value! You can use the handy radians() function to do that.

More info can be found in the reference .