Inspired by Susan Kare's fresh bitmapped icons for Apple in the 80s

Wrote a Python script that reads a png transparency and outputs an array of coordinates where the pixel has a density value. Any pixel in my image that crossed a certain darkness threshold would be stored in the array.


def getActivePixels (imagePath):
	img = Image.open(imagePath)
	width, height = img.size
	pixels = img.load()
  
coordinates = []
	for h in range (height):
		for w in range (width) :
			alpha = pixels [x, y][3]
			if alpha > 0:
				coordinates. append ( [y+2, ×])
	return coordinates
  
# Provide the path to the PNG
imagePath = "/content/cdj.png"

# Get the non-transparent pixel coordinates
activeCoordinates = getActivePixels(imagePath)

# Print the coordinates
print(activeCoordinates)

I then took the array and passed it into a grid I created using JS. I 'turned on' the coordinates corresponding to the values from the output array, giving me the initial conditions of the image. only now it's in the browser, and I could click-event listeners. So when you click it, it toggles the state of the coordinate.

See the Pen Bitmap CDJ by Ondra (@whole-earth) on CodePen.