Generative Art with JavaScript

Introduction to Generative Art

Generative art refers to art that is created using algorithms, often with the use of randomness, to produce unique pieces.

Creating Generative Art with JavaScript

JavaScript, along with HTML5 Canvas, is a powerful tool for creating generative art. Here's a simple example:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function draw() {
 ctx.clearRect(0,0, canvas.width, canvas.height);
 for (let i =0; i <100; i++) {
 const x = Math.random() * canvas.width;
 const y = Math.random() * canvas.height;
 ctx.beginPath();
 ctx.arc(x, y, Math.random() *20,0,2 * Math.PI);
 ctx.fillStyle = 'rgb(' + Math.floor(Math.random() *256) + ',' + Math.floor(Math.random() *256) + ',' + Math.floor(Math.random() *256) + ')';
 ctx.fill();
 }
 requestAnimationFrame(draw);
}
draw();
 

Example: Interactive Generative Art