🎨 Algorithmic Art Skill

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

Agent Skills: 🎨 Algorithmic Art

Install this agent skill to your local

Skill Files