# p5-studio

> ![Screenshot](https://raw.githubusercontent.com/Bassintag/p5studio/master/screenshots/sketch.png)

Latest version **0.3.5** (published 2022-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install p5-studio
pnpm add p5-studio
yarn add p5-studio
bun add p5-studio
```

Provides the command `p5`.

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2022-11-05 |
| First published | 2022-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 10 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | yes |
| GitHub stars | 14 |
| Maintainers | bassintag |

## Links

- npm: https://www.npmjs.com/package/p5-studio
- Repository: https://github.com/Bassintag/p5studio
- npm.io page: https://npm.io/package/p5-studio

## Dependencies (10)

- [chalk](https://npm.io/package/chalk.md) ^5.0.1
- [esbuild](https://npm.io/package/esbuild.md) ^0.14.48
- [express](https://npm.io/package/express.md) ^4.18.1
- [prompts](https://npm.io/package/prompts.md) ^2.4.2
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [mustache](https://npm.io/package/mustache.md) ^4.2.0
- [commander](https://npm.io/package/commander.md) ^9.4.0
- [socket.io](https://npm.io/package/socket.io.md) ^4.5.1
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [lodash.kebabcase](https://npm.io/package/lodash.kebabcase.md) ^4.1.1

## Recent versions

- 0.3.5 (latest) — 2022-11-05
- 0.3.4 — 2022-11-05
- 0.3.3 — 2022-10-30
- 0.3.2 — 2022-10-21
- 0.3.1 — 2022-10-21
- 0.3.0 — 2022-10-21
- 0.2.2 — 2022-10-17
- 0.2.1 — 2022-10-17
- 0.2.0 — 2022-10-15
- 0.1.6 — 2022-10-15
- 0.1.5 — 2022-10-14
- 0.1.4 — 2022-10-06
- 0.1.3 — 2022-10-05
- 0.1.2 — 2022-10-05
- 0.1.1 — 2022-10-05
- … 1 more at https://npm.io/package/p5-studio/versions

## README

# P5 Studio

![Screenshot](https://raw.githubusercontent.com/Bassintag/p5studio/master/screenshots/sketch.png)

## Table of matters

- [Getting Started](#getting-started)
- [CLI](#cli)
- [Writing sketches](#writing-sketches)
- [Examples](#examples)

## Getting started

### Installation

Before starting make sure you have [Python 3](https://www.python.org/downloads/) installed on your computer and that the `python` command is available in the path.

P5 Studio is available as a CLI, it is recommended to install it globally.

```bash
npm i -g p5-studio
```

### Creating a new workspace

You can easily create a new workspace using the CLI.

```bash
p5 create MyNewWorkspace
```

### Starting the web interface

Once you have successfully created a new project you can now use the serve command to start the development server.

This can be done by running the `serve` script that has been automatically added to the `package.json` file.

```bash
# with yarn
yarn serve

# with npm
npm run serve
```

By default the server will start on port `3000` and can be accessed by opening http://localhost:3000 in the browser

## CLI

Usage: `p5 [options] [command]`

### Commands

#### new [options] \<name>

Creates a new workspace with the provided name

| Option    | Description                  | Default |
|-----------|------------------------------|---------|
| -o, --out | Path of the output directory | .       |

#### generate [options] \<name> / g [options] \<name>

Generate a new sketch with the provided name

| Option    | Description                  | Default |
|-----------|------------------------------|---------|
| -o, --out | Path of the output directory | .       |

#### serve [options]

| Option            | Description                                   | Default   |
|-------------------|-----------------------------------------------|-----------|
| -p, --port        | Port to start the server on                   | 3000      |
| -d, --sketchesDir | Directory that contains the sketches          | .         |
| -o, --outDir      | Directory that contains the rendered sketches | ./renders |


## Writing sketches

Sketches must be written in [Typescript](https://www.typescriptlang.org/), they are compiled to Javascript automatically using esbuild.

All sketches within the specified sketch directory will be available through the web interface.

__In order for a sketch to be recognized, the file name must end by `.sketch.ts`.__

It is recommended to use the `generate` command to create new sketches in order to avoid mistakes.

The `optimization` field in the sketch metadata can be used to specify optimizations that will be applied when a render is saved.
This uses [vpype](https://vpype.readthedocs.io/en/latest/reference.html) in the background.
Please see this [example](https://github.com/Bassintag/p5studio/blob/master/examples/advanced-optimizations.sketch.ts) to learn how to configure the different optimizations.

The `gCode` metadata field can be used to generate a `.gcode` file alongside the `.svg`.
This uses [vpype-gcode](https://pypi.org/project/vpype-gcode/) in the background.
Please see the [gcode example](https://github.com/Bassintag/p5studio/blob/master/examples/gcode.sketch.ts) for more informations.

## Examples

For more examples please check out the [example folder](https://github.com/Bassintag/p5studio/tree/master/examples).

You can run the examples locally by cloning this repository and using the following command:

`npm run serve:examples`

### Example sketch

```typescript
import { SketchFn, SketchMetadata } from "p5-studio";

// This is your sketch metadata, everything is optionnal
// name: The name of your sketch
// resolution: The width and height of your sketch
// fps: The number of time your sketch is rendered every second (rendered only once if not specified)
export const metadata: SketchMetadata = {
  name: "Example sketch",
  resolution: {
    w: 500,
    h: 500,
  },
  optimizations: ['lineSimplify', 'lineMerge', 'reLoop', 'lineSort'],
};

// This function is called once every time the sketch is loaded.
// You can initialize variable and settings here.
// The parameter p is the p5 instance.
export const setup: SketchFn = (p) => {
};

// This function is called once every frame.
// Do your drawing here
// The parameter p is the p5 instance.
export const draw: SketchFn = (p) => {
  p.noFill();
  p.strokeWeight(5);
  p.stroke("red");
  p.circle(250, 250, 300);
};

```

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