skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic_art

Create generative art, flow fields, and interactive visuals with p5.js.

Updated Jan 14, 2026
Search Tags:#p5.js#creative coding#generative art#canvas#particle system#perlin noise#flow field
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill algorithmic-art-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic_art
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/algorithmic_art
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill algorithmic-art-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating generative art requires knowing how to combine canvas drawing, randomness, noise functions, and animation loops, which can be difficult to structure from scratch. This Skill provides ready-to-use p5.js patterns and a phased workflow for producing reproducible, print-ready generative artwork. ## Core Features & Use Cases - Generative Primitives: Code patterns for basic shapes, colors, flow fields built from Perlin noise, and particle systems with velocity and acceleration. - Reproducible Randomness: Seeded random and noise functions so every artwork can be regenerated exactly from a known seed. - Interactivity & Export: Mouse and keyboard event handlers plus high-resolution PNG export via pixelDensity for print-ready output. - Use Case: An artist wants a flow-field poster. Use this Skill to set up a seeded p5.js sketch, tune scale and density parameters, test multiple seeds, and export a 4x-resolution PNG for printing. ## Quick Start Create a p5.js generative art sketch with a flow field, seeded randomness, and a keypress handler that saves a high-resolution PNG.

Frequently Asked Questions about algorithmic_art

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

FAQPage Schema
How do I create generative art with p5.js?▼

Set up a canvas in setup() and animate in draw(), then layer in randomness with random() or natural variation with noise(). This Skill provides patterns for flow fields, particle systems, and a four-phase workflow from concept to curation.

How to make p5.js randomness reproducible?▼

Call randomSeed(42) and noiseSeed(42) before generating values so every run produces identical output. This lets you curate specific outputs by testing different seed values and re-running the exact artwork later.

How do I export high-resolution images from p5.js?▼

Set pixelDensity(4) before calling saveCanvas() to render at 4x resolution for print, then reset pixelDensity(1) afterward for performance. Bind this to a keyPressed handler so pressing 's' saves the PNG.

Why is my p5.js sketch slow with many particles?▼

Per-pixel manipulation with the pixels[] array is slow at scale. For pixel-level effects, use GLSL shaders in WEBGL mode instead, which can provide roughly 100x speedup over CPU-side pixel loops.

What is a flow field in generative art?▼

A flow field is a grid of angle vectors, typically derived from Perlin noise, that steers moving particles across the canvas. Particles following these vectors produce smooth, organic, natural-looking trails.

Related Skills

Explore More Design & Creative Skills→
TekLabsVNTekLabsVN
1

ui-design

Generate HTML and React previews for UI components using Tailwind, MagicUI, Shadcn, and Phosphor icons.

Official
Advanced
QianjieTechQianjieTech
47

canvas-design

Generate a philosophy-guided visual design canvas in PNG or PDF.

Official
Advanced
crossxwillcrossxwill
5

algorithmic-art

Generate reproducible algorithmic art with seeded randomness and interactive parameter controls.

Community
Advanced
HuskyDannyHuskyDanny

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced