알고리즘 아트 스킬

알고리즘 철학은 코드를 통해 표현되는 컴퓨테이셔널 미학 운동입니다. 철학(.md 파일), 인터랙티브 뷰어(.html 파일), 생성 알고리즘(.js 파일)을 출력합니다.

이 작업은 두 단계로 진행됩니다:

알고리즘 철학 생성 (.md 파일)
p5.js 생성형 아트로 표현 (.html + .js 파일)

먼저 다음 작업을 수행하세요:

알고리즘 철학 생성

시작하려면, 다음을 통해 해석될 알고리즘 철학(정적 이미지나 템플릿이 아닌)을 만드세요:

컴퓨테이셔널 프로세스, 창발적 행동, 수학적 아름다움
시드 기반 무작위성, 노이즈 필드, 유기적 시스템
파티클, 흐름, 필드, 힘
매개변수 변형과 통제된 혼돈

핵심 이해

받는 것: 사용자의 미묘한 입력이나 지침을 고려하되, 기초 자료로 활용하세요. 창작의 자유를 제약해서는 안 됩니다.
만드는 것: 알고리즘 철학/생성 미학 운동.
다음 단계: 동일한 버전이 철학을 받아 코드로 표현합니다. 90% 알고리즘 생성, 10% 필수 매개변수로 구성된 p5.js 스케치를 만듭니다.

다음 접근 방식을 고려하세요:

생성형 아트 운동에 대한 선언문을 작성하세요.
다음 단계는 그 선언문을 실현할 알고리즘을 작성하는 것입니다.

철학은 다음을 강조해야 합니다: 알고리즘 표현. 창발적 행동. 컴퓨테이셔널 아름다움. 시드 기반 변이.

알고리즘 철학 생성 방법

운동의 이름을 정하세요 (1-2단어): "유기적 난류" / "양자 하모닉스" / "창발적 정지"

철학을 서술하세요 (4-6 문단 - 간결하지만 완전하게):

알고리즘의 본질을 포착하려면, 이 철학이 다음을 통해 어떻게 표현되는지 설명하세요:

컴퓨테이셔널 프로세스와 수학적 관계?
노이즈 함수와 무작위성 패턴?
파티클 행동과 필드 역학?
시간적 진화와 시스템 상태?
매개변수 변형과 창발적 복잡성?

핵심 지침:

중복을 피하세요: 각 알고리즘 측면은 한 번만 언급되어야 합니다. 노이즈 이론, 파티클 역학 또는 수학적 원리에 대한 개념을 새로운 깊이를 추가하지 않고 반복하지 마세요.
장인 정신을 반복해서 강조하세요: 철학은 최종 알고리즘이 수많은 시간을 들여 개발된 것처럼, 세심하게 다듬어졌으며, 해당 분야 최고 수준의 전문가가 만든 것처럼 보여야 한다는 점을 여러 번 강조해야 합니다. 이 프레이밍은 필수적입니다. "정교하게 제작된 알고리즘", "깊은 컴퓨테이셔널 전문성의 산물", "고통스러울 정도의 최적화", "마스터 수준의 구현"과 같은 표현을 반복하세요.
창의적 공간을 남겨두세요: 알고리즘 방향에 대해 구체적이되, 다음 Claude가 극도로 높은 수준의 장인 정신으로 해석적 구현 선택을 할 수 있도록 충분히 간결하게 유지하세요.

철학은 다음 버전이 정적 이미지가 아닌 알고리즘적으로 아이디어를 표현하도록 안내해야 합니다. 아름다움은 최종 프레임이 아닌 프로세스에 있습니다.

철학 예시

"유기적 난류" 철학: 자연 법칙에 의해 제약된 혼돈, 무질서에서 질서가 출현. 알고리즘 표현: 다층 Perlin 노이즈로 구동되는 흐름장. 벡터 힘을 따르는 수천 개의 파티클, 그 흔적이 유기적 밀도 맵으로 축적됨. 여러 노이즈 옥타브가 난류 영역과 고요한 구역을 생성함. 색상은 속도와 밀도에서 발생합니다. 빠른 파티클은 밝게 타오르고, 느린 파티클은 그림자로 사라집니다. 알고리즘은 평형에 도달할 때까지 실행됩니다. 모든 매개변수가 컴퓨테이셔널 미학의 대가에 의해 수많은 반복을 통해 세련된, 정교하게 조정된 균형입니다.

"양자 하모닉스" 철학: 파동 간섭 패턴을 보이는 개별 개체. 알고리즘 표현: 격자에 초기화된 파티클, 각각 사인파를 통해 진화하는 위상 값을 가짐. 파티클이 가까워지면 위상이 간섭합니다. 보강 간섭은 밝은 노드를, 상쇄 간섭은 빈 공간을 만듭니다. 단순 조화 운동이 복잡한 창발적 만다라를 생성합니다. 모든 비율이 공명하는 아름다움을 생성하도록 신중하게 선택된 고통스러운 주파수 보정의 결과입니다.

"재귀적 속삭임" 철학: 규모를 넘어선 자기 유사성, 유한한 공간 속의 무한한 깊이. 알고리즘 표현: 재귀적으로 세분화되는 분기 구조. 각 가지는 약간 무작위화되지만 황금비에 의해 제약됨. L-시스템 또는 재귀적 세분화가 수학적이면서도 유기적으로 느껴지는 나무 형태를 생성함. 미묘한 노이즈 섭동이 완벽한 대칭을 깨뜨림. 선 두께는 각 재귀 수준에 따라 감소함. 각 분기 각도는 깊은 수학적 탐구의 산물입니다.

"필드 역학" 철학: 물질에 대한 효과를 통해 가시화되는 보이지 않는 힘. 알고리즘 표현: 수학 함수 또는 노이즈로 구성된 벡터 필드. 가장자리에서 생성되어 필드 선을 따라 흐르고 평형 또는 경계에 도달하면 사라지는 파티클. 여러 필드가 파티클을 끌어당기거나, 밀어내거나, 회전시킬 수 있음. 시각화는 오직 흔적만을 보여줍니다. 보이지 않는 힘의 유령 같은 증거입니다. 힘 균형을 통해 세심하게 안무된 컴퓨테이셔널 댄스.

"확률적 결정화" 철학: 질서 있는 구조로 결정화되는 무작위 과정. 알고리즘 표현: 무작위 원형 패킹 또는 보로노이 테셀레이션. 무작위 점에서 시작하여 이완 알고리즘을 통해 진화시킴. 세포가 평형에 도달할 때까지 서로 밀어냄. 셀 크기, 이웃 수 또는 중심으로부터의 거리에 따른 색상. 나타나는 유기적 타일링은 무작위적이면서도 필연적으로 느껴짐. 모든 시드는 독특한 결정체 아름다움을 생성합니다. 마스터 수준 생성 알고리즘의 표시입니다.

이것은 간결한 예시입니다. 실제 알고리즘 철학은 4-6개의 충실한 문단이어야 합니다.

필수 원칙

알고리즘 철학: 코드로 표현될 컴퓨테이셔널 세계관을 생성합니다.
과정이 결과보다 중요: 아름다움은 알고리즘의 실행에서 발생합니다. 각 실행은 고유합니다.
매개변수적 표현: 아이디어는 수학적 관계, 힘, 행동을 통해 전달됩니다. 정적 구성이 아닙니다.
예술적 자유: 다음 Claude가 철학을 알고리즘적으로 해석합니다. 창의적인 구현 여지를 제공하세요.
순수 생성형 아트: 무작위성이 있는 정적 이미지가 아닌 살아있는 알고리즘을 만드는 것입니다.
전문가 장인 정신: 최종 알고리즘이 세심하게 제작되고, 수많은 반복을 통해 개선되었으며, 컴퓨테이셔널 미학 분야 최고 수준의 전문가인 사람의 깊은 전문성의 산물임을 반복해서 강조하세요.

알고리즘 철학은 4-6 문단 길이여야 합니다. 의도된 비전을 통합하는 시적인 컴퓨테이셔널 철학으로 채우세요. 같은 요점을 반복하지 마세요. 이 알고리즘 철학을 .md 파일로 출력하세요.

개념적 시드 추론

핵심 단계: 알고리즘을 구현하기 전에, 원래 요청에서 미묘한 개념적 실마리를 식별하세요.

필수 원칙: 개념은 알고리즘 자체에 내장된 미묘하고 틈새적인 참조입니다. 항상 문자 그대로이지는 않으며, 항상 정교합니다. 주제에 익숙한 사람은 직관적으로 느껴야 하고, 다른 사람들은 단지 마스터급 생성 구성을 경험합니다. 알고리즘 철학은 컴퓨테이셔널 언어를 제공합니다. 추론된 개념은 영혼을 제공합니다. 매개변수, 행동 및 창발 패턴에 보이지 않게 짜여진 조용한 개념적 DNA입니다.

이것은 매우 중요합니다: 참조는 작업의 깊이를 향상시키되 스스로를 드러내지 않을 정도로 정제되어야 합니다. 마치 재즈 뮤지션이 알고리즘 하모니를 통해 다른 노래를 인용하는 것처럼 생각하세요. 아는 사람만 알아채겠지만, 모든 사람이 생성적 아름다움을 감상합니다.

P5.JS 구현

철학과 개념적 프레임워크가 확립되었으면, 코드로 표현하세요. 진행하기 전에 잠시 생각을 정리하세요. 위에서 생성된 알고리즘 철학과 아래 지침만 사용하세요.

⚠️ 0단계: 템플릿을 먼저 읽으세요 ⚠️

중요: HTML을 작성하기 전에:

읽기 도구를 사용하여 templates/viewer.html 파일을 읽으세요
정확한 구조, 스타일링 및 Anthropic 브랜딩을 연구하세요
해당 파일을 말 그대로의 시작점으로 사용하세요. 단순한 영감이 아닙니다.
표시된 대로 모든 고정 섹션을 정확하게 유지하세요 (헤더, 사이드바 구조, Anthropic 색상/글꼴, 시드 컨트롤, 액션 버튼)
파일의 주석에 표시된 변수 섹션만 교체하세요 (알고리즘, 매개변수, 매개변수용 UI 컨트롤)

피해야 할 사항:

❌ HTML을 처음부터 생성하지 마세요
❌ 사용자 정의 스타일링 또는 색 구성표를 발명하지 마세요
❌ 시스템 글꼴이나 어두운 테마를 사용하지 마세요
❌ 사이드바 구조를 변경하지 마세요

다음 사항을 따르세요:

✅ 템플릿의 정확한 HTML 구조를 복사하세요
✅ Anthropic 브랜딩을 유지하세요 (Poppins/Lora 글꼴, 밝은 색상, 그라데이션 배경)
✅ 사이드바 레이아웃을 유지하세요 (시드 → 매개변수 → 색상? → 액션)
✅ p5.js 알고리즘과 매개변수 컨트롤만 교체하세요

템플릿이 기초입니다. 그것을 기반으로 구축하고 재구축하지 마세요.

살아 숨쉬는 갤러리 품질의 컴퓨테이셔널 아트를 만들려면 알고리즘 철학을 기초로 사용하세요.

기술 요구 사항

시드 기반 무작위성 (Art Blocks 패턴):

// 재현성을 위해 항상 시드 사용
let seed = 12345; // 또는 사용자 입력의 해시
randomSeed(seed);
noiseSeed(seed);

매개변수 구조 - 철학을 따르세요:

알고리즘 철학에서 자연스럽게 발생하는 매개변수를 설정하려면 "이 시스템의 어떤 특성을 조정할 수 있는가?"를 고려하세요.

let params = {
  seed: 12345,  // 재현성을 위해 항상 시드 포함
  // 색상
  // 알고리즘을 제어하는 매개변수를 추가하세요:
  // - 수량 (얼마나 많은가?)
  // - 규모 (얼마나 큰가? 얼마나 빠른가?)
  // - 확률 (얼마나 가능한가?)
  // - 비율 (어떤 비율인가?)
  // - 각도 (어느 방향인가?)
  // - 임계값 (언제 행동이 변하는가?)
};

효과적인 매개변수를 설계하려면 "패턴 유형" 측면에서 생각하지 말고 시스템이 조정 가능해야 하는 속성에 초점을 맞추세요.

핵심 알고리즘 - 철학을 표현하세요:

중요: 알고리즘 철학이 무엇을 구축할지 결정해야 합니다.

철학을 코드로 표현하려면 "어떤 패턴을 사용해야 할까?"라고 생각하지 말고 "이 철학을 코드로 어떻게 표현할까?"라고 생각하세요.

철학이 유기적 출현에 관한 것이라면 다음을 고려하세요:

시간이 지남에 따라 축적되거나 성장하는 요소
자연적 규칙에 의해 제약된 무작위 과정
피드백 루프와 상호 작용

철학이 수학적 아름다움에 관한 것이라면 다음을 고려하세요:

기하학적 관계와 비율
삼각 함수와 하모닉스
예상치 못한 패턴을 생성하는 정밀한 계산

철학이 통제된 혼돈에 관한 것이라면 다음을 고려하세요:

엄격한 경계 내의 무작위 변이
분기 및 위상 전이
무질서에서 질서가 출현

알고리즘은 옵션 메뉴가 아닌 철학에서 흘러나옵니다.

구현을 안내하기 위해 개념적 본질이 창의적이고 독창적인 선택을 알리도록 하세요. 이 특정 요청에 대한 비전을 표현하는 무언가를 구축하세요.

캔버스 설정: 표준 p5.js 구조:

function setup() {
  createCanvas(1200, 1200);
  // 시스템 초기화
}

function draw() {
  // 생성 알고리즘
  // 정적(noLoop) 또는 애니메이션 가능
}

장인 정신 요구 사항

중요: 마스터리를 달성하려면 마스터 생성 아티스트가 수없이 반복해서 만든 것 같은 알고리즘을 만드세요. 모든 매개변수를 신중하게 조정하세요. 모든 패턴이 목적을 가지고 나타나는지 확인하세요. 이것은 무작위 노이즈가 아닙니다. 깊은 전문성을 통해 정제된 통제된 혼돈입니다.

균형: 시각적 노이즈 없이 복잡성, 경직성 없이 질서
색상 조화: 신중한 팔레트, 무작위 RGB 값이 아님
구성: 무작위성 속에서도 시각적 위계와 흐름 유지
성능: 부드러운 실행, 애니메이션의 경우 실시간으로 최적화
재현성: 동일한 시드는 항상 동일한 출력을 생성

출력 형식

출력:

알고리즘 철학 - 생성적 미학을 설명하는 마크다운 또는 텍스트
단일 HTML 아티팩트 - templates/viewer.html에서 구축된 자체 포함 인터랙티브 생성 아트 (0단계 및 다음 섹션 참조)

HTML 아티팩트에는 모든 것이 포함됩니다. p5.js (CDN에서), 알고리즘, 매개변수 컨트롤 및 UI가 모두 하나의 파일에 포함되어 claude.ai 아티팩트 또는 모든 브라우저에서 즉시 작동합니다. 템플릿 파일부터 시작하고 처음부터 만들지 마세요.

인터랙티브 아티팩트 생성

알림: templates/viewer.html은 이미 읽었어야 합니다 (0단계 참조). 해당 파일을 시작점으로 사용하세요.

생성형 아트의 탐색을 허용하려면 단일 자체 포함 HTML 아티팩트를 만드세요. 이 아티팩트가 claude.ai 또는 모든 브라우저에서 즉시 작동하는지 확인하세요. 설정이 필요 없습니다. 모든 것을 인라인으로 포함하세요.

중요: 고정 vs 변수

templates/viewer.html 파일이 기초입니다. 여기에는 필요한 정확한 구조와 스타일링이 포함되어 있습니다.

고정 (항상 표시된 대로 정확하게 포함):

레이아웃 구조 (헤더, 사이드바, 메인 캔버스 영역)
Anthropic 브랜딩 (UI 색상, 글꼴, 그라데이션)
사이드바의 시드 섹션:
- 시드 표시
- 이전/다음 버튼
- 무작위 버튼
- 시드 입력으로 이동 + 이동 버튼
사이드바의 액션 섹션:
- 재생성 버튼
- 재설정 버튼

변수 (각 아트워크에 맞게 사용자 정의):

전체 p5.js 알고리즘 (setup/draw/클래스)
매개변수 객체 (아트에 필요한 것 정의)
사이드바의 매개변수 섹션:
- 매개변수 컨트롤 수
- 매개변수 이름
- 슬라이더의 최소/최대/단계 값
- 컨트롤 유형 (슬라이더, 입력 등)
색상 섹션 (선택 사항):
- 일부 아트는 색상 선택기가 필요함
- 일부 아트는 고정 색상을 사용할 수 있음
- 일부 아트는 단색일 수 있음 (색상 컨트롤 불필요)
- 아트의 필요에 따라 결정

모든 아트워크는 고유한 매개변수와 알고리즘을 가져야 합니다! 고정 부분은 일관된 UI 경험을 제공하고 변수 부분은 무한한 창의적 가능성을 허용합니다.

구현 요약

알고리즘 철학 생성 (4-6 문단) → .md 파일로 저장
templates/viewer.html 읽기 (읽기 도구 사용)
일반적인 매개변수에서 개념적 시드 추론
철학과 시드에 기반한 매개변수 정의
철학과 시드에 기반한 p5.js 알고리즘 구현
템플릿의 변수 섹션을 사용자 정의 UI 컨트롤로 교체
최종 .html 파일을 정리하고 확인 (모든 것이 작동하는지, 시드가 재현성을 제공하는지)
templates/viewer.html을 기반으로 단일 HTML 아티팩트 출력

지침 체크리스트

생성이 완료되면 이 지침을 모두 따랐는지 확인하세요:

핵심 원칙 요약

알고리즘 아트는 다음에 관한 것입니다:

철학 중심: 각 작품은 독특한 컴퓨테이셔널 미학을 표현합니다
과정이 결과보다 중요: 아름다움은 알고리즘 실행에 있습니다
시드 기반: 모든 작품은 재현 가능합니다 (시드가 동일하면 결과도 동일)
인터랙티브: 뷰어는 매개변수를 탐색할 수 있습니다
장인 정신: 각 알고리즘은 정교하고 의도적이며 전문적으로 느껴져야 합니다
두 Claude 동작: 첫 번째는 철학을 만들고, 두 번째는 코드로 표현합니다

즐겨 사용하는 AI에게 물어보기

문서

알고리즘 아트 스킬

알고리즘 철학 생성

핵심 이해

알고리즘 철학 생성 방법

철학 예시

필수 원칙

개념적 시드 추론

P5.JS 구현

⚠️ 0단계: 템플릿을 먼저 읽으세요 ⚠️

기술 요구 사항

장인 정신 요구 사항

출력 형식

인터랙티브 아티팩트 생성

중요: 고정 vs 변수

구현 요약

지침 체크리스트

핵심 원칙 요약

Individual skills in this repo

academy-guide

anthropics/template-skill

brand-guidelines

canvas-design

claude-api

discernment-nudge

doc-coauthoring

docx

frontend-design

internal-comms

mcp-builder

pdf

pptx

skill-creator

slack-gif-creator

theme-factory

webapp-testing

web-artifacts-builder

xlsx

관련 스킬

steipete/bluebubbles

steipete/eightctl

steipete/blucli

steipete/bear-notes

steipete/camsnap

steipete/gifgrep