Procedural Pixel Art?

May 7, 2017 8:45 AM

I have some random lists of RGB colors (in the format "165,0,59") that I want chart out onto grids of pixels (almost a la pixel art). I'd like the first color to be plotted to the upper left box in the "checkerboard" and for the plot to continue going from left to right / top to bottom. What's the best way to do this? I have novice level programming skills, and I'd like to make this project as extensible as possible.
posted by matkline to Computers & Internet (6 answers total)

A list of RGB values, from top left to bottom right ... is the standard way to represent an image. So what's your question - what do you want to do with your okay? Put it on screen? Save it to a format like jpeg or png?

What does extensible mean? What ways would you want to extend iy?
posted by aubilenon at 8:54 AM on May 7, 2017

You could do this with HTML and Javascript. Usually, colors in HTML are specified as hex values like "#FFFFFF" (white), but CSS also supports numeric values like "rgb(255, 255, 255)" (also white).

https://www.w3schools.com/csS/css_colors.asp

To create your grid, you could either use a normal HTML table or use the newer HTML5 canvas:
http://falcon80.com/HTMLCanvas/BasicShapes/Square.html
posted by duoshao at 8:55 AM on May 7, 2017

What language? I know I have a quick php script somewhere (sorry, cant dig it up now) that makes random pixel art. The only real difference I see between yours and mine is I'm randomizing the colors and yours are defined in a list. If I remember correctly with php imagemagick it's pretty easy. Read the color from the file (or make up a color randomly in my case), plot the color on a specific pixel via (x,y) coordinate, and output to png or jpg or whatever format your want by specifying a filename.

I'd poke around github, see if you can find something similar to what you're looking for.
posted by cgg at 8:58 AM on May 7, 2017

I've used the PBM format for this sort of thing before. PBM files are text files that look like this (taken from Wikipedia):

P3
3 2
255
255   0   0     0 255   0     0   0 255
255 255   0   255 255 255     0   0   0

The first line tells you it's a PBM file, the next two lines say that it's a 3 x 2 image with color values between 0 and 255, and then the rest is the pixel values in RGB format. If you have a list of values, you can create a PBM file, then open it in an image editor and convert to PNG, JPG, etc. If you have a lot of files, you can use ImageMagick to process them all at once.
posted by ectabo at 9:18 AM on May 7, 2017 [5 favorites]

I would use Python for this task. There's a good demo in this StackOverflow answer down under "alternate solution". The remaining task will be figuring out how to get your pixel values into a list of lists, so you can pop each one off to set pix[x,y].

If you install Python with the Anaconda installer, you will already have PIL installed so the example should run without additional packages to install.
posted by john hadron collider at 2:05 PM on May 7, 2017

I'm surprised nobody's mentioned Processing yet. The 2D Array tutorial should get you started.
posted by mustardayonnaise at 3:02 PM on May 7, 2017 [1 favorite]