Estudio de Paper.js

• Gráficos vectoriales
• Interfaz orientada a escenas
• Análisis de caminos y formas

• Gráficos vectoriales en la web
• Animaciones interactivas
• Herramientas de diseño y dibujo

Instalación: npm i paper

import paper from 'paper';
paper.setup('canvas');
new paper.Path.Circle({ center: [100, 100], radius: 50, fillColor: 'orange' });

1. Círculo interactivo

Dibuja un círculo que sigue el ratón.

import paper from 'paper';
paper.setup('canvas');

const c = new paper.Path.Circle({ radius: 30, fillColor: 'orange' });
paper.view.onMouseMove = (e) => { c.position = e.point; };

2. Animación de camino

Mueve una forma por un trazado.

import paper from 'paper';
paper.setup('canvas');

const linea = new paper.Path([new paper.Point(20, 20), new paper.Point(380, 280)]);
linea.strokeColor = '#888';
const punto = new paper.Path.Circle({ radius: 8, fillColor: '#f6ad55' });

paper.view.onFrame = (e) => {
  const t = (e.time * 0.5) % 1;
  punto.position = linea.getPointAt(linea.length * t);
};