Jeff Geometry

Librería JavaScript pura para Vec2, Rectangle, Circle y Segment — hitboxes y colisiones 2D sin p5.js ni motores de física.

Demo en vivo: https://jeff-aporta.github.io/jeff-geometry/

Tutorial en video

Tutorial completo del canal Jeff Aporta — construimos cada clase desde cero con live coding, animaciones y demos interactivas.

Ver en YouTube: https://www.youtube.com/watch?v=My3emy3Szqs

Usada en Flappy Bird (Jeff Aporta) para colisiones círculo–rectángulo en tiempo real.

Características

• Cuatro primitivas listas para juegos 2D: punto/vector, AABB, disco y segmento
• Colisiones O(1) — containsPoint, intersects, intersectsRect, intersectsSegment, Liang–Barsky
• Sin dependencias en runtime
• Tres formas de usarla: npm (Node/bundlers), CDN (navegador) o copia de src/
• Landing interactiva — catálogo por método, fórmulas KaTeX, demos canvas y descarga ZIP por ejemplo
• Deep links — ?s=rectangle-intersect abre un método concreto

Instalación

npm (Node, Vite, Webpack, etc.)

npm install @jeff-aporta/geometry-2d

const { Vec2, Circle, Rectangle, Segment } = require("@jeff-aporta/geometry-2d");

const bird = new Circle(100, 200, 48);
const pipe = new Rectangle(300, 0, 60, 400);

console.log(bird.intersectsRect(pipe));

Ver en npm

CDN (navegador, sin build)

<script src="https://cdn.jsdelivr.net/gh/Jeff-Aporta/[email protected]/dist/jeff-geometry.js"></script>
<script>
  const { Circle, Rectangle, Vec2, Segment } = JeffGeometry;

  const bird = new Circle(100, 200, 48);
  const pipe = new Rectangle(300, 0, 60, 400);

  console.log(bird.intersectsRect(pipe));
</script>

También disponible minificado: dist/jeff-geometry.min.js

API

| Clase | Métodos principales | |-------|---------------------| | Vec2 | from, clone, add, addXY, dist, distSq | | Rectangle | move, moveTo, resize, vertices, containsPoint, intersects, intersectsSegment, union | | Circle | move, moveTo, resize, containsPoint, toRect, intersectsRect, intersectsSegment | | Segment | fromPoints, closestPointTo, intersectsSegment, intersectionPoint, intersectsCircle, intersectsRect |

Todas las pruebas de colisión son O(1); el coste constante varía según el par de formas.

Estructura del proyecto

jeff-geometry/
├── index.html              # Landing SPA (GitHub Pages)
├── presentation/           # React + MUI — catálogo y demos
├── src/                    # Librería fuente
│   ├── Vec2.js
│   ├── Rectangle.js
│   ├── Circle.js
│   ├── Segment.js
│   └── index.js
├── dist/                   # Build (npm + CDN)
├── scripts/build.js
└── tests/run.js

Landing (GitHub Pages)

| URL | Vista | |-----|-------| | ? o ?s=home | Catálogo completo | | ?s=rectangle | Sección Rectangle | | ?s=circle-contains | Método con demo, fórmula y código |

Desarrollo local

npm run build
npm test

Enlaces

| Recurso | URL | |---------|-----| | Demo | https://jeff-aporta.github.io/jeff-geometry/ | | npm | https://www.npmjs.com/package/@jeff-aporta/geometry-2d | | Repositorio | https://github.com/Jeff-Aporta/jeff-geometry | | CDN jsDelivr | https://cdn.jsdelivr.net/gh/Jeff-Aporta/[email protected]/dist/jeff-geometry.js | | Tutorial YouTube | https://www.youtube.com/watch?v=My3emy3Szqs | | Flappy Bird | https://jeff-aporta.github.io/flappy-bird/ | | WhatsApp | https://wa.link/1tmqmt | | Telegram | https://t.me/jeffAporta |

Libre para su uso — con amor, Jeff Aporta Programación.