    /*
    	This file was derived from the p5.js source code at
    	https://github.com/processing/p5.js

    	Copyright (c) the p5.js contributors and Andre Seidelt <superilu@yahoo.com>

        This library is free software; you can redistribute it and/or
        modify it under the terms of the GNU Lesser General Public
        License as published by the Free Software Foundation; either
        version 2.1 of the License, or (at your option) any later version.

        This library is distributed in the hope that it will be useful,
        but WITHOUT ANY WARRANTY; without even the implied warranty of
        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
        Lesser General Public License for more details.

        You should have received a copy of the GNU Lesser General Public
        License along with this library; if not, write to the Free Software
        Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
     */

    /**
    * @module p5compat
    */

    // internal variables
    exports._shapeMode = null;
    exports._shape = [];

    /**********************************************************************************************************************
     * 2d shapes
     */
    /**
     * Draw an arc to the screen. If called with only x, y, w, h, start, and
     * stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc
     * will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE). The
     * origin may be changed with the ellipseMode() function.<br><br>
     * The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.
     * Adding or subtracting TWO_PI to either angle does not change where they fall.
     * If both start and stop fall at the same place, a full ellipse will be drawn.
     *
     * @method arc
     * @param  {Number} x      x-coordinate of the arc's ellipse
     * @param  {Number} y      y-coordinate of the arc's ellipse
     * @param  {Number} w      width of the arc's ellipse by default
     * @param  {Number} h      height of the arc's ellipse by default
     * @param  {Number} start  angle to start the arc, specified in radians
     * @param  {Number} stop   angle to stop the arc, specified in radians
     * @param  {Constant} [mode] optional parameter to determine the way of drawing
     *                         the arc. either CHORD, PIE or OPEN
     *
     * @example
     * arc(50, 55, 50, 50, 0, HALF_PI);
     * noFill();
     * arc(50, 55, 60, 60, HALF_PI, PI);
     * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
     * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
     *
     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
     *
     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
     *
     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
     *
     * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
     */
    exports.arc = function (x, y, w, h, start, end, style) {
    	if (_currentEnv._stroke != NO_COLOR) {
    		if (_currentEnv._strokeWeight == 1) {
    			CircleArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._stroke);
    		} else {
    			CustomCircleArc(x, y, w, h, start * 10 * RAD_TO_DEG, end * 10 * RAD_TO_DEG, _currentEnv._strokeWeight, _currentEnv._stroke);
    		}
    	}
    };

    /**
     * Draws an ellipse (oval) to the screen. An ellipse with equal width and
     * height is a circle. By default, the first two parameters set the location,
     * and the third and fourth parameters set the shape's width and height. If
     * no height is specified, the value of width is used for both the width and
     * height. If a negative height or width is specified, the absolute value is taken.
     * The origin may be changed with the ellipseMode() function.
     *
     * @method ellipse
     * @param  {Number} x x-coordinate of the ellipse.
     * @param  {Number} y y-coordinate of the ellipse.
     * @param  {Number} w width of the ellipse.
     * @param  {Number} [h] height of the ellipse.
     * @example
     * ellipse(56, 46, 55, 55);
     */
    exports.ellipse = function (x, y, w, h) {
    	h = h || w;

    	var x1 = x;
    	var y1 = y;

    	if (_currentEnv._ellipseMode === CENTER) {
    		var w1 = w / 2;
    		var h1 = h / 2;
    	} else if (_currentEnv._ellipseMode === RADIUS) {
    		var w1 = w;
    		var h1 = h;
    	} else if (_currentEnv._ellipseMode === CORNER) {
    		x1 = x - w;
    		y1 = y - h;
    		var w1 = w / 2;
    		var h1 = h / 2;
    	} else if (_currentEnv._ellipseMode === CORNERS) {
    		var w1 = (w - x) / 2;
    		var h1 = (h - y) / 2;
    	} else {
    		Debug("Unknown ellipseMode=" + _currentEnv._ellipseMode);
    		return;
    	}

    	var tx = _transX(x1, y1);
    	var ty = _transY(x1, y1);

    	if (_currentEnv._fill != NO_COLOR) {
    		FilledEllipse(tx, ty, w1, h1, _currentEnv._fill);
    	}
    	if (_currentEnv._stroke != NO_COLOR) {
    		if (_currentEnv._strokeWeight == 1) {
    			Ellipse(tx, ty, w1, h1, _currentEnv._stroke);
    		} else {
    			CustomEllipse(tx, ty, w1, h1, _currentEnv._strokeWeight, _currentEnv._stroke);
    		}
    	}
    };

    /**
     * Draws a circle to the screen. A circle is a simple closed shape.
     * It is the set of all points in a plane that are at a given distance from a given point, the centre.
     * This function is a special case of the ellipse() function, where the width and height of the ellipse are the same.
     * Height and width of the ellipse correspond to the diameter of the circle.
     * By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle.
     *
     * @method circle
     * @param  {Number} x  x-coordinate of the centre of the circle.
     * @param  {Number} y  y-coordinate of the centre of the circle.
     * @param  {Number} d  diameter of the circle.
     * @example
     * // Draw a circle at location (30, 30) with a diameter of 20.
     * circle(30, 30, 20);
     */
    exports.circle = function (x, y, r) {
    	ellipse(x, y, r);
    };

    /**
     * Draws a line (a direct path between two points) to the screen. The version
     * of line() with four parameters draws the line in 2D. To color a line, use
     * the stroke() function. A line cannot be filled, therefore the fill()
     * function will not affect the color of a line. 2D lines are drawn with a
     * width of one pixel by default, but this can be changed with the
     * strokeWeight() function.
     *
     * @method line
     * @param  {Number} x1 the x-coordinate of the first point
     * @param  {Number} y1 the y-coordinate of the first point
     * @param  {Number} x2 the x-coordinate of the second point
     * @param  {Number} y2 the y-coordinate of the second point
     * @example
     * line(30, 20, 85, 75);
     *
     * line(30, 20, 85, 20);
     * stroke(126);
     * line(85, 20, 85, 75);
     * stroke(255);
     * line(85, 75, 30, 75);
     */
    exports.line = function (x1, y1, x2, y2) {
    	if (_currentEnv._stroke != NO_COLOR) {
    		var tx1 = _transX(x1, y1);
    		var ty1 = _transY(x1, y1);
    		var tx2 = _transX(x2, y2);
    		var ty2 = _transY(x2, y2);

    		if (_currentEnv._strokeWeight == 1) {
    			Line(tx1, ty1, tx2, ty2, _currentEnv._stroke);
    		} else {
    			CustomLine(tx1, ty1, tx2, ty2, _currentEnv._strokeWeight, _currentEnv._stroke);
    		}
    	}
    };

    /**
     * Draws a point, a coordinate in space at the dimension of one pixel.
     * The first parameter is the horizontal value for the point, the second
     * value is the vertical value for the point. The color of the point is
     * determined by the current stroke.
     *
     * @method point
     * @param  {Number} x the x-coordinate
     * @param  {Number} y the y-coordinate
     * @param  {Number} [z] the z-coordinate (for WebGL mode)
     * @example
     * point(30, 20);
     * point(85, 20);
     * point(85, 75);
     * point(30, 75);
     */
    exports.point = function (x, y) {
    	if (_currentEnv._stroke != NO_COLOR) {
    		Plot(_transX(x, y), _transY(x, y), _currentEnv._stroke);
    	}
    };

    /**
     * Draw a quad. A quad is a quadrilateral, a four sided polygon. It is
     * similar to a rectangle, but the angles between its edges are not
     * constrained to ninety degrees. The first pair of parameters (x1,y1)
     * sets the first vertex and the subsequent pairs should proceed
     * clockwise or counter-clockwise around the defined shape.
     *
     * @method quad
     * @param {Number} x1 the x-coordinate of the first point
     * @param {Number} y1 the y-coordinate of the first point
     * @param {Number} x2 the x-coordinate of the second point
     * @param {Number} y2 the y-coordinate of the second point
     * @param {Number} x3 the x-coordinate of the third point
     * @param {Number} y3 the y-coordinate of the third point
     * @param {Number} x4 the x-coordinate of the fourth point
     * @param {Number} y4 the y-coordinate of the fourth point
     * @example
     * quad(38, 31, 86, 20, 69, 63, 30, 76);
     */
    exports.quad = function (x1, y1, x2, y2, x3, y3, x4, y4) {
    	beginShape();
    	vertex(x1, y1);
    	vertex(x2, y2);
    	vertex(x3, y3);
    	vertex(x4, y4);
    	vertex(x1, y1);
    	endShape(CLOSE);
    };

    /**
     * Draws a rectangle to the screen. A rectangle is a four-sided shape with
     * every angle at ninety degrees. By default, the first two parameters set
     * the location of the upper-left corner, the third sets the width, and the
     * fourth sets the height. The way these parameters are interpreted, however,
     * may be changed with the rectMode() function.
     * <br><br>
     * The fifth, sixth, seventh and eighth parameters, if specified,
     * determine corner radius for the top-left, top-right, lower-right and
     * lower-left corners, respectively. An omitted corner radius parameter is set
     * to the value of the previously specified radius value in the parameter list.
     *
     * @method rect
     * @param  {Number} x  x-coordinate of the rectangle.
     * @param  {Number} y  y-coordinate of the rectangle.
     * @param  {Number} w  width of the rectangle.
     * @param  {Number} h  height of the rectangle.
     * @example
     * // Draw a rectangle at location (30, 20) with a width and height of 55.
     * rect(30, 20, 55, 55);
     */
    exports.rect = function (x, y, w, h) {
    	if (_currentEnv._matrix || _currentEnv._strokeWeight > 1) {
    		beginShape();
    		if (_currentEnv._rectMode === CORNER) {
    			vertex(x, y);
    			vertex(x + w, y);
    			vertex(x + w, y + h);
    			vertex(x, y + h);
    		} else if (_currentEnv._rectMode === CORNERS) {
    			vertex(x, y);
    			vertex(w, y);
    			vertex(w, h);
    			vertex(x, h);
    		} else if (_currentEnv._rectMode === CENTER) {
    			var wh = w / 2;
    			var hh = h / 2;
    			vertex(x - wh, y - hh);
    			vertex(x + wh, y - hh);
    			vertex(x + wh, y + hh);
    			vertex(x - wh, y + hh);
    		} else if (_currentEnv._rectMode === RADIUS) {
    			vertex(x - w, y - h);
    			vertex(x + w, y - h);
    			vertex(x + w, y + h);
    			vertex(x - w, y + h);
    		} else {
    			Debug("Unknown rectMode=" + _currentEnv._rectMode);
    			return;
    		}
    		endShape(CLOSE);
    	} else {
    		var x1 = x;
    		var y1 = y;

    		if (_currentEnv._rectMode === CORNER) {
    			var x2 = x + w;
    			var y2 = y + h;
    		} else if (_currentEnv._rectMode === CORNERS) {
    			var x2 = w;
    			var y2 = h;
    		} else if (_currentEnv._rectMode === CENTER) {
    			var wh = w / 2;
    			var hh = h / 2;
    			x1 = x - wh;
    			y1 = y - hh;
    			var x2 = x + wh;
    			var y2 = y + hh;
    		} else if (_currentEnv._rectMode === RADIUS) {
    			x1 = x - w;
    			y1 = y - h;
    			var x2 = x + w;
    			var y2 = y + h;
    		} else {
    			Debug("Unknown rectMode=" + _currentEnv._rectMode);
    			return;
    		}

    		if (_currentEnv._fill != NO_COLOR) {
    			FilledBox(x1, y1, x2, y2, _currentEnv._fill);
    		}
    		if (_currentEnv._stroke != NO_COLOR) {
    			if (_currentEnv._strokeWeight == 1) {
    				Box(x1, y1, x2, y2, _currentEnv._stroke);
    			}
    		}
    	}
    };

    /**
     * Draws a square to the screen. A square is a four-sided shape with
     * every angle at ninety degrees, and equal side size.
     * This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size.
     * By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square.
     * The way these parameters are interpreted, however,
     * may be changed with the rectMode() function.
     * <br><br>
     * The fourth, fifth, sixth and seventh parameters, if specified,
     * determine corner radius for the top-left, top-right, lower-right and
     * lower-left corners, respectively. An omitted corner radius parameter is set
     * to the value of the previously specified radius value in the parameter list.
     *
     * @method square
     * @param  {Number} x  x-coordinate of the square.
     * @param  {Number} y  y-coordinate of the square.
     * @param  {Number} s  side size of the square.
     * @example
     * // Draw a square at location (30, 20) with a side size of 55.
     * square(30, 20, 55);
     */
    exports.square = function (x, y, s) {
    	rect(x, y, s, s);
    };

    /**
     * A triangle is a plane created by connecting three points. The first two
     * arguments specify the first point, the middle two arguments specify the
     * second point, and the last two arguments specify the third point.
     *
     * @method triangle
     * @param  {Number} x1 x-coordinate of the first point
     * @param  {Number} y1 y-coordinate of the first point
     * @param  {Number} x2 x-coordinate of the second point
     * @param  {Number} y2 y-coordinate of the second point
     * @param  {Number} x3 x-coordinate of the third point
     * @param  {Number} y3 y-coordinate of the third point
     * @example
     * triangle(30, 75, 58, 20, 86, 75);
     */
    exports.triangle = function (x1, y1, x2, y2, x3, y3) {
    	beginShape(TRIANGLES);
    	vertex(x1, y1);
    	vertex(x2, y2);
    	vertex(x3, y3);
    	endShape();
    };

    /**
     * Using the beginShape() and endShape() functions allow creating more
     * complex forms. beginShape() begins recording vertices for a shape and
     * endShape() stops recording. The value of the kind parameter tells it which
     * types of shapes to create from the provided vertices. With no mode
     * specified, the shape can be any irregular polygon.
     * <br><br>
     * The parameters available for beginShape() are POINTS, LINES, TRIANGLES,
     * TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the
     * beginShape() function, a series of vertex() commands must follow. To stop
     * drawing the shape, call endShape(). Each shape will be outlined with the
     * current stroke color and filled with the fill color.
     * <br><br>
     * Transformations such as translate(), rotate(), and scale() do not work
     * within beginShape(). It is also not possible to use other shapes, such as
     * ellipse() or rect() within beginShape().
     *
     * @method beginShape
     * @param  {Constant} [kind] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
     *                                TRIANGLE_STRIP, QUADS, or QUAD_STRIP
     * @example
     * beginShape();
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape(CLOSE);
     *
     * beginShape(POINTS);
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape();
     *
     * beginShape(LINES);
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape();
     *
     * noFill();
     * beginShape();
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape();
     *
     * noFill();
     * beginShape();
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape(CLOSE);
     *
     * beginShape(TRIANGLES);
     * vertex(30, 75);
     * vertex(40, 20);
     * vertex(50, 75);
     * vertex(60, 20);
     * vertex(70, 75);
     * vertex(80, 20);
     * endShape();
     *
     * beginShape();
     * vertex(20, 20);
     * vertex(40, 20);
     * vertex(40, 40);
     * vertex(60, 40);
     * vertex(60, 60);
     * vertex(20, 60);
     * endShape(CLOSE);
     */
    exports.beginShape = function (m) {
    	_shapeMode = m;
    	_shape = [];
    };

    /**
     * All shapes are constructed by connecting a series of vertices. vertex()
     * is used to specify the vertex coordinates for points, lines, triangles,
     * quads, and polygons. It is used exclusively within the beginShape() and
     * endShape() functions.
     *
     * @method vertex
     * @param  {Number} x x-coordinate of the vertex
     * @param  {Number} y y-coordinate of the vertex
     * @example
     * strokeWeight(3);
     * beginShape(POINTS);
     * vertex(30, 20);
     * vertex(85, 20);
     * vertex(85, 75);
     * vertex(30, 75);
     * endShape();
     */
    exports.vertex = function (x, y) {
    	_shape.push([_transX(x, y), _transY(x, y)]);
    };

    /**
     * The endShape() function is the companion to beginShape() and may only be
     * called after beginShape(). When endshape() is called, all of image data
     * defined since the previous call to beginShape() is written into the image
     * buffer. The constant CLOSE as the value for the MODE parameter to close
     * the shape (to connect the beginning and the end).
     *
     * @method endShape
     * @param  {Constant} [mode] use CLOSE to close the shape
     * @example
     * noFill();
     *
     * beginShape();
     * vertex(20, 20);
     * vertex(45, 20);
     * vertex(45, 80);
     * endShape(CLOSE);
     *
     * beginShape();
     * vertex(50, 20);
     * vertex(75, 20);
     * vertex(75, 80);
     * endShape();
     *
     * TODO: QUADS, QUAD_STRIP, TRIANGLE_STRIP
     */
    exports.endShape = function (p) {
    	if (_shapeMode === POINTS) {
    		_shape.forEach(function (p) {
    			Plot(p[0], p[1], _currentEnv._stroke);
    		});
    	} else if (_shapeMode === LINES) {
    		for (var i = 0; i < _shape.length; i += 2) {
    			if (_currentEnv._strokeWeight == 1) {
    				Line(_shape[i][0], _shape[i][1], _shape[i + 1][0], _shape[i + 1][1], _currentEnv._stroke);
    			} else {
    				CustomLine(_shape[i][0], _shape[i][1], _shape[i + 1][0], _shape[i + 1][1], _strokeWeight, _currentEnv._stroke);
    			}
    		}
    	} else if (_shapeMode === TRIANGLES) {
    		for (var i = 0; i < _shape.length; i += 3) {
    			var tri = [_shape[i], _shape[i + 1], _shape[i + 2]];
    			if (_currentEnv._fill != NO_COLOR) {
    				FilledPolygon(tri, _currentEnv._fill);
    			}
    			if (_currentEnv._stroke != NO_COLOR) {
    				_PolyLine(tri, true);
    			}
    		}
    	} else {
    		if (_currentEnv._fill != NO_COLOR) {
    			FilledPolygon(_shape, _currentEnv._fill);
    		}
    		if (_currentEnv._stroke != NO_COLOR) {
    			_PolyLine(_shape, p === CLOSE);
    		}
    	}
    };

    /**
     * draw polygon by using lines.
     */
    exports._PolyLine = function (shape, close) {
    	for (var i = 0; i < shape.length - 1; i++) {
    		if (_currentEnv._strokeWeight == 1) {
    			Line(shape[i][0], shape[i][1], shape[i + 1][0], shape[i + 1][1], _currentEnv._stroke);
    		} else {
    			CustomLine(shape[i][0], shape[i][1], shape[i + 1][0], shape[i + 1][1], _currentEnv._strokeWeight, _currentEnv._stroke);
    		}
    	}
    	if (close) {
    		var last = shape.length - 1;
    		if (_currentEnv._strokeWeight == 1) {
    			Line(shape[0][0], shape[0][1], shape[last][0], shape[last][1], _currentEnv._stroke);
    		} else {
    			CustomLine(shape[0][0], shape[0][1], shape[last][0], shape[last][1], _currentEnv._strokeWeight, _currentEnv._stroke);
    		}
    	}
    }

    /**
     * Modifies the location from which rectangles are drawn by changing the way
     * in which parameters given to rect() are interpreted.
     * <br><br>
     * The default mode is rectMode(CORNER), which interprets the first two
     * parameters of rect() as the upper-left corner of the shape, while the
     * third and fourth parameters are its width and height.
     * <br><br>
     * rectMode(CORNERS) interprets the first two parameters of rect() as the
     * location of one corner, and the third and fourth parameters as the
     * location of the opposite corner.
     * <br><br>
     * rectMode(CENTER) interprets the first two parameters of rect() as the
     * shape's center point, while the third and fourth parameters are its
     * width and height.
     * <br><br>
     * rectMode(RADIUS) also uses the first two parameters of rect() as the
     * shape's center point, but uses the third and fourth parameters to specify
     * half of the shapes's width and height.
     * <br><br>
     * The parameter must be written in ALL CAPS because Javascript is a
     * case-sensitive language.
     *
     * @method rectMode
     * @param  {Constant} mode either CORNER, CORNERS, CENTER, or RADIUS
     * @example
     * rectMode(CORNER); // Default rectMode is CORNER
     * fill(255); // Set fill to white
     * rect(25, 25, 50, 50); // Draw white rect using CORNER mode
     *
     * rectMode(CORNERS); // Set rectMode to CORNERS
     * fill(100); // Set fill to gray
     * rect(25, 25, 50, 50); // Draw gray rect using CORNERS mode
     *
     * rectMode(RADIUS); // Set rectMode to RADIUS
     * fill(255); // Set fill to white
     * rect(50, 50, 30, 30); // Draw white rect using RADIUS mode
     *
     * rectMode(CENTER); // Set rectMode to CENTER
     * fill(100); // Set fill to gray
     * rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
     */
    exports.rectMode = function (m) {
    	if (
    		m === CORNER ||
    		m === CORNERS ||
    		m === RADIUS ||
    		m === CENTER
    	) {
    		_currentEnv._rectMode = m;
    	}
    	return this;
    };

    /**
     * Modifies the location from which ellipses are drawn by changing the way
     * in which parameters given to ellipse() are interpreted.
     * <br><br>
     * The default mode is ellipseMode(CENTER), which interprets the first two
     * parameters of ellipse() as the shape's center point, while the third and
     * fourth parameters are its width and height.
     * <br><br>
     * ellipseMode(RADIUS) also uses the first two parameters of ellipse() as
     * the shape's center point, but uses the third and fourth parameters to
     * specify half of the shapes's width and height.
     * <br><br>
     * ellipseMode(CORNER) interprets the first two parameters of ellipse() as
     * the upper-left corner of the shape, while the third and fourth parameters
     * are its width and height.
     * <br><br>
     * ellipseMode(CORNERS) interprets the first two parameters of ellipse() as
     * the location of one corner of the ellipse's bounding box, and the third
     * and fourth parameters as the location of the opposite corner.
     * <br><br>
     * The parameter must be written in ALL CAPS because Javascript is a
     * case-sensitive language.
     *
     * @method ellipseMode
     * @param  {Constant} mode either CENTER, RADIUS, CORNER, or CORNERS
     * @example
     * ellipseMode(RADIUS); // Set ellipseMode to RADIUS
     * fill(255); // Set fill to white
     * ellipse(50, 50, 30, 30); // Draw white ellipse using RADIUS mode
     *
     * ellipseMode(CENTER); // Set ellipseMode to CENTER
     * fill(100); // Set fill to gray
     * ellipse(50, 50, 30, 30); // Draw gray ellipse using CENTER mode
     *
     * ellipseMode(CORNER); // Set ellipseMode is CORNER
     * fill(255); // Set fill to white
     * ellipse(25, 25, 50, 50); // Draw white ellipse using CORNER mode
     *
     * ellipseMode(CORNERS); // Set ellipseMode to CORNERS
     * fill(100); // Set fill to gray
     * ellipse(25, 25, 50, 50); // Draw gray ellipse using CORNERS mode
     */
    exports.ellipseMode = function (m) {
    	if (
    		m === CORNER ||
    		m === CORNERS ||
    		m === RADIUS ||
    		m === CENTER
    	) {
    		_currentEnv._ellipseMode = m;
    	}
    	return this;
    };

    /**********************************************************************************************************************
     * images
     */

    /**
     * Loads an image from a path and creates a Image from it.
     * <br><br>
     *
     * @method loadImage
     * @param  {String} path Path of the image to be loaded
     * @return {Bitmap}             the Image object
     * @example
     * let img;
     * function setup() {
     *   img = loadImage('assets/laDefense.jpg');
     *   image(img, 0, 0);
     * }
     */
    exports.loadImage = function (path) {
    	var ret = function (p) {
    		this.bm = new Bitmap(p);
    		this.width = this.bm.width;
    		this.height = this.bm.height;
    	};
    	ret.prototype.loadPixels = function () { };
    	ret.prototype.get = function (x, y) {	// TODO: check!
    		var px = this.bm.GetPixel(x, y);
    		return color(GetRed(px), GetGreen(px), GetBlue(px), 255);
    	};

    	return new ret(path);
    };

    /**
     * Creates a new <a href="#/p5.Image">p5.Image</a> (the datatype for storing images). This provides a
     * fresh buffer of pixels to play with. Set the size of the buffer with the
     * width and height parameters.
     * <br><br>
     * .<a href="#/p5.Image/pixels">pixels</a> gives access to an array containing the values for all the pixels
     * in the display window.
     * These values are numbers. This array is the size (including an appropriate
     * factor for the <a href="#/p5/pixelDensity">pixelDensity</a>) of the display window x4,
     * representing the R, G, B, A values in order for each pixel, moving from
     * left to right across each row, then down each column. See .<a href="#/p5.Image/pixels">pixels</a> for
     * more info. It may also be simpler to use <a href="#/p5.Image/set">set()</a> or <a href="#/p5.Image/get">get()</a>.
     * <br><br>
     * Before accessing the pixels of an image, the data must loaded with the
     * <a href="#/p5.Image/loadPixels">loadPixels()</a> function. After the array data has been modified, the
     * <a href="#/p5.Image/updatePixels">updatePixels()</a> function must be run to update the changes.
     *
     * @method createImage
     * @param  {Number} width  width in pixels
     * @param  {Number} height height in pixels
     * @return {Bitmap}       the Image object
     * @example
     * let img = createImage(66, 66);
     * img.loadPixels();
     * for (let i = 0; i < img.width; i++) {
     *   for (let j = 0; j < img.height; j++) {
     *     img.set(i, j, color(0, 90, 102));
     *   }
     * }
     * img.updatePixels();
     * image(img, 17, 17);
     *
     * let img = createImage(66, 66);
     * img.loadPixels();
     * for (let i = 0; i < img.width; i++) {
     *   for (let j = 0; j < img.height; j++) {
     *     img.set(i, j, color(0, 90, 102, (i % img.width) * 2));
     *   }
     * }
     * img.updatePixels();
     * image(img, 17, 17);
     * image(img, 34, 34);
     *
     * let pink = color(255, 102, 204);
     * let img = createImage(66, 66);
     * img.loadPixels();
     * let d = pixelDensity();
     * let halfImage = 4 * (img.width * d) * (img.height / 2 * d);
     * for (let i = 0; i < halfImage; i += 4) {
     *   img.pixels[i] = red(pink);
     *   img.pixels[i + 1] = green(pink);
     *   img.pixels[i + 2] = blue(pink);
     *   img.pixels[i + 3] = alpha(pink);
     * }
     * img.updatePixels();
     * image(img, 17, 17);
     */
    exports.createImage = function (width, height) {
    	var ret = function (p) {
    		this.bm = new Bitmap(width, height);
    		this.width = this.bm.width;
    		this.height = this.bm.height;
    	};
    	ret.prototype.loadPixels = function () { };
    	ret.prototype.get = function (x, y) {	// TODO: check!
    		var px = this.bm.GetPixel(x, y);
    		return color(GetRed(px), GetGreen(px), GetBlue(px), 255);
    	};

    	return new ret(path);
    };

    /**
     * Draw an image to the p5.js canvas.
     *
     * This function can be used with different numbers of parameters. The
     * simplest use requires only three parameters: img, x, and y—where (x, y) is
     * the position of the image. Two more parameters can optionally be added to
     * specify the width and height of the image.
     *
     * This function can also be used with all eight Number parameters. To
     * differentiate between all these parameters, p5.js uses the language of
     * "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source
     * image" (which corresponds to "sx", "sy", etc.) below. Specifying the
     * "source image" dimensions can be useful when you want to display a
     * subsection of the source image instead of the whole thing.
     *
     * @method image
     * @param  {Bitmap} img    the image to display
     * @param  {Number}   x     the x-coordinate of the top-left corner of the image
     * @param  {Number}   y     the y-coordinate of the top-left corner of the image
     * @example
     * let img;
     * function setup() {
     *   img = loadImage('assets/laDefense.jpg');
     *   // Top-left corner of the img is at (0, 0)
     *   // Width and height are the img's original width and height
     *   image(img, 0, 0);
     * }
     */
    exports.image = function (img, x, y) {
    	var x1 = x;
    	var y1 = y;
    	var w = img.bm.width;
    	var h = img.bm.height;

    	if (_currentEnv._imageMode === CORNER) {
    	} else if (_currentEnv._imageMode === CORNERS) {
    	} else if (_currentEnv._imageMode === CENTER) {
    		var wh = w / 2;
    		var hh = h / 2;
    		x1 = x - wh;
    		y1 = y - hh;
    	} else {
    		Debug("Unknown imageMode=" + _currentEnv._imageMode);
    		return;
    	}

    	img.bm.Draw(_transX(x1, y1), _transY(x1, y1));
    };

    /**
     * Set image mode. Modifies the location from which images are drawn by
     * changing the way in which parameters given to image() are interpreted.
     * The default mode is imageMode(CORNER), which interprets the second and
     * third parameters of image() as the upper-left corner of the image. If
     * two additional parameters are specified, they are used to set the image's
     * width and height.
     * <br><br>
     * imageMode(CORNERS) interprets the second and third parameters of image()
     * as the location of one corner, and the fourth and fifth parameters as the
     * opposite corner.
     * <br><br>
     * imageMode(CENTER) interprets the second and third parameters of image()
     * as the image's center point. If two additional parameters are specified,
     * they are used to set the image's width and height.
     *
     * @method imageMode
     * @param {Constant} mode either CORNER, CORNERS, or CENTER
     * @example
     *
     * let img;
     * function setup() {
     *   img = loadImage('assets/bricks.jpg');
     *   imageMode(CORNER);
     *   image(img, 10, 10, 50, 50);
     * }
     *
     * let img;
     * function setup() {
     *   img = loadImage('assets/bricks.jpg');
     *   imageMode(CORNERS);
     *   image(img, 10, 10, 90, 40);
     * }
     *
     * let img;
     * function setup() {
     *   img = loadImage('assets/bricks.jpg');
     *   imageMode(CENTER);
     *   image(img, 50, 50, 80, 80);
     * }
     */
    exports.imageMode = function (m) {
    	if (
    		m === CORNER ||
    		m === CORNERS ||
    		m === CENTER
    	) {
    		_currentEnv._imageMode = m;
    	}
    };

    /**
     * Sets the width of the stroke used for lines, points, and the border
     * around shapes. All widths are set in units of pixels.
     *
     * @method strokeWeight
     * @param  {Number} weight the weight (in pixels) of the stroke
     * @example
     * strokeWeight(1); // Default
     * line(20, 20, 80, 20);
     * strokeWeight(4); // Thicker
     * line(20, 40, 80, 40);
     * strokeWeight(10); // Beastly
     * line(20, 70, 80, 70);
     */
    exports.strokeWeight = function (w) {
    	_currentEnv._strokeWeight = w;
    };