Paper.js ile Vektör Grafik Sanatı: Başlangıç Rehberi

Yaratıcı Kodlama Nedir?

Yaratıcı kodlama (Creative Coding), kodlama becerilerini estetik ve sanatsal bir amaç için kullanma pratiğidir.

Geleneksel Programlama vs Yaratıcı Kodlama

Neden Yaratıcı Kodlama?

1. Sonsuz Olasılıklar: Algoritmaların gücüyle benzersiz eserler
2. Deneysellik: Hızlı denemeler ve iterasyonlar
3. Yeni Beceri Seti: Hem sanat hem teknoloji
4. İnteraktivite: Kullanıcı etkileşimli projeler
5. Generative: Sistem kendi başına eser üretir

Başlamak İçin Gerekenler

Donanım

Minimum:

• Bilgisayar (Mac, Windows, Linux)
• 4GB RAM
• Internet bağlantısı

Önerilen:

• 8GB+ RAM
• Grafik tablet (opsiyonel ama faydalı)
• İkinci ekran (çok yardımcı olur)

Yazılım ve Araçlar

1. Processing (Önerilen Başlangıç)

Neden Processing?

• Sanatçılar için tasarlandı
• Basit syntax
• Anında görsel sonuç
• Büyük topluluk
• Ücretsiz ve açık kaynak

Kurulum:

1. processing.org → Download
2. Sıkıştırılmış dosyayı aç
3. Processing.app'i çalıştır

İlk Programınız:

void setup() {
  size(800, 600);  // 800x600 pencere
  background(255);  // Beyaz arkaplan
}

void draw() {
  circle(mouseX, mouseY, 50);  // Mouse'u takip eden daire
}

2. p5.js (Web İçin)

Neden p5.js?

• Tarayıcıda çalışır
• Anında paylaşım
• JavaScript bilgisi kazandırır
• Online editör var

Başlangıç:

• editor.p5js.org adresine git
• Kod yaz → Play → Görsel sonuç

İlk Programınız:

  var circle = new Path.Circle({
      center: view.center,
      radius: 50,
      fillColor: 'red'
  });

## asddasd

function setup() {
  createCanvas(800, 600);
  background(220);
}

function draw() {
  fill(255, 0, 0);  // Kırmızı
  circle(mouseX, mouseY, 50);
}

3. Paper.js (Vektör Grafik)

Özellikler:

• Vektör tabanlı
• Yüksek çözünürlük
• Animasyon desteği

Temel Kavramlar

1. Koordinat Sistemi (Canvas)

Processing/p5.js canvas'ında:

• Orijin (0,0): Sol üst köşe
• X ekseni: Sağa doğru artar
• Y ekseni: Aşağı doğru artar (Dikkat! Matematikten farklı)

(0,0)  ──────────► X
  │
  │
  │
  ▼
  Y

2. Şekiller Çizme

Daire:

circle(x, y, diameter);
// Örnek:
circle(400, 300, 100);  // Merkez (400,300), çap 100

Dikdörtgen:

rect(x, y, width, height);
// Örnek:
rect(100, 100, 200, 150);  // (100,100)'den başlayan 200x150 dikdörtgen

Çizgi:

line(x1, y1, x2, y2);
// Örnek:
line(0, 0, 800, 600);  // Sol üstten sağ alta çapraz

Üçgen:

triangle(x1, y1, x2, y2, x3, y3);
// Örnek:
triangle(400, 100, 300, 400, 500, 400);

3. Renkler

RGB (Red, Green, Blue):

fill(255, 0, 0);     // Kırmızı
fill(0, 255, 0);     // Yeşil
fill(0, 0, 255);     // Mavi
fill(255, 255, 0);   // Sarı (Kırmızı + Yeşil)

Alpha (Şeffaflık):

fill(255, 0, 0, 128);  // Yarı şeffaf kırmızı (0-255)

Stroke (Çizgi Rengi):

stroke(0);           // Siyah kontur
strokeWeight(5);     // 5 pixel kalınlık
noStroke();          // Kontursuz

4. Setup ve Draw

setup(): Bir kere çalışır

function setup() {
  createCanvas(800, 600);  // Canvas oluştur
  background(255);          // Arkaplanı beyaz yap
  // İlk ayarlar burada
}

draw(): Sürekli döngü (saniyede 60 kere)

function draw() {
  // Her frame'de çalışan kod
  circle(mouseX, mouseY, 50);
}

İlk Projeler

Proje 1: Rastgele Renkli Daireler

function setup() {
  createCanvas(800, 600);
  background(255);
}

function draw() {
  // Rastgele konum
  let x = random(width);
  let y = random(height);

  // Rastgele renk
  let r = random(255);
  let g = random(255);
  let b = random(255);

  // Rastgele boyut
  let size = random(10, 100);

  fill(r, g, b, 100);
  noStroke();
  circle(x, y, size);
}

Öğrendiklerimiz:

• random() fonksiyonu
• Şeffaflık kullanımı
• Sürekli çalışan animasyon

Proje 2: Mouse ile Çizim

function setup() {
  createCanvas(800, 600);
  background(220);
}

function draw() {
  // Mouse basılıysa çiz
  if (mouseIsPressed) {
    stroke(0);
    strokeWeight(10);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Öğrendiklerimiz:

• mouseIsPressed kontrolü
• pmouseX, pmouseY (önceki konum)
• Çizgi çizme

Proje 3: Geometrik Desenler

function setup() {
  createCanvas(800, 800);
  background(255);
  noLoop();  // draw() sadece bir kere çalışsın
}

function draw() {
  let spacing = 50;

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      // Her hücrede rastgele bir şekil
      let choice = random(1);

      if (choice < 0.33) {
        // Daire
        circle(x + spacing/2, y + spacing/2, spacing/2);
      } else if (choice < 0.66) {
        // Kare
        rect(x, y, spacing, spacing);
      } else {
        // Çizgi
        line(x, y, x + spacing, y + spacing);
      }
    }
  }
}

Öğrendiklerimiz:

• İç içe döngüler
• Grid oluşturma
• Rastgele seçim

İleri Seviye Konular

Perlin Noise (Doğal Rastgelelik)

Problem: random() çok keskin değişiklikler yapar Çözüm: noise() daha pürüzsüz, organik değişiklikler

let xoff = 0;

function draw() {
  background(220);

  for (let x = 0; x < width; x++) {
    let y = noise(xoff) * height;
    circle(x, y, 5);
    xoff += 0.01;
  }
}

Parçacık Sistemleri

let particles = [];

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(0, 10);  // Hafif fade efekti

  // Yeni parçacık ekle
  particles.push(new Particle(mouseX, mouseY));

  // Her parçacığı güncelle ve çiz
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].show();

    // Ölmüş parçacıkları temizle
    if (particles[i].finished()) {
      particles.splice(i, 1);
    }
  }
}

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = random(-2, 2);
    this.vy = random(-5, -1);
    this.alpha = 255;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.alpha -= 5;
  }

  show() {
    noStroke();
    fill(255, this.alpha);
    circle(this.x, this.y, 8);
  }

  finished() {
    return this.alpha < 0;
  }
}

Fraktallar

Sierpinski Triangle:

function setup() {
  createCanvas(800, 800);
  background(255);
  noLoop();
}

function draw() {
  sierpinski(0, height, width, height, width/2, 0, 6);
}

function sierpinski(x1, y1, x2, y2, x3, y3, depth) {
  if (depth == 0) {
    triangle(x1, y1, x2, y2, x3, y3);
  } else {
    let x12 = (x1 + x2) / 2;
    let y12 = (y1 + y2) / 2;
    let x23 = (x2 + x3) / 2;
    let y23 = (y2 + y3) / 2;
    let x31 = (x3 + x1) / 2;
    let y31 = (y3 + y1) / 2;

    sierpinski(x1, y1, x12, y12, x31, y31, depth - 1);
    sierpinski(x12, y12, x2, y2, x23, y23, depth - 1);
    sierpinski(x31, y31, x23, y23, x3, y3, depth - 1);
  }
}

Öğrenme Kaynakları

Online Kurslar

1. The Coding Train (YouTube)

   • Daniel Shiffman
   • p5.js tutorials
   • Çok eğlenceli anlatım

2. Domestika

   • Julien Gachadoat kursu
   • Ücretli ama kaliteli

3. Creative Coding Essentials

   • Skillshare
   • Bruno Imbrizi

Kitaplar

1. "The Nature of Code" - Daniel Shiffman

   • Ücretsiz online
   • Fizik simülasyonları

2. "Generative Design" - Hartmut Bohnacker

   • Processing örnekleri
   • İnteraktif website

3. "Form+Code" - Casey Reas

   • Sanat ve kod kesişimi

Topluluklar

1. OpenProcessing.org

   • Kod paylaşımı
   • Remix yapabilme

2. r/generative (Reddit)

   • Aktif topluluk
   • Feedback alabilme

3. Creative Coding Discord sunucuları

Pratik İpuçları

1. Her Gün Pratik Yapın

Daily Sketch Challenge:

• Her gün 30-60 dakika
• Küçük projeler
• Mükemmel olması gerekmez

2. Başkalarının Kodunu İnceleyin

Öğrenme Yöntemi:

1. Beğendiğiniz bir projeyi bulun
2. Kodu indirin
3. Satır satır okuyun
4. Parametreleri değiştirin
5. Kendinize göre customize edin

3. Matematik Korkusuna Kapılmayın

Gereken Matematik:

• Toplama, çıkarma, çarpma, bölme ✓
• Temel trigonometri (sin, cos) - Öğrenilebilir!
• Rastgelelik - Kolay!

Formüllere ihtiyacınız yok, konseptleri anlayın.

4. Debug Etme Teknikleri

print() ile debug:

function draw() {
  let x = mouseX;
  println(x);  // Konsola yazdır, ne olduğunu gör
  circle(x, 300, 50);
}

Görsel debug:

// Değerleri ekranda göster
text("X: " + mouseX, 10, 20);
text("Y: " + mouseY, 10, 40);

5. Save ve Export

Statik Görsel Kaydetme:

function keyPressed() {
  if (key == 's') {
    save('myDrawing.png');
  }
}

GIF Kaydetme:

• p5.js için: ccapture.js library

Sonraki Adımlar

Seviye 1: Temel

✓ Şekiller çizme ✓ Renkler ✓ Mouse/Keyboard interaksiyonu ✓ Basit animasyonlar

Seviye 2: Orta

• Perlin noise
• Parçacık sistemleri
• Vektör matematiği
• Object-oriented programming

Seviye 3: İleri

• 3D (WebGL)
• Shaderlar (GLSL)
• Fizik motorları
• Ses ile görselleştirme

Motivasyon ve Zihniyet

"Kötü" Kod Sorun Değil

Yaratıcı kodlamada:

• Performans önemli değil (genellikle)
• Clean code kuralları gevşek
• Hızlı deneme > Mükemmel kod

Paylaşmaktan Çekinmeyin

• Sosyal medyada paylaşın
• Feedback alın
• Diğer sanatçılarla bağlantı kurun

Kendinizi Diğerleriyle Kıyaslamayın

• Herkesin yolculuğu farklı
• İlerlemeye odaklanın, mükemmeliyete değil

Sonuç

Yaratıcı kodlama, sanat ve teknolojinin güçlü birleşimidir.

Başlamak için:

1. Processing veya p5.js indirin
2. İlk basit projeyi yapın
3. Her gün biraz pratik yapın
4. Toplulukla bağlantı kurun

Unutmayın:

• Herkes bir zamanlar başlangıç seviyesindeydi
• Hatalar öğrenmenin parçası
• En önemli şey yaratmaya devam etmek

Şimdi editörü açın ve ilk satırları yazmaya başlayın!

Sonraki Okuma: Generative Art Nedir?