algorithmic-art

알고리즘 철학은 코드를 통해 표현되는 계산 미학 운동입니다. 출력물로는 .md 파일(철학), .html 파일(상호작용형 뷰어), .js 파일(생성 알고리즘)이 있습니다.

이 과정은 두 단계로 이루어집니다:

1. 알고리즘 철학 제작 (.md 파일)
2. p5.js 생성적 예술 제작을 통해 표현하기 (.html + .js 파일)

먼저, 다음 과제를 수행해 보세요:

알고리즘 철학 창작

시작하기 위해, 다음을 통해 해석될 ‘알고리즘 철학’(정적인 이미지나 템플릿이 아닌)을 만들어 보세요:

• 계산적 과정, 자기조직화 현상, 수학적 아름다움
• 시드된 무작위성, 노이즈 필드, 유기적 시스템
• 입자, 흐름, 필드, 힘
• 매개변수적 변이와 통제된 혼돈

핵심적인 이해

• 수신되는 것: 사용자가 제공한 미묘한 입력이나 지시사항으로, 이를 고려하되 기초로 삼아야 하며, 창의적 자유를 제약해서는 안 된다.
• 창출되는 것: 알고리즘적 철학/생성적 미학 운동.
• 다음 단계: 동일한 버전이 이 철학을 받아들여 코드로 표현함으로써, 90%는 알고리즘 생성, 10%는 필수 매개변수로 구성된 p5.js 스케치를 만들어 냅니다.

다음과 같은 접근 방식을 고려해 보십시오:

• 생성적 예술 운동을 위한 선언문을 작성해 보세요
• 다음 단계는 이를 현실로 구현할 알고리즘을 작성하는 것입니다

이 철학은 다음을 강조해야 합니다: 알고리즘적 표현. 자발적 행동. 계산적 아름다움. 시드 기반 변이.

알고리즘적 철학을 도출하는 방법

이 운동의 이름 짓기 (1~2단어): “유기적 난류” / “양자 조화” / “자발적 고요”

철학을 설명하십시오 (4~6단락 - 간결하지만 완전하게):

알고리즘적 본질을 포착하기 위해, 이 철학이 다음을 통해 어떻게 드러나는지 설명하십시오:

• 계산 과정과 수학적 관계?
• 잡음 함수와 무작위성 패턴?
• 입자 거동과 장의 역학?
• 시간적 진화와 시스템 상태?
• 매개변수 변화와 자발적 복잡성?

핵심 지침:

• 중복을 피하십시오: 각 알고리즘적 측면은 한 번만 언급되어야 합니다. 새로운 심도 있는 내용을 추가하지 않는 한, 잡음 이론, 입자 역학 또는 수학적 원리에 관한 개념의 반복을 피하십시오.
• 장인정신을 반복적으로 강조하십시오: 철학 부분에서는 최종 알고리즘이 마치 수많은 시간을 들여 개발하고 세심하게 다듬은 것처럼 보이며, 해당 분야의 최정상급 전문가가 만든 결과물임을 반드시 여러 번 강조해야 합니다. 이러한 프레임워크는 필수적입니다. “세심하게 제작된 알고리즘”, “심도 있는 계산 전문성의 산물”, “고된 최적화”, “마스터급 구현”과 같은 문구를 반복하십시오.
• 창의적인 여지를 남겨두세요: 알고리즘의 방향에 대해서는 구체적으로 제시하되, 차기 ‘클로드(Claude)’가 매우 높은 수준의 장인 정신을 바탕으로 해석적 구현 선택을 할 수 있는 여지가 남을 만큼 간결하게 작성하십시오.

이 철학은 다음 버전이 정적인 이미지를 통해가 아니라 ‘알고리즘적으로’ 아이디어를 표현하도록 이끌어야 합니다. 아름다움은 최종 결과물이 아니라 그 과정 속에 있습니다.

철학 예시

"유기적 난류" 철학: 자연 법칙에 의해 제약된 혼돈, 무질서에서 솟아나는 질서. 알고리즘적 표현: 층층이 쌓인 퍼린 노이즈에 의해 구동되는 유동장. 벡터 힘에 따라 움직이는 수천 개의 입자들이 남긴 궤적이 유기적인 밀도 맵으로 축적된다. 여러 옥타브의 노이즈가 난류 영역과 고요한 구역을 만들어 냅니다. 색상은 속도와 밀도에서 비롯됩니다. 빠른 입자는 밝게 빛나고, 느린 입자는 그림자 속으로 사라집니다. 알고리즘은 평형 상태에 도달할 때까지 실행되며, 이는 계산 미학의 대가가 무수한 반복 과정을 통해 모든 매개변수를 정교하게 다듬어낸 세심하게 조율된 균형입니다.

"양자 고조파" 철학: 파동과 같은 간섭 패턴을 보이는 이산적 실체들. 알고리즘적 표현: 격자 위에 초기화된 입자들은 각각 사인파를 통해 진화하는 위상 값을 지닌다. 입자들이 가까워지면 위상이 간섭을 일으키는데, 건설적 간섭은 밝은 노드를, 파괴적 간섭은 공극을 생성한다. 단순한 조화 운동이 복잡한 만다라를 만들어 냅니다. 공명하는 아름다움을 만들어내기 위해 모든 비율을 신중하게 선택한, 고된 주파수 보정의 결과입니다.

"재귀적 속삭임" 철학: 다양한 규모에 걸친 자기 유사성, 유한한 공간 속의 무한한 깊이. 알고리즘적 표현: 재귀적으로 세분화되는 분기 구조. 각 분기는 황금비에 의해 제약받으면서도 약간 무작위적으로 생성된다. L-시스템이나 재귀적 세분화는 수학적이며 동시에 유기적인 느낌을 주는 나무 모양의 형태를 생성합니다. 미묘한 노이즈 교란이 완벽한 대칭을 깨뜨립니다. 선의 굵기는 재귀 수준이 높아질수록 줄어듭니다. 모든 분기 각도는 심도 있는 수학적 탐구의 산물입니다.

"Field Dynamics" 철학: 물질에 미치는 영향을 통해 가시화된 보이지 않는 힘. 알고리즘적 표현: 수학적 함수나 노이즈로 구성된 벡터 필드. 입자는 가장자리에서 생성되어 필드 라인을 따라 흐르다가, 평형 상태나 경계에 도달하면 소멸한다. 여러 필드는 입자를 끌어당기거나 밀어내거나 회전시킬 수 있다. 이 시각화는 흔적, 즉 보이지 않는 힘의 유령 같은 증거만을 보여준다. 힘의 균형을 통해 세심하게 안무된 계산적 춤이다.

"확률적 결정화" 철학: 무작위 과정이 질서 정연한 구조로 결정화되는 것. 알고리즘적 표현: 무작위 원 배열 또는 보로노이 테셀레이션. 무작위 점으로 시작하여, 이완 알고리즘을 통해 진화시킨다. 셀들은 평형 상태에 도달할 때까지 서로 밀어낸다. 색상은 셀 크기, 인접 셀 수, 또는 중심으로부터의 거리를 기준으로 합니다. 드러나는 유기적인 타일링은 무작위적이면서도 필연적인 느낌을 줍니다. 모든 시드(seed)는 독특한 결정적 아름다움을 만들어내며, 이는 마스터급 생성 알고리즘의 증거입니다.

이것들은 요약된 예시입니다. 실제 알고리즘 철학은 4~6개의 실질적인 단락으로 구성되어야 합니다.

핵심 원칙

• 알고리즘 철학: 코드를 통해 표현될 계산적 세계관을 구축하기
• 결과보다 과정: 아름다움은 알고리즘의 실행 과정에서 비롯된다는 점을 항상 강조해야 합니다. 매 실행은 고유합니다
• 매개변수적 표현: 아이디어는 정적인 구성이 아닌 수학적 관계, 힘, 행동을 통해 전달된다
• 예술적 자유: 차세대 클로드(Claude)는 이 철학을 알고리즘적으로 해석한다 — 창의적인 구현의 여지를 제공하라
• 순수한 생성 예술: 이는 무작위성을 담은 정적인 이미지가 아닌, ‘살아있는 알고리즘’을 만드는 것이다
• 전문적인 장인정신: 최종 알고리즘은 세심하게 다듬어지고, 무수한 반복을 통해 정제되었으며, 계산 미학 분야에서 절대적인 정점에 선 누군가의 깊은 전문성이 담긴 산물이어야 한다는 점을 끊임없이 강조한다

알고리즘 철학은 4~6단락 분량이어야 합니다. 의도된 비전을 하나로 묶어주는 시적인 계산 철학을 담아내십시오. 같은 요점을 반복하지 마십시오. 이 알고리즘 철학을 .md 파일로 출력하십시오.

개념적 씨앗 도출하기

핵심 단계: 알고리즘을 구현하기 전에, 초기 요청에서 미묘한 개념적 연결 고리를 찾아내십시오.

핵심 원칙: 개념이란 알고리즘 자체에 내재된 미묘하고 특화된 참조 로 , 항상 문자 그대로인 것은 아니며 언제나 정교하다. 해당 주제에 익숙한 사람은 이를 직관적으로 감지할 수 있는 반면, 다른 사람들은 단순히 탁월한 생성적 구성을 경험하게 될 것입니다. 알고리즘 철학은 계산적 언어를 제공하며, 도출된 개념은 영혼을 제공합니다. 즉, 매개변수, 행동 양상, 그리고 출현 패턴 속에 보이지 않게 엮여 있는 조용한 개념적 DNA입니다.

이 점은 매우 중요합니다: 그 참조는 스스로를 드러내지 않으면서도 작품의 깊이를 더할 만큼 정교해야 합니다. 마치 재즈 뮤지션이 알고리즘적 화음을 통해 다른 곡을 인용하는 것처럼 생각하십시오. 아는 사람만이 그 의미를 파악하겠지만, 누구나 생성적인 아름다움을 감상할 수 있을 것입니다.

P5.JS 구현

철학과 개념적 틀이 확립되었으니, 이를 코드를 통해 표현해 보세요. 진행하기 전에 잠시 멈춰 생각을 정리하세요. 직접 수립한 알고리즘적 철학과 아래 지침만을 사용하십시오.

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

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

1. ‘Read’ 도구를 사용하여 templates/viewer.html을읽어보세요
2. 정확한 구조, 스타일링 및 Anthropic 브랜딩을꼼꼼히 파악하세요
3. 해당 파일을 단순한 영감의원천이 아닌,문자 그대로의 출발점으로 삼으십시오
4. 표시된 대로 모든 고정 섹션 (헤더, 사이드바 구조, Anthropic 색상/글꼴, 시드 제어, 동작 버튼)을정확히 유지하십시오
5. 파일 주석에 표시된가변 섹션 (알고리즘, 매개변수, 매개변수용 UI 컨트롤)만 교체하십시오

피해야 할 사항:

• ❌ HTML을 처음부터 새로 작성하지 마십시오
• ❌ 사용자 정의 스타일이나 색상 구성 만들기
• ❌ 시스템 글꼴이나 다크 테마 사용
• ❌ 사이드바 구조 변경

다음 모범 사례를 따르십시오:

• ✅ 템플릿의 HTML 구조를 정확히 복사하십시오
• ✅ Anthropic 브랜딩을 유지하세요(Poppins/Lora 글꼴, 밝은 색상, 그라데이션 배경)
• ✅ 사이드바 레이아웃을 유지하세요(Seed → Parameters → Colors? → Actions)
• ✅ p5.js 알고리즘과 매개변수 제어 기능만 교체하십시오

템플릿은 토대입니다. 이를 기반으로 구축하되, 새로 만들지는 마십시오.

생동감 넘치는 갤러리급 컴퓨테이셔널 아트를 제작하려면, 알고리즘적 철학을 토대 삼으세요.

기술적 요구 사항

시드 기반 난수 생성 (아트 블록 패턴):

// 재현성을 위해 항상 시드를 사용하십시오
let seed = 12345; // 또는 사용자 입력에서 생성된 해시값
randomSeed(seed);
noiseSeed(seed);

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

알고리즘 철학에서 자연스럽게 도출되는 매개변수를 설정하려면 다음을 고려하십시오: “이 시스템의 어떤 특성을 조정할 수 있을까?”

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

효과적인 매개변수를 설계하려면 “패턴 유형”이라는 관점에서 생각하기보다는 시스템이 조정 가능해야 하는 속성에 초점을 맞추십시오.

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

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

코드를 통해 철학을 표현하려면, “어떤 패턴을 사용해야 할까?”라고 생각하기보다 “이 철학을 코드를 통해 어떻게 표현할까?”라고 생각해야 한다.

철학이 유기적인 출현에 관한 것이라면, 다음을 사용하는 것을 고려해 보십시오:

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

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

• 기하학적 관계와 비율
• 삼각 함수와 고조파
• 예상치 못한 패턴을 만들어내는 정밀한 계산

철학이 ‘통제된 혼돈’에 관한 것이라면, 다음을 고려해 보세요:

• 엄격한 경계 내에서의 무작위적 변동
• 분기 및 상전이
• 무질서에서 나타나는 질서

이 알고리즘은 선택 사항 목록에서 비롯된 것이 아니라 철학에서 비롯된 것이다.

구현을 이끌어 나가기 위해, 개념적 본질이 창의적이고 독창적인 선택의 토대가 되도록 하라. 이 특정 요청에 대한 비전을 표현하는 무언가를 만들어라.

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

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

function draw() {
  // 생성적 알고리즘
  // 정적(noLoop) 또는 애니메이션 형태일 수 있음
}

제작 요건

핵심: 숙달의 경지에 이르려면, 마치 거장급 생성 예술가가 수많은 반복 작업을 거쳐 만들어낸 듯한 알고리즘을 제작해야 합니다. 모든 매개변수를 세심하게 조정하십시오. 모든 패턴이 명확한 목적을 가지고 나타나도록 해야 합니다. 이는 무작위적인 노이즈가 아닙니다. 깊은 전문성을 통해 정제된 ‘통제된 혼돈’입니다.

• 균형: 시각적 노이즈 없는 복잡성, 경직되지 않은 질서
• 색채 조화: 무작위 RGB 값이 아닌, 신중하게 고른 색상 팔레트
• 구도: 무작위성 속에서도 시각적 위계와 흐름을 유지
• 성능: 원활한 실행, 애니메이션의 경우 실시간 처리에 최적화
• 재현성: 동일한 시드(seed)는 항상 동일한 출력을 생성한다

출력 형식

출력:

1. 알고리즘 철학 - 생성적 미학을 설명하는 마크다운 또는 텍스트 형식
2. 단일 HTML 아트팩트 - 템플릿/viewer.html을 기반으로 구축된 독립형 인터랙티브 생성 예술 작품 (STEP 0 및 다음 섹션 참조)

이 HTML 아티팩트에는 p5.js(CDN에서 제공), 알고리즘, 매개변수 제어 기능, UI 등 모든 요소가 포함되어 있으며, claude.ai 아티팩트나 어떤 브라우저에서든 즉시 작동하는 단일 파일 형태입니다. 처음부터 새로 만들지 말고 템플릿 파일을 기반으로 시작하세요.

상호작용형 아티팩트 제작

참고: templates/viewer.html 파일은 이미 읽어두셨을 것입니다(STEP 0 참조). 해당 파일을 시작점으로 사용하십시오.

생성형 예술을 탐색할 수 있도록, 단일하고 독립적인 HTML 아티팩트를 제작하십시오. 이 아티팩트는 별도의 설정 없이 claude.ai 또는 모든 브라우저에서 즉시 작동해야 합니다. 모든 내용을 인라인으로 삽입하십시오.

중요: 고정 요소와 가변 요소

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

고정 요소 (항상 표시된 대로 정확히 포함해야 함):

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

변수 (작품별로 맞춤 설정):

• 전체 p5.js 알고리즘 (설정/그리기/클래스)
• 매개변수 객체 (작품에 필요한 요소 정의)
• 사이드바의 ‘매개변수’ 섹션:
  • 매개변수 컨트롤 수
  • 매개변수 이름
  • 슬라이더의 최소/최대/단계 값
  • 컨트롤 유형(슬라이더, 입력란 등)
• 색상 섹션 (선택 사항):
  • 일부 아트에는 색상 선택기가 필요합니다
  • 일부 아트에는 고정된 색상이 사용될 수 있습니다
  • 일부 아트는 단색일 수 있습니다(색상 제어 필요 없음)
  • 작품의 요구 사항에 따라 결정하십시오

모든 작품에는 고유한 매개변수와 알고리즘이 있어야 합니다! 고정된 부분은 일관된 사용자 경험을 제공하며, 그 외 모든 요소는 고유한 비전을 표현합니다.

필수 기능

1. 매개변수 제어

• 숫자형 매개변수(입자 수, 노이즈 크기, 속도 등)를 조절하는 슬라이더
• 팔레트 색상을 위한 색상 선택기
• 매개변수 변경 시 실시간 업데이트
• 기본값으로 복원하는 재설정 버튼

2. 시드 탐색

• 현재 시드 번호 표시
• 시드를 순차적으로 이동하기 위한 “이전” 및 “다음” 버튼
• 무작위 시드를 설정하는 “무작위” 버튼
• 특정 시드로 바로 이동할 수 있는 입력란
• 요청 시 100가지 변형 생성 (시드 1~100)

3. 단일 아티팩트 구조

중요: 이는 단일 아티팩트입니다. 외부 파일이나 임포트(p5.js CDN 제외)가 없습니다. 모든 것이 인라인으로 처리됩니다.

4. 구현 세부 사항 - 사이드바 구축

사이드바 구조:

1. 시드 (고정) - 항상 표시된 대로 정확히 포함하십시오:

• 시드 표시
• 이전/다음/무작위/바로 가기 버튼

2. 매개변수 (변수) - 아트용 컨트롤을 생성합니다:

   매개변수 이름
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>매개변수의 개수만큼 control-group div를 추가합니다.</p>
<p><strong>3. 색상 (선택 사항/변수)</strong> - 아트에 색상 조정이 필요한 경우 포함:</p>
<ul>
<li>사용자가 색상 팔레트를 제어해야 하는 경우 색상 선택기를 추가하세요</li>
<li>아트가 고정된 색상을 사용하는 경우 이 섹션을 건너뛰세요</li>
<li>작품이 단색인 경우 건너뛰세요</li>
</ul>
<p><strong>4. 동작 (고정)</strong> - 항상 표시된 대로 정확히 포함하세요:</p>
<ul>
<li>재생성 버튼</li>
<li>재설정 버튼</li>
<li>PNG 다운로드 버튼</li>
</ul>
<p><strong>요구 사항</strong>:</p>
<ul>
<li>시드 제어 기능이 정상 작동해야 함 (이전/다음/무작위/건너뛰기/표시)</li>
<li>모든 매개변수에 UI 제어 기능이 있어야 함</li>
<li>재생성, 초기화, 다운로드 버튼이 작동해야 함</li>
<li>Anthropic 브랜딩 유지 (UI 스타일링, 아트 색상 제외)</li>
</ul>
<h3>아티팩트 사용법</h3>
<p>HTML 아티팩트는 즉시 작동합니다:</p>
<ol>
<li><strong>claude.ai 내에서</strong>: 상호작용 가능한 아티팩트로 표시되며 즉시 실행됩니다</li>
<li><strong>파일 형태</strong>: 저장 후 어떤 브라우저에서든 열 수 있음 - 서버 불필요</li>
<li><strong>공유</strong>: HTML 파일을 전송하면 됨 - 완전히 독립적인 파일</li>
</ol>

<h2>변형 및 탐색</h2>
<p>이 아티팩트에는 기본적으로 시드 탐색 기능(이전/다음/무작위 버튼)이 포함되어 있어, 사용자는 여러 파일을 생성하지 않고도 다양한 변형을 탐색할 수 있습니다. 사용자가 특정 변형을 강조 표시하고 싶은 경우:</p>
<ul>
<li>시드 사전 설정 포함(‘변형 1: 시드 42’, ‘변형 2: 시드 127’ 등의 버튼)</li>
<li>여러 시드의 썸네일을 나란히 보여주는 ‘갤러리 모드’ 추가</li>
<li>이 모든 기능이 하나의 아티팩트 내에 포함됩니다</li>
</ul>
<p>이는 마치 동일한 판에서 일련의 판화를 제작하는 것과 같습니다. 알고리즘은 일관되지만, 각 시드는 그 잠재력의 서로 다른 측면을 드러냅니다. 상호작용적인 특성 덕분에 사용자는 시드 공간을 탐색하며 자신만의 마음에 드는 작품을 발견할 수 있습니다.</p>

<h2>창작 과정</h2>
<p><strong>사용자 요청</strong> → <strong>알고리즘 철학</strong> → <strong>구현</strong></p>
<p>각 요청은 고유합니다. 이 과정은 다음을 포함합니다:</p>
<ol>
<li><strong>사용자의 의도 해석</strong> - 어떤 미학을 추구하는가?</li>
<li><strong>계산적 접근 방식을 설명하는 알고리즘 철학</strong> (4~6단락) 수립</li>
<li><strong>코드로 구현</strong> - 이 철학을 표현하는 알고리즘 구축</li>
<li><strong>적절한 매개변수 설계</strong> - 어떤 요소를 조정 가능하게 할 것인가?</li>
<li><strong>해당 매개변수를 위한 슬라이더/입력 필드 등 UI 컨트롤 구축</strong> - 해당 매개변수를 위한 슬라이더/입력 필드</li>
</ol>
<p><strong>불변 요소</strong>:</p>
<ul>
<li>인간 중심 브랜딩 (색상, 폰트, 레이아웃)</li>
<li>시드 탐색 (항상 표시됨)</li>
<li>독립형 HTML 아티팩트</li>
</ul>
<p><strong>그 외 모든 것은 가변적입니다</strong>:</p>
<ul>
<li>알고리즘 자체</li>
<li>매개변수</li>
<li>UI 컨트롤</li>
<li>시각적 결과물</li>
</ul>
<p>최상의 결과를 얻으려면 창의성을 믿고, 이 철학이 구현 과정을 이끌도록 하세요.</p>

<h2>자료</h2>
<p>이 스킬에는 유용한 템플릿과 문서가 포함되어 있습니다:</p>
<ul>
<li><p><strong>templates/viewer.html</strong>: 모든 HTML 아티팩트에 대한 필수 시작점입니다.</p>
<ul>
<li>이것이 기초입니다. 정확한 구조와 Anthropic 브랜딩이 포함되어 있습니다.</li>
<li><strong>변경하지 마십시오</strong>: 레이아웃 구조, 사이드바 구성, Anthropic 색상/글꼴, 시드 컨트롤, 동작 버튼</li>
<li><strong>교체하십시오</strong>: p5.js 알고리즘, 매개변수 정의, ‘매개변수’ 섹션의 UI 컨트롤</li>
<li>파일 내의 상세한 주석은 유지해야 할 부분과 교체해야 할 부분을 정확히 표시합니다</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>: p5.js 모범 사례 및 코드 구조 원칙에 대한 참고 자료입니다.</p>
<ul>
<li>매개변수 구성 방법, 시드 기반 난수 사용법, 클래스 구조화 방법을 보여줍니다</li>
<li>패턴 메뉴가 아닙니다. 이 원칙들을 활용하여 독자적인 알고리즘을 구축하십시오</li>
<li>알고리즘을 HTML 아티팩트에 인라인으로 삽입하십시오(별도의 .js 파일을 생성하지 마십시오)</li>
</ul>
</li>
</ul>
<p><strong>중요한 유의사항</strong>:</p>
<ul>
<li>이 <strong>템플릿은 ‘시작점’</strong>일 뿐, 영감의 원천이 아닙니다</li>
<li><strong>알고리즘은 독창적인</strong> 무언가를 만들어내는 곳입니다</li>
<li>플로우 필드 예제를 그대로 복사하지 마세요. 철학이 요구하는 바를 구현하세요</li>
<li>하지만 템플릿의 정확한 UI 구조와 Anthropic 브랜딩은 반드시 유지하세요</li>
</ul>                                
                                

                                    
                                        GitHub에서 보기
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
license: Complete terms in LICENSE.txt
---

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:
1. Algorithmic Philosophy Creation (.md file)
2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

## ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
- Computational processes, emergent behavior, mathematical beauty
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parametric variation and controlled chaos

### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: An algorithmic philosophy/generative aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:
- Write a manifesto for a generative art movement
- The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

**Articulate the philosophy** (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:
- Computational processes and mathematical relationships?
- Noise functions and randomness patterns?
- Particle behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?

**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

### PHILOSOPHY EXAMPLES

**"Organic Turbulence"**
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.

**"Quantum Harmonics"**
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.

**"Recursive Whispers"**
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.

**"Field Dynamics"**
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.

**"Stochastic Crystallization"**
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.

*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*

### ESSENTIAL PRINCIPLES
- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

## DEDUCING THE CONCEPTUAL SEED

**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

---

## P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

**CRITICAL: BEFORE writing any HTML:**

1. **Read** `templates/viewer.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)

**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure

**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls

The template is the foundation. Build on it, don't rebuild it.

---

To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.

### TECHNICAL REQUIREMENTS

**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Parameter Structure - FOLLOW THE PHILOSOPHY**:

To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"

```javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};
```

**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**

**Core Algorithm - EXPRESS THE PHILOSOPHY**:

**CRITICAL**: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

If the philosophy is about **organic emergence**, consider using:
- Elements that accumulate or grow over time
- Random processes constrained by natural rules
- Feedback loops and interactions

If the philosophy is about **mathematical beauty**, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations creating unexpected patterns

If the philosophy is about **controlled chaos**, consider using:
- Random variation within strict boundaries
- Bifurcation and phase transitions
- Order emerging from disorder

**The algorithm flows from the philosophy, not from a menu of options.**

To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.

**Canvas Setup**: Standard p5.js structure:
```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}
```

### CRAFTSMANSHIP REQUIREMENTS

**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

- **Balance**: Complexity without visual noise, order without rigidity
- **Color Harmony**: Thoughtful palettes, not random RGB values
- **Composition**: Even in randomness, maintain visual hierarchy and flow
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed ALWAYS produces identical output

### OUTPUT FORMAT

Output:
1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

---

## INTERACTIVE ARTIFACT CREATION

**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**

To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.

### CRITICAL: WHAT'S FIXED VS VARIABLE

The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.

**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar:
  - Seed display
  - Previous/Next buttons
  - Random button
  - Jump to seed input + Go button
- Actions section in sidebar:
  - Regenerate button
  - Reset button

**VARIABLE (customize for each artwork):**
- The entire p5.js algorithm (setup/draw/classes)
- The parameters object (define what the art needs)
- The Parameters section in sidebar:
  - Number of parameter controls
  - Parameter names
  - Min/max/step values for sliders
  - Control types (sliders, inputs, etc.)
- Colors section (optional):
  - Some art needs color pickers
  - Some art might use fixed colors
  - Some art might be monochrome (no color controls needed)
  - Decide based on the art's needs

**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.

### REQUIRED FEATURES

**1. Parameter Controls**
- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
- Color pickers for palette colors
- Real-time updates when parameters change
- Reset button to restore defaults

**2. Seed Navigation**
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- "Random" button for random seed
- Input field to jump to specific seed
- Generate 100 variations when requested (seeds 1-100)

**3. Single Artifact Structure**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>
```

**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.

**4. Implementation Details - BUILD THE SIDEBAR**

The sidebar structure:

**1. Seed (FIXED)** - Always include exactly as shown:
- Seed display
- Prev/Next/Random/Jump buttons

**2. Parameters (VARIABLE)** - Create controls for the art:
```html
<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
```
Add as many control-group divs as there are parameters.

**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
- Add color pickers if users should control palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochrome

**4. Actions (FIXED)** - Always include exactly as shown:
- Regenerate button
- Reset button
- Download PNG button

**Requirements**:
- Seed controls must work (prev/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, Reset, Download buttons must work
- Keep Anthropic branding (UI styling, not art colors)

### USING THE ARTIFACT

The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained

---

## VARIATIONS & EXPLORATION

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
- All within the same single artifact

This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.

---

## THE CREATIVE PROCESS

**User request** → **Algorithmic philosophy** → **Implementation**

Each request is unique. The process involves:

1. **Interpret the user's intent** - What aesthetic is being sought?
2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3. **Implement it in code** - Build the algorithm that expresses this philosophy
4. **Design appropriate parameters** - What should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those parameters

**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present)
- Self-contained HTML artifact

**Everything else is variable**:
- The algorithm itself
- The parameters
- The UI controls
- The visual outcome

To achieve the best results, trust creativity and let the philosophy guide the implementation.

---

## RESOURCES

This skill includes helpful templates and documentation:

- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
  - This is the foundation - contains the exact structure and Anthropic branding
  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
  - The extensive comments in the file mark exactly what to keep vs replace

- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
  - Shows how to organize parameters, use seeded randomness, structure classes
  - NOT a pattern menu - use these principles to build unique algorithms
  - Embed algorithms inline in the HTML artifact (don't create separate .js files)

**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **algorithm is where to create** something unique
- Don't copy the flow field example - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template