algorithmic-art

name	algorithmic_art
description	p5.js ile generative art, flow fields ve interactive visuals oluşturma rehberi.

🎨 Algorithmic Art

p5.js ile generative art rehberi.

---

📋 Temel Yapı

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

function draw() {
  // Animation loop
}

---

🔧 Temel Şekiller

// Çizgi
line(x1, y1, x2, y2);

// Dikdörtgen
rect(x, y, width, height);

// Elips
ellipse(x, y, width, height);

// Nokta
point(x, y);

// Renkler
fill(r, g, b, alpha);
stroke(r, g, b);
noFill();
noStroke();

---

🌀 Flow Fields

let flowField = [];
let cols, rows;
let scale = 20;

function setup() {
  createCanvas(800, 600);
  cols = floor(width / scale);
  rows = floor(height / scale);
  
  // Create flow field
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let angle = noise(x * 0.1, y * 0.1) * TWO_PI;
      flowField.push(p5.Vector.fromAngle(angle));
    }
  }
}

---

✨ Particle Systems

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
  }
  
  update() {
    this.vel.add(this.acc);
    this.vel.limit(4);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
  
  show() {
    point(this.pos.x, this.pos.y);
  }
}

---

🎲 Seeded Randomness

// Reproducible randomness
randomSeed(42);
noiseSeed(42);

// Perlin noise
let n = noise(x, y);

// Random range
let r = random(0, 100);

---

🖱️ Interactivity

function mouseMoved() {
  // Mouse position: mouseX, mouseY
}

function mousePressed() {
  // Click handler
}

function keyPressed() {
  if (key === 's') {
    saveCanvas('artwork', 'png');
  }
}

---

💾 High-Res Export (Print-Ready)

// Press 'S' to save high-res
function keyPressed() {
  if (key === 's') {
    pixelDensity(4); // 4x resolution for print
    saveCanvas('artwork_' + frameCount, 'png');
    pixelDensity(1); // Reset for performance
  }
}

🚀 Performance (Shaders)

For pixel-level manipulation, use GLSL shaders in WEBGL mode instead of pixels[] array for 100x speedup.

---

Algorithmic Art v1.1 - Enhanced

🔄 Workflow

Kaynak: Generative Design Process

Aşama 1: Concept & Rules

• Define Theme: e.g., "Organic Decay", "Geometric Order".
• Set Constraints: Color palette (max 3 colors), Aspect ratio.
• Choose Algorithm: Flow fields, Cellular Automata, Recursion.

Aşama 2: Implementation (Sketching)

• Setup: Configure canvas and basic loop.
• Primitives: Draw static shapes to test composition.
• Dynamics: Add movement/change (using draw() loop).

Aşama 3: Generative Logic

• Introduce Randomness: Use random() inside controlled bounds.
• Apply Noise: Replace random with noise() for natural flow.
• Interaction: Couple variables with mouse/keyboard inputs.

Aşama 4: Tuning & Curation

• Parameterize: Create variables for scale, speed, density.
• Seed Testing: Test different randomSeed() values.
• Selection: Curate the best outputs.

Kontrol Noktaları

Aşama	Doğrulama
1	Konsept ve kısıtlamalar net
2	Temel döngü hatasız çalışıyor
3	Çıktı her çalıştırıldığında varyasyon gösteriyor
4	Performans stabil (>30 FPS)