Learn p5.js by building generative art, interactive sketches, animations and shaders.

A free collection of step-by-step tutorials designed to help you grow from your first sketch to advanced creative coding techniques.

Programming doesn't have to end with websites and apps.

Creative coding combines programming, mathematics and design to create interactive experiences, generative art, animations and visual experiments.

Whether you're a software developer discovering your artistic side or an artist curious about programming, this roadmap will guide you from your very first sketch to advanced generative art techniques.

What you'll learn

✅ Beginner-friendly tutorials
✅ Hands-on projects
✅ Interactive demos
✅ Complete source code
✅ Real-world creative coding techniques
✅ Free tutorials with optional premium content

Hi, I'm Alex 👋

I'm a software engineer who discovered creative coding as a way to combine programming with art.

On this site I document what I learn while building generative art, interactive sketches and shaders.

This roadmap brings together the tutorials I'd recommend if I were teaching someone from scratch.

Why Learn Creative Coding?

Creative coding is one of the most rewarding ways to learn programming.

Instead of building another to-do app or CRUD project, you'll create artwork, simulations and interactive experiences that are fun to build and exciting to share.

Along the way you'll naturally learn:

• JavaScript
• p5.js
• Mathematics for graphics
• Animation
• Geometry
• Algorithms
• Generative Art
• GLSL Shaders
• Creative problem solving

My goal isn't just to show you code that works. Every tutorial explains why it works, so you can reuse the ideas in your own projects instead of copying solutions.

Every tutorial on AlexCodesArt focuses on building something beautiful while explaining the programming concepts behind it.

Your Learning Roadmap

Think of this page as your learning path.

Don't worry about mastering everything at once. Follow the stages in order and you'll gradually build the skills needed for advanced projects.

Stage 1 — Getting Started

Goal: You'll build your first interactive sketch and learn the core concepts used throughout the rest of the roadmap.

In this stage you'll learn:

• What creative coding is
• Installing and using p5.js
• The canvas
• Drawing basic shapes
• Colors
• Coordinates
• Your first animation

Recommended tutorials

Unleashing Your Imagination: An Introduction to Creative Coding and Generative Art with p5.js

Welcome to the exciting world of creative coding! Whether you’re a seasoned developer or a curious beginner, exploring the realms of generative art through p5.js opens up endless possibilities for artistic expression and computational creativity. In this blog post, we’ll delve into the basics of p5.js,

Alex Codes ArtAlex Postolache

Getting Started with p5.js: An Introduction to Creative Coding for Beginners

Introduction to Programming and p5.js Welcome to the world of creative coding with p5.js! Whether you’re an artist, designer, educator, or a complete beginner, p5.js is a powerful JavaScript library that makes coding visual and interactive projects accessible and fun. Let’s dive into the core

Alex Codes ArtAlex Postolache

Create Your First Digital Art with Code: A Step-by-Step Guide

Let’s build your first digital art with code. Starting with the Basics As a starting place to write and create your first digital art pieces, I recommend using the official p5.js editor. Once you open the editor, you’ll see the code editor on the left side of

Alex Codes ArtAlex Postolache

Stage 2 — Motion & Animation

Goal: Bring your artwork to life.

You'll learn:

• frameCount
• Time-based animation
• Smooth movement
• Easing
• Loops
• Animation principles

Recommended tutorials

Create Abstract Art with p5.js: Animate the Sun and Waves

Hello and welcome back to another exciting tutorial! Today, we’ll dive deeper into creative coding with p5.js and explore some fundamental programming concepts. In this session, we’ll create an abstract art piece featuring a sun and waves, and by the end, we’ll animate both the sun

Alex Codes ArtAlex Postolache

Animating Abstract Art: A Beginner’s Guide to Tweening with p5.js

Hello friends! Today, we are diving into the world of creative coding by making a beautiful piece of abstract art and animating it using tweening in p5.js. This tutorial is perfect for coding beginners interested in generative art. First, let’s take a look at the final piece and

Alex Codes ArtAlex Postolache

Stage 3 — Mathematics for Art

Goal: Learn the math behind beautiful visuals.

Don't worry—you don't need to love math.

Every concept is explained visually and immediately applied to artwork.

You'll discover:

• Trigonometry
• Polar coordinates
• Vectors
• Randomness
• Perlin Noise
• Interpolation
• Distance calculations

Recommended tutorials

Drawing Noisy Circles with p5.js: A Deep Dive into Polar Coordinates and Perlin Noise

In this creative coding tutorial, we’re building animated noisy circles using p5.js. These aren’t just ordinary circles—they pulse, shift, and morph over time. The motion comes from Perlin noise, and the structure is based on polar coordinates. You can tweak everything from color modes to noise

Alex Codes ArtAlex Postolache

Create Stunning Generative Art with Circles in p5.js

Welcome back to another exciting tutorial about creative coding and generative art! Today, we’ll dive into creating a simple composition with concentric circles and some text. In the second part of this tutorial, we’ll use p5.gui.js to create a small graphical interface, allowing us to easily

Alex Codes ArtAlex Postolache

Stage 4 — Interaction

Goal: Create interactive experiences.

Learn how to make your artwork respond to users.

Topics include:

• Mouse interaction
• Keyboard input
• Touch controls
• Sliders
• Tweakpane
• User interfaces

Recommended tutorials

Building a Step Sequencer with Strudel: Creative Coding Meets Visual Beat-Making

Hello friends, and welcome to another creative coding tutorial! In the previous tutorial, we explored Strudel — a browser-based creative coding library that lets you make music with code. We wrote drum patterns, melodies, and layered grooves using just a few lines of JavaScript. If you haven’t read that

Alex Codes ArtAlex Postolache

Mastering Creative Coding: Building Interactive Radial Strokes with p5.js

Hello friends, and welcome to another creative coding tutorial! Today, we’re going to create an interactive piece of digital art using p5.js. You can interact with this artwork by changing parameters in the top right corner, and watch as the digital art transforms in real-time. Getting Started

Alex Codes ArtAlex Postolache

Stage 5 — Generative Art

Now things become really fun.

You'll start creating artwork that feels organic, procedural and unique every time it runs.

Projects include:

• Mandalas
• Abstract compositions
• Pattern generation
• Procedural drawing
• Creative experiments

Recommended tutorials

Drawing a Mandala with p5.js: Smooth Lines, Speed-Based Thickness & Tweakpane - Part 1

Hello friends, and welcome to another creative coding tutorial! Today we’re going to build a mandala maker in the browser — you drag with the mouse, and every stroke is mirrored and rotated so you get kaleidoscope-like patterns in real time. We’ll wire up symmetry, smoothing, velocity-based

Alex Codes ArtAlex Postolache

Building an Interactive Generative Art with p5.js, Tweakpane, and Watercolor Effects

In the previous tutorial, we looked at how we can build an interactive piece of digital art using p5.js and we talked a bit about the math behind it. Mastering Creative Coding: Building Interactive Radial Strokes with p5.jsHello friends, and welcome to another creative coding tutorial! Today, we’

Alex Codes ArtAlex Postolache

Stage 6 — Creative Algorithms

This is where programming and art truly meet.

You'll explore algorithms used by artists and game developers alike.

Topics include:

• L-Systems
• Metaballs
• Flow Fields
• Particle Systems
• Circle Packing
• Cellular Automata
• Recursive drawing
• Procedural generation

Recommended tutorials

Create Animated Metaballs with Shaders in p5.js — A Creative Coding Tutorial

Hey there and welcome to another tutorial about creative coding and generative art. In this tutorial we will look at what SDFs are and how we can use them to create metaballs. Metaballs are a classic technique in generative art used to create organic, fluid shapes that morph and merge

Alex Codes ArtAlex Postolache

Drawing Fractals with L-Systems in p5.js: A Creative Coding Tutorial

Hello friends, and welcome to another creative coding tutorial! Today, we’re going to draw beautiful fractal forms with L-systems and p5.js. L-systems are one of those beautiful creative coding ideas where a tiny bit of text can grow into branches, curves, triangles, snowflakes, and all kinds

Alex Codes ArtAlex Postolache

Stage 7 — GLSL & Shaders

Ready to unlock the GPU?

Shaders let you create visuals that would be impossible or inefficient using standard JavaScript alone.

You'll learn:

• Fragment shaders
• Vertex shaders
• Distortion effects
• Liquid Glass
• Lighting
• Noise in GLSL
• GPU rendering
• Advanced visual effects

Recommended tutorials

Create Animated Metaballs with Shaders in p5.js — A Creative Coding Tutorial

Hey there and welcome to another tutorial about creative coding and generative art. In this tutorial we will look at what SDFs are and how we can use them to create metaballs. Metaballs are a classic technique in generative art used to create organic, fluid shapes that morph and merge

Alex Codes ArtAlex Postolache

Stage 8 — Build Real Projects

Learning is most effective when you create complete projects.

Throughout your journey you'll build artwork such as:

• 🌸 Mandalas
• 💧 Metaballs
• 🎨 Watercolor Effects
• 🌿 L-System Trees
• 🌊 Shader Effects
• ✨ Interactive Sketches
• 🌀 Procedural Patterns
• 🎵 Audio Visualizations

These projects combine multiple concepts and will help you develop your own artistic style.

Join the Journey

Every few weeks I publish new tutorials, creative coding experiments and behind-the-scenes articles about building generative art with JavaScript and p5.js.

If you're interested in combining programming and creativity, I'd love to have you along for the journey.

Subscribe below and never miss a new tutorial. It's free!

Ready?

Start with Stage 1 and build your first creative coding sketch.

By the time you reach the final stages, you'll be creating artwork powered by mathematics, algorithms and shaders and you'll understand exactly how it works.

Happy coding! 🎨💻