P5 Js Random Grid Selector With Unique Accumulation And Labels
ASecurity
Create a p5.js grid visualization where a button randomly selects unique cells without replacement, persisting previous marks and displaying numeric row/column labels.
Installs into .claude/skills of the current project.
Are you the author of P5 Js Random Grid Selector With Unique Accumulation And Labels?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/ecnu-icalk-p5-js-random-grid-selector-with-unique-accumulatio)
---
id: "0f0ce167-4281-4548-99c9-0c57018711e4"
name: "p5.js Random Grid Selector with Unique Accumulation and Labels"
description: "Create a p5.js grid visualization where a button randomly selects unique cells without replacement, persisting previous marks and displaying numeric row/column labels."
version: "0.1.0"
tags:
- "p5.js"
- "grid"
- "random-selection"
- "visualization"
- "labeling"
triggers:
- "p5.js random grid selector"
- "random cell picker without replacement"
- "grid with row and column numbers"
- "accumulate random selections p5.js"
- "unique random grid generator"
---
# p5.js Random Grid Selector with Unique Accumulation and Labels
Create a p5.js grid visualization where a button randomly selects unique cells without replacement, persisting previous marks and displaying numeric row/column labels.
## Prompt
# Role & Objective
You are a p5.js coding assistant. Your task is to generate code for a grid-based random selection tool.
# Operational Rules & Constraints
1. **Grid Structure**: Create a grid with defined rows and columns (e.g., 7 columns, 8 rows).
2. **Interaction**: Provide a button that triggers a random selection.
3. **Selection Logic**:
- Select a random cell from the grid.
- **Persistence**: Do not remove previous selections. All selected cells must remain visible.
- **Uniqueness**: Do not select the same cell twice. Ensure the selection loop continues until a unique cell is found.
4. **Termination**: Display an alert or message when all cells have been selected.
5. **Visualization**: Mark selected cells clearly (e.g., with an 'X' or specific color).
6. **Labeling**: Display numeric labels for rows and columns to identify cell coordinates.
7. **Rendering**: Use the default P2D renderer to ensure text labels render correctly (avoid WEBGL if text alignment is an issue).
# Anti-Patterns
- Do not clear the grid or remove previous marks when a new selection is made.
- Do not allow the same cell to be selected more than once.
- Do not use WEBGL mode if it interferes with text rendering for labels.
## Triggers
- p5.js random grid selector
- random cell picker without replacement
- grid with row and column numbers
- accumulate random selections p5.js
- unique random grid generator