Compétences algorithmic-art
🎨

algorithmic-art

Sûr 🌐 Accès réseau📁 Accès au système de fichiers⚙️ Commandes externes

Generative Kunst mit p5.js erstellen

Également disponible depuis: davila7,anthropics,ArtemisAI,Azeem-2,Cam10001110101

Mathematische Konzepte in atemberaubende visuelle Kunst verwandeln. Dieser Skill bietet geführte Vorlagen für die Erstellung reproduzierbarer generativer Kunstwerke mit Seed-basiertem Zufall und interaktiven Steuerungen.

Prend en charge: Claude Codex Code(CC)
📊 71 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "algorithmic-art". Generiere ein generatives Kunstwerk namens 'Kosmos-Staub' mit wirbelnden Partikelmustern

Résultat attendu:

  • HTML-Datei mit eingebettetem p5.js-Sketch
  • Seitenleisten-Steuerungen für Partikelanzahl, Geschwindigkeit und Farbmodus
  • Seed-basierter Zufall garantiert reproduzierbare Muster
  • Download-Schaltflächen für PNG- und SVG-Export
  • Responsiver Canvas, der sich an die Fenstergröße anpasst

Utilisation de "algorithmic-art". Generiere ein noise-basiertes Flussfeld, das organische Flussmuster erzeugt

Résultat attendu:

  • Perlin-Noise-Feld-Berechnung auf Partikelwinkel gemappt
  • Echtzeit-Partikelspur-Rendering
  • Seitenleisten-Steuerungen für Noise-Skalierung und Flussstärke
  • Flüssige Animation mit requestAnimationFrame
  • Speicherfunktion für Kunstwerke für High-Resolution-Export

Audit de sécurité

Sûr
v5 • 1/17/2026

This skill contains only documentation and templates for creating generative art with p5.js. No executable code, network calls, or file operations exist. Static findings are false positives from misidentified markdown syntax and metadata references.

2
Fichiers analysés
376
Lignes analysées
3
résultats
5
Total des audits

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
31
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Einzigartige Kunstwerke erstellen

Generiere einzigartige visuelle Stücke mit mathematischen Algorithmen und Seed-basiertem Zufall für Reproduzierbarkeit.

Visualisierungen erstellen

Erstelle interaktive Datenvisualisierungen und generative Kunstinstallationen mit anpassbaren Parametern.

Muster prototyperen

Prototypisiere schnell prozedurale Muster für Textilien, Tapeten oder Branding-Materialien.

Essayez ces prompts

Grundlegendes Flussmuster
Erstelle ein generatives Kunstwerk mit p5.js und fließenden Partikelmustern. Binde Seed-basierten Zufall für Reproduzierbarkeit ein und füge eine Seitenleiste mit Geschwindigkeits- und Dichte-Steuerungen hinzu.
Organische Flussfelder
Generiere einen HTML-Betrachter mit Perlin-Noise-Feld-Visualisierung. Partikel sollten dem Noise-Fluss folgen und organische Turbulenzmuster erzeugen. Füge Steuerungen für Noise-Skalierung und Partikelanzahl hinzu.
Geometrische Muster
Erstelle algorithmische Kunst basierend auf Fibonacci-Sequenzen und Goldenen Schnitten. Implementiere rekursive geometrische Muster mit Farbverläufen und Komplexitäts-Steuerungen.
Interaktive Simulation
Baue ein komplexes Partikelsystem mit Anziehungs- und Abstoßungskräften, Spureffekten und Maus-Interaktion. Binde mehrere Emissionsquellen und Physikparameter-Steuerungen ein.

Bonnes pratiques

  • Verwende immer Seed-basierte Zufallsfunktionen (randomSeed, noiseSeed) für reproduzierbare Kunstwerke
  • Implementiere windowResized() für responsives Canvas-Verhalten auf verschiedenen Bildschirmgrößen
  • Verwende requestAnimationFrame für flüssige 60-fps-Animationen ohne Blockierung

Éviter

  • Die Verwendung von Math.random() anstelle von Seed-basierten Zufallsfunktionen zerstört die Reproduzierbarkeit
  • Das Erstellen endloser Schleifen ohne Frame-Rate-Kontrolle führt zu Browser-Abstürzen
  • Festcodierte Canvas-Abmessungen verhindern responsives Verhalten auf verschiedenen Bildschirmen

Foire aux questions

Ist dies mit allen modernen Browsern kompatibel?
Ja, p5.js funktioniert in allen modernen Browsern. Generiertes HTML enthält CDN-Links für die Bibliothek.
Was ist die maximale unterstützte Canvas-Größe?
Die Canvas-Größe wird durch den Browserspeicher begrenzt. Für beste Leistung sollten die Abmessungen unter 2000x2000 Pixeln bleiben.
Kann ich dies in mein bestehendes Webprojekt einbetten?
Ja, das generierte HTML ist eigenständig und kann eingebettet oder für die Integration angepasst werden.
Sind meine Kunstwerk-Daten privat und sicher?
Die gesamte Generierung findet lokal in deinem Browser statt. Es werden keine Kunstwerk-Daten an externe Server gesendet.
Warum läuft meine Animation langsam?
Reduziere die Partikelanzahl oder Komplexität. Verwende requestAnimationFrame und optimiere deine Zeichen-Schleifen.
Wie unterscheidet sich dies von Processing?
p5.js ist die JavaScript-Version von Processing, entwickelt für Webbrowser mit ähnlicher Syntax und Konzepten.

Détails du développeur

Structure de fichiers

📄 SKILL.md