# creative coding

Creative coding combines programming techniques with artistic expression to create interactive digital experiences.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Coding Challenge #133 - Particle Playground

DevFeed: [Coding Challenge #133 - Particle Playground](<https://devfeed.tech/articles/coding-challenge-133-particle-playground-29208.md>)

Original publisher: [Read original article](<https://codingchallenges.substack.com/p/coding-challenge-133-particle-playground>)

Author: John Crickett

Published: 2026-08-22T08:01:30Z

Content type: tutorial

Language: en

Sources: [Coding Challenges](<https://devfeed.tech/sources/coding-challenges.md>)

Topics: [Simulation](<https://devfeed.tech/topics/simulation.md>), [Cellular automaton](<https://devfeed.tech/topics/cellular-automaton.md>), [coding](<https://devfeed.tech/topics/coding.md>), [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [coding](<https://devfeed.tech/tags/coding.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [programming](<https://devfeed.tech/tags/programming.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [simulation](<https://devfeed.tech/tags/simulation.md>)

### AI overview

A coding challenge guides readers through building a 2D particle playground with two simulation engines: a force-based particle system and a cellular automaton. The project combines materials such as sand, water, and fire with a fireworks display whose embers can ignite the material grid.

### Source excerpt

This challenge is to build your own particle playground.

## How the Space Invader Generator Works

DevFeed: [How the Space Invader Generator Works](<https://devfeed.tech/articles/how-to-draw-a-space-invader-37293.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/invaders/>)

Author: Stanko

Published: 2025-08-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [Code Challenge](<https://devfeed.tech/topics/code-challenge.md>), [3D](<https://devfeed.tech/topics/3d.md>)

Tags: [code-challenge](<https://devfeed.tech/tags/code-challenge.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [interactive](<https://devfeed.tech/tags/interactive.md>)

### AI overview

An interactive tutorial about a Space Invader Generator made for a Creative Coding Amsterdam code challenge. It describes the project's origins, using the Rayven vector 3D renderer, and the author's research and pixel-art sketches for generating invaders.

### Source excerpt

This is an interactive article. To fully experience it, you'll need to turn JavaScript on. I recently made the Space Invader Generator for Creative Coding Amsterdam code challenge. I made it for fun of course... and galactic domination too! You can see how it looks below and in this post I'll show you how it works using an interactive animation. Here are a few invaders it can generate: While showing friends how it works, I realized the process would look great animated. So I decided to write another interactive blog post. I'll give you some background first, but if you are eager to see the process, feel free to jump straight to the interactive part. How it started # I was working on a new version of Rayven, my vector 3D renderer. Sometimes I get stuck working on tools - they turn into never-ending projects and I never actually use them to create something. At some point I became aware of this pattern, and I think I've gotten better at wrapping projects up, releasing them in one form or another, and moving on. So I thought it would be cool to do a few plots using Rayven instead of endlessly tweaking the renderer itself. I wanted something simple that I could whip up quickly. It would be a meaningful milestone, even if I didn't finish everything I planned for Rayven. Then I thought of Space Invaders. They are small, easy to render with 3D blocks, and instantly recognizable as part of video game history. I did a few renders of the classic space invader and started thinking that it would be fun to generate random ones and create a series of plots. That sounded like a good idea to share as a code challenge. The code challenge # I was pleasantly surprised that people liked the idea. We drafted some rules and the Space Invaders code challenge was on! At the time of writing, the challenge is still ongoing, but once it wraps up, I'll link to all the submissions. I've already seen some works in progress and there is some really cool stuff coming - stay tuned! From doodles to

## Why developers should embrace creative coding again

DevFeed: [Why developers should embrace creative coding again](<https://devfeed.tech/articles/why-developers-should-embrace-creative-coding-again-10247.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/why-developers-should-embrace-creative-coding-again/>)

Author: Jake Albaugh

Published: 2025-01-09T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [creative technology](<https://devfeed.tech/topics/creative-technology.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web](<https://devfeed.tech/topics/web.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML5](<https://devfeed.tech/topics/html5.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [GSAP](<https://devfeed.tech/topics/gsap.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Figma plugin](<https://devfeed.tech/topics/figma-plugin.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [design-tools](<https://devfeed.tech/tags/design-tools.md>), [developers](<https://devfeed.tech/tags/developers.md>), [figma](<https://devfeed.tech/tags/figma.md>), [figma-plugin](<https://devfeed.tech/tags/figma-plugin.md>), [free](<https://devfeed.tech/tags/free.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [html5](<https://devfeed.tech/tags/html5.md>), [svg](<https://devfeed.tech/tags/svg.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### AI overview

The article argues that developers should revive creative coding by using modern browser capabilities beyond templates and conventional design tools. It highlights HTML5, inline SVG, GSAP animations, WebGL, advanced CSS, responsive features, and newer color spaces such as HSL and OKLCH, along with the CSS color-mix() Figma plugin.

### Source excerpt

Modern browsers have evolved beyond what most design tools can do. It's up to us to break free from templates and tap into the web's true creative potential.

## Metaballs

DevFeed: [Metaballs](<https://devfeed.tech/articles/metaballs-37311.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/metaballs-generative-art/>)

Author: Stanko

Published: 2020-02-06T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [generative art](<https://devfeed.tech/topics/generative-art.md>), [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>), [coding](<https://devfeed.tech/topics/coding.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [art](<https://devfeed.tech/tags/art.md>), [coding](<https://devfeed.tech/tags/coding.md>), [computer-graphics](<https://devfeed.tech/tags/computer-graphics.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [exploration](<https://devfeed.tech/tags/exploration.md>), [generative](<https://devfeed.tech/tags/generative.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [projects](<https://devfeed.tech/tags/projects.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

A project write-up about creating Metaballs, a generative art project that combines spheres into organic shapes, slices them, and renders their outlines as vector files. The author describes exploring metaballs, learning about marching cubes and marching squares, using an existing solution, and building tooling for immediate visual feedback.

### Source excerpt

I'm all about generative art these days. Today, I present you Metaballs, my latest creation. It is one of those projects that I visualized in my head and managed to pull it off exactly how I imagined it. Somehow I came up with an idea to generate spheres, smoothly merge them to get organic looking shapes, which then I would slice up and render the outlines.I ordered a pen plotter and that is the reason I'm focused on producing vector files. One of the final images looks like this (click on it to see more): Exploration # Not sure how I started thinking about slicing these blobby objects, but I had a clear vision of what I wanted to achieve. At this point I had no idea they are called metaballs. I asked on our company's #tech-creative-coding channel, if anyone is familiar with making something like this, and my colleagues pointed out the term metaballs and marching cubes algorithm. Definition # Wikipedia defines metaballs as: In computer graphics, metaballs are organic-looking n-dimensional isosurfaces, characterised by their ability to meld together when in close proximity to create single, contiguous objects. Which makes them perfect for what I had in mind - generating organic looking blobs. Implementation # The first try # Initially I wanted to implement it myself, but I didn't really know where to start. I had an idea to hack it by overlapping two spheres and calculate a curve between them. By rotating this curve, I would create a tube and merge everything together. It looks ok-ish for two spheres, but I wasn't completely satisfied. And it was impossible do it for more than two spheres. So I gave up early on this idea. Marching on # So I went back to the marching cubes algorithm. After some research I found a wonderful post, which very thoroughly explains implementation of marching squares.Marching squares are the same algorithm as marching cubes, but in 2D. Now I understood how algorithm works, but I gave up on implementing it myself. I was more interested in bei