# @ericrav/p5.node

> Run p5 global mode in Node.js

Latest version **1.1.0** (published 2023-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ericrav/p5.node
pnpm add @ericrav/p5.node
yarn add @ericrav/p5.node
bun add @ericrav/p5.node
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-11-20 |
| First published | 2023-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eric Rabinowitz |
| Maintainers | ericrav |
| Keywords | p5, node, canvas, jsdom |

## Links

- npm: https://www.npmjs.com/package/@ericrav/p5.node
- Repository: https://github.com/ericrav/p5.node
- Issues: https://github.com/ericrav/p5.node/issues
- npm.io page: https://npm.io/package/@ericrav/p5.node

## Dependencies (2)

- [jsdom](https://npm.io/package/jsdom.md) 22.1.0
- [canvas](https://npm.io/package/canvas.md) 2.11.2

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-11-20
- 1.0.1 — 2023-11-17
- 1.0.0 — 2023-11-17

## README

# p5.node

<a href="https://www.npmjs.com/package/@ericrav/p5.node">
  <img src="https://img.shields.io/npm/v/@ericrav/p5.node">
</a>

Run [p5.js](https://p5js.org/) sketches on the server in Node.js with [node-canvas](https://github.com/Automattic/node-canvas)
and [jsdom](https://github.com/jsdom/jsdom).

`p5.node` enables the use of p5.js global functions and variables in Node.js.

## Quick Start

```
npm i p5 @ericrav/p5.node
```

```js
const { setupP5, getCanvas } = require('@ericrav/p5.node');
const p = setupP5(require('p5'));

const fs = require('fs');

window.setup = () => {
  createCanvas(400, 400);
  noLoop();
};

window.draw = () => {
  background(220);
  circle(200, 200, 50);

  // Save sketch to file
  const out = fs.createWriteStream('sketch.png');
  const canvas = getCanvas(); // get node-canvas instance
  const stream = canvas.createPNGStream();
  stream.pipe(out);
  out.on('finish', () => console.log('Done rendering'));
};
```

## Use with `canvas-sketch`

`p5.node` can be used with @mattdesl's excellent [`canvas-sketch`](https://github.com/mattdesl/canvas-sketch) framework in p5 mode.

```js
const canvasSketch = require('canvas-sketch');
const { setupP5, getCanvas } = require('@ericrav/p5.node');
const p5 = require('p5');
const fs = require('fs');

setupP5(p5);

const settings = {
  p5: true,
  dimensions: [720, 400],
};

const sketch = () => {
  background(random(255), random(255), random(255));
  noFill();
  stroke(255);

  return ({ context, width, height }) => {
    background(0);
    circle(width / 2, height / 2, 50);
  };
};

canvasSketch(sketch, settings).then(() => {
  const out = fs.createWriteStream('output.png');
  const canvas = getCanvas();
  const stream = canvas.createPNGStream();

  stream.pipe(out);
  out.on('finish', () => console.log('Done rendering'));
});
```

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