utn-p5-test
v2.0.0
Published
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.
Downloads
24
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
Asegúrese de tener p5.js instalado en su proyecto. Si no lo tiene, puede incluirlo en su HTML con el siguiente código:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Descargue el archivo canvas-generator.js y asegúrese de que esté en la misma carpeta que sus archivos HTML o JavaScript.
Importe las funciones necesarias en su código:
import { generateParticleCanvas, generateCenterAttractionCanvas, generateRandomLineCanvas, } from "./canvas-generator.js";
Uso
Generar Canvas de Partículas
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
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
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
<!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!