Geometry Pack

Shape:

Determines a visible object, described by a specific geometry. Attributes:

• Geometry - Point, Rect, Rectangle, Circle, Polygon, Heart
• Position - Point element
• Color - Color or Gradient element
• Properties:
  • lineColor
  • lineWidth
  • scale
  • decay

Methods:

• setProperties(properties)
• draw(canvas)

Example:

var star = new Shape(new Polygon(50, 5, true), new Point(0, 0), new Color(0, 0, 255, 1));
star.draw(canvas);

Geometries:

Point:

2D Spatial point. Attributes:

• x
• y

Methods:

• add(p2) - add another point to the current one and return a copy
• distance(p2) - return the euclidean distance from the current to the other point
• manhatan(p2) - return the manhatan distance from the current to the other point
• multiply(p2) - multiply the current point by another and return a copy
• isNear(p2, offset) - verify if the distance of two points is less than the offset

Rect:

Rect between two points. Attributes:

• p1 - start point
• p2 - end point

Methods:

• getX(y) - calculate the new X, given Y
• getY(x) - calculate the new Y, given X
• isParallel(r2) - check if r2 is parallel to the current rect

Circle:

Circle geometry. Attributes:

• radius

Methods:

• getPositionByX(x) - calculate the Y value and return a point
• getPositionByAngle(angle) - calculate the X and Y values and return a point

Rectangle:

Rectangle geometry. Attributes:

• width
• height

Polygon:

Polygon geometry. Attributes:

• isStar - true to draw a star or false to draw a polygon
• radius - radius of the container circle
• innerRadius - radius of the middle circle
• points - points of the star or sides of the polygon

Heart:

Heart geometry.

Methods:

• getPositionByAngle(angle) - calculate the X and Y values and return a point

Colors

Color

Simple color element. Attributes:

• r - Red channel (0 - 255)
• g - Green channel (0 - 255)
• b - Blue channel (0 - 255)
• a - Alpha channel (0 - 1)

Methods:

• toHex - convert channels to hexadecimal value
• toRGBA - return string of rgba values
• setHex - recieve an hex value and set the new color

Gradient

Gradient color element. Attributes:

• rect - Rect element to represent the linear direction or the center points fo the radial gradient circles
• colors - array of Color elements
• radius1 - radius of the inner circle (optional)
• radius2 - radius of the out circle (optional)

Methods:

• addColor(color) - add a color to the colors array
• getGradient() - return the gradient element for painting in canvas

GenericObject

Every element is child of the Generic Object. That allow you to clone an object without breaking references, get an String that represent it, trace it on console and compare it with another object.