🎯

algorithmic-art

🎯Skill

from forever-efficient/pitfal-solutions-website

VibeIndex|
What it does

Generates algorithmic art by creating unique generative art philosophies and expressing them through p5.js code with seeded randomness and interactive parameters.

πŸ“¦

Part of

forever-efficient/pitfal-solutions-website(27 items)

algorithmic-art

Installation

pnpmRun with pnpm
pnpm install
pnpmRun with pnpm
pnpm dev
πŸ“– Extracted from docs: forever-efficient/pitfal-solutions-website
2Installs
-
AddedFeb 4, 2026

Skill Details

SKILL.md

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

Overview

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:

  1. Algorithmic Philosophy Creation (.md file)
  2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:

  • Computational processes, emergent behavior, mathematical beauty
  • Seeded randomness, noise fields, organic systems
  • Particles, flows, fields, forces
  • Parametric variation and controlled chaos

THE CRITICAL UNDERSTANDING

  • What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
  • What is created: An algorithmic philosophy/generative aesthetic movement.
  • What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:

  • Write a manifesto for a generative art movement
  • The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

Name the movement (1-2 words): "Organic Turbulence" / "Chromatic Silence" / "Metabolist Dreams"

Articulate the philosophy (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:

  • Computational processes and mathematical relationships?
  • Noise functions and randomness patterns?
  • Particle behaviors and field dynamics?
  • Temporal evolution and system states?
  • Parametric variation and emergent complexity?

CRITICAL GUIDELINES:

  • Avoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
  • Emphasize craftsmanship REPEATEDLY: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
  • Leave creative space: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

ESSENTIAL PRINCIPLES

  • ALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code
  • PROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
  • PARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
  • ARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically - provide creative implementation room
  • PURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness
  • EXPERT CRAFTSMANSHIP: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

TECHNICAL REQUIREMENTS

Seeded Randomness (Art Blocks Pattern):

```javascript

// ALWAYS use a seed for reproducibility

let seed = 12345; // or hash from user input

randomSeed(seed);

noiseSeed(seed);

```

Core Algorithm - EXPRESS THE PHILOSOPHY:

CRITICAL: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

Canvas Setup: Standard p5.js structure:

```javascript

function setup() {

createCanvas(1200, 1200);

// Initialize your system

}

function draw() {

// Your generative algorithm

// Can be static (noLoop) or animated

}

```

CRAFTSMANSHIP REQUIREMENTS

CRITICAL: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

  • Balance: Complexity without visual noise, order without rigidity
  • Color Harmony: Thoughtful palettes, not random RGB values
  • Composition: Even in randomness, maintain visual hierarchy and flow
  • Performance: Smooth execution, optimized for real-time if animated
  • Reproducibility: Same seed ALWAYS produces identical output

OUTPUT FORMAT

Output:

  1. Algorithmic Philosophy - As markdown or text explaining the generative aesthetic
  2. Single HTML Artifact - Self-contained interactive generative art with p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file

More from this repository10