# Breaking down Krypton

DevFeed: [Breaking down Krypton](<https://devfeed.tech/articles/breaking-down-krypton-37246.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/breaking-down-krypton/>)

Author: Stanko

Published: 2022-03-01T00: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>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Tooling](<https://devfeed.tech/topics/tooling.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [ascii](<https://devfeed.tech/tags/ascii.md>), [browser](<https://devfeed.tech/tags/browser.md>), [diagram](<https://devfeed.tech/tags/diagram.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [tooling](<https://devfeed.tech/tags/tooling.md>)

## AI overview

This article breaks down how "Krypton," a generative artwork, was created. It discusses the author's JavaScript, p5.js, and custom tooling, including parameter controls, browser-history-based iteration, and the use of Voronoi diagrams to generate the drawing.

## Source excerpt

This post was originally written for our internal technology newsletter at Work & Co. It is a little bit adapted for web, but the content is almost identical. About a year ago I made this plot. It is called "Krypton"Named by a dear friend and ex-colleague, and I'll try to break down how it was made. The wonderful thing about generative art is that code is just a tool. Thing that really matters is the actual artwork. In this specific case, code is straightforward and relatively simple. But it produces drawings that, in my opinion, look visually pleasing and have a nice sense of depth to them. Tooling # For all of my generative work, I use plain JavaScript, p5.js and a couple of custom-made tools. These tools are often crude, but they do exactly what I want so I don't mind. With each new project I keep adding more features and polishing them. At some point these tools may reach the point where they are presentable. If that happens I'll gladly share them with the world and open source everything. This is how the interface looks. I have an easy way to add controls for image parameters. These controls allow me to tweak drawings with a short feedback loop. Each time a parameter is changed, the image is redrawn and the parameter is reflected in the URL. This allows me to go through iterations using the browser history. To make navigation through the history easier, for each unique combination of parameters, I generate a random color and ASCII face. That is why my browser history looks like this :) Voronoi diagram # I use Voronoi diagrams a lot in my drawings. So much, that I'm sometimes trying to avoid them, to make sure I'm not limiting myself to a single algorithm. Voronoi diagram takes a collection of points, and then partitions a plane into polygons, where each polygon's edge is right in the middle of two points. It sounds like a lot, but if you study this image, it should become clearer. For a more detailed explanation you can check out the article on Wikipedia. Gener