p5js-collision

Detect circle, rectangle, and point collisions in p5.js sketches.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/neighbor-game-ai/DreamCore-V2-sandbox --skill p5js-collision
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js-collision
Source: https://github.com/neighbor-game-ai/DreamCore-V2-sandbox/tree/main/.claude/skills/p5js-collision
Command: npx skills add https://github.com/neighbor-game-ai/DreamCore-V2-sandbox --skill p5js-collision

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

P5.js collision detection helpers for common shape interactions, enabling games and interactive sketches to determine overlaps reliably without writing boilerplate math.

Core Features & Use Cases

  • Circle-circle collision detection: circlesCollide(x1, y1, r1, x2, y2, r2)
  • Axis-aligned rectangle-rectangle collision: rectsCollide(x1, y1, w1, h1, x2, y2, w2, h2)
  • Point-in-rectangle test: pointInRect(px, py, rx, ry, rw, rh)
  • Circle-rectangle collision: circleRectCollide(cx, cy, r, rx, ry, rw, rh)
  • Use case: quickly determine hit outcomes in simple p5.js games or demos.

Quick Start

Load the functions into your p5.js sketch and call them to detect collisions between shapes.

Frequently Asked Questions about p5js-collision

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I detect circle and rectangle collisions in p5.js?

Circle and rectangle collision detection in p5.js is handled by deterministic functions using distance checks and bounding-box logic. Utilities like circlesCollide and circleRectCollide compute overlaps reliably without writing boilerplate math.

What is the best way to check if a point is inside a rectangle in p5.js?

Point-in-rectangle collision in p5.js is checked using the pointInRect function, applying bounding-box logic to determine if a coordinate falls within specified boundaries. It returns a deterministic result for interactive sketches.

Can I use axis-aligned bounding box collision detection for p5.js games?

Axis-aligned bounding box collision detection is supported for p5.js games through the rectsCollide function. It determines rectangle-rectangle overlaps by comparing coordinates and dimensions, providing reliable hit outcomes for demos.

Does this collision detection utility support circle-rectangle overlap tests?

Circle-rectangle collision detection is supported via the circleRectCollide function. It calculates overlaps between circular and rectangular p5.js shapes using distance checks against bounding-box edges for interactive sketches.

Why write custom collision math when using p5.js for game development?

Writing custom collision math for p5.js game development is unnecessary because these utilities provide reliable, deterministic functions for common shape interactions. They eliminate boilerplate math for circle-circle and rectangle-rectangle overlaps.

What are the limitations of axis-aligned rectangle collision in p5.js?

Axis-aligned rectangle collision in p5.js is limited to non-rotated shapes, utilizing AABB logic for deterministic overlap checks. It does not handle oriented bounding boxes or complex polygon intersections for game development.