# utn-p5-test

> Este módulo proporciona tres funciones para generar canvases interactivos utilizando la biblioteca p5.js. Estas funciones permiten crear efectos visuales interesantes y pueden ser fácilmente integradas en cualquier proyecto.

Latest version **2.0.0** (published 2023-11-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install utn-p5-test
pnpm add utn-p5-test
yarn add utn-p5-test
bun add utn-p5-test
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-11-18 |
| First published | 2023-11-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | gabrielalberini |
| Maintainers | gabrielalberini |
| Keywords | npm, p5 |

## Links

- npm: https://www.npmjs.com/package/utn-p5-test
- Repository: https://github.com/GabrielAlberini/prueba-npm-test
- Homepage: https://github.com/GabrielAlberini/prueba-npm-test#readme
- Issues: https://github.com/GabrielAlberini/prueba-npm-test/issues
- npm.io page: https://npm.io/package/utn-p5-test

## Dependencies (1)

- [p5](https://npm.io/package/p5.md) ^1.8.0

## Recent versions

- 2.0.0 (latest) — 2023-11-18
- 1.0.9 — 2023-11-18
- 1.0.8 — 2023-11-18
- 1.0.7 — 2023-11-18
- 1.0.6 — 2023-11-18
- 1.0.5 — 2023-11-18
- 1.0.4 — 2023-11-18
- 1.0.3 — 2023-11-18
- 1.0.2 — 2023-11-18
- 1.0.1 — 2023-11-18
- 1.0.0 — 2023-11-18

## README

# Canvas Generator

Este módulo proporciona tres funciones para generar canvases interactivos utilizando la biblioteca p5.js. Estas funciones permiten crear efectos visuales interesantes y pueden ser fácilmente integradas en cualquier proyecto.

## Instalación

1. Asegúrese de tener [p5.js](https://p5js.org/) instalado en su proyecto. Si no lo tiene, puede incluirlo en su HTML con el siguiente código:

   ```html
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
   ```

2. Descargue el archivo canvas-generator.js y asegúrese de que esté en la misma carpeta que sus archivos HTML o JavaScript.

3. Importe las funciones necesarias en su código:

   ```js
   import {
     generateParticleCanvas,
     generateCenterAttractionCanvas,
     generateRandomLineCanvas,
   } from "./canvas-generator.js";
   ```

## Uso

### Generar Canvas de Partículas

```js
generateParticleCanvas(containerId, text);
```

Genera un canvas con partículas que interactúan entre sí y responden al movimiento del ratón.

### Generar Canvas de Atracción al Centro

```js
generateCenterAttractionCanvas(containerId, text);
```

Crea un canvas con partículas que son atraídas hacia el centro de la pantalla.

### Generar Canvas de Líneas Aleatorias

```js
generateRandomLineCanvas(containerId, text);
```

Genera un canvas con líneas aleatorias que cambian de color al hacer clic en la pantalla.

## Parámetros

- **containerId**: El ID del contenedor HTML donde se insertará el canvas.
- **text**: El texto que se mostrará en el centro del canvas.

## Ejemplo de Uso

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script type="module">
      import {
        generateParticleCanvas,
        generateCenterAttractionCanvas,
        generateRandomLineCanvas,
      } from "./canvas-generator.js";

      generateParticleCanvas("particle-container", "Interactive Particles");
      generateCenterAttractionCanvas(
        "center-attraction-container",
        "Center Attraction"
      );
      generateRandomLineCanvas("random-line-container", "Random Lines");
    </script>
    <title>Canvas Generator Example</title>
  </head>
  <body>
    <div id="particle-container"></div>
    <div id="center-attraction-container"></div>
    <div id="random-line-container"></div>
  </body>
</html>
```

Este ejemplo crea tres canvases diferentes en contenedores HTML separados.
¡Disfrute experimentando con estos efectos visuales interactivos!

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