Some useful structures for graphics programming in JavaScript I guess...
- Point
(x, y)
- Size
(width, height)
- Rectangle
(Point, Size)
- Circle
(Point, radius)
- Point3D
(x, y, z)
- Size3D
(width, height, depth)
- Cube
(Point3D, Size3D)
- Sphere
(Point3D, radius)
- Line
(Point, Point)
- Line3D
(Point3D, Point3D)
- Polygon
(optional Point[])
- Polygon3D
(optional Point3D[])
const { Size, Point, Rectangle, Circle, Point3D, Size3D, Cube, Sphere, Line, Line3D, Polygon, Polygon3D } = require('./geometry.js');
Get angle between two points in degrees
const a = new Point(0, 0);
const b = new Point(40, 40);
console.log(a.angleTo(b).degrees);
Get distance between two points
const a = new Point(50, 50);
const b = new Point(100, 400);
console.log(a.distanceTo(b));
Determine if a rectangle is completely inside another rectangle
const a = new Rectangle(new Point(0, 0), new Size(20, 15));
const b = new Rectangle(new Point(5, 5), new Size(10, 8));
console.log(b.isInside(a));
Determine if two circles intersect
const a = new Circle(new Point(-20, -20), 40);
const b = new Circle(new Point(50, 50), 90);
console.log(b.intersectsWith(a));
Determine if two cubes intersect
const a = new Cube(new Point3D(0, 0, 0), new Size3D(200, 50, 50));
const b = new Cube(new Point3D(100, 0, 0), new Size3D(200, 50, 50));
console.log(a.intersectsWith(b));
Get distance between two points in 3d space
const a = new Point3D(0, 0, 0);
const b = new Point3D(100, 100, 100);
console.log(a.distanceTo(b));
Determine if two spheres intersect
const a = new Sphere(new Point3D(0, 0, 0), 300);
const b = new Sphere(new Point3D(200, 0, 0), 300);
console.log(a.intersectsWith(b));
Determine if a sphere is completely inside another sphere
const a = new Sphere(new Point3D(0, 0, 0), 300);
const b = new Sphere(new Point3D(30, 30, 0), 190);
console.log(b.isInside(a));
Get line's length and angle between it's two points in radians
const line = new Line(new Point(0, 0), new Point(100, 100));
console.log(line.length());
console.log(line.angle().radians);
Create a polygon from array of points
const polygon = new Polygon(
new Point(1500, 1000),
new Point(1154.5084971874737, 524.4717418524233),
new Point(595.4915028125263, 706.1073738537634),
new Point(595.4915028125263, 1293.8926261462366),
new Point(1154.5084971874735, 1475.5282581475767)
);
Drawing the polygon above to HTML5 canvas (or nodejs)
ctx.lineWidth = 50;
ctx.strokeStyle = '#348feb';
ctx.fillStyle = '#0f0f0f';
ctx.beginPath();
polygon.Points.forEach((point, i)=>{
if (i==0) ctx.moveTo(point.X, point.Y);
ctx.lineTo(point.X, point.Y);
});
ctx.closePath();
ctx.fill();
ctx.stroke();