Agent skill · design visual · aiskillstore
algorithmic-art
Create generative art using p5.js with seeded randomness. Use this when creating procedural art, interactive visualizations, or algorithmic designs.
Why this skill is useful
Provides specific p5.js code snippets and patterns for creating generative art that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Algorithmic Art p5.js를 사용한 제너러티브 아트 생성 가이드입니다. Two-Phase Process Phase 1: Algorithmic Philosophy Phase 2: P5.js Implementation HTML Structure Fixed Elements (변경 금지) 요소 설명 ------ ------ Anthropic 브랜딩 Poppins/Lora 폰트, 라이트 테마 사이드바 구조 레이아웃 유지 시드 컨트롤 Previous/Next/Random/Jump 액션 버튼 Regenerate/Reset/Download Variable Elements (커스터마이즈) 요소 설명 ------ ------ p5.js 알고리즘 완전히 새로 작성 파라미터 정의 철학에서 도출 UI 컨트롤 슬라이더, 체크박스 등 컬러 섹션 선택적 Core Patterns Seeded Randomness Noise Field Particle System Parameter Controls Download Functionality Philosophy Examples Organic Turbulence 유기적 난류는 자연의 혼돈 속에서 질서를 찾는다. Perlin 노이즈 필드가 입자들을 흐름에 따라 안내하며, 각 시드는 독특한 리버베드를 생성한다. Geometric Meditation 기하학적 명상은 반복되는 패턴 속 고요함을 탐구한다. 황금비와 피보나치 수열이 시각적 조화를 이끈다. Best Practices 1. 재현성: 모든 랜덤은 시드 기반 2. 성능: requestAnimationFrame 활용 3. 반응형: windowResized() 구현 4. 접근성: 키보드 네비게이션 지원 5. 내보내기: PNG/SVG 다운로드 제공
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/algorithmic-art--e8339d