# creative coding Published articles for creative coding. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Inside the First Three.js Conference in Paris DevFeed: [Inside the First Three.js Conference in Paris]() Original publisher: [Read original article]() Author: Manoela Ilic Published: 2026-09-10T08:30:11Z Content type: news Language: en Sources: [Codrops]() Topics: [Three.js community](), [webgpu]() Tags: [3d-web-development](), [ai](), [articles](), [browser](), [coding](), [codrops](), [community](), [conference](), [creative-coding](), [creative-development](), [creative-technology](), [creativity](), [creators](), [developers](), [digital-experiences](), [event](), [experiments](), [frontend-development](), [generative-art](), [immersive-web](), [interactive-web-experiences](), [javascript-3d](), [shaders](), [three-js](), [three-js-community](), [three-js-conference](), [three-js-conference-paris](), [three-js-demos](), [three-js-developers](), [three-js-projects](), [three-js-talks](), [three-js-web-development](), [three-js-workshops](), [web-3d](), [web-design](), [webgl](), [webgpu]() ### AI overview A live look at the first Three.js Conference in Paris, covering community moments, opening talks, a Zelda rebuild moving from WebGL to WebGPU, and a discussion about AI and coding. ### Source excerpt A look inside the first-ever Three.js Conference, straight from Paris. ## Turning Names Into Digital Architecture with Three.js DevFeed: [Turning Names Into Digital Architecture with Three.js]() Original publisher: [Read original article]() Author: Serhii Polyvanyi Published: 2026-09-09T17:55:00Z Content type: article Language: en Sources: [Codrops]() Topics: [Three.js community](), [Three.js custom shaders](), [Three.js shaders]() Tags: [3d](), [architecture](), [articles](), [best-free-frontend-development-resources](), [best-javascript-libraries-for-animations](), [best-web-development-blogs](), [conference](), [creative-coding](), [creative-ui-ideas-for-web-design](), [css-animations](), [css-grid-vs-flexbox](), [css-hover-effects](), [css-only-effects](), [experiment](), [frontend-development](), [gsap-animation-examples](), [how-to-build-a-responsive-website-from-scratch](), [how-to-create-parallax-scrolling-effects](), [how-to-create-smooth-css-transitions](), [how-to-make-a-portfolio-website-interactive](), [how-to-optimize-animations-for-performance](), [html5-and-css3-tricks](), [javascript-effects](), [javascript-ui-interactions](), [micro-interactions-for-websites](), [modern-web-development](), [react-ui-animations](), [step-by-step-guide-to-webgl-animations](), [svg-animations-in-css](), [three-js](), [three-js-3d-animations](), [three-js-conference](), [ui-ux-design-tips](), [web-design-tutorials](), [webgl-tutorials-for-beginners](), [wordpress-themes-and-plugins]() ### AI overview An interactive Three.js experiment turns typed names into lightweight, metallic-looking 3D letter structures. It explains contour generation, interpolation and deformation, structural line geometry, and a custom shader with a baked reflection map. ### Source excerpt For the Three.js Conference in Paris, BL/S® created an interactive experiment that transforms your name into a dynamic 3D structure. ## Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU DevFeed: [Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU]() Original publisher: [Read original article]() Author: Ming Jyun Hung Published: 2026-09-09T14:11:57Z Content type: article Language: en Sources: [Codrops]() Topics: [webgpu](), [procedural flowers]() Tags: [3d](), [articles](), [case-study](), [creative-coding](), [deep-dive](), [flower-animation](), [generative](), [generative-art](), [generative-garden](), [generative-tendrils](), [gpu-instancing](), [ink-wash-effect](), [interactive-3d](), [japanese-art](), [japanese-print-style](), [procedural](), [procedural-animation](), [procedural-art](), [procedural-flowers](), [real-time](), [real-time-3d](), [three-js](), [three-js-case-study](), [three-js-shading-language](), [toon-shading](), [tsl](), [tsl-shaders](), [vat](), [vertex-animation-textures](), [webgpu](), [webgpu-shaders]() ### AI overview A technical deep dive into a WebGPU-based, real-time 3D generative garden. It describes combining toon shading, ink-wash shadows, silk-like grain, and procedural flowers and tendrils to translate Japanese print-inspired visual principles into an interactive web scene. ### Source excerpt A technical deep dive into Still, exploring how WebGPU, procedural systems, and Japanese art influences come together to create a living generative garden. ## Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL]() Original publisher: [Read original article]() Author: Filip Kantedal Published: 2026-09-08T13:09:48Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [webgpu](), [Three.js custom shaders](), [refraction shader](), [signed distance functions]() Tags: [3d-web-experiences](), [chromatic-dispersion](), [creative-coding](), [custom-shaders](), [glass](), [glass-shader](), [glassmorphism](), [gpu-rendering](), [infinite](), [infinite-carousel](), [infinite-grid](), [interactive-3d](), [liquid-glass](), [next-js](), [r3f](), [react-three-fiber](), [refraction-shader](), [sdf](), [shader-effects](), [signed-distance-functions](), [three-js](), [three-js-shading-language](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tutorials](), [video](), [webgl](), [webgpu](), [webgpu-shaders]() ### AI overview A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures. ### Source excerpt An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders. ## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js]() Original publisher: [Read original article]() Author: Marek Jóźwiak Published: 2026-09-06T13:09:52Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Three.js webcam]() Tags: [3d](), [3d-face-mask](), [canonical-face-model](), [creative-coding](), [face-landmarks](), [face-mesh](), [face-tracking](), [facial-landmarks](), [generative-graphics](), [gpu](), [inference](), [interactive-3d](), [javascript-3d](), [mediapipe](), [mediapipe-face-landmarker](), [mesh](), [real-time](), [real-time-3d](), [real-time-face-tracking](), [svelte](), [three-js](), [three-js-face-mask](), [three-js-webcam](), [threlte](), [threlte-three-js](), [tutorial](), [tutorials](), [video](), [vision](), [wasm](), [webcam](), [webcam-effects](), [webcam-face-tracking](), [webgl](), [webgl-face-tracking]() ### AI overview Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte. ### Source excerpt Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask. ## Building an Infinite Loom: Unravelling Images into Threads with Three.js DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js]() Original publisher: [Read original article]() Author: Clément Grellier Published: 2026-09-05T12:50:25Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Web Development]() Tags: [creative-coding](), [creative-web-experiments](), [digital-art](), [frontend-animation](), [generative-art](), [glsl-shaders](), [gsap](), [html](), [image-animation](), [image-distortion](), [image-effects](), [image-slider](), [images](), [infinite-slider](), [interactive-images](), [interactive-web-design](), [javascript-animation](), [marquee](), [playground](), [ribbon-animation](), [shader-effects](), [shaders](), [thread-animation](), [three-js](), [three-js-demo](), [three-js-shaders](), [unraveling-effect](), [webgl](), [webgl-animation](), [webgl-demo]() ### AI overview A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion. ### Source excerpt An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen. ## From Rays to Meshes: Building Vercel's Prism with vgpu DevFeed: [From Rays to Meshes: Building Vercel's Prism with vgpu]() Original publisher: [Read original article]() Author: Matias Gonzalez Fernandez Published: 2026-09-03T16:01:06Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [GPU]() Tags: [3d](), [3d-graphics](), [adaptive-rendering](), [articles](), [creative-coding](), [glass](), [glass-shader](), [glsl](), [glsl-shaders](), [gpu](), [gpu-optimization](), [gpu-rendering](), [interactive-web-graphics](), [javascript-graphics](), [light-refraction](), [mesh](), [prism-shader](), [ray-tracing](), [real-time-rendering](), [real-time-shaders](), [shader-performance](), [shader-programming](), [shaders](), [vercel](), [vercel-prism](), [vercel-vgpu](), [vgpu](), [web-graphics](), [web-shaders](), [webgl](), [webgl-shaders]() ### AI overview A tutorial on creating Vercel's prism visual with vgpu shaders. It replaces costly ray-based light simulation with refracted paths connected into a 3D mesh, then adds an environment-mapped glass shader, bloom, and particles. ### Source excerpt A look at how Vercel's vgpu creates a performant prism effect using shaders, geometry, glass, and adaptive rendering. ## Coding Challenge #133 - Particle Playground DevFeed: [Coding Challenge #133 - Particle Playground]() Original publisher: [Read original article]() Author: John Crickett Published: 2026-08-22T08:01:30Z Content type: tutorial Language: en Sources: [Coding Challenges]() Topics: [Simulation](), [Cellular automaton](), [coding](), [creative coding](), [Graphics](), [Canvas]() Tags: [canvas](), [coding](), [creative-coding](), [graphics](), [programming](), [real-time](), [simulation]() ### 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]() Original publisher: [Read original article]() Author: Stanko Published: 2025-08-15T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [creative coding](), [Code Challenge](), [3D]() Tags: [code-challenge](), [creative-coding](), [how-to](), [interactive]() ### 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 ## Reachy Mini - The Open-Source Robot for Today's and Tomorrow's AI Builders DevFeed: [Reachy Mini - The Open-Source Robot for Today's and Tomorrow's AI Builders]() Original publisher: [Read original article]() Author: Thomas Wolf; Matthieu Lapeyre Published: 2025-07-09T00:00:00Z Content type: release Language: en Sources: [Hugging Face - Blog]() Topics: [AI, ML & Data Engineering](), [SDKs]() Tags: [ai](), [ai-models](), [community](), [creative-coding](), [multimodal](), [open-source](), [python](), [reachy](), [robotics]() ### AI overview Reachy Mini is an open-source desktop robot for human-robot interaction, creative coding, and AI experimentation. It offers Python and simulation SDKs, multimodal sensors, and community-shared behaviors, with a lite kit or autonomous configuration. ### Source excerpt We're on a journey to advance and democratize artificial intelligence through open source and open science. ## Be Mine and Add Interaction with Compose and Canvas DevFeed: [Be Mine and Add Interaction with Compose and Canvas]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:08:03.778000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Canvas](), [Compose](), [compose-multiplatform](), [SVG](), [Figma]() Tags: [canvas](), [compose](), [creative-coding](), [figma](), [interaction](), [svg]() ### AI overview This tutorial shows how to use Compose and Canvas to draw interactive heart-shaped candies. It explains detecting pointer input gestures so the candies scale larger when touched, and builds on earlier work using SVG path strings with Compose Multiplatform. ### Source excerpt Valentine's Day is approaching, and while I prefer the Finnish version ("Friend's Day"), I was inspired to do some creative coding in the holiday theme. The Hollywood-centric film industry (in addition to globalization in general) has carried those heart-shaped candies to the North as well. While browsing some images for inspiration, I decided to use them for the next piece I'm writing. And that's not all! I also wanted to continue my series of Canvas-related blog posts, so this one walks through another concept with Canvas: How to detect pointer input gestures and add some interaction. So, what are we building today? Here's a video showing some heart-shaped candies with messages and how they scale bigger when I'm touching them: Let's get coding! Drawing the Hearts This project builds on my previous blog post, Using SVGs on Canvas with Compose Multiplatform, which explained how to draw from SVG's path strings to Compose Canvas. I prepared an SVG image on Figma and then extracted the path strings to draw the hearts. We will utilize some functions from the previous blog post: Float.scaleToSize and PathNode.scaleTo. I won't explain them in this blog post; just mention them. If you want a refresher on how they work, head to the blog post describing them. Alright, let's start by drawing one heart on Canvas. Drawing One Heart We want to extract the logic for drawing the heart to a function. Let's call it drawCandyHeart, and pass the top-left offset, the size of the heart, and the color we're drawing the heart with to the function: private fun DrawScope.drawCandyHeart( topLeft: Offset, heartSize: Size, color: Color, ) { } I've defined the path strings in a separate list, but I will leave them out from this blog post for brevity. They're included in the final code, which you can find at the end of the blog post. We can get the path strings with a function pathString(color: Color): Pair, which returns the two path strings with the color with different opacity ## Using SVGs on Canvas with Compose Multiplatform DevFeed: [Using SVGs on Canvas with Compose Multiplatform]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:09:33.844000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [compose-multiplatform](), [Canvas](), [SVG](), [Compose](), [creative technology](), [Figma]() Tags: [canvas](), [compose](), [compose-multiplatform](), [creative-coding](), [developer-tools](), [figma](), [svg]() ### AI overview This tutorial explains how to use SVG path data to draw SVG components on Canvas in a Compose Multiplatform application. It covers extracting path data from SVG source, storing paths with color information, and preparing them for rendering on Android and iOS. ### Source excerpt One thing that has continued to amaze me with building my Compose Multiplatform app is how easily everything has worked with Canvas. When I started building Neule.art, I assumed that Canvas would cause some problems, but it has worked smoothly on both Android and iOS. I've been writing posts about creative coding on Canvas (see, for example, Not a Phase - Text with Compose and Canvas), and also about my First Impressions of Compose Multiplatform, and this post combines elements from both themes. There are different ways to parse an SVG to be used with Compose, and in this blog post, I'm looking into using path data. This approach requires some manual work, but it also allows better flexibility for controlling, e.g., colors of the individual elements within the SVG. What We're Building Even though I'd love to show how I've built the shirt I'm using in Neule.art, simplifying the process into the form of a blog post is too difficult a task. I decided to create a smaller SVG, which we're going to convert into Canvas. It looks like this: The hearts I'm using in the SVG are from Sarah Laroche's Vector Heart Figma resource. And if you've ever seen the colors anywhere, you might recognize them as being from the non-binary flag. Getting the Paths from an SVG We first need something from the original SVG to draw it on Canvas: the paths of individual components within the SVG. In an SVG, the path's d-attribute contains the commands for defining the shape being drawn, and we're using that to parse the SVG to the path on Canvas. If you're unfamiliar with SVGs, I recommend checking MDN's documentation on SVGs, as it contains much in-depth information about SVGs. So, to prepare for drawing paths on Canvas, we'll need an SVG image as code. Then, we need to copy the path's d-attribute's content and finally store them somewhere inside our code. There are several options for opening the SVG's code - for example, open the file in an IDE or inspect it in the browser's developer tools. I ## Why developers should embrace creative coding again DevFeed: [Why developers should embrace creative coding again]() Original publisher: [Read original article]() Author: Jake Albaugh Published: 2025-01-09T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [creative coding](), [creative technology](), [browsers](), [Web](), [CSS](), [HTML5](), [SVG](), [GSAP](), [modern web development](), [WebGL](), [Figma plugin]() Tags: [animation](), [browsers](), [creative-coding](), [css](), [design](), [design-tools](), [developers](), [figma](), [figma-plugin](), [free](), [gsap](), [html5](), [svg](), [tools](), [web](), [webgl]() ### 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]() Original publisher: [Read original article]() Author: Stanko Published: 2020-02-06T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [generative art](), [creative coding](), [Graphics](), [coding](), [Algorithm](), [implementation](), [render]() Tags: [algorithm](), [art](), [coding](), [computer-graphics](), [creative-coding](), [exploration](), [generative](), [generative-art](), [graphics](), [implementation](), [projects](), [render]() ### 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 ## Creating interactive article content with React and Contentful DevFeed: [Creating interactive article content with React and Contentful]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2019-06-26T09:37:42Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [Contentful](), [React](), [Markdown](), [HTML]() Tags: [contentful](), [creative-coding](), [html](), [interactive-content](), [markdown](), [online-publishing](), [react]() ### AI overview Clue describes adding interactive content to Markdown-based articles in Contentful with custom React components. It discusses an initial shortcode approach using HTML comments and identifies its brittleness and hard-coded text as limitations. ### Source excerpt Coding for the future of online publishingIllustration by Marta Pucci Note: this article was a joint effort between Clue and Contentful. You can find the original version on Contentful's blog here. You can also watch Jesse's talk that inspired this post. A year ago, we relaunched the Clue website as an encyclopedia for women and people with cycles. Clue's first product is a period tracker app, which is used by over 10 million people to track their symptoms and learn about patterns in their reproductive health. With the website relaunch, we put all of our content together in one organized place where people could more easily get the information they want. Here's an example of some of our encyclopedic content. This is one of our most popular articles, which explains what the significance of period blood color is. (Spoiler alert: it's not that significant.) We have a ton of articles like these. Lately, we've been thinking that our readers might be better served by interactive content that does more showing and less telling. Another of our top 10 most popular articles is titled, "What is the clitoris?". The article goes into detail about the anatomical structure of the clitoris, but the entire article was just text. We thought we could do better and asked ourselves: what if, as you scroll through and read about the different parts of the clitoris, an illustration would highlight the parts being discussed so you could really get what you're reading about? In our Contentful setup, we have a content type called "Article" with a Markdown body field. This field contains a bunch of text in the clitoris article, but we wanted to figure out how to get a plain text field to also include interactivity. Our first attempt at this was to extend Markdown's syntax using the concept of "shortcodes." Basically, this means inserting an HTML comment in the middle of the article body, with special syntax inside of it that refers to an interactive piece. Our Markdown renderer would pick up ## Recording and Sharing Phone Calls DevFeed: [Recording and Sharing Phone Calls]() Original publisher: [Read original article]() Published: 2012-07-12T00:00:00Z Content type: article Language: en Sources: [SoundCloud Backstage Blog]() Topics: [Node.js]() Tags: [announcements](), [api](), [app](), [audio](), [creative-coding](), [events](), [hacks](), [node-js](), [redis]() ### AI overview The article describes Phone Recorder, a Node.js app built at a news hack day to record conference calls through Twilio and upload them to SoundCloud. It uses Redis to associate a moderator's SoundCloud access token with a call. ### Source excerpt A few weeks ago, I attended News Hack Day in San Francisco. News Hack Days are events that bring together journalists, developers and designers for multi day creative coding and brainstorming sessions. I really like the idea of hack days that bring together people from different backgrounds. After chatting with a few journalists, it became obvious to me that recording interviews on the phone is a real pain. I saw this as an opportunity to build a fun app that would make this easier for people.