Photon

Your compass and straightedge, in JavaScript.

Create line drawings using familiar constructs from geometry and drafting. Initially designated for CNC and laser cutters, Photon can also help you programmatically draw shapes for any purpose. It runs in both Node.js and web browsers.

2D Export formats: DXF, SVG, PDF, Jscad CAG object

3D Export formats: Jscad Script, Jscad CSG object, STL

Demos - Documentation

Origins

Photon is a modern continuation of Microsoft's Maker.js project. When Microsoft archived the original Maker.js repository, we forked it to ensure this valuable tool continues to evolve and serve the maker community.

Original Project: Microsoft Maker.js (archived)
License: Apache 2.0
Original Author: Dan Marshall / Microsoft Corporation

We're grateful to Microsoft and the original contributors for creating and open-sourcing this excellent library. Photon maintains full backward compatibility while adding modern features and active maintenance.

Core concepts

• paths - The primitive elements of a drawing are lines, arcs, and circles.
• models - Groups of paths to compose a shape.
• layers - Organization of models, such as by color or tool type.
• chains - A series of lines and arcs that connect end-to-end continuously.

Learn more in the tutorial or API documentation.

Features

• Drawings are a simple JavaScript object which can be serialized / deserialized conventionally with JSON. This also makes a drawing easy to clone.

• Other people's Models can be required the Node.js way, modified, and re-exported.

• Models can be scaled, distorted, measured, and converted to different unit systems.

• Paths can be distorted.

• Models can be rotated or mirrored.

• Find intersection points or intersection angles of paths.

• Traverse a model tree to reason over its children.

• Detect chains formed by paths connecting end to end.

• Get the points along a path or along a chain of paths.

• Easily add a curvature at the joint between any 2 paths, using a traditional or a dogbone fillet.

• Combine models with boolean operations to get unions, intersections, or punches.

• Expand paths to simulate a stroke thickness, with the option to bevel joints.

• Outline model to create a surrounding outline, with the option to bevel joints.

• Layout clones into rows, columns, grids, bricks, or honeycombs

Built-in models

• Belt
• Bezier Curve
• Bolt Circle
• Bolt Rectangle
• Connect the dots
• Dogbone
• Dome
• Ellipse
• Elliptic Arc
• Holes
• Oval
• OvalArc
• Polygon
• Rectangle
• Ring
• RoundRectangle
• S curve
• Slot
• Square
• Star
• Text

Import formats

• Fonts (Requires opentype.js)
• SVG Path Data
• SVG Points

Getting Started

Installation

Install Photon via npm:

npm install @photon/core

Usage in Node.js

In ESM code (recommended):

import * as photon from '@photon/core';

// Create a simple rectangle
const rect = new photon.models.Rectangle(100, 50);

// Export to SVG
const svg = photon.exporter.toSVG(rect);

In CommonJS code:

const photon = require('@photon/core');

// Create a simple rectangle
const rect = new photon.models.Rectangle(100, 50);

Usage in Web Browser

Use the ES module build (recommended):

<script type="module">
  import * as photon from "https://cdn.jsdelivr.net/npm/@photon/core@latest/dist/photon.es.js";
  
  // Create a simple star
  const star = new photon.models.Star(5, 50, 25);
  const svg = photon.exporter.toSVG(star);
  document.body.innerHTML = svg;
</script>

Or use the UMD bundle for a global Photon variable:

<script src="https://cdn.jsdelivr.net/npm/@photon/core@latest/dist/photon.umd.js"></script>
<script>
  const { models, paths, exporter } = window.Photon;
  const circle = new models.Circle([0, 0], 50);
</script>

CDN Links

• ES module: https://cdn.jsdelivr.net/npm/@photon/core@latest/dist/photon.es.js
• UMD global: https://cdn.jsdelivr.net/npm/@photon/core@latest/dist/photon.umd.js

Optional dependencies:

<!-- Bezier support (required for BezierCurve model) -->
<script src="https://cdn.jsdelivr.net/npm/bezier-js@2/bezier.js"></script>

<!-- Font support for Text model -->
<script src="https://cdn.jsdelivr.net/npm/opentype.js@0/dist/opentype.js"></script>

Try it now

Visit the Photon Playground to edit and run JavaScript from your browser.

Each of the demos will also open in the playground so that you can explore and modify their code.

Migrating from Maker.js

Photon maintains API compatibility with Maker.js. To migrate:

1. Update package name:

   npm uninstall makerjs
   npm install @photon/core

2. Update imports:

   // Old (Maker.js)
   import * as makerjs from 'makerjs';
      
   // New (Photon)
   import * as photon from '@photon/core';

3. Update variable names (optional but recommended):

   // Old
   const rect = new makerjs.models.Rectangle(100, 50);
   const svg = makerjs.exporter.toSVG(rect);
      
   // New
   const rect = new photon.models.Rectangle(100, 50);
   const svg = photon.exporter.toSVG(rect);

4. Update global namespace (if using UMD/browser builds):

   • Old: window.MakerJs or window.makerjs
   • New: window.Photon

All APIs, models, and functionality remain the same. The core library is fully compatible.

Contributing

There are many ways to contribute to Photon:

• ★ Star Photon on GitHub
• Submit bugs and feature requests on GitHub
• Create a demo for the gallery
• Create lessons or videos for the documentation
• Enhance the website
• Add features to the Playground app
• Create a new Photon app, and we will link to it here
• Find TODOs in the core source code
• Create unit tests for the core

See CONTRIBUTING.md for guidelines.

Credits

Photon depends on:

• bezier-js by Pomax
• graham_scan by Brian Barnett
• kdbush by Vladimir Agafonkin

Original Project: Maker.js was a Microsoft Garage project. We're grateful to Microsoft and Dan Marshall for creating and open-sourcing this excellent library under the Apache 2.0 license.