Agent skill

algorithmic-art

Create generative art using p5.js with seeded randomness. Use this when creating procedural art, interactive visualizations, or algorithmic designs.

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/doyajin174/algorithmic-art

Metadata

Additional technical details for this skill

author
anthropics
version
1.0

SKILL.md

Algorithmic Art

p5.js를 사용한 제너러티브 아트 생성 가이드입니다.

Two-Phase Process

Phase 1: Algorithmic Philosophy

1. 제너러티브 무브먼트 명명 (예: "Organic Turbulence")
2. 4-6 문단의 계산적 미학 선언문 작성
3. 수학적 프로세스, 노이즈 필드, 창발적 행동 강조
4. "meticulously crafted algorithm" 강조

Phase 2: P5.js Implementation

1. viewer.html 템플릿 기반
2. 자체 포함 HTML artifact 생성
3. Seeded randomness로 재현성 확보
4. 사이드바 컨트롤 구현

HTML Structure

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
  <style>
    /* Anthropic 브랜딩 스타일 */
    body { font-family: 'Poppins', sans-serif; }
    .sidebar { /* 사이드바 스타일 */ }
    .canvas-container { /* 캔버스 컨테이너 */ }
  </style>
</head>
<body>
  <div class="sidebar">
    <!-- 시드 컨트롤 -->
    <!-- 파라미터 슬라이더 -->
    <!-- 액션 버튼 -->
  </div>
  <div class="canvas-container"></div>
  <script>
    // p5.js 스케치
  </script>
</body>
</html>

Fixed Elements (변경 금지)

요소 설명
Anthropic 브랜딩 Poppins/Lora 폰트, 라이트 테마
사이드바 구조 레이아웃 유지
시드 컨트롤 Previous/Next/Random/Jump
액션 버튼 Regenerate/Reset/Download

Variable Elements (커스터마이즈)

요소 설명
p5.js 알고리즘 완전히 새로 작성
파라미터 정의 철학에서 도출
UI 컨트롤 슬라이더, 체크박스 등
컬러 섹션 선택적

Core Patterns

Seeded Randomness

javascript
let seed = 12345;

function setup() {
  createCanvas(800, 600);
  randomSeed(seed);
  noiseSeed(seed);
}

function regenerate() {
  randomSeed(seed);
  noiseSeed(seed);
  redraw();
}

function nextSeed() {
  seed++;
  regenerate();
}

Noise Field

javascript
function draw() {
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {
      let n = noise(x * 0.01, y * 0.01);
      let angle = n * TWO_PI * 2;

      push();
      translate(x, y);
      rotate(angle);
      line(0, 0, 10, 0);
      pop();
    }
  }
}

Particle System

javascript
class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.applyForce(force);
  }
}

Parameter Controls

javascript
// 사이드바 파라미터
let params = {
  complexity: 5,
  speed: 0.5,
  colorMode: 'gradient'
};

// 슬라이더 생성
function createControls() {
  createSlider(1, 10, params.complexity)
    .input(v => { params.complexity = v; regenerate(); });
}

Download Functionality

javascript
function downloadArt() {
  saveCanvas('artwork-' + seed, 'png');
}

function downloadSVG() {
  // SVG 내보내기 로직
}

Philosophy Examples

Organic Turbulence

유기적 난류는 자연의 혼돈 속에서 질서를 찾는다. Perlin 노이즈 필드가 입자들을 흐름에 따라 안내하며, 각 시드는 독특한 리버베드를 생성한다.

Geometric Meditation

기하학적 명상은 반복되는 패턴 속 고요함을 탐구한다. 황금비와 피보나치 수열이 시각적 조화를 이끈다.

Best Practices

  1. 재현성: 모든 랜덤은 시드 기반
  2. 성능: requestAnimationFrame 활용
  3. 반응형: windowResized() 구현
  4. 접근성: 키보드 네비게이션 지원
  5. 내보내기: PNG/SVG 다운로드 제공

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results