알고리즘 아트

출처: 인류학/기술(MIT)에서 채택한 콘텐츠.

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

이는 두 단계로 이루어집니다.

1. 알고리즘 철학 생성(.md 파일)
2. p5.js 생성 아트(.html +.js 파일)를 생성하여 표현

먼저 다음 작업을 수행합니다.

알고리즘 철학 창조

시작하려면 다음을 통해 해석될 알고리즘 철학(정적 이미지나 템플릿이 아님)을 만듭니다.

• 계산 과정, 창발적 행동, 수학적 아름다움
• 시드된 무작위성, 노이즈 필드, 유기 시스템
• 입자, 흐름, 장, 힘
• 파라메트릭 변형 및 통제된 혼돈

비판적 이해

• 수신되는 내용: 사용자가 고려해야 할 미묘한 입력 또는 지침이 있지만 기초로 사용됩니다. 창작의 자유를 제한해서는 안 됩니다.
• 만들어지는 것: 알고리즘 철학/생성적 미학 운동.
• 다음에 일어날 일: 동일한 버전은 철학을 수용하고 코드로 표현합니다. 즉, 90% 알고리즘 생성, 10% 필수 매개변수인 p5.js 스케치를 생성합니다.

다음 접근 방식을 고려해보세요.

• 생성적 예술 운동에 대한 선언문 작성
• 다음 단계에는 이를 구현하는 알고리즘을 작성하는 작업이 포함됩니다.

철학은 다음을 강조해야 합니다. 알고리즘 표현. 긴급한 행동. 컴퓨팅의 아름다움. 시드 변형.

알고리즘 철학을 생성하는 방법

무브먼트 이름(1~2단어): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

철학을 명시합니다(4~6문단 - 간결하지만 완전함):

알고리즘의 본질을 포착하려면 다음을 통해 이 철학이 어떻게 나타나는지 표현하세요.

• 계산 과정과 수학적 관계?
• 노이즈 함수와 무작위성 패턴?
• 입자 행동과 필드 역학?
• 시간적 진화와 시스템 상태?
• 매개변수적 변화와 새로운 복잡성?

중요 지침:

• 중복 방지: 각 알고리즘 측면은 한 번만 언급해야 합니다. 새로운 깊이를 추가하지 않는 한 소음 이론, 입자 역학 또는 수학적 원리에 대한 개념을 반복하지 마십시오.
• 장인 정신을 반복적으로 강조: 철학에서는 최종 알고리즘이 개발하는 데 셀 수 없이 많은 시간이 걸리고 신중하게 개선되었으며 해당 분야의 최고 수준에 있는 사람이 나온 것처럼 보여야 한다는 점을 여러 번 강조해야 합니다. 이러한 프레이밍은 필수적입니다. "세심하게 제작된 알고리즘", "깊은 컴퓨팅 전문 지식의 산물", "고심한 최적화", "마스터 수준 구현"과 같은 문구를 반복합니다.
• 창의적인 공간을 남겨두세요: 알고리즘 방향을 구체적으로 설명하되 다음 Claude가 매우 높은 수준의 장인정신으로 해석적 구현을 선택할 여지가 있을 만큼 간결하게 설명하세요.

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

철학의 예

"유기적 난류" 철학: 자연법에 의해 구속된 혼돈, 무질서에서 나오는 질서. 알고리즘 표현: 계층화된 Perlin 노이즈에 의해 구동되는 흐름장. 벡터 힘을 따르는 수천 개의 입자, 그 흔적이 유기 밀도 맵에 축적됩니다. 여러 소음 옥타브는 난류 지역과 차분한 지역을 만듭니다. 색상은 속도와 밀도에서 나타납니다. 빠른 입자는 밝게 타오르고 느린 입자는 그림자로 희미해집니다. 알고리즘은 계산 미학의 대가가 수많은 반복을 통해 모든 매개 변수를 세심하게 조정한 균형인 평형 상태가 될 때까지 실행됩니다.

"양자 고조파" 철학: 파동과 같은 간섭 패턴을 나타내는 개별 개체입니다. 알고리즘 표현: 그리드에서 초기화된 입자로, 각각 사인파를 통해 발전하는 위상 값을 전달합니다. 입자가 근처에 있으면 위상이 간섭합니다. 보강 간섭은 밝은 노드를 만들고, 파괴 간섭은 공극을 만듭니다. 단순한 조화 운동은 복잡하고 창발적인 만다라를 생성합니다. 공명하는 아름다움을 만들어내기 위해 모든 비율을 신중하게 선택한 공들인 주파수 교정의 결과입니다.

"재귀적 속삭임" 철학: 규모에 따른 자기 유사성, 유한한 공간에서의 무한한 깊이. 알고리즘 표현: 재귀적으로 세분화되는 분기 구조. 각 분기는 약간 무작위로 지정되지만 황금 비율로 제한됩니다. L-시스템 또는 재귀적 세분화는 수학적이면서도 유기적인 느낌을 주는 나무와 같은 형태를 생성합니다. 미묘한 소음 교란으로 인해 완벽한 대칭이 깨집니다. 각 재귀 수준에 따라 선 가중치가 감소합니다. 모든 분기 각도는 깊은 수학적 탐구의 산물입니다.

"현장 역학" 철학: 보이지 않는 힘이 물질에 미치는 영향을 통해 가시화됩니다. 알고리즘 표현: 수학 함수 또는 노이즈로 구성된 벡터 필드입니다. 가장자리에서 생성된 입자는 자기장 선을 따라 흐르다가 평형이나 경계에 도달하면 죽습니다. 여러 필드가 입자를 끌어당기거나 밀어내거나 회전시킬 수 있습니다. 시각화에는 보이지 않는 힘의 유령 같은 증거인 흔적만 표시됩니다. 힘의 균형을 통해 꼼꼼하게 안무된 컴퓨터 댄스입니다.

"확률적 결정화" 철학: 무작위 프로세스가 정렬된 구조로 결정화됩니다. 알고리즘 표현: 무작위 원 채우기 또는 보로노이 테셀레이션. 임의의 점으로 시작하여 완화 알고리즘을 통해 진화하도록 하세요. 세포는 평형이 될 때까지 서로 밀어냅니다. 셀 크기, 이웃 수 또는 중심으로부터의 거리를 기준으로 색상을 지정합니다. 나타나는 유기적 타일링은 무작위적이고 불가피한 느낌을 줍니다. 모든 씨앗은 마스터 수준 생성 알고리즘의 표시인 독특한 결정체의 아름다움을 만들어냅니다.

축약된 예시입니다. 실제 알고리즘 철학은 4~6개의 실질적인 단락이어야 합니다.

필수 원칙

• 알고리즘 철학: 코드를 통해 표현되는 컴퓨팅 세계관 생성
• 제품에 대한 프로세스: 아름다움은 알고리즘 실행에서 나온다는 점을 항상 강조합니다. 각 실행은 고유합니다.
• 매개변수적 표현: 아이디어는 정적 구성이 아닌 수학적 관계, 힘, 행동을 통해 전달됩니다.
• 예술적 자유: 다음 Claude는 철학을 알고리즘적으로 해석하여 창의적인 구현 공간을 제공합니다.
• PURE GENERATIVE ART: 임의성을 지닌 정적인 이미지가 아닌 살아있는 알고리즘을 만드는 것입니다.
• 전문적인 제작 기술: 최종 알고리즘은 계산 미학 분야에서 최고 수준에 있는 사람의 깊은 전문 지식의 산물인 수많은 반복을 통해 세심하게 제작되고 정제된 느낌을 받아야 함을 반복해서 강조합니다.

알고리즘 철학은 4~6문단 길이여야 합니다. 의도한 비전을 하나로 모으는 시적인 계산 철학으로 채우세요. 같은 점을 반복하지 마십시오. 이 알고리즘 철학을.md 파일로 출력합니다.

개념적 씨앗 추론

중요 단계: 알고리즘을 구현하기 전에 원래 요청에서 미묘한 개념적 스레드를 식별합니다.

필수 원칙: 개념은 알고리즘 자체에 포함된 미묘하고 틈새 참조입니다. 항상 문자 그대로는 아니지만 항상 정교합니다. 주제에 익숙한 사람은 직관적으로 느껴야 하고, 다른 사람은 단순히 뛰어난 생성적 구성을 경험해야 합니다. 알고리즘 철학은 계산 언어를 제공합니다. 추론된 개념은 매개 변수, 행동 및 출현 패턴에 보이지 않게 짜여진 조용한 개념적 DNA인 영혼을 제공합니다.

이것은 매우 중요합니다: 참조는 자체적으로 발표하지 않고도 작업의 깊이를 높일 수 있도록 정제되어야 합니다. 알고리즘 하모니를 통해 다른 노래를 인용하는 재즈 음악가처럼 생각해보세요. 아는 사람만이 그것을 이해할 수 있지만, 모두가 생성적 아름다움을 높이 평가합니다.

P5.JS 구현

철학과 개념적 틀을 확립하고, 이를 코드로 표현합니다. 계속하기 전에 잠시 멈춰서 생각을 모으십시오. 작성된 알고리즘 철학과 아래 지침만 사용하세요.

0단계: 먼저 템플릿 읽기

중요: HTML을 작성하기 전:

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

피해야 할 사항:

• 처음부터 HTML 만들기
• 사용자 정의 스타일이나 색 구성표 발명
• 시스템 글꼴 또는 어두운 테마 사용
• 사이드바 구조 변경

다음 방법을 따르세요.

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

템플릿이 기초입니다. 그 위에 구축하고 다시 구축하지 마십시오.

살아 숨쉬는 갤러리 수준의 컴퓨팅 아트를 만들기 위해서는 알고리즘 철학을 기본으로 삼아야 합니다.

기술 요구 사항

시드 무작위성(아트 블록 패턴):

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

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

알고리즘 철학에서 자연스럽게 나타나는 매개변수를 설정하려면 다음을 고려하십시오. "이 시스템의 어떤 특성을 조정할 수 있습니까?"

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?)
};

효과적인 매개변수를 설계하려면 "패턴 유형"이라는 관점에서 생각하기보다는 시스템이 조정 가능해야 하는 속성에 중점을 두세요.

핵심 알고리즘 - 철학 표현:

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

철학을 코드로 표현하려면 "어떤 패턴을 사용해야 할까?"라는 생각을 지양하세요. 대신 "이 철학을 코드를 통해 표현하는 방법은 무엇입니까?"라고 생각하십시오.

철학이 유기적 출현에 관한 것이라면 다음을 사용하는 것을 고려해 보세요.

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

철학이 수학적 아름다움에 관한 것이라면 다음을 사용해 보세요.

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

철학이 통제된 혼돈에 관한 것이라면 다음을 사용하는 것을 고려해보세요.

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

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

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

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

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

장인 정신 요구 사항

중요: 숙달을 달성하려면 마스터 생성 아티스트의 수많은 반복을 통해 나타난 것처럼 느껴지는 알고리즘을 만드십시오. 모든 매개변수를 주의 깊게 조정하세요. 모든 패턴이 목적에 맞게 나타나도록 하세요. 이것은 무작위 노이즈가 아닙니다. 이것은 심층적인 전문 지식을 통해 개선된 제어된 카오스입니다.

• 균형: 시각적 잡음 없는 복잡성, 경직성 없는 질서
• 색상 조화: 무작위 RGB 값이 아닌 사려 깊은 팔레트
• 구성: 무작위임에도 시각적 계층 구조와 흐름을 유지합니다.
• 성능: 원활한 실행, 애니메이션의 경우 실시간에 최적화됨
• 재현성: 동일한 시드는 항상 동일한 출력을 생성합니다.

출력 형식

출력:

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

HTML 아티팩트에는 p5.js(CDN의), 알고리즘, 매개변수 제어 및 UI 등 모든 것이 포함되어 있으며 clude.ai 아티팩트 또는 모든 브라우저에서 즉시 작동하는 하나의 파일에 모두 포함되어 있습니다. 처음부터 시작하지 않고 템플릿 파일에서 시작하세요.

대화형 아티팩트 생성

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

생성 아트를 탐색할 수 있도록 단일 독립형 HTML 아티팩트를 만듭니다. 이 아티팩트가 clude.ai 또는 모든 브라우저에서 즉시 작동하는지 확인하세요. 설정이 필요하지 않습니다. 모든 것을 인라인으로 포함하세요.

중요: 고정된 것과 가변적인 것

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

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

• 레이아웃 구조(헤더, 사이드바, 메인 캔버스 영역)
• 인류학적 브랜딩(UI 색상, 글꼴, 그라디언트)
• 사이드바의 시드 섹션:
  • 종자 전시
  • 이전/다음 버튼
  • 무작위 버튼
  • 시드 입력으로 이동 + 이동 버튼
• 사이드바의 작업 섹션:
  • 재생성 버튼
  • 재설정 버튼

변수(각 작품에 맞게 맞춤설정):

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

모든 작품에는 고유한 매개변수와 알고리즘이 있어야 합니다! 고정된 부분은 일관된 UX를 제공하고 다른 모든 것은 고유한 비전을 표현합니다.

필수 기능

1. 매개변수 제어

• 숫자 매개변수용 슬라이더(입자 수, 소음 규모, 속도 등)
• 팔레트 색상을 위한 색상 선택기
• 매개변수 변경 시 실시간 업데이트
• 기본값을 복원하는 재설정 버튼

2. 시드 탐색

• 현재 시드 번호 표시
• 시드를 순환하는 "이전" 및 "다음" 버튼
• 무작위 시드를 위한 "무작위" 버튼
• 특정 시드로 점프하기 위한 입력 필드
• 요청 시 100개의 변형 생성(시드 1-100)

3. 단일 아티팩트 구조

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

중요: 이는 단일 아티팩트입니다. 외부 파일이 없고 가져오기가 없습니다(p5.js CDN 제외). 모든 것이 인라인입니다.

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

사이드바 구조:

1. 시드(고정) - 항상 표시된 대로 정확하게 포함합니다.

• 종자 전시
• 이전/다음/임의/점프 버튼

2. 매개변수(변수) - 아트에 대한 컨트롤을 만듭니다.

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

매개변수 수만큼 제어 그룹 div를 추가합니다.

3. 색상(선택 사항/가변) - 아트에 조정 가능한 색상이 필요한 경우 포함:

• 사용자가 팔레트를 제어해야 하는 경우 색상 선택기를 추가하세요.
• 아트가 고정된 색상을 사용하는 경우 이 섹션을 건너뛰세요.
• 아트가 흑백인 경우 건너뛰기

4. 작업(수정됨) - 항상 표시된 대로 정확하게 포함합니다.

• 재생성 버튼
• 재설정 버튼
• PNG 버튼 다운로드

요구사항:

• 시드 제어가 작동해야 합니다(이전/다음/무작위/점프/표시).
• 모든 매개변수에는 UI 컨트롤이 있어야 합니다.
• 재생성, 재설정, 다운로드 버튼이 작동해야 합니다.
• Anthropic 브랜딩 유지(아트 색상이 아닌 UI 스타일)

아티팩트 사용

HTML 아티팩트는 즉시 작동합니다.

1. claude.ai: 대화형 아티팩트로 표시되며 즉시 실행됩니다.
2. 파일로: 저장하고 모든 브라우저에서 열 수 있습니다. 서버가 필요하지 않습니다.
3. 공유: HTML 파일 보내기 - 완전히 독립적입니다.

변형 및 탐색

아티팩트에는 기본적으로 시드 탐색(이전/다음/임의 버튼)이 포함되어 있어 사용자가 여러 파일을 만들지 않고도 변형을 탐색할 수 있습니다. 사용자가 특정 변형을 강조표시하려는 경우:

• 시드 사전 설정 포함("변형 1: 시드 42", "변형 2: 시드 127" 버튼 등)
• 여러 씨앗의 썸네일을 나란히 표시하는 "갤러리 모드" 추가
• 동일한 단일 아티팩트 내의 모든 것

이는 동일한 판에서 일련의 인쇄물을 만드는 것과 같습니다. 알고리즘은 일관되지만 각 씨앗은 잠재력의 다른 측면을 드러냅니다. 대화형 특성은 사용자가 시드 공간을 탐색하여 자신이 좋아하는 것을 발견한다는 것을 의미합니다.

창작 과정

사용자 요청 -> 알고리즘 철학 -> 구현

각 요청은 고유합니다. 프로세스에는 다음이 포함됩니다.

1. 사용자의 의도를 해석 - 추구하는 미학은 무엇입니까?
2. 컴퓨팅 접근 방식을 설명하는 알고리즘 철학 만들기(4~6문단)
3. 코드로 구현 - 이 철학을 표현하는 알고리즘을 구축합니다.
4. 적절한 매개변수 설계 - 무엇을 조정 가능해야 합니까?
5. 일치하는 UI 컨트롤 빌드 - 해당 매개변수에 대한 슬라이더/입력

상수:

• 인류학적 브랜딩(색상, 글꼴, 레이아웃)
• 시드 탐색(항상 존재)
• 자체 포함된 HTML 아티팩트

다른 모든 것은 가변적입니다:

• 알고리즘 자체
• 매개변수
• UI 컨트롤
• 시각적 결과

최상의 결과를 얻으려면 창의성을 신뢰하고 철학에 따라 구현하십시오.

자원

이 기술에는 유용한 템플릿과 문서가 포함되어 있습니다.

• templates/viewer.html: 모든 HTML 아티팩트에 대한 필수 시작 지점입니다.

  • 이것이 기초입니다. 정확한 구조와 인류애적인 브랜딩을 담고 있습니다.
  • 변경 없이 유지: 레이아웃 구조, 사이드바 구성, 인류학적 색상/글꼴, 시드 컨트롤, 작업 버튼
  • 교체: 매개변수 섹션의 p5.js 알고리즘, 매개변수 정의 및 UI 컨트롤
  • 파일의 광범위한 설명은 유지할 항목과 교체할 항목을 정확하게 표시합니다.

• templates/generator_template.js: p5.js 모범 사례 및 코드 구조 원칙에 대한 참조입니다.

  • 매개변수를 구성하고, 시드된 임의성을 사용하고, 클래스를 구조화하는 방법을 보여줍니다.
  • 패턴 메뉴가 아닙니다. 이러한 원칙을 사용하여 고유한 알고리즘을 구축하세요.
  • HTML 아티팩트에 알고리즘 인라인 포함(별도의.js 파일을 생성하지 않음)

중요 알림:

• 템플릿은 영감이 아닌 시작점입니다.
• 알고리즘은 독특한 것을 창조하는 곳입니다
• 흐름장의 예를 복사하지 마십시오. 철학이 요구하는 것을 구축하십시오.
• 하지만 템플릿의 정확한 UI 구조와 Anthropic 브랜딩을 유지하세요.

리소스 파일

라이센스.txt

LICENSE.txt 다운로드

바이너리 리소스

템플릿/generator_template.js

템플릿 다운로드/generator_template.js

바이너리 리소스

템플릿/viewer.html

템플릿 다운로드/viewer.html

바이너리 리소스

GitHub에서 보기

GitHub에서 보기