Algorithmic Art Skill

p5.jsを使ったジェネラティブアートを生成するスキルです。

概要

アルゴリズムとランダム性を組み合わせて、ユニークな視覚芸術を創造します。

主な機能

• 生成的デザイン: パターン、フラクタル、パーティクル

• シード値: 再現可能なランダムアート

• アニメーション: 動的な視覚効果

• インタラクティブ: マウス・キーボード入力

• エクスポート: PNG、SVG、GIF

使用方法

p5.jsで以下のアートを生成：

• タイプ: パーティクルシステム
• 色: 青系グラデーション
• アニメーション: あり

生成例

フローフィールド

let particles = []; let flowfield; let cols, rows; let scale = 20;

function setup() { createCanvas(800, 600); cols = floor(width / scale); rows = floor(height / scale); flowfield = new Array(cols * rows);

for (let i = 0; i < 1000; i++) { particles[i] = new Particle(); }

background(255); }

function draw() { let yoff = 0; for (let y = 0; y < rows; y++) { let xoff = 0; for (let x = 0; x < cols; x++) { let index = x + y * cols; let angle = noise(xoff, yoff, frameCount * 0.001) * TWO_PI * 4; let v = p5.Vector.fromAngle(angle); v.setMag(1); flowfield[index] = v; xoff += 0.1; } yoff += 0.1; }

for (let particle of particles) { particle.follow(flowfield); particle.update(); particle.edges(); particle.show(); } }

class Particle { constructor() { this.pos = createVector(random(width), random(height)); this.vel = createVector(0, 0); this.acc = createVector(0, 0); this.maxspeed = 4; }

follow(vectors) { let x = floor(this.pos.x / scale); let y = floor(this.pos.y / scale); let index = x + y * cols; let force = vectors[index]; this.applyForce(force); }

applyForce(force) { this.acc.add(force); }

update() { this.vel.add(this.acc); this.vel.limit(this.maxspeed); this.pos.add(this.vel); this.acc.mult(0); }

show() { stroke(0, 5); strokeWeight(1); point(this.pos.x, this.pos.y); }

edges() { if (this.pos.x > width) this.pos.x = 0; if (this.pos.x < 0) this.pos.x = width; if (this.pos.y > height) this.pos.y = 0; if (this.pos.y < 0) this.pos.y = height; } }

再帰的なフラクタルツリー

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

function draw() { background(255); translate(width / 2, height); stroke(0); branch(100); }

function branch(len) { line(0, 0, 0, -len); translate(0, -len);

if (len > 4) { push(); rotate(PI / 4); branch(len * 0.67); pop();

push();
rotate(-PI / 4);
branch(len * 0.67);
pop();

} }

アートスタイル

• フローフィールド: パーリンノイズベースの流線

• フラクタル: 再帰的なパターン

• パーティクルシステム: 動的な粒子

• 幾何学パターン: 規則的な図形

• オーガニック: 自然を模倣

バージョン情報

• スキルバージョン: 1.0.0

• 最終更新: 2025-01-22