Creating an Animated 3D Starfield Effect! ✨

My latest tutorial explains how to create this popular effect and the various canvas techniques one will need to smoothly pull it all off!

Hi everybody! 👋

One of my more recent animations is the following animated 3d starfield effect:

I had talked about this in one of my earlier posts, and many of you had asked me for more details on how I created it. If this describes you (or describes a future version of you!), then…🥁…there is both a written version as well as a video version that explains and dissects how this effect works:

Both the written and video versions of this tutorial are beginner-friendly, so feel free to use whichever one speaks to your preferred way of learning.

Animating on the Canvas

Digging a little deeper, this animation is fully implemented in the canvas using vanilla HTML, CSS, and JavaScript. That is both the good news and the bad news. Because the canvas is fairly low-level with a minimal set of abstractions provided for drawing and animating pixels, it’s always a bit of a challenge to explain so many of the basic tasks that we take for granted when using the DOM or a 3rd party library like p5.js. That’s the bad news.

The good news is that once you learn the basics of how to work with the canvas, you never really forget it. It’s a bit like swimming or riding a bike. Almost 80% of the starting code for creating canvas-based animations never really changes:

After the basic boilerplate code is done, it is smooth sailing from here on out. The rest of the path is some good old-fashioned problem-solving with a heavy dose of creative coding mixed in. Hopefully my tutorial helps you to better appreciate the power and flexibility of working with the canvas.

Now, if you are looking for an introduction to working with the canvas, my free Canvas for Beginners tutorials (or popular book) are just what you need!

Till Next Time

One of my favorite pastimes is to create little animations here and there. It is what helped me to learn programming so many years ago. My hope in explaining how these animations work is to maybe help someone else (like me many years ago) get excited about the possibilities programming unlocks! While it may sound like it, that last sentence was totally not written by an AI. That phrasing was 100% me :P

Anyway, if you have any questions or comments or just want to reach me, the easiest way is to post on the forums or shoot me a message on Twitter / X. And with that, I’ll see you all next time.

Cheers,
Kirupa 🥳