agencelutie/LP-lutie

알고리즘 철학은 코드로 표현되는 계산적 미학 운동입니다. .md 파일(철학), .html 파일(대화형 뷰어), .js 파일(생성 알고리즘)을 출력합니다.

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

1. 알고리즘 철학 생성 (.md 파일)
2. 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을 작성하기 전에:

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

피하세요:

• ❌ HTML을 처음부터 생성
• ❌ 사용자 정의 스타일링이나 색 구성표 고안
• ❌ 시스템 글꼴이나 어두운 테마 사용
• ❌ 사이드바 구조 변경

다음 관행을 따르세요:

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

템플릿이 기초입니다. 재구축하지 말고 그 위에 구축하세요.

---

살아 숨쉬는 갤러리 품질의 계산 예술을 만들려면 알고리즘 철학을 기초로 사용하세요.

기술 요구 사항

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

알고리즘은 옵션 메뉴가 아닌 철학에서 비롯됩니다.

구현을 안내하려면 개념적 본질이 창의적이고 독창적인 선택을 알리도록 하세요. 이 특정 요청에 대한 비전을 표현하는 것을 구축하세요.

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

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

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

장인 정신 요구 사항

중요: 숙달을 달성하려면 마스터 생성 예술가가 수없이 반복하여 만들어낸 듯한 알고리즘을 만드세요. 모든 매개변수를 신중하게 조정하세요. 모든 패턴이 목적을 가지고 창발하는지 확인하세요. 이것은 무작위 노이즈가 아닙니다 - 깊은 전문성으로 정제된 통제된 혼돈입니다.

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

출력 형식

출력:

1. 알고리즘 철학 - 생성적 미학을 설명하는 마크다운 또는 텍스트
2. 단일 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/클래스)
• 매개변수 객체 (예술에 필요한 것 정의)
• 사이드바의 매개변수 섹션:
  • 매개변수 컨트롤 수
  • 매개변수 이름
  • 슬라이더의 최소/최대/단계 값
  • 컨트롤 유형 (슬라이더, 입력 등)
• 색상 섹션 (선택 사항):
  • 일부 예술은 색상 선택기가 필요함
  • 일부 예술은 고정 색상을 사용할 수 있음
  • 일부 예술은 단색일 수 있음 (색상 컨트롤 불필요)
  • 예술의 필요에 따라 결정

모든 작품은 고유한 매개변수와 알고리즘을 가져야 합니다! 고정 부분은 일관된 경험을 제공합니다.