Polygon Basics

renderBasics1(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();

    //Render the polygon at the specific position that has a line width of 3px and the color is blue with no normals drawn.
    //The final parameter determines if normals are drawn.
    screen.drawPolygon(this._shape, 50, 50, {lineWidth: 3, color: 'blue'});

    //Render the polygon at the specific position that has a line width of 3px and the color is red with normals drawn.
    screen.drawPolygon(this._shape, 200, 50, {lineWidth: 3, color: 'red', drawNormals: true});
    
    screen.endPainting();
}
                            

renderTransformation(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();
        
    //Draw the basic polygon.
    screen.drawPolygon(this._shape, 50, 50, {lineWidth: 3, color: 'blue', drawNormals: true});

    //Rotate the red polygon 90 degrees.
    let theta = Math.PI / 2;
    let rotatedShape = this._shape.rotateAtCenter(theta);
    screen.drawPolygon(rotatedShape, 200, 50, {lineWidth: 3, color: 'red', drawNormals: true});

    //Translate the yellow polygon down and to the right by 25 pixels
    let translatedShape = this._shape.translate(new hamonengine.math.vector2(25, 25));
    screen.drawPolygon(translatedShape, 350, 50, {lineWidth: 3, color: 'yellow', drawNormals: true});

    //Shrink the green polygon by half.
    let scaledShape = this._shape.scale(new hamonengine.math.vector2(0.5, 0.5));
    screen.drawPolygon(scaledShape, 50, 200, {lineWidth: 3, color: 'green', drawNormals: true});

    screen.endPainting();
}
                            

renderAnimating(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();

    //Draw the basic polygon.
    screen.drawPolygon(this._shape, 50, 50, {lineWidth: 3, color: 'blue', drawNormals: true});

    //Dynamically rotate the polygon at a rate of 45 degrees per second.
    this._theta = ((this._theta + (elapsedTimeInMilliseconds / 1000 * Math.PI / 4)) % Math.PI2);
    
    //Enlarge and dynamically rotate the red polygon.
    let scaledShape = this._shape.scale(new hamonengine.math.vector2(1.5, 1.5));
    let rotatedShape = scaledShape.rotateAtCenter(this._theta);
    screen.drawPolygon(rotatedShape, 150, 150, {lineWidth: 3, color: 'red', drawNormals: true});

    screen.endPainting();
}
                            

renderWrapping(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();

    //Begin wrapping
    screen.wrapVertical = screen.wrapHorizontal = true;

    //NOTE: Each shape is rotated to point in the direction it will wrap.

    //Draw beyond the left edge of the screen.
    let rotatedLeftShape = this._shape.rotateAtCenter(Math.PI);
    screen.drawPolygon(rotatedLeftShape, screen.viewPort.x - this._shape.center.x, 25, {lineWidth: 3, color: 'blue', drawNormals: true});

    //Draw beyond the right edge of the screen.
    screen.drawPolygon(this._shape, screen.viewPort.width - this._shape.center.x, 200, {lineWidth: 3, color: 'green', drawNormals: true});

    //Draw beyond the top edge of the screen.
    let rotatedDownShape =  this._shape.rotateAtCenter(Math.PI3_2);
    screen.drawPolygon(rotatedDownShape, 150, screen.viewPort.y - this._shape.center.x, {lineWidth: 3, color: 'red', drawNormals: true});

    //Draw beyond the bottom edge of the screen.
    let rotatedUpShape = this._shape.rotateAtCenter(Math.PI_2);
    screen.drawPolygon(rotatedUpShape, 350, screen.viewPort.height - this._shape.center.x, {lineWidth: 3, color: 'orange', drawNormals: true});

    screen.wrapVertical = screen.wrapHorizontal = false;

    screen.endPainting();
}
                            

renderPolygonType(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();
        
    let shapeTypeName = (shapeType) => shapeType === SHAPE_TYPE.CONCAVE ? "Concave" : "Convex";

    //1st shape is convex.
    screen.drawPolygon(this._shape, 25, 50, {lineWidth: 3, color: 'blue'});
    screen.drawText(`ShapeType: ${shapeTypeName(this._shape.shapeType)}`, 25, 25, '16px serif', 'white');

    //2nd shape is concave.
    screen.drawPolygon(this._shape2, 250, 50, {lineWidth: 3, color: 'red'});
    screen.drawText(`ShapeType: ${shapeTypeName(this._shape2.shapeType)}`, 250, 25, '16px serif', 'white');

    screen.endPainting();
}
                            

renderTransformRect(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();
        
    //Render the polygon
    screen.drawPolygon(this._shape, 50, 50, {lineWidth: 3, color: 'blue', drawNormals: true});

    //Render the bounding rect.
    screen.drawRect(this._shape.toRect(), 50, 50, {lineWidth: 1, color: 'white'});

    //Rotate the red polygon 90 degrees.
    let theta = Math.PI / 2;
    let rotatedShape = this._shape.rotateAtCenter(theta);
    screen.drawPolygon(rotatedShape, 200, 50, {lineWidth: 3, color: 'red', drawNormals: true});

    //Render the bounding rect.
    screen.drawRect(rotatedShape.toRect(), 200, 50, {lineWidth: 1, color: 'white'});

    //Translate the yellow polygon down and to the right by 25 pixels
    let translatedShape = this._shape.translate(new hamonengine.math.vector2(25, 25));
    screen.drawPolygon(translatedShape, 350, 50, {lineWidth: 3, color: 'yellow', drawNormals: true});

    //Render the bounding rect.
    screen.drawRect(translatedShape.toRect(), 350, 50, {lineWidth: 1, color: 'white'});

    //Shrink the green polygon by half.
    let scaledShape = this._shape.scale(new hamonengine.math.vector2(0.5, 0.5));
    screen.drawPolygon(scaledShape, 50, 200, {lineWidth: 3, color: 'green', drawNormals: true});

    //Render the bounding rect.
    screen.drawRect(scaledShape.toRect(), 50, 200, {lineWidth: 1, color: 'white'});

    screen.endPainting();
}                        
                            

renderDimension(screen, elapsedTimeInMilliseconds) {
    screen.beginPainting();

    //Handle rotation & scale.
    this._polygonRotation = ((this._polygonRotation + (this._rotateHold * elapsedTimeInMilliseconds / 1000 * Math.PI / 4)) % Math.PI2);
    this._polygonScale = (this._polygonScale + (this._scaleDirection * elapsedTimeInMilliseconds / 1000 * 0.10));

    //Precalculate the movement vector.
    let movementVector = new hamonengine.math.vector2(
        0.25 * this._direction.x * elapsedTimeInMilliseconds,
        0.25 * this._direction.y * elapsedTimeInMilliseconds
    );

    //Perform the actual rotation & scaling and cache it for rendering.
    let transformedShape = this._shape.scale(new hamonengine.math.vector2(this._polygonScale, this._polygonScale))
        .rotateAtCenter(this._polygonRotation)
        .translate(this._position.add(movementVector));

    //Draw the bounding rect created by the min & max coordinates.
    let min = transformedShape.min;
    let max = transformedShape.max;
    let center = transformedShape.center;
    screen.context.rect(min.x, min.y, max.x - min.x, max.y - min.y);
    screen.context.strokeStyle = 'white';
    screen.context.stroke();

    //Draw the center of the circle.
    screen.context.beginPath();
    screen.context.arc(center.x, center.y, 2, 0, Math.PI2);
    screen.context.stroke();

    //Render the polygon
    screen.drawPolygon(transformedShape, 0, 0, { lineWidth: 3, color: 'blue', drawNormals: true });

    screen.endPainting();

    //Update the position.
    this._position.x += movementVector.x;
    this._position.y += movementVector.y;
}