open-index/open-npm huggingface dataset:
npm package: @penbridge/napi-penbridge-win32-arm64-msvc
Description: This is the **aarch64-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
Latest version: 0.0.1

# `@penbridge/napi-penbridge-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
npm package: @penbridge/napi-penbridge-win32-ia32-msvc
Description: This is the **i686-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
Latest version: 0.0.1

# `@penbridge/napi-penbridge-win32-ia32-msvc`

This is the **i686-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
npm package: @penbridge/napi-penbridge-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
Latest version: 0.0.1

# `@penbridge/napi-penbridge-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@penbridge/napi-penbridge`
npm package: @pencil.js/arc
Description: Arc shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Arc

Arc shape.

![Arc example](../../media/examples/arc.png)


## Installation

    npm install @pencil.js/arc


## Examples

```js
import Arc from "@pencil.js/arc";

const position = [100, 200];
const width = 50;
const height = 20;
const startAngle = -0.25;
const endAngle = 0.25;
const options = {
    stroke: "red",
};
const arc = new Arc(position, width, height, startAngle, endAngle, options);
```

## ArcOptions
Inherit from [LineOptions](../line/readme.md#lineoptions).

Arc have no specific options.
npm package: @pencil.js/base-event
Description: Basic event for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# BaseEvent

Main class for Pencil.js events.


## Installation

    npm install @pencil.js/base-event


## Examples

```js
import BaseEvent from "@pencil.js/base-event";

component.fire(new BaseEvent("eventName", component));
```
npm package: @pencil.js/button
Description: Button user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Checkbox

Button user input.

![Button example](../../media/examples/button.png)


## Installation

    npm install @pencil.js/button


## Examples

```js
import Button from "@pencil.js/button";

const position = [100, 200];
const options = {
    value: "Click me",
};
const button = new Button(position, options);
```

## ButtonOptions
Inherit from [TextOptions](../text/readme.md#textoptions) and from [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|value |`String` |`""` |Text of the button |
npm package: @pencil.js/checkbox
Description: Checkbox user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Checkbox

Checkbox user input.

![Checkbox example](../../media/examples/checkbox.png)


## Installation

    npm install @pencil.js/checkbox


## Examples

```js
import Checkbox from "@pencil.js/checkbox";

const position = [100, 200];
const options = {
    value: true,
};
const checkbox = new Checkbox(position, options);
```

## CheckboxOptions
Inherit from [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|size |`Number` |`20` |Width and height of the checkbox |
|value |`Boolean` |`false` |Whether it's check ot not |
npm package: @pencil.js/circle
Description: Circle shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Circle

Circle shape.

![Circle example](../../media/examples/circle.png)


## Installation

    npm install @pencil.js/circle


## Examples

```js
import Circle from "@pencil.js/circle";

const position = [100, 200];
const radius = 50;
const options = {
    fill: "red",
    stroke: "#000"
};
const circle = new Circle(position, radius, options);
```

## CircleOptions
Inherit from [EllipseOptions](../ellipse/readme.md#ellipseoptions).

Circle have no specific options.
npm package: @pencil.js/color
Description: Color manager for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Color

Useful class to manipulate colors.


## Installation

    npm install @pencil.js/color


## Examples

```js
import Color from "@pencil.js/color";

const alpha = 0.9; // Opacity
// All are equivalent
const rebeccapurple = new Color("rebeccapurple", alpha);
const rebeccapurple = new Color(
    0.4, // Red ratio
    0.2, // Green ratio
    0.6, // Blue ratio
    alpha,
);
const rebeccapurple = new Color("#663399", alpha);
const rebeccapurple = new Color("#639", alpha);
const rebeccapurple = new Color(0x663399, alpha); // Careful, 0x639 is equivalent to 0x000639 and not to 0x663399

shape.options.fill = rebeccapurple.saturation(0.5).lerp(otherColor, 0.5).reverse();
```
npm package: @pencil.js/component
Description: Abstract component for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Component

Abstract class for visual component of a scene.


## Installation

    npm install @pencil.js/component


## Examples

```js
import Component from "@pencil.js/component";

class FunnyShape extends Component {
    /**
     * @override Component.prototype.render
     */
    render (ctx) {
        // Do crazy stuff here
    }
}
```

## ComponentOptions
Inherit from [ContainerOptions](../container/readme.md#containeroptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|fill |[Color](../color/readme.md) or `String` |`"#000"` |Background Color used to fill, set to null for transparent |
|stroke |[Color](../color/readme.md) or `String` |`null` |Color used to stroke, set to null for transparent |
|strokeWidth |`Number` |`2` |Stroke line thickness in pixels |
|cursor |`String` |`Component.cursors.default` |Cursor to use when hover |
|join |`String` |`Component.joins.miter` |How lines join between them |
|origin |[`Position`](../position) |`new Position()` |Relative offset |
|shadow |[`ShadowOptions`](#shadowoptions) |(see below) |Set of options to set a shadow |

## ShadowOptions

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|blur |`Number` |`0` |Spread of the shadow around the component |
|position |[`Position`](../position) |`new Position()` |Position of the shadow relative to the component |
|color |[Color](../color/readme.md) or `String` |`null` |Color of the shadow |
npm package: @pencil.js/container
Description: Simple container for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Container

Simple wrapper for others component in you scene.


## Installation

    npm install @pencil.js/container


## Examples

```js
import Container from "@pencil.js/container";

const container = new Container();
container.add(someComponent);
```

## ContainerOptions

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|shown |`Boolean` |`true` |Is shown |
|opacity |`Number` |`null` |Opacity level from 0 to 1 (null mean inherited from parent) |
|rotation |`Number` |`0` |Rotation ratio from 0 to 1 (clockwise) |
|rotationCenter |[`Position`](../position) |`new Position()` |Center of rotation relative to this position |
|scale |[`Position`](../position) or `Number` |`1` |Scaling ratio or a pair of value for horizontal and vertical scaling |
|zIndex |`Number` |`1` |Depth ordering |
|clip |`Component` |`null` |Other component used to clip the rendering |
npm package: @pencil.js/draggable
Description: Allow component to be dragged in Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# .draggable

Allow component to be dragged.


## Installation

    npm install @pencil.js/draggable


## Examples

```js
import "@pencil.js/draggable";

const options = {
    x: false
};
myComponent.draggable(options);
```
npm package: @pencil.js/ellipse
Description: Ellipse shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Ellipse

Ellipse shape (oval).

![Ellipse example](../../media/examples/ellipse.png)


## Installation

    npm install @pencil.js/ellipse


## Examples

```js
import Ellipse from "@pencil.js/ellipse";

const position = [100, 200];
const width = 50;
const height = 20;
const options = {
    fill: "red",
};
const ellipse = new Ellipse(position, width, height, options);
```

## EllipseOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

Ellipse have no specific options.
npm package: @pencil.js/event-emitter
Description: Event emitter for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# EventEmitter

Abstract class for event listener and triggerer.


## Installation

    npm install @pencil.js/event-emitter


## Examples

```js
import EventEmitter from "@pencil.js/event-emitter";

class MyEmitter extends EventEmitter {
    /**
     * @override EventEmitter.prototype.fire
     */
    fire (event) {
        super.fire(event);
        const trigger = `on${capitalize(event.name)}`;
        if (target[trigger]) {
            target[trigger](event);
        }
    }
}
```
npm package: @pencil.js/gif
Description: Render scene as GIF
Author: GMartigny
Latest version: 2.0.0

# @pencil.js/gif

[![Package version](https://flat.badgen.net/npm/v/@pencil.js/gif)](https://www.npmjs.com/package/@pencil.js/gif)

Turn any Pencil.js scene into an animated GIF.


## Installation

    npm install @pencil.js/gif


## [CDN](https://developer.mozilla.org/docs/Glossaire/CDN "Content Delivery Network")
You can download this directly from a CDN.


### ESM
```html
<script type="module">
    import gif from "https://unpkg.com/@pencil.js/gif/dist/gif.esm.js";

    gif();
</script>
```

### ES5
```html
<script src="https://unpkg.com/@pencil.js/gif"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/@pencil.js/gif"></script>

<script>
    gif();
</script>
```


## Usage

```js
import gif from "@pencil.js/gif";

gif(<OffscreenCanvas>, <nbFrames>, <options>);
```


## Example

Check out the [examples directory](examples).


## Documentation

### `gif(<scene>, <nbFrame>)`
Turn any Pencil.js scene into an animated GIF.

| Name | Type | Default | Comment |
| --- | --- | --- | --- |
|offscreenCanvas |`OffscreenCanvas` |required |OffscreenCanvas or Scene coming from Pencil.js to be draw onto the GIF |
|nbFrames |`Number` |`1` |Number of frames to draw |
|options |`GIFOptions` |([see below](#gifoptions)) |Some options |

### `GIFOptions`
You can also use all [`canvas-gif-encoder`'s options](https://github.com/pencil-js/canvas-gif-encoder#encoderoptions).

| Name | Type | Default | Comment |
| --- | --- | --- | --- |
|speed |`Number` |`1` |Rendering speed ratio (1 means ~60fps, 0.5 means ~30fps ...) |


## Bundler

This package is using `Worker` to offload the computation to a separate thread and not lock the browser.

When using a web bundler like Webpack or Rollup,
you should use a worker-loader plugin like [webpack `worker-loader`](https://github.com/webpack-contrib/worker-loader) or
[rollup `worker-loader`](https://github.com/darionco/rollup-plugin-web-worker-loader).


## License

[MIT](license)
npm package: @pencil.js/heart
Description: Heart shape for Pencil.js package.
Author: Zachary Nguyen
Latest version: 1.18.0

# Heart

Heart shape.

![Heart example](../../media/examples/heart.png)


## Installation

    npm install @pencil.js/heart


## Examples

```js
import Heart from "@pencil.js/heart";

const position = [100, 200];
const radius = 2;
const options = {
    fill: "red",
    stroke: "teal"
};
const heart = new Heart(position, radius, options);
```

## HeartOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

Heart have no specific options.
npm package: @pencil.js/image
Description: Image loading and drawing for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Image

Image rendering.

![Image example](../../media/examples/image.png)


## Installation

    npm install @pencil.js/image


## Examples

```js
import Image from "@pencil.js/image";

const position = [100, 200];
const url = "url/to/my/file.png";
const options = {
    fill: "black",
    description: "Cutest cat ever !"
};
const image = new Image(position, url, options);
image.on("ready", () => {
    console.log("Image is loaded");
});

// Can be use to preload a bunch of images
Image.load([url1, url2, url3]).then(() => {
    console.log("Images ready");
});
```

Be aware that this example overrides Javascript's `Image` global. Use namespace to avoid this issue.

```js
import * as Namespace from "@pencil.js/image";
new Namespace.Image();
```


## ImageOptions
Inherit from [RectangleOptions](../rectangle/readme.md#rectangleoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|fill |[Color](../color/readme.md) or `String` |`null` |Background color for transparent images |
|description |`String` |`""` |Accessibility description of the image |
npm package: @pencil.js/image-manipulation
Description: Pencil.js plugin to edit images
Author: GMartigny
Latest version: 0.2.0

# @pencil.js/image-manipulation


## Installation

    npm install @pencil.js/image-manipulation


## Usage

```js
import { use, Image } from "pencil.js";
import manipulation from "@pencil.js/image-manipulation";

use(manipulation);

const image = new Image(position, url);

// One manipulation
(async () => {
    await image.reverse();
    console.log("Done");
})();

// Multiple manipulation (done in parallel)
(async () => {
    await image.batch(
        image.reverse,
        [image.lighten, 0.7],
    );
    console.log("Done");
})();
```


## [Documentation](documentation.md)


## License

[MIT](license)
npm package: @pencil.js/input
Description: Abstract user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Input

Abstract user input.


## Installation

    npm install @pencil.js/input


## Examples

```js
import Input from "@pencil.js/input";

class MyInput extends Input {
}
```

## InputOptions
Inherit from [ContainerOptions](../container/readme.md#containeroptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|value |Any |`null` |Initial value of the input |
|fill |[Color](../color/readme.md) or `String` |`"#444"` |Color of the filling |
|background |[Color](../color/readme.md) or `String` |`"#f6f6f6"` |Color of the background |
|border |[Color](../color/readme.md) or `String` |`"#aaa"` |Color of the border |
|hover |[Color](../color/readme.md) or `String` |`"#d0d0d0"` |Color of the background when hovered |
npm package: @pencil.js/keyboard-event
Description: Keyboard related event for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# MouseEvent

Class for Pencil.js keyboard related events.


## Installation

    npm install @pencil.js/keyboard-event


## Examples

```js
import KeyboardEvent from "@pencil.js/keyboard-event";

component.fire(new KeyboardEvent("eventName", component, "ctrl"));
```
npm package: @pencil.js/knob
Description: Knob user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Knob

Rotating knob component.

![Knob example](../../media/examples/knob.png)


## Installation

    npm install @pencil.js/knob


## Examples

```js
import Knob from "@pencil.js/knob";

const position = [100, 200];
const options = {
    radius: 100, // radius in pixel
    min: 0, // Minimum value of the knob
    max: 10, // Maximum value of the knob
    value: 0, // initial value (from 0 to 1)
};
const knob = new Knob(position, options);
knob.value = 0.5; // set to 50%
```


## KnobOptions
Inherit from [ComponentOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|min |`Number` |`0` |Minimum value when the knob is at lowest |
|max |`Number` |`10` |Maximum value when the knob is at highest |
|value |`Number` |`0` |Initial value |
|radius |`Number` |`100` |Radius of the knob |
npm package: @pencil.js/line
Description: Line stroke for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Line

Line stroke passing through points.

![Line example](../../media/examples/line.png)


## Installation

    npm install @pencil.js/line


## Examples

```js
import Line from "@pencil.js/line";

const options = {
    stroke: "red",
    strokeWidth: 9,
};
const line = new Line(from, [firstPoint, secondPoint, lastPoint], options);
```


## LineOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|cap |`String` |`Line.caps.round` |How the line end points looks |
|join |`String` |`Line.joins.round` |How the line segment are join |
|fill |[Color](../color/readme.md) or `String` |`null` |Color used to fill, set to null for transparent |
|stroke |[Color](../color/readme.md) or `String` |`Component.defaultOptions.fill` |Color used to stroke, set to null for transparent |
npm package: @pencil.js/linear-gradient
Description: Linear gradient background for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Linear-gradient

Gradient transition of color(s) between two position.

![Linear-gradient example](../../media/examples/linear-gradient.png)


## Installation

    npm install @pencil.js/linear-gradient


## Examples

```js
import LinearGradient from "@pencil.js/linear-gradient";
import Square from "@pencil.js/square";

const position = [100, 200];
const size = 200;
const startPosition = [0, 0];
const endPosition = [size, size];
const square = new Square(position, size, {
    fill: new LinearGradient(startPosition, endPosition, {
        0: "red",
        0.5: "yellow",
        1: "green",
    }),
});
```
npm package: @pencil.js/math
Description: Math wrapper for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Math

Wrapper for some mathematical helpers.


## Installation

    npm install @pencil.js/math


## Examples

```js
import * as PMath from "@pencil.js/math";

PMath.truncate(-99.9); // -99

// or
import { constrain } from "@pencil.js/math";
constrain(99, 0, 10); // 10
```

## Documentation

Go check the [full documentation](documentation.md).
npm package: @pencil.js/mouse-event
Description: Mouse related event for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# MouseEvent

Class for Pencil.js mouse related events.


## Installation

    npm install @pencil.js/mouse-event


## Examples

```js
import MouseEvent from "@pencil.js/mouse-event";

component.fire(new MouseEvent("eventName", component, aPosition));
```
npm package: @pencil.js/navigation
Description: Navigation module for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Navigation

Navigation helper to switch from Scene to Scene.


## Installation

    npm install @pencil.js/navigation


## Examples

```js
import * as Navigation from "@pencil.js/navigation";

Navigation.prepareScenes({
    // The first scene on the set is going to be the default one
    home: (scene) => {
        // Build your scene here ...
        // If you want to change scene call a new change event
        scene.fire(new BaseEvent(Scene.event.change, "other"));
    },
    other: (scene) => {
        // Build your scene here ...
    },
});

const currentScene = Navigation.getCurrentScene();
```

## Documentation

Go check the [full documentation](documentation.md).
npm package: @pencil.js/network-event
Description: Network related event for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# NetworkEvent

Class for Pencil.js network related events.


## Installation

    npm install @pencil.js/network-event


## Examples

```js
import NetworkEvent from "@pencil.js/network-event";

component.fire(new NetworkEvent("eventName", component));
```
npm package: @pencil.js/offscreen-canvas
Description: Off-screen canvas for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# OffScreenCanvas

Utility to render on a non displayed canvas and extract data from it.


## Installation

    npm install @pencil.js/offscreen-canvas


## Examples

```js
import OffScreenCanvas from "@pencil.js/offscreen-canvas";

const circle = new Circle([0, 0], radius);
const offScreen = new OffScreenCanvas(width, height);

offScreen.render(circle);
// or
circle.render(offScreen);

const imageData = offScreen.imageData;

```


## OffscreenCanvasOptions
Inherit from [ContainerOptions](../container/readme.md#containeroptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|fill |[Color](../color/readme.md) or `String` |`null` |Background color |
|opacity |`Number` |`1` |Global opacity |
npm package: @pencil.js/particles
Description: Particles generator for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Particles

Particle generator optimized to display thousands of instances.

![Particles example](../../media/examples/particles.png)


## Installation

    npm install @pencil.js/particles


## Examples

```js
import Particles from "@pencil.js/particles";
import Star from "@pencil.js/star";
import { random } from "@pencil.js/math";

const position = [100, 200];
const base = new Star();
const count = 5000;
const generator = () => {
    return {
        position: scene.getRandomPosition(),
        rotation: random(),
        // And whatever value you want to define for each individual particle
    };
};
const updater = (data) => {
    data.position.add(data.speed);
};

const particles = new Particles(position, base, count, generator, updater);
```


## ParticlesOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

Particles have no specific options.
npm package: @pencil.js/path
Description: Hand-free drawing tool for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Line

Hand-free drawing tool.

![Path example](../../media/examples/path.png)


## Installation

    npm install @pencil.js/path


## Examples

```js
import Path from "@pencil.js/path";

const from = startingPosition;
const path = new Path(from, [
    Path.lineTo(pos1),
    Path.moveTo(pos2),
    Path.quadTo(pos3, controlPoint),
    Path.bezierTo(pos4, controlPoint1, controlPoint2),
], isClosed, options);
```


## PathOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions) if the path is closed, or from [LineOptions](../line/readme.md#lineoptions) otherwise.

Path have no specific options.
npm package: @pencil.js/physics
Description: Strip-down physics engine plugin for Pencil.js
Author: GMartigny
Latest version: 0.1.0

# @pencil.js/physics

Strip-down physics engine plugin for [Pencil.js](https://github.com/pencil-js/pencil.js).


## Install

    npm install @pencil.js/physics


## Usage

```js
import physics from "@pencil.js/physics";
import Pencil from "pencil.js";

Pencil.use(physics);

const element = new Pencil.Circle();
element.setHitBox(<[field]>);
element.physics(() => element.hit(<otherElement>), <[airFriction]>);
```


## Example

Let's see a complete example using `@pencil.js/physics`:

```js
import physics from "@pencil.js/physics";
import { use, Position, Scene, Circle } from "pencil.js";

// Declare plugin
use(physics);

// Useful constants
const gravity = new Position(0, 0.2);
const friction = 0.005;

// Basic Pencil.js scene
const scene = new Scene();
const balls = [];
for (let i = 0; i < 30; ++i) {
    const ball = new Circle(scene.getRandomPosition(), 100);
    // Attach a radial hit-box to each ball
    ball.setHitBox();
    balls.push(ball);
}

// Function that return all forces applied on component
function getForces () {
    const forces = new Position();

    // Add constant gravity
    forces.add(gravity);

    // Add each ball push back on each other
    balls.forEach((other) => {
        if (other !== this) {
            const pushBack = this.hit(other);
            forces.add(pushBack);
        }
    });

    return forces;
}

// Setup
scene
    .add(...balls)
    .startLoop()
    .on("draw", () => {
        balls.forEach((ball) => {
            ball.physics(getForces, friction);
        });
    }, true);
```


## License

[MIT](license)
npm package: @pencil.js/polygon
Description: Multi points shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Polygon

Shape from a bunch of points.

![Polygon example](../../media/examples/polygon.png)


## Installation

    npm install @pencil.js/polygon


## Examples

```js
import Polygon from "@pencil.js/polygon";

const points = [pointA, pointB, pointC];
const options = {
    fill: "red",
    stroke: "#000"
};
const polygon = new Polygon(position, points, options);
```


## PolygonOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

Rectangle have no specific options.
npm package: @pencil.js/position
Description: 2D space position for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Position

2D space (x, y) pair for Pencil.js.


## Installation

    npm install @pencil.js/position


## Examples

```js
import Position from "@pencil.js/position";

const position = new Position(100, 200);
position.multiply(2); // position is mutated
const other = position.clone().add(10); // Return a new instance
```
npm package: @pencil.js/progress-bar
Description: Progress-bar for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Progress-bar

Progress-bar component.

![Progress-bar example](../../media/examples/progress-bar.png)


## Installation

    npm install @pencil.js/progress-bar


## Examples

```js
import ProgressBar from "@pencil.js/progress-bar";

const position = [100, 200];
const options = {
    width: 200, // width in pixel
    value: 0, // initial value (from 0 to 1)
    speed: 0.3, // transition speed (0 means no changes, 1 mean instant change)
};
const progressBar = new ProgressBar(position, options);
progressBar.value = 0.5; // set to 50%
```


## ProgressBarOptions
Inherit from [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|value |`Number` |`0` |Initial value |
|width |`Number` |`200` |Size of the slider |
|speed |`Number` |`0.3` |Transition speed between two value (0 mean no change, 1 mean instant change) |
npm package: @pencil.js/progress-pie
Description: Progress-pie for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Progress-pie

Progress-pie component.

![Progress-pie example](../../media/examples/progress-pie.png)


## Installation

    npm install @pencil.js/progress-pie


## Examples

```js
import ProgressPie from "@pencil.js/progress-pie";

const position = [100, 200];
const options = {
    radius: 200, // radius in pixel
    value: 0, // initial value (from 0 to 1)
    speed: 0.3, // transition speed (0 means no changes, 1 mean instant change)
};
const progressPie = new ProgressPie(position, options);
progressPie.value = 0.5; // set to 50%
```

## ProgressPieOptions
Inherit from [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|value |`Number` |`0` |Initial value |
|radius |`Number` |`100` |Size of the progress-pie |
|speed |`Number` |`0.3` |Transition speed between two value (0 mean no change, 1 mean instant change) |
npm package: @pencil.js/radial-gradient
Description: Radial gradient background for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Radial-gradient

Circular gradient transition of color(s) between a center and the radius of a circle.

![Radial-gradient example](../../media/examples/radial-gradient.png)


## Installation

    npm install @pencil.js/radial-gradient


## Examples

```js
import RadialGradient from "@pencil.js/radial-gradient";
import Square from "@pencil.js/square";

const position = [100, 200];
const size = 200;
const centerPosition = [size / 2, size / 2];
const radius = size / 2;
const square = new Square(position, size, {
    fill: new RadialGradient(centerPosition, radius, {
        0: "red",
        0.5: "yellow",
        1: "green",
    }),
});
```
npm package: @pencil.js/rectangle
Description: Rectangle shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Rectangle

Rectangle shape.

![Rectangle example](../../media/examples/rectangle.png)


## Installation

    npm install @pencil.js/rectangle


## Examples

```js
import Rectangle from "@pencil.js/rectangle";

const position = [100, 200];
const width = 200;
const height = 100;
const options = {
    fill: "red",
    stroke: "#000"
};
const rectangle = new Rectangle(position, width, height, options);
```


## RectangleOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

Rectangle have no specific options.
npm package: @pencil.js/regular-polygon
Description: Equiangular and equilateral convex polygon for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# RegularPolygon

Equiangular and equilateral convex polygon.

![Regular-polygon example](../../media/examples/regular-polygon.png)


## Installation

    npm install @pencil.js/regular-polygon


## Examples

```js
import RegularPolygon from "@pencil.js/regular-polygon";

const nbSides = 7;
const radius = 100;
const options = {
    fill: "gold",
    stroke: "#000"
};
const heptagon = new RegularPolygon(center, nbSides, radius, options);
```


## RegularPolygonOptions
Inherit from [PolygonOptions](../polygon/readme.md#polygonoptions).

Polygon have no specific options.
npm package: @pencil.js/resizable
Description: Allow rectangle to be resized in Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# .resizable

Allow rectangles to be resized.


## Installation

    npm install @pencil.js/resizable


## Examples

```js
import "@pencil.js/resizable";

const options = {
    x: false
};
myComponent.resizable(options);
```
npm package: @pencil.js/scene
Description: Scene renderer for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Scene

Whole container of your drawing.


## Installation

    npm install @pencil.js/scene


## Examples

```js
import Scene from "@pencil.js/scene";

const options = {
    fill: "#DDD"
};
const scene = new Scene(document.body, options);
scene.startLoop();
```


## RectangleOptions
Inherit from [OffscreenCanvasOptions](../offscreen-canvas/readme.md#offscreencanvasoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|cursor |`String` |`Component.cursors.default` |Cursor on hover |
npm package: @pencil.js/select
Description: Select user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Select

Select user input.

![Select example](../../media/examples/select.png)


## Installation

    npm install @pencil.js/select


## Examples

```js
import Select from "@pencil.js/select";

const position = [100, 200];
const items = [
    null, // Selectable empty item
    "Unicorn",
    "Pony",
    "Doggy",
];
const options = {
    value: 1, // index of the default value
};
const select = new Select(position, items, options);
```


## SelectOptions
Inherit from [TextOptions](../text/readme.md#textoptions) and [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|value |`Number` |`0` |Selected index of the select |
npm package: @pencil.js/slider
Description: Slider user input for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Slider

Slider user input.

![Slider example](../../media/examples/slider.png)


## Installation

    npm install @pencil.js/slider


## Examples

```js
import Slider from "@pencil.js/slider";

const position = [100, 200];
const options = {
    min: 0,
    max: 100,
    value: 42
};
const slider = new Slider(position, options);
```


## SliderOptions
Inherit from [InputOptions](../input/readme.md#inputoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|min |`Number` |`0` |Minimum value when the slider is at lowest |
|max |`Number` |`10` |Maximum value when the slider is at highest |
|value |`Number` |`0` |Initial value |
|width |`Number` |`200` |Size of the slider |
npm package: @pencil.js/spline
Description: Curve with multiple point for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Spline

Continuous curve passing through points.
The `tension` parameter define the strength of each points over the curve.
`0` mean it act like a line, `0.2` is the default value and render a smooth curve, value can be be as high as you want or even negative.

![Spline example](../../media/examples/spline.png)


## Installation

    npm install @pencil.js/spline


## Examples

```js
import Spline from "@pencil.js/spline";

const tension = 0.5;
const options = {
    stroke: "red",
};
const spline = new Spline(from, [firstPoint, secondPoint, lastPoint], tension, options);
```


## SplineOptions
Inherit from [LineOptions](../line/readme.md#lineoptions).

Spline have no specific options.
npm package: @pencil.js/sprite
Description: Sprite class for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Sprite

Sprite component.

![Sprite example](../../media/examples/sprite.gif)


## Installation

    npm install @pencil.js/sprite


## Examples

The easiest way to use sprites is using a spritesheet (a.k.a. Texture Atlas). A Spritesheet is a combination of a large image composed of smaller images
and a json file.
We even create our [own tool to build a spritesheet](https://github.com/pencil-js/spritesheet) from separate images.

Pencil.js offer an easy way to load and use a spritesheet.
```js
import Sprite from "@pencil.js/sprite";

Sprite.sheet("spritesheet.json")
    .then((sheet) => {
        const position = scene.center;
        const selector = "image_*.png";
        const options = {
            speed: 1, // Change frame every draw call (~60 fps)
            loop: true, // Repeat the animation indefinitely
        };

        const sprite = sheet.extract(position, selector, options);
        // Equivalent to
        const sprite = new Sprite(position, sheet.file, sheet.get(selector), options);

        scene.add(sprite).startLoop();
    });
```

You can also use the `Sprite` class directly if you prefer, but you'll need to fill the frames list yourself.
```js
import Sprite from "@pencil.js/sprite";

const position = scene.center;
const url = "sprite-sheet.png";
const frames = [
   // list of frames data
];
const options = {
    speed: 1,
    loop: true,
};
const sprite = new Sprite(position, url, frames, options);
scene.add(sprite).startLoop();
```

## SpriteOptions
Inherit from [ImageOptions](../image/readme.md#imageoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|speed |`Number` |`1` |Frame rate of the animation (1 means about 60 frame per seconds, 0 means stopped) |
|loop |`Boolean` |`true` |Should the animation start over indefinitely |
npm package: @pencil.js/spritesheet
Description: Pack some images into a spritesheet.
Author: GMartigny
Latest version: 1.5.1

# ![Spritesheet Logo](media/spritesheet-logo.png)

[![Package size](https://flat.badgen.net/bundlephobia/minzip/@pencil.js/spritesheet)](https://bundlephobia.com/result?p=@pencil.js/spritesheet)

Pack a set of images into a single spritesheet along its json description file. ([CLI version](https://github.com/pencil-js/spritesheet-cli))

## Install

    npm install @pencil.js/spritesheet

## Usage

```js
import spritesheet from "@pencil.js/spritesheet";
import { writeFileSync } from "fs";

// List of files to pack
const files = ["image1.png", "image2.jpg", "image3.gif"];
const options = {
    outputFormat: "png",
};
// Call the async function and extract the json and image values
(async () => {
    const { json, image } = await spritesheet(files, options);
    // Write the files (for example)
    writeFileSync("spritesheet.png", image);
    writeFileSync("spritesheet.json", JSON.stringify(json));
})();
```

## Documentation

### `spritesheet(files, [options])`
The methods accept two arguments.

| Name | Type | Default | Comment |
| --- | --- | --- | --- |
|files |`Array<String>` |required |List of paths to the images |
|options |`Object` |(see below) |Some options |

##### `options`
You can specify some options on the second argument.

| Name | Type | Default | Comment |
| --- | --- | --- | --- |
|outputFormat |`String` |`"png"` |Format of the output image (`"png"` or `"jpeg"`) |
|outputName |`String` |`"spritesheet.png"` |Name of the image file (for reference in the JSON file) |
|margin |`Number` |`1` |Added pixels between sprites (can prevent pixels leaking to adjacent sprite) |
|crop |`Boolean` |`true` |Cut transparent pixels around sprites |

#### returns
`spritesheet` returns a `Promise` for an `Object` containing a `json` and `image` field.

| Name | Type | Comment |
| --- | --- | --- |
|json |`Object` |All data related to the spritesheet ([example](test/snapshots/index.js.md#main)) |
|image |`Buffer` |The result image as a buffer |

##### JSON
The returned JSON file is composed of two parts:
 - `meta` - Global data about the generated file
 - `frames` - Set of all frames/spites with path as key

Each frames gives data about itself:
 - `frame` - The `x`, `y` position on the whole image and `w`, `h` for the size
 - `rotated` - Tell is the sprite have been rotated (not yet supported)
 - `trimmed` - Tell is the sprite have been cropped
 - `spriteSourceSize` - The relative `x`, `y` position and `w`, `h` size
 - `sourceSize` - The original `w`, `h` size

## Related

Want to display your generated spritesheet easily on a browser canvas ?
Checkout [Pencil.js](https://github.com/pencil-js/pencil.js/tree/master/modules/sprite) the nice 2D drawing library.

## License

[MIT](license)
npm package: @pencil.js/spritesheet-cli
Description: CLI for @pencil.js/spritesheet
Author: GMartigny
Latest version: 1.5.0

# @pencil.js/spritesheet-cli

[![Package version](https://flat.badgen.net/npm/v/@pencil.js/spritesheet-cli)](https://www.npmjs.com/package/@pencil.js/spritesheet-cli)

CLI for [@pencil.js/spritesheet](https://github.com/pencil-js/spritesheet).

## Installation

    npm install @pencil.js/spritesheet-cli

## CLI

    spritesheet <globPattern> [<options>]

### Options

    --output, -o        Path where to output files      (default: ./)
    --name, -n          Name for the files              (default: spritesheet)
    --outputFormat, -f  Result image format             (default: png)
    --margin, -m,       Margin around images            (default: 1)
    --no-crop           Don't crop images
    --cwd, -c           Base directory for all images   (default: ./)
    --silent, -s        Don't log success               (default: false)

### Example

    $ spritesheet *.png -cwd ./src/images/ --output ./dist/assets --name icons

## License

[MIT](license)
npm package: @pencil.js/square
Description: Square shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Square

Square shape.

![Square example](../../media/examples/square.png)


## Installation

    npm install @pencil.js/square


## Examples

```js
import Square from "@pencil.js/square";

const position = [100, 200];
const size = 200;
const options = {
    fill: "red",
    stroke: "#000"
};
const square = new Square(position, size, options);
```


## SquareOptions
Inherit from [RectangleOptions](../rectangle/readme.md#rectangleoptions).

Square have no specific options.
npm package: @pencil.js/star
Description: Star shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Star

Star shape.

![Star example](../../media/examples/star.png)


## Installation

    npm install @pencil.js/star


## Examples

```js
import Star from "@pencil.js/star";

const position = [100, 200];
const radius = 50;
const branches = 6;
const bevel = 0.7;
const options = {
    fill: "gold",
    stroke: "goldendrod"
};
const star = new Star(position, radius, branches, bevel, options);
```


## StarOptions
Inherit from [RegularPolygonOptions](../regular-polygon/readme.md#regularpolygonoptions).

Star have no specific options.
npm package: @pencil.js/test-environment
Description: Test environment for Pencil.js
Author: GMartigny
Latest version: 1.2.1

# Test environment for Pencil.js

This package setup a proper browser environment to test Pencil.js in node.

It's compatible with all existing test-runners (AVA, Jest, Mocha ...)

## Installation

    npm install --save-dev @pencil.js/test-environment

## Usage

Just import the package, **it will edit the global scope with required variables**.

```js
import "@pencil.js/test-environment";
```

Or if your test-runner allows it, set it as require dependency in the configuration.

## Example

```js
import "@pencil.js/test-environment";
import Pencil from "pencil.js";
import test from "ava";

test("My test", (t) => {
    const scene = new Pencil.Scene();
    t.true(scene.isScene);
});
```
npm package: @pencil.js/text
Description: Text writing for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Text

Text writing.

![Text example](../../media/examples/text.png)


## Installation

    npm install @pencil.js/text


## Examples

```js
import Text from "@pencil.js/text";

const position = [100, 200];
const options = {
    font: "comic-sans",
    fontSize: 42
};
const message = new Text(position, "Hellow 😺", options);

// Change the text
message.text = "Henlo 🐶";

// Can be use to preload a bunch of fonts
Text.load([url1, url2, url3]).then(() => {
    console.log("Fonts ready");
});
```

Be aware this example overrides Javascript's `Text` global. Prefer another name for the import if you have collision.

```js
import PText from "@pencil.js/text";
```

## TextOptions
Inherit from [ComponentOptions](../component/readme.md#componentoptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|font |`String` |`"sans-serif"` |Font to use (can be a URL) |
|fontSize |`Number` |`20` |Size of the text in pixels |
|align |`String` |`Text.alignments.start` |Text horizontal alignment (use the `origin` option to move the text) |
|bold |`Boolean` |`false` |Use bold font-weight |
|italic |`Boolean` |`false` |Use italic font-style |
|underscore |`Boolean` |`false` |Draw a line under the text |
|lineHeight |`Number` |`1` |Ratio of line height (1 is normal, 2 is twice the space) |
npm package: @pencil.js/triangle
Description: Triangle shape for Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# Triangle

Regular triangle shape, if you want to draw a random shape with 3 points, use [Polygon](../polygon) instead.

![Triangle example](../../media/examples/triangle.png)


## Installation

    npm install @pencil.js/triangle


## Examples

```js
import Triangle from "@pencil.js/triangle";

const position = [100, 200];
const radius = 99;
const options = {
    fill: "blue"
};
const triangle = new Triangle(position, radius, options);
```


## RectangleOptions
Inherit from [RegularPolygonOptions](../regular-polygon/readme.md#regularpolygonoptions).

Triangle have no specific options.
npm package: @pencil.js/vector
Description: Vector in 2D space Pencil.js package.
Author: Guillaume Martigny
Latest version: 1.18.0

# BaseEvent

Vector between two point in 2D space.


## Installation

    npm install @pencil.js/vector


## Examples

```js
import Vector from "@pencil.js/vector";

const vector = new Vector([10, 20], [30, 40]);
console.log(vector.length);
```
npm package: @penciljs/core
Description: Static documentation website generator based on markdown
Author: Akash Hamirwasia
Latest version: 0.8.0

<p align="center">
  <img src="https://penciljs.netlify.com/img/logo.svg" alt="Pencil">
</p>

<p align="center">
  Pencil is a powerful <b>static documentation website generator</b> that works on <b>Markdown</b>.
</p>

<p align="center">
   <a href="https://www.npmjs.com/package/docbook">
    <img src="https://img.shields.io/npm/v/docbook.svg" alt="Version">
  </a>
  <a href="https://www.npmjs.com/package/docbook">
    <img src="https://img.shields.io/npm/l/docbook.svg" alt="License">
  </a>
</p>

## What can it do?
Pencil allows you to write content in [Markdown](https://en.wikipedia.org/wiki/Markdown), which has a very **powerful** and **easy** to learn markup syntax. You can quickly start creating your website without much code.

Pencil will automatically create the required files for your website, which are **ready to be deployed** to services like Netlify, GitHub Pages.


## Features
**Static site generation**
- Minified files
- SEO friendly
- Integrate external files

**Built-in markdown plugins**
- Table of contents
- Anchored Headings
- Code highlighting
- Callouts
- YouTube player embed
- Emoji

**Customization**
- Control theme color
- Dark theme :dark_sunglasses:
- Custom plugins support

## Quick start
Pencil site can be created quickly using the CLI tool. Make sure you have recent LTS version of [Node.js](https://nodejs.org/) installed. Follow the commands below:
```bash
npm install -g @pencil/core
pencil init
# follow steps shown in CLI
```
> Installing dependencies via `npm install` is not necessary if CLI is globally installed.


## Development
Following commands must be followed to setup Pencil development environment.

```bash
git clone https://github.com/blenderskool/pencil
cd pencil
npm install
npm run dev
```
By default, the dev server opens at port `3000` with the playground.
Playground is where you can test the code and make live changes to it.

### Directory structure
Pencil follows the following directory structure,
- `src` - Contains the source code.
  - `core` - Core modules that are used.
    - `functions` - Contains the code for the builder.
    - `templates` - Template files that define the structure, design and basic functionality of documentation website.
    - `utils` - Helper functions used extensively in functions.
- `playground` - A sample documentation website setup to test Pencil features during development.
- `bin` - Contains the scripts for the CLI.

## Contributing
Make sure you create a fork of this repository before you start contributing.
```bash
git clone <your-forked-repo>
cd <your-forked-repo>
npm install
npm run dev

git checkout -b some-fix
# make changes to the code

git commit -m "Your commit message"
git push origin some-fix
```

> Use the playground to test your code.
> **Do not commit changes made in the `playground`.**

Once you are done with the changes, you can open a pull request to `dev` branch.

## License
Pencil is [MIT Licensed](https://github.com/blenderskool/pencil/blob/master/LICENSE)
npm package: @pencilpix/peaks
Description: nodejs server that accept posting a url of audio file and respond with it's peaks.
Author: Mohamed Hassan
Latest version: 0.2.1

# Audio Files Peaks Generator.

it depends on `ffmpeg` and `canvas`. please be sure you have it on the machine before use this server.

### installation

clone or download this repo

### usage

1. be sure you have `ffmpeg` is installed at your machine.
2. install requirments of node [canvas](https://github.com/Automattic/node-canvas#compiling)
3. `cd /path/to/repo/clone`
4. `npm install` or `yarn`
5. `yarn run start`
6. now you can make get request as follow

```js
const url = 'http://localhost:2500/peaks'
const waveformOptions = {
  barGap: 2,
  barWidth: 2,
  height: 128,
  width: 1200,
  waveColor: '#757575',
  maxWidth: 4000,
  pxRatio: 2,
  numOfSample: 1800,
  waveformType: 1,
}


axios.get(url, {
  track: 'http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3', // could be ['url']
  ...waveformOptions
})

// -> response { track: 'http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3', image: 'data:image/png;base64...', peaks: [0.324, 0.3243, ....]}
```