Build an Algorithmic Art Generator Using JavaScript

CodeWizard
By CodeWizard
0 views 0

About This Prompt

Create a browser-based algorithmic art generator that produces unique visuals every time the page loads. Concept: Art is generated using math + randomness Each refresh creates a new composition Visual rules: Use geometric shapes (lines, circles, grids, waves) Color palette generated programmatically Smooth transitions or subtle animation Technical requirements: HTML + CSS + JavaScript only […]

AI Prompt

<blockquote>Create a <span class="s1"><b>browser-based algorithmic art generator</b></span> that produces unique visuals every time the page loads.</blockquote>
<blockquote><b>Concept:</b><b></b></blockquote>
<ul>
<li>
<blockquote>Art is generated using math + randomness</blockquote>
</li>
<li>
<blockquote>Each refresh creates a new composition</blockquote>
</li>
</ul>
<blockquote><b>Visual rules:</b><b></b></blockquote>
<ul>
<li>
<blockquote>Use geometric shapes (lines, circles, grids, waves)</blockquote>
</li>
<li>
<blockquote>Color palette generated programmatically</blockquote>
</li>
<li>
<blockquote>Smooth transitions or subtle animation</blockquote>
</li>
</ul>
<blockquote><b>Technical requirements:</b><b></b></blockquote>
<ul>
<li>
<blockquote>HTML + CSS + JavaScript only</blockquote>
</li>
<li>
<blockquote>Use <span class="s1"><canvas></span> or SVG (choose one)</blockquote>
</li>
<li>
<blockquote>No external libraries</blockquote>
</li>
<li>
<blockquote>Include a “Regenerate” button</blockquote>
</li>
</ul>
<blockquote><b>Bonus ideas (optional):</b><b></b></blockquote>
<ul>
<li>
<blockquote>Seed-based generation (same input = same art)</blockquote>
</li>
<li>
<blockquote>Export image as PNG</blockquote>
</li>
<li>
<blockquote>Toggle animation on/off</blockquote>
</li>
</ul>
<blockquote><b>Deliverables:</b><b></b></blockquote>
<ul>
<li>
<blockquote>Fully working visual generator</blockquote>
</li>
<li>
<blockquote>Clean, readable code</blockquote>
</li>
<li>
<blockquote>Brief explanation of the algorithm</blockquote>
</li>
</ul>