utilities

Void

(

Canvas 2d Context: CanvasRenderingContext2D
Sector Center Point: {x: Number , y: Number}
Sector Outer Radius: Number
Start Angle (in radians): Number
End Angle (in radians): Number

)

Draws a circle sector on the supplied canvas rendering context.

		rwxCanvas.drawSector(ctx, {x:150, y:150}, 150, rwxGeometry.toRadians(270), rwxGeometry.toRadians(360));
        										

Void

(

Canvas 2d Context: CanvasRenderingContext2D
Sector Center Point: {x: Number , y: Number}
Arc Outer Radius: Number
Arc Depth: Number
Start Angle (in radians): Number
End Angle (in radians): Number

)

Draws a circle arc on the supplied canvas rendering context.

		rwxCanvas.drawArc(ctx, {x:150, y:150}, 150, 50, rwxGeometry.toRadians(180), rwxGeometry.toRadians(240));
        										

Number

(

Start Point: {x: Number , y: Number}
Control Point: {x: Number , y: Number}
End Point: {x: Number , y: Number}

)

Returns an approximate (due to complexity) length of a quadratic bezier curve.

		const start = {x: 50, y: 50};
        												const control = {x: 333, y: 33};
        												const end = {x: 250, y: 250};
        												const result = rwxGeometry.getQuadraticBezierLength(start, control, end);
        										

Number

(

Point 1: {x: Number , y: Number}
Point 2: {x: Number , y: Number}

)

Returns a distance between 2 points.

		const point1 = {x: 35, y: 35};
        												const point2 = {x: 265, y: 265};
        												const result = rwxGeometry.getDistance(point1, point2);
        										

Boolean

(

Point: {x: Number , y: Number}
Circle Center Point: {x: Number , y: Number}
Radius: Number

)

Checks to see if a point is inside a circle of given centre point and radius.

		const point = {x: 175, y: 175};
        												const circleCenter = {x: 150, y: 150};
        												const radius = 100;
        												const result = rwxGeometry.isInsideCircle(point, circleCenter, radius);
        										

Boolean

(

Point: {x: Number , y: Number}
Sector Center Point: {x: Number , y: Number}
Radius: Number
Start Angle (in radians): Number
End Angle (in radians): Number

)

Checks to see if a point is inside a sector of a circle.

		const point = {x: 200, y: 50};
        												const sectorCenter = {x: 150, y: 150};
        												const outerRadius = 150;
        												const startAngle = rwxGeometry.toRadians(270);
        												const endAngle = rwxGeometry.toRadians(360);
        												const result = rwxGeometry.isInsideSector(point, sectorCenter, outerRadius, startAngle, endAngle);
        										

Boolean

(

Point: {x: Number , y: Number}
Arc Center Point: {x: Number , y: Number}
Outer Radius: Number
Inner Radius: Number
Start Angle (in radians): Number
End Angle (in radians): Number

)

Checks to see if a point is inside an arc of a circle.

		const point = {x:50, y:100};
        												const arcCenter = {x:150, y:150};
        												const outerRadius = 150;
        												const innerRadius = 100;
        												const startAngle = rwxGeometry.toRadians(180);
        												const endAngle = rwxGeometry.toRadians(240);
        												const result = rwxGeometry.isInsideArc(point, arcCenter, outerRadius, innerRadius, startAngle, endAngle);
        										

{x: Number, y: Number}

(

Point: {x: Number , y: Number}
Circle Center Point: {x: Number , y: Number}
Radius: Number

)

Finds the closest point on a circles circumference relative to a given point.

		const point = {x:130, y:190};
        												const circleCenter {x:150, y:150};
        												const radius = 100;
        												const result = rwxGeometry.closestPointOnCircumference(point, circleCenter, radius);
        										

Number

(

Start Value: Number
End Value: Number
ID: String
Easing Function: String
Duration: Number
Animation Complete Callback: Function

)

Animates a value from its start value to its end value over a specified duration and with the specified easing. If no duration is specified, 1000 (1 second) will be used. If no easing is specified, 'linear' will be used.

		animate();
        												function animate()
        												{
        													let x = rwxAnimate.fromTo(40, 260, 'circle1x', 'easeInOutQuad', 2000, ()=>{console.log("done")});
        													let y = rwxAnimate.fromTo(40, 260, 'circle1y', 'easeInOutQuad', 2000);
        													window.requestAnimationFrame(animate);	
        												}
        										

Number

(

Start Value: {x: Number , y: Number}
Control Value 1: {x: Number , y: Number}
Control Value 2: {x: Number , y: Number}
End Value: {x: Number , y: Number}
ID: String
Easing Function: String
Duration: Number
Animation Complete Callback: Function

)

Animates a value from its start value to its end value over a specified duration, with specified easing, VIA specified control points. If no duration is specified, 1000 (1 second) will be used. If no easing is specified, 'linear' will be used.

		animate();
        												function animate()
        												{
        													let {x,y} = rwxAnimate.fromToBezier({x: 40, y:40}, {x: 70, y:300}, {x: 300, y:0}, {x: 260, y:260}, 'circleBezier', 'easeInOutQuint', 2000, ()=>{console.log("fromToBezier done")});
        													window.requestAnimationFrame(animate);
        												}
        										

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element up to hide the contents inside. If callback is supplied, it will be ran after then animation has completed.

		const element = document.getElementById('slideUpExample');
        												rwxDOM.slideUp(element, 1, ()=>{console.log("done");});
        										

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element down to display the contents inside. If callback is supplied, it will be ran after then animation has completed. A class of .rwx-slide-expanded will be added to the element when it has expanded.

		const element = document.getElementById('slideDownExample');
        												rwxDOM.slideDown(element, 1, ()=>{console.log("done");});
        										

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element down if its contents is currently hidden, or up if its contents is visible. If callback is supplied, it will be ran after each slide animation. A class of .rwx-slide-expanded will be added to the element when it has expanded and removed when unexpanded.

		const element = document.getElementById('slideToggleExample');
        												rwxDOM.slideToggle(element, 1, ()=>{console.log("done");});