Algorithmic Art

Name: Algorithmic Art
Rating: 4.5 (312 reviews)
Author: Anthropic

Design Tools

31K downloads

by Anthropic

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration for generative art and flow fields.

Installation

Install this skill using the Claude CLI:

claude skill install algorithmic-art

Usage

Once installed, this skill will automatically enhance your AI agent's capabilities in the design tools domain.

Example prompt:

"Use the Algorithmic Art skill to help me with my project"

Use Cases & Examples

Generative Art Creation

Create unique generative art pieces with p5.js

Generate flow field visualizations

function setup() {
  createCanvas(800, 800);
  randomSeed(12345); // Seeded randomness
  background(20);
}

function draw() {
  for (let i = 0; i < 100; i++) {
    let x = random(width);
    let y = random(height);
    let angle = noise(x * 0.01, y * 0.01) * TWO_PI * 2;
    
    stroke(255, 50);
    line(x, y, x + cos(angle) * 20, y + sin(angle) * 20);
  }
}

Interactive Visualizations

Build interactive art with parameter controls

Create adjustable particle systems

Flow Field Animations

Generate mesmerizing flow field patterns

Perlin noise-based flow fields

Prerequisites & Requirements

Dependencies

p5.jsv1.4+

JavaScript

Required

Optional

System Requirements

BrowserModern browsers with Canvas support+

Works Well With

Works

Canvas Design

29K

Anthropic

Create beautiful visual art in PNG and PDF documents using design philosophy for posters, art pieces, and static designs.

Design Tools

Combine with static design work

Works

Slack GIF Creator

20K

Anthropic

Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives.

Design Tools

Export animations as GIFs

Works

Canvas Design

29K

Anthropic

Create beautiful visual art in PNG and PDF documents using design philosophy for posters, art pieces, and static designs.

Design Tools

Combine with static design work

Works

Slack GIF Creator

20K

Anthropic

Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives.

Design Tools

Export animations as GIFs

Version History & Roadmap

Changelog

v1.3.0

Jan 10, 2024

•Added 3D rendering support
•New noise algorithms
•Improved performance for complex patterns

Advanced Configuration

CANVAS_SIZE

Canvas dimensions in pixels

Typenumber

Default800

Example

CANVAS_SIZE=1200

FRAME_RATE

Animation frame rate

Typenumber

Default60

Example

FRAME_RATE=30

Performance Metrics

Render Time

0seconds

Animation FPS

0fps

Improving

Declining

Stable

Troubleshooting Guide

Solution

Ensure p5.js is loaded before your sketch

Code Example

<!-- Load p5.js first -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script src="sketch.js"></script>

Documentation

For detailed documentation and advanced usage, visit the skill's repository or check the official Claude documentation.

Algorithmic Art

Installation

Usage

Use Cases & Examples

Generative Art Creation

Interactive Visualizations

Flow Field Animations

Prerequisites & Requirements

Dependencies

System Requirements

Related Skills

Works Well With

Canvas Design

Slack GIF Creator

Canvas Design

Slack GIF Creator

Version History & Roadmap

Changelog

Advanced Configuration

CANVAS_SIZE

FRAME_RATE

Performance Metrics

Render Time

Animation FPS

Troubleshooting Guide

Canvas not displaying

Solution

Animation is slow or choppy

Documentation

Use Cases & Examples

Generative Art Creation

Interactive Visualizations

Flow Field Animations

Prerequisites & Requirements

Dependencies

System Requirements

Related Skills

Works Well With

Canvas Design

Slack GIF Creator

Canvas Design

Slack GIF Creator

Version History & Roadmap

Changelog

Advanced Configuration

CANVAS_SIZE

FRAME_RATE

Performance Metrics

Render Time

Animation FPS

Troubleshooting Guide

Canvas not displaying

Solution

Animation is slow or choppy