https://github.com/kinetictactic/polyly
A WebGL based 2D primitives renderer.
https://github.com/kinetictactic/polyly
canvas javascript javascript-library opengl renderer typescript webgl webgl2
Last synced: about 2 months ago
JSON representation
A WebGL based 2D primitives renderer.
- Host: GitHub
- URL: https://github.com/kinetictactic/polyly
- Owner: KineticTactic
- License: mit
- Created: 2023-09-30T14:03:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-04T10:19:40.000Z (over 2 years ago)
- Last Synced: 2024-04-24T23:48:05.358Z (about 2 years ago)
- Topics: canvas, javascript, javascript-library, opengl, renderer, typescript, webgl, webgl2
- Language: TypeScript
- Homepage: https://kinetictactic.github.io/polyly/
- Size: 361 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Polyly
A WebGL based fast 2D primitives renderer.
[API Documentation](https://kinetictactic.github.io/polyly/index.html) | [NPM](https://npmjs.com/package/polyly)
#### Disclaimer:
This library is in a very early state with lots of inconsistencies. You're not recommended to use it in your own projects just yet.
## Install
```
$ npm install polyly
```
## Getting Started
```js
import * as Polyly from "polyly";
const renderer = new Polyly.Renderer({ webglVersion: 2 });
const camera = new Polyly.Camera(renderer.getDisplaySize());
renderer.clear();
// Draw a line
renderer.beginPath();
renderer.line(new Polyly.Vector(0, 0), new Polyly.Vector(100, 100), 10);
renderer.stroke();
renderer.render(camera);
```
### Drawing lines
`Renderer.line(start, end, width)`
```js
renderer.line(new Polyly.Vector(-10, 30), new Polyly.Vector(-100, 150), 10);
```
### Drawing shapes
`Renderer.rect(position, size)`
```js
renderer.beginPath();
renderer.setColor(Polyly.RGB(255, 255, 0));
renderer.rect(new Polyly.Vector(0, 0), new Polyly.Vector(200, 100));
renderer.fill();
```
`Renderer.arc(position, radius, startAngle, endAngle, color)`
```js
renderer.beginPath();
renderer.setColor(Polyly.RGB(255, 255, 0));
renderer.arc(new Polyly.Vector(0, 0), 100, 0, (Math.PI * 6) / 4);
renderer.fill();
```
### Drawing paths
`Renderer.vertex(position, color)` or `Renderer.vertex(vertex)`
Adds a vertex to the current path.
```js
renderer.beginPath();
renderer.vertex(new Polyly.Vector(-400, -100), new Polyly.Color(255, 25, 0, 255));
renderer.vertex(new Polyly.Vector(-200, -100), new Polyly.Color(0, 255, 0, 255));
renderer.vertex(new Polyly.Vector(-200, 100), new Polyly.Color(0, 0, 255, 255));
renderer.strokePath(10);
renderer.fill();
```
### Fill and stroke
`Renderer.stroke(width, strokeOptions?)`
Strokes (outlines) every single path or shape added since the last `Renderer.beginPath()` call.
```js
renderer.stroke(10, { closed: true, dashed: true, dashLength: 15 });
```
`Renderer.fill()`
Fills every single path or shapes added since the last `Renderer.beginPath()` call.
```js
renderer.fill();
```
## Why another rendering library?
I had to write a basic 2D renderer for one of my other projects ([Reflecta](https://github.com/KineticTactic/Reflecta)) as HTML5 Canvas was too slow for my needs. I also wanted the API to be similar to the Canvas API for its dynamic capabilities and ease of use. So I ended up converting it into a seperate 2D rendering library.