All guides
🎨

Generative Art

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

01

What Is Creative Coding? A Beginner's Guide to Art Made with Code

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.

10 min readcreative coding · beginner · generative art
02

Drawing With Code: A Complete Guide to Making Art in Your Browser

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.

11 min readcreative coding · canvas · generative art
03

Generative Design: How to Create Algorithm-Driven Art and Architecture With Code

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.

14 min readgenerative design · computational design · algorithmic design
04

12 Best Generative Art Websites to Explore in 2026

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.

7 min readgenerative art · creative coding · interactive art
05

11 Best Creative Coding Tools in 2026: From p5.js to Shadertoy and Beyond

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.

13 min readcreative coding · tools · p5.js
06

Color Theory: How to Create Beautiful Color Palettes With Code

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.

16 min readcolor theory · creative coding · generative art
07

How to Build a Generative Art Piece in Under 50KB: A Step-by-Step Tutorial

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.

12 min readtutorial · creative coding · generative art
08

How to Make Interactive Art With JavaScript: A Hands-On Tutorial

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.

11 min readjavascript · interactive art · tutorial
09

Glitch Art: How to Create Stunning Digital Glitch Effects With Code

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.

15 min readglitch art · creative coding · generative art
10

ASCII Art: How to Create Stunning Text-Based Art With Code

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.

14 min readascii art · creative coding · generative art
11

Pixel Art With Code: How to Create Retro Graphics Programmatically

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.

13 min readpixel art · generative art · creative coding
12

Low Poly Art: How to Create Stunning Geometric Landscapes With Code

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.

24 min readlow poly art · low poly · creative coding
13

Stippling Art: How to Create Beautiful Dot-Based Art With Code

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.

24 min readstippling art · pointillism · creative coding
14

Light Painting: How to Create Stunning Long-Exposure Light Art With Code

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.

24 min readlight painting · long exposure · creative coding
15

Data Visualization: How to Create Beautiful Data Art With Code

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.

18 min readdata visualization · creative coding · JavaScript
16

SVG Animation: How to Create Stunning Animated Graphics With Code

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.

17 min readsvg animation · creative coding · generative art
17

Kinetic Typography: How to Create Stunning Animated Text With Code

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.

23 min readkinetic typography · typography art · creative coding