# Algorithmic Art

> 🎨 Algorithmic Art

- Skill: `vuralserhat86/algorithmic-art` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vuralserhat86/algorithmic-art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vuralserhat86/algorithmic-art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: vuralserhat86 (https://skillmd.com/u/vuralserhat86)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vuralserhat86/algorithmic-art

---


# 🎨 Algorithmic Art

> p5.js ile generative art rehberi.

---

## 📋 Temel Yapı

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

function draw() {
  // Animation loop
}
```

---

## 🔧 Temel Şekiller

```javascript
// Ç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

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

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

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

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

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

---

## 🖱️ Interactivity

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

function mousePressed() {
  // Click handler
}

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

---

### 💾 High-Res Export (Print-Ready)
```javascript
// 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](https://www.illustration.app/blog/the-generative-design-process-from-ai-output-to-polished-visual)

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