Marketplace algorithmic-art

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

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/doyajin174/algorithmic-art" ~/.claude/skills/aiskillstore-marketplace-algorithmic-art-c77f03 && rm -rf "$T"

manifest: skills/doyajin174/algorithmic-art/SKILL.md

source content

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

<!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

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

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

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

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

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

Download Functionality

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

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

Philosophy Examples

Organic Turbulence

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

Geometric Meditation

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

Best Practices

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