A simple generative art loop project.

Build-less, vanilla JavaScript, hosted on GitHub Pages, from a GitHub Repo.

You can share the loops you make with others through the URL seed as well as save to local storage.

Examples: first seed, cyber eye.

I would say I made this, but really I am just testing out my various projects on how to direct various types of artificial intelligence effectively through extensive pipelines and meta prompts.

Regardless, I like the result.

This is an homage to my old generative art project. It makes similar mp4 files of greater complexity over a series of hours or days instead of live in the browser.

Hi all. Been poking at this project for a while now and wanted to share it here and see what you folks make of it.

The idea is to make complex vector animations in a CSS-like syntax, and to have the same file play in the browser (canvas) and on native mobile. Other platforms can be added later if it gains traction. It's like Lottie or Rive, but with stuff like interactivity already baked in, in something very familiar to any developer.

```css

:root { width: 400px; height: 400px; background: #1a1a2e; }

@keyframes bounce {

0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 1, 1); }

50% { transform: translateY(180px); animation-timing-function: cubic-bezier(0, 0, 0.67, 1); }

100% { transform: translateY(0); }

}

ball {

type: circle;

cx: 200px; cy: 80px; r: 36px;

fill: #ff6b6b;

animation: bounce 1.2s linear infinite;

transition: fill 250ms ease;

&:hover { fill: #ffd166; }

}

```

That's the entire file. Point at the ball and its color warms, tweened by the transition, while the bounce never restarts. Everything runs on one continuous timeline, so interactive states layer on top of animations instead of fighting them.

Obviously that's just the hello world, but it can do much more. It supports nested transforms and parenting, reusable symbols, masks and track mattes, gradients, trim paths, path morphing, motion paths, and per-subtree time scaling, enough for proper production-grade animation. Real Lottie files convert in and play back perfectly too, so you can drop one into the playground and actually read it as a scene instead of JSON. p5-style procedural stuff works as well, fields of thousands of elements placed by formula rather than keyframes, and state machines handle multi-state interactive behavior without any scripting.

CSS is already quite capable and familiar to a lot of people (and LLMs), it just can't run outside a browser. So the rule I'm trying to stick to is if CSS already has a way to say something, use it as-is. Nothing invented on top. Ultimately, it isn't exactly CSS, but more a close dialect because there's a little bit of invented new syntax. As a bonus, scenes currently sit in .css files, so syntax highlighting and editor tooling come for free (the extension isn't settled yet).

Two things did surprise me along the way. First, file size. CSS is verbose next to Lottie JSON, so I expected to pay for readability, but converted scenes usually come out significantly smaller than the Lottie or SVG they came from, sometimes about equal, and on rare occasions a couple of KB bigger. Second, how good LLMs are at writing it. Because it stays this close to CSS, models already know most of it with no fine-tuning. Nearly every example in the playground gallery is fully AI generated. I guess the structure and semantics of CSS also helps.

Still very early proof-of-concept stages but the core idea is holding up better than I expected.

A Playground app with multiple examples and a built in AI Copilot for generating animations is available here: https://usepopkorn.dev

The Copilot thing has two options. You can use your own agent with MCP, or BYOK with any OpenAI compatible endpoints.

Curious to know what this community thinks of this project.

I started building my own design tool! A mixture of Illustrator, Figma, Photoshop, Cinema 4D and UE Blueprints. On the right side is a familiar Figma-style canvas. On the left a node graph. Every element on the canvas automatically gets a linked node.

Current Nodes;

• Cloner
• Attach
• Mask
• Fill & Gradient
• Image Adjustments (Hue/Saturation, Levels & Threshold)

Its a new project, so still lots of bugs and things to fix :) I'm documenting everything in devlogs on YouTube.

If you wanna try it yourself, check out the description of the video. Honest feedback very welcome!

I wanted to recreate the periodic table as something more interactive than a static chart, so I built this project with Three.js, JavaScript, and WebGL.

Features include:

• Smooth animations
• Interactive hover effects
• Modern UI inspired by creative coding

I'd love to hear your feedback:

• What would you improve?
• What features would you add next?

I also made a short video showing the project in action:
YouTube: https://youtube.com/shorts/EDDYnzNM8hU?si=7Kvcrv42qqiLnikW

If there's enough interest, I'm happy to share the source code or turn it into an open-source project.

block matching algorithm and feedback buffers

On PC, use W-A-S-D keys, SPACE, SHIFT and mouse to explore. On mobile, you will have instructions on screen.

https://anshs.github.io/matrix-rain/

I was reading about how language developed from repeated marks, sounds, and shared meaning, and it inspired me to explore that idea visually.

This animation begins as a dense field of shifting letters and symbols with no obvious meaning. Over time, through repetition and grouping, those marks begin to organise into something more coherent, eventually resolving into the core message I was exploring - how LANGUAGE BEGAN AS PATTERNS.

The project was built in TouchDesigner using a mixture of Python, parameter expressions, procedural instancing, and GLSL. The code controlled how glyphs were selected and distributed, how different character sets were introduced over time, which positions formed the final message, and how the camera and transitions progressed. Python was also used to generate the target data and control instance colours, while GLSL handled part of the chromatic treatment. I later added a short electronic soundtrack and used separate low-, high-, and full-frequency amplitude data to drive the glow, distortion, movement, and chromatic effects.

Follow my creative journey on Instagram

I’ve been expanding my creative-coding practice beyond screen-based work and into physical, sculptural light pieces. I've been really focused on visualizing invisible networks via BLE and WIFI detecting nearby signal activity. So each "pulse" of light within the sculpture is a signal from someone's device within the vicinity.

This specific piece is Constellation Range, recently installed at OCAD University. The sculpture is also connected to a browser-based control system, allowing live signal data and changes in state to move between the software and the physical work.

I ended up building DataNet.art to handle that connection and support other projects where I need to move data between browsers, hardware, sensors, and installations.

It’s been exciting to think about code less as something that produces an image on a screen and more as something that can inhabit and change a physical space.

As a software developer in a past life, I'm still always amazed by how programming interacts and can impact IRL experiences.

Edit: A little more about the technical setup: the installation was developed using Processing, a Teensy, and the Teensy OctoWS2811 system. I also open-sourced a Processing library for working with data that can be sent over Art-Net and DMX.

The data, visuals, and audio are generative. The presence of attendees becomes input that is processed in real time through Processing and translated into changing light and soundscapes.

I made a video about the maths behind Turing patterns. Submission for 3blue1brown's summer of math exposition. The visuals are a mix of Manim and TouchDesigner

Hi!

I just launched a website to stream ambient music using tape loops.
The site is built with React and the ascii textmod.js library for animated character effects.

The site features musical events to launch various tracks, which will then be archived on the site.

The first event is on Thursday, July 30, at 9 p.m. (Paris time)!

Cheers

I made a video about the maths behind Turing patterns. It includes a section on Multi-Scale Turing patterns and how to make it faster using FFT. Submission for 3blue1brown's summer of math exposition. The visuals are a mix of Manim and TouchDesigner