algorithmic-art

name: algorithmic_art router_kit: FullStackKit description: p5.js ile generative art, flow fields ve interactive visuals oluşturma rehberi. metadata: skillport: category: design tags: [algorithmic art, architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, git, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, utilities, version control, workflow] - creative

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