# triangle-draw

> draw a filled triangle directly onto a pixel buffer, with textures or interpolated vertex colors

Latest version **0.0.28** (published 2022-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install triangle-draw
pnpm add triangle-draw
yarn add triangle-draw
bun add triangle-draw
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.28 |
| Published | 2022-04-05 |
| First published | 2022-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 184.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | stonkpunk |
| Maintainers | stonkpunk |
| Keywords | triangle, fill, draw, 2d, cpu, interpolated, vertex |

## Links

- npm: https://www.npmjs.com/package/triangle-draw
- Homepage: https://github.com/stonkpunk/my-npm-modules/tree/main/triangle-draw
- npm.io page: https://npm.io/package/triangle-draw

## Dependencies (2)

- [bresenham](https://npm.io/package/bresenham.md) 0.0.4
- [barycentric-coordinates](https://npm.io/package/barycentric-coordinates.md) 0.0.6

## Recent versions

- 0.0.28 (latest) — 2022-04-05
- 0.0.27 — 2022-03-24
- 0.0.26 — 2022-03-15
- 0.0.25 — 2022-03-15
- 0.0.24 — 2022-03-15
- 0.0.23 — 2022-03-15
- 0.0.22 — 2022-03-14
- 0.0.21 — 2022-03-13
- 0.0.19 — 2022-03-13
- 0.0.18 — 2022-03-13
- 0.0.17 — 2022-03-13
- 0.0.16 — 2022-03-12
- 0.0.15 — 2022-03-12
- 0.0.14 — 2022-03-12
- 0.0.13 — 2022-03-12
- … 3 more at https://npm.io/package/triangle-draw/versions

## README

# triangle-draw

quickly draw a filled triangle directly onto a RGBA pixel buffer, filled with interpolated vertex colors, or textures.

uses a modified version of `npm points-in-triangle` to efficiently enumerate points in the triangle.

you can use this to render basic graphics without involving the GPU. 

## Installation

```sh
npm i triangle-draw
```

## Usage 

minimal usage

```javascript
var td = require('triangle-draw');
//triangle = [[x,y],[x,y],[x,y]]
//color = [255,255,255] for white etc
//buffer = RGBA pixel int array[width*height*4] 


//draw solid color triangle
td.drawTriangle(triangle, color, buffer, width, height, edgesOnly=false);

//draw triangle with vertex colors [fill colors are interpolated via barycentric coordinates]
td.drawTriangleColored(triangle, colors, buffer, width, height, edgesOnly=false);

//draw triangle with texture 
td.drawTriangleTextured(triangle, uvs, buffer, width, height, textureBuffer, texWidth, texHeight, edgesOnly=false);


//if you have a flattened arr of 2d triangles...
//trianglesArr = [x,y, x,y, x,y,  x,y, x,y, x,y ... ]
td.drawTriangle_flat(trianglesArr, triangleIndex, color, buffer, width, height, edgesOnly=false);
td.drawTriangleColored_flat(trianglesArr, triangleIndex, colors, buffer, width, height, edgesOnly=false);
td.drawTriangleTextured_flat(trianglesArr, triangleIndex, uvs, buffer, width, height, textureBuffer, texWidth, texHeight, edgesOnly=false);

//using a depth buffer... 
//drawTriangleColored_flat_depth(triArrFlat, triangleIndex, triangleDepths, triangleVertexColors, bufferDepth, w, h, callback, edgesOnly=false)

//set edgesOnly=true to render wireframes...
```

```javascript
//here we draw 100 random triangles and display the result with SDL
var td = require('triangle-draw');
var drawTriangleColored = td.drawTriangleColored;

var sdl = require('@kmamal/sdl')
var window = sdl.video.createWindow({ resizable: true })
var { width, height } = window
var stride = width * 4
var buffer = Buffer.alloc(stride * height)

function rndPt2d(){ //create random 2d point
    return [
        Math.floor(Math.random()*width*1.5-width*0.25),
        Math.floor(Math.random()*height*1.5-height*0.25)
    ]
}

function renderTriangles(){
    var numTris = 100;
    for(var i=0;i<numTris;i++){
        var triangle = [rndPt2d(),rndPt2d(),rndPt2d()];
        var colorA = [255,0,0];
        var colorB = [0,255,0];
        var colorC = [0,0,255];
        var colors = [colorA, colorB, colorC];
        td.drawTriangleColored(triangle, colors, buffer, width, height);
    }
    window.render(width, height, stride, 'rgba32', buffer)
}

renderTriangles();
```

result

![result](https://i.imgur.com/TBxJSVa.png)

Drawing triangles with textures

```javascript
var imageSync = require('image-sync');
//read the image data
var textureData = imageSync.read('./earth.png'); //{width, height, data, saveAs}

//textureData is flat pixels buffer [r,g,b,a, r,g,b,a ...] 

var uvs = [[0,0],[0,1],[1,1]];
td.drawTriangleTextured(triangle, uvs, buffer, width, height, textureData.data, textureData.width, textureData.height);
```

Result
![textured triangles](https://i.imgur.com/jY8aVQq.png)

Texture
![earth texture](https://i.imgur.com/Ebw0kUl.png)

## See Also

- [points-in-triangle](https://www.npmjs.com/package/points-in-triangle) 



[![stonks](https://i.imgur.com/UpDxbfe.png)](https://www.npmjs.com/~stonkpunk)

---
_Source: https://npm.io/package/triangle-draw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._