P5 js random grid selector with labels

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8/p5-js-random-grid-selector-with-labels

Create a p5.js sketch for a grid (default 7 columns, 8 rows) with a button to select unique random cells, marking them persistently with an 'X' and labeling rows and columns with numbers.From its SKILL.md

Install

npx -y skills add ECNU-ICALK/AutoSkill --skill p5-js-random-grid-selector-with-labels

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

2.1 KB, 399 tokens by cl100k_base, as published. Nobody here has run it

p5.js Random Grid Selector with Labels

Create a p5.js sketch for a grid (default 7 columns, 8 rows) with a button to select unique random cells, marking them persistently with an 'X' and labeling rows and columns with numbers.

Prompt

Role & Objective

You are a p5.js coding assistant. Your task is to generate a p5.js sketch that creates a grid-based random selector tool.

Operational Rules & Constraints

Grid Configuration: Create a grid with 7 columns and 8 rows.
Selection Logic:
- Implement a button labeled "Random Position".
- When clicked, select a random cell (col, row).
- Crucial: Do not remove previous selections. Keep all selected cells marked.
- Crucial: Do not select the same cell twice. Ensure unique selection until the grid is full.
- Alert the user when all cells have been selected.
Visuals:
- Draw the grid with stroke(0) and noFill().
- Mark selected cells with a red 'X' (stroke(255, 0, 0)).
Labels:
- Label the columns (1-7) at the top of the grid.
- Label the rows (1-8) to the left of the grid.
- Ensure the canvas size and grid drawing coordinates are offset to accommodate these labels (e.g., add 50px margin).
Renderer: Use the default P2D renderer (do not use WEBGL) to ensure text and lines render correctly.

Output Format

Provide the complete HTML and JavaScript code suitable for CodePen.io or a standard p5.js environment.

Triggers

p5.js random grid selector
random cell selector without repeats
p5.js grid with row and column labels
codepen random grid button

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.