p5.js kullanarak algoritmik sanat oluşturmak için seeded randomness ve interaktif parametre keşfi sağlar. Kod ile sanat yaratma, generatif sanat, akış alanları veya parçacık sistemleri gibi konularda kullanılır. Telif hakkı ihlalini önlemek için mevcut sanatçıların eserlerini kopyalamak yerine orijinal algoritmik sanat üretin.
cd ~/.claude/skills
git clone https://github.com/smartnews/claude-skills.git claude-skillsmkdir -p ~/.claude/skills/algorithmic-art
curl -fsSL https://raw.githubusercontent.com/smartnews/claude-skills/HEAD/algorithmic-art/SKILL.md \
-o ~/.claude/skills/algorithmic-art/SKILL.mdAlgoritimik felsefeler, hesaplamalı estetik hareketleridir ve daha sonra kod aracılığıyla ifade edilirler. .md dosyaları (felsefe), .html dosyaları (etkileşimli görüntüleyici) ve .js dosyaları (üretken algoritmalar) çıktısı verir.
Bu iki adımda gerçekleşir:
.md dosyası).html + .js dosyaları)Öncelikle bu görevi üstlenin:
Başlamak için, şu yollarla yorumlanacak bir ALGORİTİMİK FELSEFESİ (statik görüntüler veya şablonlar değil) oluşturun:
Bu yaklaşımı düşünün:
Felsefe şunları vurgulamamalıdır: Algoritimik ifade. Ortaya çıkan davranış. Hesaplamalı güzellik. Tohumlanmış varyasyon.
Hareketi adlandırın (1-2 sözcük): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
Felsefesini açıklayın (4-6 paragraf - özlü ama tam):
ALGORİTİMİK özünü yakalamak için, bu felsefenin şu şekillerde nasıl tezahür ettiğini ifade edin:
KRİTİK YÖNERGELER:
Felsefe, sonraki versiyonu fikirleri algoritimik olarak, statik görüntüler aracılığıyla DEĞİL ifade etmeye yönlendirilmelidir. Güzellik son karede değil, süreçte yaşar.
"Organic Turbulence" Felsefe: Doğal yasa tarafından sınırlandırılan kaos, düzensizlikten ortaya çıkan düzen. Algoritimik ifade: Katmanlı Perlin gürültüsü tarafından yönlendirilen akış alanları. Vektör kuvvetlerini takip eden binlerce parçacık, izleri organik yoğunluk haritalarında birikim oluşturur. Birden fazla gürültü oktavı türbülanslı bölgeler ve sessiz alanlar oluşturur. Renk hız ve yoğunluktan ortaya çıkar - hızlı parçacıklar parlak yanıp söner, yavaş olanlar gölgeye solup giderler. Algoritma dengeye ulaşana kadar çalışır - her parametrenin hesaplamalı estetik ustası tarafından sayısız iterasyon yoluyla iyileştirildiği titizlikle ayarlanmış bir denge.
"Quantum Harmonics" Felsefe: Dalga benzeri girişim desenleri sergileyen ayrık varlıklar. Algoritimik ifade: Bir ızgaraya başlatılan parçacıklar, her biri sinüs dalgaları aracılığıyla gelişen bir faz değeri taşır. Parçacıklar yakın olduğunda, fazları müdahale eder - yapıcı müdahale parlak düğümler oluşturur, yıkıcı müdahale boşluk oluşturur. Basit harmonik hareket karmaşık ortaya çıkan mandalaları oluşturur. Titiz frekans kalibrasyonunun sonucu, her oran rezonant güzellik üretmek için dikkatle seçilmiştir.
"Recursive Whispers" Felsefe: Ölçekler arasında kendine benzerlik, sonlu alanda sonsuz derinlik. Algoritimik ifade: Öz olarak alt bölünen dallanma yapıları. Her dal hafifçe rastgeleleştirilmiş ama altın oranlar tarafından sınırlandırılmış. L-sistemler veya öz olarak alt bölünme ağaç benzeri formlar oluşturur ve bunlar hem matematiksel hem organik hissederler. İnce gürültü pertürbasyonları mükemmel simetri kırılır. Her dallanma açısı derin matematiksel keşfin ürünüdür.
"Field Dynamics" Felsefe: Görünmez kuvvetler, madde üzerindeki etkilerinden dolayı görünür hale gelir. Algoritimik ifade: Matematiksel fonksiyonlardan veya gürültüden oluşturulan vektör alanları. Kenarlardan doğan parçacıklar, alan çizgilerini takip ederler, denge noktasına veya sınırlara ulaştıklarında ölürler. Birden fazla alan parçacıkları çekebilir, itebilir veya döndürebilir. Görselleştirme sadece izleri gösterir - görünmez kuvvetlerin hayalet benzeri kanıtı. Kuvvet dengesi aracılığıyla titizlikle koreografiye edilmiş hesaplamalı bir dans.
"Stochastic Crystallization" Felsefe: Rastgele süreçler, sıralı yapılara kristalize olur. Algoritimik ifade: Rastgeleleştirilmiş çember paketlemesi veya Voronoi tessellasyonu. Rastgele noktalarla başlayın, onları rahatlatma algoritmaları aracılığıyla gelişmeye bırakın. Hücreler dengeye ulaşana kadar birbirinden itilir. Renk hücre boyutuna, komşu sayısına veya merkeze olan mesafeye bağlıdır. Ortaya çıkan organik döşeme hem rastgele hem kaçınılmaz hissettirir. Her tohum benzersiz kristal güzellik üretir - master seviyesi üretken algoritmanın işareti.
Bunlar sıklaştırılmış örneklerdir. Gerçek algoritimik felsefesi 4-6 büyük paragraf olmalıdır.
Algoritimik felsefesi 4-6 paragraf uzunluğunda olmalıdır. Bunu amaçlanan vizyonu bir araya getiren şiirsel hesaplamalı felsefesiyle doldurun. Aynı noktaları tekrar etmekten kaçının. Bu algoritimik felsefesini .md dosyası olarak çıktı alın.
KRİTİK ADIM: Algoritmayı uygulamadan önce, orijinal istekten ince kavramsal ipliği belirleyin.
TEMEL İLKE: Konsept, orijinal istekten gelen ince, niş bir referanstır ve algoritmanın içine gömülüdür - hiç zaman literal değildir, daima sofistiktir. Konuya aşina olan biri bunu sezgisel olarak hissetmelidir, diğerleri ise yalnızca master seviyesi bir üretken bileşim yaşarlar. Algoritimik felsefesi hesaplamalı dilini sağlar. Çıkarılan konsept ruhunu sağlar - parametreler, davranışlar ve ortaya çıkış desenleri içinde görünmez bir şekilde dokunmuş sessiz kavramsal DNA.
Bu ÇOK ÖNEMLİDİR: Referans o kadar rafine edilmelidir ki, eseri tanıtmadan derinliğini arttırır. Başka bir şarkıyı algoritimik harmoni aracılığıyla alıntılayan bir caz müzisyeni gibi düşünün - yalnızca bilenler yakalayacak, ama herkes üretken güzelliği takdir edecektir.
Felsefesi VE kavramsal çerçevesi belirlendikten sonra, bunu kod aracılığıyla ifade edin. Devam etmeden önce düşüncelerinizi toplamak için duraksamak. Yalnızca aşağıda oluşturulan algoritimik felsefesini ve talimatları kullanın.
KRİTİK: HERHANGİ bir HTML yazmadan ÖNCE:
templates/viewer.html Okuma aracı kullanarakKaçının:
Bu uygulamaları takip edin:
Şablon temeldir. Bunu üzerinde oluşturun, yeniden inşa etmeyin.
Algoritimik felsefesini temel alarak, yaşayan ve soluk alan galeri kalitesi hesaplamalı sanat oluşturmak için.
Tohumlanmış Rastgelelik (Art Blocks Deseni):
// HER ZAMAN üretilebilirlik için bir tohum kullan
let seed = 12345; // veya kullanıcı girişinden karma
randomSeed(seed);
noiseSeed(seed);
Parametre Yapısı - FELSEFESİNİ TAKIP EDİN:
Algoritimik felsefesinden doğal olarak ortaya çıkan parametreleri oluşturmak için şunu düşünün: "Bu sistemin hangi nitelikleri ayarlanabilir?"
let params = {
seed: 12345, // Her zaman üretilebilirlik için tohum ekleyin
// renkler
// ALGORİTMANIZI kontrol eden parametreleri ekleyin:
// - Nicelikler (kaç tane?)
// - Ölçekler (ne kadar büyük? ne kadar hızlı?)
// - Olasılıklar (ne kadar muhtemel?)
// - Oranlar (hangi oranlar?)
// - Açılar (hangi yön?)
// - Eşikler (davranış ne zaman değişir?)
};
Etkili parametreler tasarlamak için, sistemin "hangi desen kullanmalıyım?" yerine ayarlanabilir olması gereken özelliklere odaklanın.
Temel Algoritma - FELSEFESİNİ İFADE EDİN:
KRİTİK: Algoritimik felsefesi ne inşa edeceğinizi dikte etmelidir.
Felsefesini kod aracılığıyla ifade etmek için "hangi deseni kullanmalıyım?" düşünmek yerine "bu felsefesini kod aracılığıyla nasıl ifade edebilirim?" düşünün.
Felsefesi organik ortaya çıkış hakkındaysa, şunları kullanmayı düşünün:
Felsefesi matematiksel güzellik hakkındaysa, şunları kullanmayı düşünün:
Felsefesi kontrollü kaos hakkındaysa, şunları kullanmayı düşünün:
Algoritma felsefesinden akması gerekir, seçenek menüsünden değil.
Uygulamayı yönlendirmek için, kavramsal özün yaratıcı ve orijinal seçimleri bilgilendirmesine izin verin. Bu özel istek için vizyonu ifade eden bir şeyler oluşturun.
Kanvas Kurulumu: Standart p5.js yapısı:
function setup() {
createCanvas(1200, 1200);
// Sisteminizi başlatın
}
function draw() {
// Üretken algoritmanız
// Statik (noLoop) veya animasyonlu olabilir
}
KRİTİK: Ustalığı başarmak için, master seviyesi bir üretken sanatçı tarafından sayısız iterasyon aracılığıyla ortaya çıkmış gibi görünen algoritmalar oluşturun. Her parametreyi dikkatle ayarlayın. Her deseni amaçlı olarak ortaya çıkacak şekilde sağlayın. Bu rastgele gürültü DEĞİLDİR - bu KONTROLLÜ KAOS'tur, derin uzmanlık aracılığıyla iyileştirilmiştir.
Çıktısı:
templates/viewer.html öğesinden oluşturulan kendi içinde barındırılan etkileşimli üretken sanat (ADIM 0 ve sonraki bölüme bakın)HTML yapıtı her şeyi içerir: p5.js (CDN'den), algoritma, parametre kontrolleri ve UI - hepsi bir dosyada, claude.ai yapıtlarında veya herhangi bir tarayıcıda hemen çalışabilir. Sıfırdan değil, şablon dosyasından başlayın.
HATIRLATMA: templates/viewer.html zaten okunmuş olmalıdır (bkz. ADIM 0). Bu dosyayı başlangıç noktası olarak kullanın.
Üretken sanatı keşfetmeye izin vermek için, kendi içinde barındırılan tek bir HTML yapıtı oluşturun. Bu yapıtı claude.ai veya herhangi bir tarayıcıda hemen çalışmasını sağlayın - kurulum gerekli değil. Her şeyi satır içine gömün.
templates/viewer.html dosyası temeldir. Gerekli tam yapısı ve stil içerir.
SABİT (tam olarak gösterildiği gibi her zaman ekleyin):
DEĞİŞKEN (her sanat eseri için özelleştirin):
Her sanat eseri benzersiz parametrelere ve algoritmaya sahip olmalıdır! Sabit parçalar tutarlı UX sağlar - diğer her şey benzersiz vizyonu ifade eder.
1. Parametre Kontrolleri
2. Tohum Gezintisi
3. Tek Yapı Yapısı
<!DOCTYPE html>
<html>
<head>
<!-- p5.js CDN'den - her zaman mevcut -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* Tüm stil satır içi - temiz, minimal */
/* Kanvas üstte, kontroller aşağıda */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- Tüm parametre kontrolleri -->
</div>
<script>
// TÜM p5.js kodu satır içi burada
// Parametre nesneleri, sınıflar, işlevler
// setup() ve draw()
// UI işleyicileri
// Tamamen kendi içinde barındırılmış
</script>
</body>
</html>
KRİTİK: Bu tek bir yapıtdır. Dış dosya yok, hiçbir import (p5.js CDN hariç). Her şey satır içi.
4. Uygulama Ayrıntıları - KENAR ÇUBUĞU OLUŞTURUN
Kenar çubuğu yapısı:
1. Tohum (SABİT) - Tam olarak gösterildiği gibi her zaman ekleyin:
2. Parametreler (DEĞİŞKEN) - Sanat için kontroller oluşturun:
<div class="control-group">
<label>Parameter Adı</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
Parametreler kadar kontrol grubu div'ler ekleyin.
3. Renkler (İSTEĞE BAĞLI/DEĞİŞKEN) - Sanat renk ayarlamalarına ihtiyaç duyarsa ekleyin:
4. Eylemler (SABİT) - Tam olarak gösterildiği gibi her zaman ekleyin:
Gereksinimler:
HTML yapıtı hemen çalışır:
Yapı varsayılan olarak tohum gezintisi içerir (önceki/sonraki/rastgele düğmeleri), kullanıcıların birden fazla dosya oluşturmadan varyasyonları keşfetmelerine izin verir. Kullanıcı belirli varyasyonları vurgulamak isterse:
Bu, aynı plakadan dizi yazdırma oluşturmak gibi - algoritma tutarlı, ama her tohum potansiyelinin farklı yönlerini ortaya çıkarır. Etkileşimli doğası, kullanıcıların tohum alanını keşfederek kendi favori seçimlerini keşfetmelerine imkan sağlar.
Kullanıcı isteği → Algoritimik felsefesi → Uygulama
Her istek benzersizdir. Süreç şunları içerir:
Herhangi bir yaratıcı çalışmaya başlamadan önce bunu mutlaka kullanın - feature oluştururken, component inşa ederken, functionality eklerken veya davranış değiştirirken. Kullanıcı niyetini, gereksinimleri ve tasarımı implementation öncesinde araştırır.
Uygulama tamamlandığında, tüm testler geçtiğinde ve çalışmanızı nasıl entegre edeceğinize karar vermeniz gerektiğinde kullanın - merge, PR veya cleanup seçeneklerini sunarak geliştirme sürecinin tamamlanmasını rehberlik eder.
Kod incelemesi geri bildirimi alırken, önerileri uygulamadan önce kullanın; özellikle geri bildirim belirsiz veya teknik olarak şüpheli görünüyorsa - performatif anlaşmadan veya körü körüne uygulamadan ziyade teknik titizlik ve doğrulama gerekir.
Görevleri tamamlarken, büyük özellikleri hayata geçirirken veya merge etmeden önce çalışmanın gereksinimleri karşıladığını doğrulamak için kullanın.
Yeni bir feature üzerinde çalışmaya başlarken veya implementasyon planını yürütmeden önce kullanın - native araçlar veya git worktree fallback aracılığıyla izole edilmiş bir workspace sağlar.
Herhangi bir konuşma başlatırken kullanın - skill'lerin nasıl bulunacağını ve kullanılacağını belirler, clarification soruları da dahil olmak üzere HERHANGİ bir yanıt vermeden önce skill invocation gerektirir.