-
-
-
- 0.8
-
-
-
-
-
+
+
+
+ 0.8
+
+
+
+
-
-
-
+
+
+
-
+
+ Frame 0/0
@@ -235,14 +69,27 @@
History
temperatureValue: document.getElementById('temperature-value'),
seed: document.getElementById('seed'),
preview: document.getElementById('preview-window'),
- speedSlider: document.getElementById('speed-slider'),
start: document.getElementById('startBtn'),
stop: document.getElementById('stopBtn'),
+ speedSlider: document.getElementById('speed-slider'),
+ frameCounter: document.getElementById('frame-counter'),
history: document.getElementById('history')
};
// Presets for SVG generation
const presets = {
+ biomorphic: {
+ prompt: "Create a living system of biomorphic forms inspired by Ernst Haeckel's scientific illustrations. Design intricate organic shapes that grow, divide, and evolve. Use animated transformations to suggest cellular processes and biological rhythms. Include delicate details and symmetrical patterns.",
+ temperature: 0.9
+ },
+ boids: {
+ prompt: "Create a dynamic flock of abstract geometric birds (boids) following Craig Reynolds' flocking rules: alignment, cohesion, and separation. Use simple triangular or arrow-like shapes for the boids. Animate their movement with smooth paths, rotation, and subtle variations. Include emergent flocking behavior and occasional splitting/merging of groups. Use a minimal color palette inspired by early computer graphics.",
+ temperature: 0.85
+ },
+ retrogame: {
+ prompt: "Create an animated scene inspired by classic 8-bit and 16-bit video games. Use pixel-perfect geometric shapes, limited color palettes, and simple patterns. Include game elements like platforms, power-ups, or enemies with classic gaming animations (bouncing, rotating, pulsing). Add scan lines or CRT effects for authenticity. Think early Nintendo or Atari aesthetic with smooth sprite animations.",
+ temperature: 0.85
+ },
solarpunk: {
prompt: "Isometric minimalism. Game engine. Create an evolving solarpunk cityscape where nature and technology harmoniously intertwine. Use flowing organic curves for plant life mixed with clean geometric shapes for sustainable architecture. Include animated elements like swaying trees, floating gardens, and shimmering solar panels. Use vibrant greens and warm sunlit colors.",
temperature: 0.9
@@ -263,10 +110,6 @@
History
prompt: "Visualize quantum phenomena through abstract art - wave-particle duality, superposition, and entanglement. Create animated probability clouds, interference patterns, and quantum tunneling effects. Use ethereal colors and translucent layers to suggest the mysterious nature of quantum reality.",
temperature: 0.95
},
- biomorphic: {
- prompt: "Create a living system of biomorphic forms inspired by Ernst Haeckel's scientific illustrations. Design intricate organic shapes that grow, divide, and evolve. Use animated transformations to suggest cellular processes and biological rhythms. Include delicate details and symmetrical patterns.",
- temperature: 0.9
- },
cosmology: {
prompt: "Design an abstract representation of cosmic architecture - galaxy formations, gravitational lensing, and spacetime fabric. Create animated elements suggesting orbital motion and celestial mechanics. Use deep space colors and geometric patterns inspired by astronomical phenomena.",
temperature: 0.85
@@ -302,12 +145,13 @@
History
let isRunning = false;
let frames = [];
let frameIndex = 0;
- let animationTimer = null;
- let currentSeed = 42;
+ let currentSeed;
+ let lastFrameTime = 0;
+ let animationFrame = null;
function createEmptyCanvas() {
elements.preview.innerHTML = `
-
@@ -69,15 +71,23 @@
History
temperatureValue: document.getElementById('temperature-value'),
seed: document.getElementById('seed'),
preview: document.getElementById('preview-window'),
- start: document.getElementById('startBtn'),
- stop: document.getElementById('stopBtn'),
+ start: document.getElementById('start'),
+ stop: document.getElementById('stop'),
speedSlider: document.getElementById('speed-slider'),
frameCounter: document.getElementById('frame-counter'),
history: document.getElementById('history')
};
- // Presets for SVG generation
+ // Load saved presets from localStorage
+ const savedPresets = JSON.parse(localStorage.getItem('savedPresets') || '{}');
+
+ // Base presets combined with saved presets
const presets = {
+ 'neural': {
+ name: 'Neural Gardens',
+ prompt: "Create an abstract garden of neural networks. Use flowing lines and organic shapes to represent neurons, synapses, and the flow of information. Incorporate subtle color transitions and pulsing animations to suggest the dynamic nature of neural processing.",
+ temperature: 0.8
+ },
biomorphic: {
prompt: "Create a living system of biomorphic forms inspired by Ernst Haeckel's scientific illustrations. Design intricate organic shapes that grow, divide, and evolve. Use animated transformations to suggest cellular processes and biological rhythms. Include delicate details and symmetrical patterns.",
temperature: 0.9
@@ -114,10 +124,6 @@
History
prompt: "Design an abstract representation of cosmic architecture - galaxy formations, gravitational lensing, and spacetime fabric. Create animated elements suggesting orbital motion and celestial mechanics. Use deep space colors and geometric patterns inspired by astronomical phenomena.",
temperature: 0.85
},
- neural: {
- prompt: "Visualize a garden of artificial neural networks as living, breathing entities. Create organic-mechanical hybrid forms with animated synaptic connections and information flows. Show learning and adaptation through evolving patterns and emergent behaviors.",
- temperature: 0.9
- },
meditation: {
prompt: "Generate abstract visualizations of inner mental states and consciousness. Create flowing mandalas and organic patterns that pulse with meditative rhythms. Use subtle animations and transitions to induce contemplative states. Incorporate sacred geometry and archetypal forms.",
temperature: 0.8
@@ -125,9 +131,22 @@
History
emergence: {
prompt: "Design a complex system showing emergent behavior from simple rules. Create animated patterns that suggest flocking birds, forming crystals, or growing cities. Use mathematical principles to generate organic complexity. Show how individual elements combine to create larger organized structures.",
temperature: 0.85
+ },
+ 'digital-nature': {
+ prompt: `Create a mesmerizing fusion of nature and technology: a fractal tree growing from a digital seedling,
+with branches that transform into circuitboard pathways lit by electric blue lightning.
+Matrix-style digital rain falls in the background, but using varying shades of green and cyan.
+The tree should grow slowly and majestically,
+while the lightning pulses should be subtle and ethereal. The digital rain should fall at different speeds,
+creating layers of depth. Color palette should focus on deep greens, electric blues, and cyan accents,
+with occasional golden sparks where the lightning meets the tree branches.`,
+ temperature: 0.9
}
};
+ // Add saved presets to base presets
+ Object.assign(presets, savedPresets);
+
// Fetch available models
fetch('https://text.pollinations.ai/models')
.then(r => r.json())
@@ -365,6 +384,35 @@
History
}
}
+ function getFirstFourWords(str) {
+ return str.split(/\s+/).slice(0, 4).join(' ').toLowerCase().replace(/[^\w\s-]/g, '');
+ }
+
+ function saveCurrentPreset() {
+ const prompt = elements.basePrompt.value;
+ const temperature = parseFloat(elements.temperature.value);
+ const key = getFirstFourWords(prompt);
+
+ const savedPresets = JSON.parse(localStorage.getItem('savedPresets') || '{}');
+ savedPresets[key] = {
+ prompt,
+ temperature,
+ name: key
+ };
+
+ localStorage.setItem('savedPresets', JSON.stringify(savedPresets));
+
+ // Add to select if not exists
+ if (!elements.presetSelect.querySelector(`option[value="${key}"]`)) {
+ const option = document.createElement('option');
+ option.value = key;
+ option.textContent = key;
+ elements.presetSelect.appendChild(option);
+ }
+
+ elements.presetSelect.value = key;
+ }
+
// Event Listeners
elements.start.addEventListener('click', startEvolution);
elements.stop.addEventListener('click', stopEvolution);
@@ -379,8 +427,18 @@
History
});
// Initialize
- createEmptyCanvas();
- elements.basePrompt.value = presets[elements.presetSelect.value].prompt;
+ document.addEventListener('DOMContentLoaded', () => {
+ // Add saved presets to select
+ Object.entries(savedPresets).forEach(([key, preset]) => {
+ const option = document.createElement('option');
+ option.value = key;
+ option.textContent = preset.name;
+ elements.presetSelect.appendChild(option);
+ });
+ createEmptyCanvas();
+ elements.presetSelect.value = 'digital-nature';
+ elements.basePrompt.value = presets['digital-nature'].prompt;
+ });
+