Comments on: paint by numbers and then number by painting

Question: paint by numbers and then number by painting

ian1977 — Wed, 11 Mar 2009 16:30:58 -0800

How can I convert a list of x, y, R, G, B coordinates into a bitmap?

My previous question asked if there was a way to convert a bitmap into a usable set of x, y, z coordinates. A dead simple solution using the program ImageJ was suggested by kisch mokusch.

But now I need to know how to do this backwards. Meaning, how can I convert a set of [x, y, R, G, B] coordinates back into a bitmap?

Ideally the solution will not involve coding. Is there is an existing solution for this type of thing?

By: aubilenon

aubilenon — Wed, 11 Mar 2009 16:43:30 -0800

are x & y integers? Do you have the full area covered evenly?

By: ian1977

ian1977 — Wed, 11 Mar 2009 16:45:39 -0800

are x & y integers? Do you have the full area covered evenly?

Yes. The list of x,y RGB values will have been extracted from an existing bitmap, modified via excel or something, and then, hopefully, exported as a bitmap somehow.

So, yeah, the values will all be bitmap friendly.

By: Monday, stony Monday

Monday, stony Monday — Wed, 11 Mar 2009 16:50:13 -0800

In what order are they? If they are in order (all pixels from the first row, from left to right, then all from the second row, etc.), your task will be simpler, as you will be able to ignore the (x, y) numbers.

By: goingonit

goingonit — Wed, 11 Mar 2009 16:50:53 -0800

Write a PPM file and then use an image-converter program like ImageMagick's convert to convert it to a .bmp.

PPM files are just about the simplest things ever. You have one line that reads:

P3

(just those characters) Then another that reads:

W H

where W is the image's width and H is its height.

Then, for each pixel (starting with the top left, then the top row second from left, etc.) you have 3 numbers from 0-255 (the R, G, B values for the pixel) separated from each other by whitespace.

By: goingonit

goingonit — Wed, 11 Mar 2009 16:52:17 -0800

...so if you have an Excel file with your 5-tuples, just sort them first by y, then by x. Then write the remaining 3 columns to a text file, preceded by those "P3" and "W H" lines, and you're done.

By: Blazecock Pileon

Blazecock Pileon — Wed, 11 Mar 2009 16:58:01 -0800

Untested, but it should work or at least get you close, given a tab-delimited text file, with each 5-tuple (x, y, r, g, b) on its own line:

#!/usr/bin/perl



use warnings;

use strict;

use GD::Simple;



# use standard input to read coordinates into array reference

my $coordinatesRef;

my $index = 0;

while (<>) {

  chomp($_);

  my @coordinates = split("\t", $_);

  $coordinatesRef->[$index]->{x} = $coordinates[0];

  $coordinatesRef->[$index]->{y} = $coordinates[1];

  $coordinatesRef->[$index]->{r} = $coordinates[2];

  $coordinatesRef->[$index]->{g} = $coordinates[3];

  $coordinatesRef->[$index++]->{b} = $coordinates[4];

}

 

my $img = GD::Simple->new(maxX($coordinatesRef), maxY($coordinatesRef));



foreach my $coordinate (@$coordinatesRef) {

  $img->fgcolor($coordinate->{r}, $coordinate->{g}, $coordinate->{b});

  $img->rectangle($coordinate->{x}, $coordinate->{y}, $coordinate->{x}, $coordinate->{y});

}



print $img->png;



# subroutines



sub maxX {

  my ($coordsRef) = @_;

  my $result = 0;

  foreach my $coord (@$coordsRef) {

    if ($coord->{x} > $result) { $result = $coord->{x}; }

  }

  return $result;

}



sub maxY {

  my ($coordsRef) = @_;

  my $result = 0;

  foreach my $coord (@$coordsRef) {

    if ($coord->{y} > $result) { $result = $coord->{y}; }

  }

  return $result;

}

By: Blazecock Pileon

Blazecock Pileon — Wed, 11 Mar 2009 17:03:35 -0800

That would be: imgScript.pl < myCoordinates.txt > myBitmap.png

By: hexatron

hexatron — Wed, 11 Mar 2009 18:18:26 -0800

Or you could edit it in a text editor and display it in any browser:



<head><title>Your Title Here</title>

<style>

td {width:1px}

tr {height:1px}

</style>

</head>

<body>

<table border='0' cellspacing='0' cellpadding='0'>

<tr>

<td style='background-color: #ffffff'/>

<td style='background-color: #ffffff'/>

<td style='background-color: #ffffff'/>

<td style='background-color: #ffffff'/>

<td style='background-color: #ffffff'/>

<td style='background-color: #ffffff'/>

...

<td style='background-color: #000000'/>

<td style='background-color: #000000'/>

<td style='background-color: #000000'/>

</tr

></table>

</body>

</html>

This uses the pixels in hex; you can also use
<td style='background-color: rgb(255,220,0)'/>
if you prefer decimal red-green-blue

The files are kind of big, but they compress amazingly well.

By: abcde

abcde — Wed, 11 Mar 2009 23:57:07 -0800

hexatron needs some sort of prize for cleverest answer. No downloads needed! Here's another web-based version that takes a simple CSV file (no quotes--just numbers, commas and newlines) right on the page by copy-and-paste. It uses the Canvas tag so, with a recent version of Firefox, you can right-click and save the image rather than having to do something silly like doing a print screen and cropping. I took a few minutes to adapt it from a function that does something very similar from a script I made. You'd probably find it even easier than using PPM, because Excel can put out CSV.

By: abcde

abcde — Thu, 12 Mar 2009 04:53:37 -0800

Oh yeah--be mindful that Firefox might get a bit tremulous if you try to ram a million-line file into a form box. If you want to use my thing and you're dealing with big images, MeMail me and I'll change a couple of lines so you can save the page and have it work off a local file.