Creative Coding & Generative Art Blog | alexcodesart.com

Sign in Subscribe

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

Tutorials Featured

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

Making Music with Code: A Beginner’s Guide to Strudel

Making Music with Code: A Beginner’s Guide to Strudel

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 generate

Screenshot of a generative art animation with soft, overlapping metaballs rendered using shaders in p5.js, featuring smooth edges and chromatic aberration on a gradient background.

Tutorials Featured

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

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

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

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

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’

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

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

Understanding JavaScript Classes for Creative Coding

Intro to Creative Coding

Understanding JavaScript Classes for Creative Coding

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

Learn Creative Coding: Build Geometric Abstract Art with p5.js

Learn Creative Coding: Build Geometric Abstract Art with p5.js

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

Abstract art of a semicircle with orange hues on top and blue hues on bottom, against a gradient beige to blue background

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

Abstract art featuring a sun and waves

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

Create Stunning Generative Art with Circles in p5.js

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

Creating Stylized Waves with p5.js: A Creative Coding Tutorial

Creating Stylized Waves with p5.js: A Creative Coding Tutorial

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

Vibrant Digital Art: Creating a Bauhaus-Inspired Grid of Colorful Shapes with Code

Vibrant Digital Art: Creating a Bauhaus-Inspired Grid of Colorful Shapes with Code

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

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

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

Abstract geometric art with different shapes on a white background

Intro to Creative Coding

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

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

Intro to Creative Coding

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