Vertexshaderart: the site that makes art from one number

Vertexshaderart is a browser gallery where the entire canvas is driven by a single tiny program, a vertex shader, that is handed almost nothing to work with: one counting number. From that number it decides where every point on screen goes, and the result is a room full of spinning, pulsing, surprisingly expressive generative art.

The site strips the usual graphics toolkit down to one knob and dares people to be interesting anyway. It is live at vertexshaderart.com, it is free, and most of what is on it was made by strangers showing off inside the same narrow box.

In brief

• Every piece is a vertex shader whose main input is vertexId, a number that simply counts points: 0, 1, 2, 3, and on.
• It was built by Gregg Tavares and shown on Hacker News in October 2015, where it collected 145 points and a long thread of reactions.
• The project is deliberately limited: no textures to load, no 3D models to import, just math turning a counter into positions and point sizes.
• Finished pieces get a permanent link, can be embedded anywhere in an iframe, and the whole thing is open source under a BSD licence.

One number, and a blank canvas

Most graphics tools start by handing the artist a pile of material: images, meshes, cameras, lights. Vertexshaderart starts by taking almost all of that away. The editor gives one function that runs once for every point being drawn, and the headline input to that function is vertexId. The GitHub README describes it plainly: the vertex shader's main input is "just a vertexId that counts vertices."

That is the whole premise. If the site is drawing ten thousand points, the shader runs ten thousand times, and the only thing distinguishing one run from the next is that counter climbing by one. The artist's job is to turn that lonely integer into a position in space. Everything a visitor sees, a sphere, a grid, a swarm, a ribbon, comes from arithmetic performed on that number.

It sounds like a cruel constraint. In practice it is the hook. A counter is the most generic thing imaginable, so any structure on screen is something the author conjured rather than imported. There is nowhere to hide a stolen asset. The shape is the idea.

Where the idea came from

Vertexshaderart did not appear from nowhere. Its README is candid about the lineage: it was "clearly inspired by glslsandbox.com," an older livecoding toy where people edit a fragment shader and watch the whole screen react. Fragment shaders decide the colour of pixels. Vertex shaders decide the location of points. Vertexshaderart is the mirror image of those tools, pointed at geometry instead of colour.

Visitors in the original Hacker News thread spotted the family resemblance immediately. One called it a "nice complement to the fragment shader-based" sites, naming both GLSL Sandbox and Shadertoy, the well known gallery where shader artists trade pixel-level wizardry. Where Shadertoy asks what colour a pixel should be, Vertexshaderart asks where a point should sit. The two questions produce very different art.

The author posted it himself. The Show HN submission went up on 30 October 2015 under the handle greggman, climbed to 145 points, and drew fifty comments ranging from delight to a warning that an early WebGL bug had triggered a full kernel panic on one commenter's Mac. The rough edges were part of the charm of a new corner of the web.

The person behind it

greggman is Gregg Tavares, a graphics programmer whose teaching work is a reference point for a generation of WebGL developers. He is the author of WebGL Fundamentals, a widely cited tutorial site, and has spent years explaining how the browser talks to the GPU. Vertexshaderart reads like a toy built by someone who wanted a playground for the exact idea he spends his time teaching: that a shader is just a small program run in parallel, millions of times, very fast.

How a shader turns counting into shapes

The mechanics are worth understanding, because they explain why the art looks the way it does. A vertex shader has two jobs on this site: decide the final position of each point, written to a variable called gl_Position, and decide how big that point is, written to gl_PointSize. By default the points are drawn as little squares, a detail confirmed when a Hacker News commenter asked whether the default square could be swapped for a circle.

The inputs

Beyond vertexId, the shader is handed a few more values documented in the README. There is vertexCount, the total number of points being drawn, which lets an author write art that rescales itself instead of hard-coding a count. There is resolution, the width and height of the display, so a piece can adapt to a phone held tall or a monitor turned wide. A running clock supplies the animation, which is why nothing on the site sits still.

The outputs, and a worked intuition

Picture the simplest case. The shader takes vertexId, multiplies it by a small angle, and feeds that into a sine and cosine to get an x and a y. Suddenly the counter is tracing a circle. Multiply the angle differently and the circle becomes a spiral. Fold in the clock and the spiral rotates. Fold in vertexCount and the spiral knows how many arms it should have. Each added line of math is another rule the points must obey, and the emergent shape is the sum of those rules.

No single point knows it is part of a spiral. It only knows its own number and the formula. The pattern lives in the formula, run thousands of times in parallel on the graphics card. That is the quiet lesson underneath the eye candy, and it is the same lesson Tavares teaches in longer form elsewhere.

Why the limits are the point

The constraint is not an accident the author apologises for. It is the thesis. Under a heading that simply reads "Why?", the README answers: "Because limits are AWESOME! Like 4k demos (or 1k) setting limits almost always leads to more creativity."

That line nods to the demoscene, the decades-old subculture where programmers compete to produce audiovisual pieces that fit in absurdly small files, four kilobytes or even one. Remove the ability to bundle assets and people are forced to generate everything from code. Vertexshaderart applies the same discipline to the browser. There is no upload button for a 3D model. If an artist wants a torus, they have to describe a torus in math.

Scarcity tends to concentrate effort. Because the toolkit is so small, two pieces that look nothing alike can be studied side by side and understood as different answers to the same question. The gallery becomes a conversation about technique rather than a showcase of who had the best source material. It is a close cousin of the generative-art spirit found at sites like Sandpile, where simple rules are left to run until something intricate falls out.

The constraint also makes failure cheap and legible. When a piece on a normal 3D platform breaks, the cause could be a missing texture, a broken model, a camera in the wrong place, or any of a dozen other moving parts. Here there is one moving part. If the shape is wrong, the math is wrong, and the math is right there to read. That tight loop between cause and effect is exactly what makes the site a good teacher as well as a toy.

From desktop demos to a browser tab

Part of what made Vertexshaderart feel novel in 2015 was simply where it ran. For most of computing history, squeezing art out of a graphics card meant compiling native code and distributing a program people had to trust and install. The demoscene traditions the README salutes grew up in that world of executables. WebGL moved that capability into the browser, letting a shader run inside a tab with nothing to download, and sites like this one turned that shift into a social space.

That is why the Hacker News thread mixed wonder with wariness in equal measure. Commenters marvelled that this kind of direct access to the GPU was now a link away, while others noted the cost: a browser tab could suddenly peg a processor, and in one unlucky case took down an entire operating system. The same openness that lets anyone paste in a shader and run it also lets anyone paste in a shader that misbehaves. It is the familiar bargain of the open web, played out in geometry.

Seen in that light, the single-number rule is not only an artistic constraint but a practical one. By handing the shader so little and asking it to do so much with math, the site keeps each piece small and self-contained. There is no asset pipeline to break, no dependency to rot. A shader written in 2015 still runs today because all it ever needed was a counter and a formula, both of which the browser still happily provides.

Sound, motion, and sharing

The pieces are not silent slideshows. The platform can attach music, originally through SoundCloud, so a shader can pulse in time with a track. The repository's notes mention soundcloud tracks and a history of touch data that a shader can read, which is how some pieces respond to where fingers or a cursor have travelled across the screen. Movement, then, can come from three places: the internal clock, the viewer's touch, and the beat of a song.

Sharing is built in. Every saved piece lives at its own permanent address. The README's own example points at one such permalink, and the site invites anyone to drop that URL into an iframe to embed a running shader on a blog or slide. When embedded, the editing interface disappears and the viewer gets a clean play button. A piece of GPU math becomes a widget anyone can paste.

A note on remixing

Because the source of every piece is right there in the editor, the natural way to learn is to open something impressive and start changing numbers. Flip a sign, double a frequency, and watch the shape mutate. The format rewards curiosity more than it punishes ignorance, since the worst outcome of a bad edit is usually a blank screen or a frozen blob, not a broken file.

A fresh canvas is available too, reached from the editor's own new option, for anyone who would rather start from an empty function than inherit someone else's. Either way the loop is the same: type a little math, see it move, adjust. The distance between a thought and a result on screen is short, and that shortness is most of the appeal.

Who makes the gallery work

The front page is a wall of thumbnails that can be sorted by featured, latest, or random. That last option matters more than it sounds. Random surfacing means an obscure experiment from years ago has the same chance of catching an eye as a polished showpiece, which keeps the gallery feeling like a flea market of ideas rather than a ranked leaderboard. One early commenter grumbled that the popular list kept rearranging itself, a small sign of how much churn the gallery had even at launch.

For newcomers the site offers lessons, a guided path into what the inputs mean and how to bend them. For the confident, there is a blank editor and the company of everyone else's visible source. And for anyone who wants to look under the hood of the platform itself, the whole project is public: the vertexshaderart repository is open source under a BSD-3-Clause licence, with the codebase in the middle of a move from an older framework to a simpler static build.

There are honest caveats, most of them raised by the Hacker News crowd on day one. Pieces that draw a lot of points can lean hard on the GPU, and one commenter noted the irony of watching WebGL peg a processor on work a native app would barely notice. Another warned that older browsers and operating systems could choke. The site lives at the frontier of what a browser will cheerfully do, and the frontier is occasionally bumpy.

How to try it without knowing shaders

None of this requires fluency in graphics programming to enjoy. The lowest-effort visit is to open the gallery, sort by featured, and simply watch a few pieces loop. The next step up is to click into one, scroll to its code, and change a single number to see what happens. The lessons exist for anyone who wants the vocabulary. And the random button exists for anyone who just wants to be surprised.

What makes the site quietly rewarding over time is that the constraint teaches the viewer too. After scrolling through enough pieces, patterns in the patterns start to show: the circle trick, the grid trick, the way a clever use of vertexCount produces nested structure. A gallery built on one number ends up being a gallery about how much can be grown from very little. For a single-purpose website, that is an unusually durable idea.

FAQ

What exactly is a vertex shader?

It is a small program the graphics card runs once for every point it draws, whose job is to decide where that point goes. On Vertexshaderart that program is the entire artwork. The README frames the site around editing only the vertex shader, with the counter vertexId as its primary input and gl_Position and gl_PointSize as its outputs.

How is it different from Shadertoy?

Shadertoy and GLSL Sandbox are built around fragment shaders, which decide the colour of each pixel on a flat screen. Vertexshaderart is built around vertex shaders, which decide the location of each point in space. Hacker News commenters described it as the complement to those sites, and the README names GLSL Sandbox as its direct inspiration.

Do I need to install anything?

No. It runs in a modern browser with WebGL support. Early users did report performance strain and, in rare old configurations, crashes, so a reasonably current browser and machine help. Nothing is downloaded and every piece has a shareable link you can embed in an iframe.

Who created it and is it open?

It was made by Gregg Tavares, known online as greggman and as the author of WebGL Fundamentals, and posted to Hacker News in 2015. The project is open source on GitHub under a BSD-3-Clause licence, so the platform itself can be read, forked, and run locally.