# Alex Codes Art > Discover creative coding and generative art at alexcodesart.com. Explore p5.js tutorials and join our community to create stunning digital art. Start your journey today! Public Ghost content for AI and LLM tooling. Use `/llms-full.txt` for consolidated page and post context. Append `.md` to any post or page URL to get the content in Markdown (for example, `/example-post.md`). ## Pages - [About me](https://alexcodesart.com/about.md) - Hey there 👋 I'm Alex, a software engineer living in Amsterdam, The Netherlands. With over a decade of experience as a software engineer, I’ve created websites, mobile apps, video games, and more. Welcome to my creative coding blog, where I talk about coding and art. What you will find here are tut… - [Creative Coding Playground](https://alexcodesart.com/creative-coding-playground.md) - Welcome to my creative coding playground - a space where I build interactive tools that blend code, music, and generative art. Live Projects * Canvas Generator A personalized generative art experience. Answer a few prompts and get a unique artwork generated from your inputs. * Step Sequencer A brow… - [Creative Coding Roadmap](https://alexcodesart.com/creative-coding-roadmap.md) - 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… ## Posts - [Drawing a Mandala with p5.js: Fading Trails, Curvy Keys & Multi-Line Color - Part 2](https://alexcodesart.com/drawing-a-mandala-with-p5-js-smooth-lines-speed-based-thickness-tweakpane-part-1-2.md) - [Drawing a Mandala with p5.js: Smooth Lines, Speed-Based Thickness & Tweakpane - Part 1](https://alexcodesart.com/drawing-a-mandala-with-p5-js-smooth-lines-speed-based-thickness-tweakpane-part-1.md) - [Drawing Fractals with L-Systems in p5.js: A Creative Coding Tutorial](https://alexcodesart.com/drawing-fractals-with-l-systems-in-p5-js-a-creative-coding-tutorial.md) - 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 of or… - [Building a Step Sequencer with Strudel: Creative Coding Meets Visual Beat-Making](https://alexcodesart.com/building-a-step-sequencer-with-strudel-creative-coding-meets-visual-beat-making.md) - 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… - [Making Music with Code: A Beginner’s Guide to Strudel](https://alexcodesart.com/making-music-with-code-a-beginners-guide-to-strudel.md) - Hello friends, and welcome to another creative coding tutorial! Most of the time on this blog we explore generative art and creative coding with visuals — using tools like p5.js to draw shapes, animate patterns, or generate abstract compositions. But code isn’t limited to images. It can also genera… - [Create Animated Metaballs with Shaders in p5.js — A Creative Coding Tutorial](https://alexcodesart.com/create-animated-metaballs-with-shaders-in-p5-js-a-creative-coding-tutorial.md) - [Drawing Noisy Circles with p5.js: A Deep Dive into Polar Coordinates and Perlin Noise](https://alexcodesart.com/drawing-noisy-circles-with-p5-js-a-deep-dive-into-polar-coordinates-and-perlin-noise.md) - 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 int… - [Building an Interactive Generative Art with p5.js, Tweakpane, and Watercolor Effects](https://alexcodesart.com/building-an-interactive-generative-art-with-p5-js-tweakpane-and-watercolor-effects.md) - 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’re… - [Mastering Creative Coding: Building Interactive Radial Strokes with p5.js](https://alexcodesart.com/mastering-creative-coding-building-interactive-radial-strokes-with-p5-js.md) - 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 with… - [Understanding JavaScript Classes for Creative Coding](https://alexcodesart.com/understanding-javascript-classes-for-creative-coding.md) - When diving into creative coding, one of the most powerful tools at your disposal is JavaScript classes. If you've been tinkering with code for a while, you've probably heard of object-oriented programming (OOP). Classes are at the heart of OOP, and they can help you organize and structure your cod… - [Learn Creative Coding: Build Geometric Abstract Art with p5.js](https://alexcodesart.com/learn-creative-coding-build-geometric-abstract-art-with-p5-js.md) - Hello friends, and welcome to a new creative coding tutorial! In this tutorial, we’re going to create a geometric abstract art piece using JavaScript and p5.js. This project is perfect for beginners in creative coding who are interested in exploring generative art techniques. What We’re Going to Cr… - [Animating Abstract Art: A Beginner’s Guide to Tweening with p5.js](https://alexcodesart.com/animating-abstract-art-a-beginners-guide-to-tweening-with-p5-js.md) - 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 identify its elemen… - [Create Abstract Art with p5.js: Animate the Sun and Waves](https://alexcodesart.com/create-abstract-art-with-p5-js-animate-the-sun-and-waves.md) - 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 and the waves to… - [Create Stunning Generative Art with Circles in p5.js](https://alexcodesart.com/create-stunning-generative-art-with-circles-in-p5-js.md) - 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 manip… - [Creating Stylized Waves with p5.js: A Creative Coding Tutorial](https://alexcodesart.com/creating-stylized-waves-with-p5-js-a-creative-coding-tutorial.md) - Hello and welcome to another exciting creative coding tutorial! Today, we will dive into the world of stylized waves using p5.js. This tutorial is perfect for beginners and seasoned coders alike. We’ll be exploring two powerful features of p5.js: noise and random. Thanks to these, every time you ru… - [Vibrant Digital Art: Creating a Bauhaus-Inspired Grid of Colorful Shapes with Code](https://alexcodesart.com/creating-bauhaus-inspired-grid.md) - In this tutorial, I'll guide you through the process of creating a Bauhaus-inspired grid of colorful shapes using code. By the end of this tutorial, you’ll have a vibrant piece of digital art. Starting with the Basics First, let's look at the overall structure of our code. We’ll define a grid with… - [Create Your First Digital Art with Code: A Step-by-Step Guide](https://alexcodesart.com/create-your-first-digital-artpiece-with-code-a-step-by-step-guide.md) - 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 the screen and the preview window on th… - [Getting Started with p5.js: An Introduction to Creative Coding for Beginners](https://alexcodesart.com/getting-started-with-p5-js-an-introduction-to-creative-coding-for-beginners.md) - 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 conce… - [Unleashing Your Imagination: An Introduction to Creative Coding and Generative Art with p5.js](https://alexcodesart.com/unleashing-your-imagination-an-introduction-to-creative-coding-and-generative-art-with-p5-js.md) - 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… ## Optional - [RSS Feed](https://alexcodesart.com/rss/) - [Sitemap](https://alexcodesart.com/sitemap.xml) - [Full content of pages and posts](https://alexcodesart.com/llms-full.txt)