{"componentChunkName":"component---src-templates-project-detail-js","path":"/project/github-avatar-arrangement/","result":{"data":{"site":{"siteMetadata":{"host":"xenodochial-pasteur-bb9d87.netlify.com"}},"markdownRemark":{"html":"

Github has these default avatars they call identicons that are 5x5 grids with a single color. They are generated using a hashing function and a username as a seed. Despite the grid being 5x5, they are always symmetrical, so the grid is actually 3x5 with column 4 being the same as column 2 and column 5 being the same as column 1.

\n

A 3x5 grid has only 15 squares, and a square is either on or off. It dawned on me one day that the total number of permutations isn't actually that large. 2^15 = 32,768.

\n

As a hobbyist generative artist, this screamed small multiples to me.

\n

Generating an avatar

\n

An avatar can be thought of as a 15 digit binary number, where each bit represents one of the fifteen squares in the 3x5 grid. Then the first two columns are reflected across the middle column.

\n
avatar = 100 010 001 010 001\n\n1 0 0 0 1\n0 1 0 1 0\n0 0 1 0 0\n0 1 0 1 0\n1 0 0 0 1
\n

Using Processing (with Python instead of Java), this binary avatar can be turned into lovely rectangles using the following set of loops and bitwise operations:

\n
def avatar(seed, avatarSize = 50):\n    paddingSize = floor(avatarSize * 0.05)\n    tileSize = ceil(avatarSize * 0.9 / 5)\n\n    noStroke()\n\n    # Set a gray background\n    fill(0, 0, 245)\n    rect(0, 0, avatarSize, avatarSize, paddingSize, paddingSize, paddingSize, paddingSize)\n\n    # Choose a randomish color for the avatar\n    fill(random(255), random(25, 75), random(175, 225))\n\n    pushMatrix()\n    translate(paddingSize, paddingSize)\n\n    for i in range(5):\n        for j in range(3):\n            # If the bit in this square's position in the seed int is flipped, then draw a square\n            if seed & (1 << (i * 3 + j)):\n                rect(tileSize * j, tileSize * i, tileSize, tileSize)\n                # For the first two columns, also draw a square in the reflected column\n                if j != 2:\n                    rect(tileSize * (4 - j), tileSize * i, tileSize, tileSize)\n    popMatrix()
\n

Generating all the avatars

\n

Since generating an avatar has been reduced to a binary seed, generating all the avatars is as simple as iterating over all the binary values between 000 000 000 000 000 and 111 111 111 111 111. Since binary is just a base 2 number, we can instead think of these seeds as base 10 numbers. This makes the range 0..32768.

\n
for i in range(32768):\n    avatar(i)
\n

This will work for generating every single avatar, but I also wanted to see everything at once. I wanted the small multiples. Withouth thinking too hard, I just found a couple reasonable factors of 2^15 to make a nice arrangement. 2^7 × 2^8 = 2^15. Good enough!

\n
pushMatrix()\ntranslate(50, 50)\nfor x in range(128):\n    for y in range(256):\n        pushMatrix()\n        translate(23 * x, 23 * y)\n        avatar(y * 128 + x, 22)\n        popMatrix()\npopMatrix()\nsave('tiles-full.png')
\n

Technology Used

\n\n

The final arrangements

\n
\n
\n \"Full\n
\n An ordered arrangement of all 32k avatars\n
\n
\n
\n
\n
\n \"Full\n
\n A shuffled arrangement of all 32k avatars\n
\n
\n
","fields":{"id":"github-avatar-arrangement"}},"dataProjectsToml":{"projects":[{"name":"Nomad Web UI","slug":"nomad-web-ui","tags":["JavaScript","EmberJS","Cluster Scheduler","DevOps","Work"],"url":"https://nomadproject.io","year":2018,"thumbnail":"nomad-ui.png","description":"The Web UI for the Nomad cluster scheduler developed and maintained by HashiCorp. Cluster schedulers are tools designed to take arbitrary workloads and run them on arbitrary computers in a cluster. The UI helps operators in an organization maintain availability of services and computation while monitoring resources across the cluster. The UI also helps developers deploy their own services without needing the expertise operators sepcialize in.\n"},{"name":"HashiConf Generative Art Plotter","slug":"hashiconf-genart-plotter","tags":["Processing","Generative Art","SVG"],"url":null,"year":2018,"thumbnail":"hashiconf-genart-plotter.jpg","description":"An art installation at HashiConf 2018. Throughout the two conference days, the 2D plotter and a preview monitor were installed in the HashiCafe for attendees to watch and (if they were lucky) take home a one-of-a-kind keepsake.\n"},{"name":"CIVIC Platform","slug":"civic-platform","tags":["JavaScript","Data Visualization","Python","Leadership","Volunteering"],"url":"https://civicplatform.org","year":2018,"thumbnail":"civic-platform.png","description":"The CIVIC Platform is the flagship product from the CIVIC Software foundation: a non-profit I am the volunteer CTO of. The platform facilitates a data pipeline, moving public data into structured, queryable databases in the cloud. It exposes numerous APIs for building tools and stories with public data. It also comes with a web application that curates stories in the form of cards to show insights that are consumable by any citizen.\n"},{"name":"U.S. in Water","slug":"us-in-water","tags":["JavaScript","Cartography","Tippecanoe","GCP"],"url":"http://stuff.mlange.io/wc-final","year":2017,"thumbnail":"us-in-water.png","description":"A detailed look at all the rivers, streams, and bodies of water in the United States as tracked in the USGS National Hydrography Dataset. Many gigabytes of data were converted into vector tiles using Mapbox's Tippecanoe tool.\n"},{"name":"Climb Tracker","slug":"climb-tracker","tags":["JavaScript","React","Firebase"],"url":"https://climb.mlange.io","year":2016,"thumbnail":"ct-tracker-thumb.png","description":"A simple web app for tracking bouldering workouts. It focuses on quickly marking which problems were completed and which were attempted. In this way, at the end of the workout, a histogram and tally of problems and problem difficulties is plotted. There are also monthly reports to look back on.\n"},{"name":"Emoji Skin Tone Randomizer","slug":"emoji-skin-tone-randomizer","tags":["JavaScript","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-emoji-skin-tone-randomizer","year":2016,"thumbnail":"emoji-skin-tones.png","description":"A chrome extension for assigning a random skin tone to a skin tone eligible emoji that doesn't already have one assigned.\n"},{"name":"Headers Middleman","slug":"headers-middleman","tags":["JavaScript","React","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-headers-middleman","year":2015,"thumbnail":"headers-middle-man.png","description":"A chrome extension for modifying the headers of HTTP Requests based on regex pattern matching.\n"},{"name":"NPR Songs We Love Bookmarklets","slug":"npr-songs-we-love","tags":["JavaScript","Browsers"],"url":"https://github.com/DingoEatingFuzz/npr-music-we-love-bookmarklets","year":2015,"thumbnail":"npr-songs-we-love.png","description":"The NPR Songs We Love app was a wonderful thing, but it had no way to pin/favorite/star/save the tracks you liked. This was solvable in many ways, but the way that sounded the most interesting at the time was bookmarklets. With a click of a bookmarklet, the track would be saved to localstorage. I went overboard and created additional bookmarklets for seeing the track list and for disliking tracks. You know, just for fun.\n"},{"name":"Github Avatar Arrangement","slug":"github-avatar-arrangement","tags":["Python","Processing"],"url":"https://github.com/DingoEatingFuzz/github-gravatars","year":2014,"thumbnail":"github-gravatars.png","description":"A quick sketch that generates all possible Github Avatars (not including color variations). Since Github default avatars are created through the toggling of 15 states, the resulting space is only 215. Which is high, but not so high it isn't presentable in a single image.\n"}],"images":[{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter.jpg","alt":"A finished plot of the Consul product","caption":"Each of the six HashiCorp products can potentially be plotted via the generative art algorithm. This is an example of the Consul product, which is the only product\ngrid that features circles.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-nomad.jpg","alt":"A finished plot of the Nomad product","caption":"This is an example of the Nomad product. Each plot is unique, so although each product grid is typically very well ordered, here they are not.\nUsing perlin noise, some lines are dropped, spaced irregularly, and slightly rotated.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-terraform.jpg","alt":"A finished plot of the Terraform product","caption":"To prevent the art from going to abstract, each plot includes the product logo, stylized in a way that complements the line art a plotter produces.\nThen, to tie the plot to the event, the latest product version number is plotted to hopefully invoke nostalgia years later.\n"},{"project":"us-in-water","url":"/images/us-in-water-fullscreen.png","alt":"A fullscreen seenshot of the U.S. in Water project","caption":"The project is presented as a minimalist map with a set of clickable features on the left-hand side. The features on the left are hand-picked coordinates\nthat I think are interesting to look at.\n"},{"project":"us-in-water","url":"/images/us-in-water-central-california.png","alt":"Central California in the U.S. in Water map","caption":"Central California has well-documented flowlines, which make for a rich picture of the passage of water.\n"},{"project":"us-in-water","url":"/images/us-in-water-louisiana.png","alt":"Louisiana in the U.S. in Water map","caption":"As the state sinks and eordes while the gulf rises, the total land area of Luisiana is shrinking.\n"},{"project":"us-in-water","url":"/images/us-in-water-mt-hood.png","alt":"Mt. Hood in the U.S. in Water map","caption":"The shape of Mt. Hood is distinct through the features of glaciers and lakes alone.\n"},{"project":"us-in-water","url":"/images/us-in-water-salton-sea.png","alt":"Salton Sea in the U.S. in Water map","caption":"The Salton Sea is the biggest lake in California. Evident in the water lines, there are massive-scale feats of engineering surrounding the lake.\n"},{"project":"civic-platform","url":"/images/civic-platform-overview.png","alt":"The CIVIC Platform home page","caption":"The CIVIC Platform website is a gateway to a suite of story cards that each provide an interactive tool or insight that lets people understand their city a little bit better.\n"},{"project":"civic-platform","url":"/images/civic-platform-housing.png","alt":"A story card in the 2018 housing collection","caption":"All StoryCards aim to have some explanation, some data visualization, and some interactivity.\n"},{"project":"civic-platform","url":"/images/civic-platform-disaster.png","alt":"A multivariate plot chart in the 2018 disaster collection","caption":"The frontend civic frontend repo provides a collection of a UI components that enable quickly making rich and interactive visual explanations.\n"},{"project":"civic-platform","url":"/images/civic-platform-sandbox.png","alt":"The CIVIC platform sandbox","caption":"The CIVIC sandbox is a feature of the CIVIC platform that gives people a chance to dive deeper into data without having to make the jump into developer tools to run databases and notebooks locally.\n"},{"project":"climb-tracker","url":"/images/ct-home.png","alt":"The landing page for the Climb Tracker app","caption":"A straight-forward page that markets some features and requires auth. The background photo I took in Zion National Park.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-blank.png","alt":"The Climb Tracker tracker with nothing tracked yet","caption":"This is the screen you see after authenticating. It is the tracker, which is the primary experience. It has two features which are immediately\nidentifiable: a list of colored buttons for tracking a climb of a difficulty, and an undo button in the event you track something in error.\nThe third less obvious feature is the \"A\" button, which marks attempts at problems.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-full.png","alt":"The Climb Tracker tracker with various climbs tracked","caption":"As you use the climb tracker throughout your session, a histogram is formed that makes it very clear which difficulties you are focusing on.\nThis can be used to tell you when your warmup is done, if you're pushing yourself too hard and maybe that's why you aren't finishing anything, or\nsimply, what your success rate per difficulty is. The stripe-textured regions denote attempts.\n"},{"project":"climb-tracker","url":"/images/ct-reports.png","alt":"The Climb Tracker reports section","caption":"The reports section gives you a detailed memory of your climbing progress and frequency over time. The dashboard metrics at the top\nare useful for quick stats for the current month. Proceeding the dashboard metrics are monthly report cards that feature kabob\ncharts to illustrate difficulty histograms over time.\n"},{"project":"headers-middleman","url":"/images/headers-middle-man-large.png","alt":"Headers Middleman options page","caption":"The options page for Headers Middleman. Used to add \"rules\", which are regular expressions that match URLs, and \"headers\" which can be values\nfor new headers, values to override headers, or removing an unwanted header.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-love.png","alt":"NPR Songs We Love love indication","caption":"Since clicking a bookmark to add an entry to local storage gives no feedback to the user, this heart is flashed on the screen. It's just slapped\ninto the DOM with some jQuery.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-hate.png","alt":"NPR Songs We Love hate indication","caption":"Hate is a nearly identical bookmark to Love. The only differences are the local storage key and the hotlinked icon URL.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-list.png","alt":"NPR Songs We Love love list","caption":"The Love List bookmarklet acts as a toggle. If the Love List element is found on the page, it's removed, otherwise it's added. This ended up being\na tricky bookmarklet since it contains full blown templating for binding the loved track data. Included in this project write up is\na sample of what that templating looks like.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-bookmarklets.png","alt":"NPR Songs We Love bookmarklet page","caption":"This was the quick and dirty \"installation\" page. A user interested in this augmentation to the Songs We Love 2014 app would drag these links\ninto their bookmark bar. The trick being that they aren't your typical link. They take the form of javascript:<insert-lots-of-javascript-here>.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-jobs.png","alt":"Nomad UI jobs list","caption":"The Jobs List page serves as the home page for developers interacting with Nomad. It represents all software known to the cluster.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-deployments.png","alt":"Nomad UI job deployments","caption":"Nomad supports automatic rolling and green/blue deployments as well as optional canary deployments. All of this is represented in the UI\nand kept up to date in realtime.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-logs.png","alt":"Nomad UI stdout log streaming","caption":"Nomad also has a streaming HTTP API for tailing logs for allocations. The UI lets any privileged user see these logs using fetch and streaming\nrequests when possible and falling back to polling otherwise.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-stats.png","alt":"Nomad UI metrics over time","caption":"Stats in Nomad are not stored, but the UI makes a best effort attempt at tracking data over time by storing previous values in memory,\naccounting for skipped data, and persisting historical data (up to a limit) between page views.\n"}]}},"pageContext":{"slug":"/project/github-avatar-arrangement/"}},"staticQueryHashes":[]}