Generative art is art created with code — where algorithms, randomness, and mathematical rules produce visual compositions that no human hand could draw alone. This guide collects our best tutorials on generative art techniques, from simple particle systems to complex simulations.
Each article includes working JavaScript code examples you can run in your browser. Start anywhere that interests you, or work through them in order to build a complete generative art toolkit.
17 articles in this guide
Creative coding uses programming as a medium for artistic expression rather than functional software. Learn what creative coding is, how to get started, the tools and languages used, and discover projects that blur the line between art and technology.
Learn how to create visual art using JavaScript, HTML Canvas, and CSS. From your first line to animated masterpieces — a practical guide to drawing with code for beginners and artists.
A comprehensive guide to generative design — from algorithmic art and parametric architecture to computational product design. Covers L-systems, space-filling curves, reaction-diffusion, Voronoi structures, evolutionary algorithms, and more. 8 working code examples.
A curated list of the most interesting generative art websites, interactive art experiments, and creative coding projects you can experience right in your browser. From shader playgrounds to collaborative art trees.
A hands-on comparison of the best creative coding tools for beginners and experienced artists. Covers p5.js, Processing, Shadertoy, three.js, Hydra, TouchDesigner, Sonic Pi, Cables.gl, OpenFrameworks, Nannou, and Lumitree — with strengths, weaknesses, and what each tool does best.
Learn color theory through code. 8 interactive examples: color wheels, complementary harmonies, analogous palettes, triadic schemes, HSL manipulation, procedural palette generation, color interpolation, and interactive palette builders.
A hands-on creative coding tutorial that walks you through building a complete generative artwork in a single HTML file under 50KB. Covers Canvas API, animation loops, color palettes, interactivity, and the art of creative constraints.
Learn how to create interactive art with JavaScript — step-by-step code examples using Canvas API, mouse interaction, generative patterns, and animation. No frameworks needed.
Learn how to create glitch art programmatically with JavaScript. 8 interactive examples: pixel sorting, RGB channel shifting, data corruption, scan line effects, block displacement, JPEG artifact simulation, VHS distortion, and interactive glitch painting.
Learn how to create ASCII art programmatically with JavaScript. 8 interactive examples: character rasters, edge detection, image-to-ASCII conversion, animated typography, 3D text rendering, matrix rain, and generative text landscapes.
A hands-on guide to making pixel art with JavaScript and Canvas — grid rendering, palette management, dithering, sprite animation, scaling algorithms, and generative pixel art techniques. 8 working code examples you can run in your browser.
Learn to create beautiful low poly art programmatically with JavaScript and Canvas. 8 interactive examples: random triangulation, Delaunay triangulation, image-to-low-poly converter, gradient mesh terrain, animated low poly waves, low poly portrait generator, low poly planet, and generative low poly landscape composition.
Learn to create stunning stippling art programmatically with JavaScript and Canvas. 8 interactive examples: random stippling, Poisson disc sampling, weighted stippling, Lloyd relaxation, image-to-dots converter, cross-hatching, stipple portrait, and generative stipple art composition.
Learn to create digital light painting effects programmatically with JavaScript and Canvas. 8 interactive examples: light trail brush, orbital light painting, light calligraphy, sparkler effect, physiogram spirals, long-exposure traffic, light graffiti, and generative light painting composition.
Learn data visualization from scratch with JavaScript and Canvas. 8 interactive examples: bar charts, scatter plots, radial graphs, force-directed networks, treemaps, streamgraphs, animated data transitions, and data-driven generative art.
Learn SVG animation from scratch. 8 interactive examples: path morphing, stroke drawing, motion along paths, staggered animations, generative SVG patterns, animated filters, particle systems in SVG, and an interactive kinetic art piece.
Learn to create kinetic typography programmatically with JavaScript and Canvas. 8 interactive examples: typewriter reveal, wave text, spring-physics letters, particle text dissolve, text along a path, gravity-drop letters, morphing text outlines, and generative kinetic poetry composition.