image Color Cycling problem

Programming Questions

suhit

in Programming Questions • 1 year ago

Hi, I am using the example given by Christophe Guebert for color cycling ( link and images). It says that the the images are 8 bit with dynamic pallete. Actually I want to add different images than given in the example. but I am not able to figure out how to create the images which are used in the example ( auther says the images are in scenes are actually Amiga IFF/ILBM files, originally created with Deluxe Paint in DOS). Is it possible to create similar images using Photoshop or any other software. below is the code. please help me

CyclingImage[] images;
void setup()
{
size(640,480);
images = new CyclingImage[3];
images[0] = new CyclingImage("C1.gz");
images[1] = new CyclingImage("C2.gz");
images[2] = new CyclingImage("C3.gz");
}
void draw()
{
// Choosing images to be displayed
float f = constrain(mouseX / (float) width, 0, 1);
f *= images.length - 1;
int index = floor(f);
f -= index;
f = 3*f*f - 2*f*f*f; // smoother interpolation
float t = millis() / 1000.0 / 280; // arbitrary coefficient for speed
images[index].update(t);
images[index].display();
tint(color(255, f*255)); // using "tint" to go from one image to the next
images[index+1].update(t);
images[index+1].display();
tint(color(255));
//if(showFPS) text(frameRate, 0, 10);
}
// 8-bits image with an dynamic palette
class CyclingImage
{
PImage img;
private PImage _img;
private color[] _originalColors;
class Cycle { int reversed, rate, low, high; }
private Cycle[] _cycles;
private int[] _pixels, _cyclingPixels; // WTF : can't do unsigned byte in Java ?
CyclingImage(String filename)
{
// Loading file
// Using "createInput" to decompress the files
DataInputStream in = new DataInputStream(createInput(filename));
int w=0, h=0;
try
{
// size of image
w = in.readUnsignedByte() + in.readUnsignedByte()*256;
h = in.readUnsignedByte() + in.readUnsignedByte()*256;
// palette of colors
_originalColors = new color[256];
for(int i=0; i<256; i++)
_originalColors[i] = color(in.readUnsignedByte(), in.readUnsignedByte(), in.readUnsignedByte());
// information on cycling colors
int nbCycles = in.readUnsignedByte();
_cycles = new Cycle[nbCycles];
for(int i=0; i<nbCycles; i++)
{
_cycles[i] = new Cycle();
_cycles[i].reversed = in.readUnsignedByte() + in.readUnsignedByte()*256;
if(_cycles[i].reversed != 0)
println("reversed = " + _cycles[i].reversed);
_cycles[i].rate = in.readUnsignedByte() + in.readUnsignedByte()*256;
_cycles[i].low = in.readUnsignedByte();
_cycles[i].high = in.readUnsignedByte();
}
// image data
_pixels = new int[w*h];
for(int i=0; i<w*h; i++)
_pixels[i] = in.readUnsignedByte();
} catch(Exception e) {}
// Creating image
if(w*h != 0)
{
_img = createImage(w, h, RGB);
_img.loadPixels();
for(int i=0; i<w*h; i++)
_img.pixels[i] = _originalColors[_pixels[i]];
_img.updatePixels();
}
// Extracting pixels that can change
boolean[] cyclingColors = new boolean[256];
for(int i=0; i<256; i++) cyclingColors[i] = false;
for(int i=0; i<_cycles.length; i++)
{ // marking changing colors
if(_cycles[i].rate == 0) continue;
for(int j=_cycles[i].low; j<=_cycles[i].high; j++)
cyclingColors[j] = true;
}
int nb = 0;
for(int i=0; i<w*h; i++)
if(cyclingColors[_pixels[i]]) nb++; // computing size of array
// creating an index of the pixels that need to be updated
_cyclingPixels = new int[nb];
int j=0;
for(int i=0; i<w*h; i++)
if(cyclingColors[_pixels[i]])
_cyclingPixels[j++] = i;
}
void update(float t)
{
color[] newColors = new color[256]; // (no need for initialization)
// Cycling palette colors
for(int i=0; i<_cycles.length; i++)
{
Cycle c = _cycles[i];
if(c.rate == 0)
continue;
float amt = t * c.rate;
int range = c.high - c.low + 1;
int amount = floor(amt) % range;
amt -= floor(amt);
for(int j=0; j<range; j++) // cycling and blending colors
newColors[c.low + (j + amount) % range] =
lerpColor(_originalColors[c.low + (j + 1) % range],
_originalColors[c.low + j], amt);
}
// Updating image
_img.loadPixels();
for(int i=0; i<_cyclingPixels.length; i++) // only the pixels that need to be updated
_img.pixels[_cyclingPixels[i]] = newColors[_pixels[_cyclingPixels[i]]];
_img.updatePixels();
}
void display()
{ // nothing fancy here
image(_img, 0, 0);
}
}

Replies(5)

kooogy

Re: image Color Cycling problem

1 year ago

the .gz extension suggests that those images are gzipped (linux zip utility). inside the zip they are probably just pixels, .bmp images basically. try using those instead.

actually, given that he's palette cycling they may need to be indexed, so .gif or .png. think you'll need to rewrite a lot of the above to handle the new image format as he's effectively parsing the image file himself to pick out the relevant bits (palette, actual pixels) and you want be able to do that easily as the .gif or .png data will be compressed. also, i don't think .png or .gif allow you to define parts of the palette to cycle like the old amiga files did, but you could probably just define a standard of your own, say earmarking the last 16 or 32 colours.

suhit

Re: image Color Cycling problem

1 year ago

Thanks for the reply, I am using the mac machine and when I unzipped the .gz files i got unix executable files ( unsure of which format it is, maybe its .bmp files as you said). I want to use png or jpg images but not sure how to do color cycling on those images. how to select color pixels in the palette to do color cycling please help me.

suhit

Re: image Color Cycling problem

1 year ago

can anybody tell how to create Amiga IFF/ILBM files or is it possible to do color cycling on jpg or png images?

PhiLho

Re: image Color Cycling problem

1 year ago

Jpeg images are not appropriate, and not all PNG images are good too.
Color cycling is done on images using a palette, ie. each pixel isn't defined by the classical RGB triplet, but by an index in a palette defining such triplet for this index.
Then you can shift the colors in the palette (triplet at index n goes to index n+1 or n-1, with cycle at the bounds, of course) to get the special effects, like waterfall or such.
On old hardware, it was automatically handled.
In Processing, I suppose we can simulate such effect, since we have at least CPU power...

kooogy

Re: image Color Cycling problem

1 year ago

you can reverse engineer the ilbm format from the code that does the reading:

2 bytes = width
2 bytes = height
256 x 3 bytes = 256 colours (red, green, blue)
1 byte = number of colour loops
for each loop: {
2 bytes for direction
2 bytes for rate
1 byte start index
1 byte end index
}
finally
width x height bytes of indexes into palette

so, looking at C1 (hexdump)
0000000: 8002 e001 0000 00ff efef ffef efff efef ................
         wwww hhhh r0g0 b0r1 g1b1 r2g2 b2r3 g3b3
...
0000300: ffff ffff 1000 00b2 0eda df00 0032 13d4 .............2..
         bbrr ggbb lldd ddrr rrss eeDD DDRR RRSS
0000310: d900 0032 13ce d300 0032 13c8 cd02 0032 ...2.....2.....2
         EE
...

wwww = 0x280 = width = 640
hhhh = 0x1e0 = height = 480
r0g0b0 = colour 0: 0x000000 = black
r1g1b1 = colour 1: 0xffefef
r2g2b2 = colour 2: 0xffefef
r3g3b3 = colour 3: 0xffefef
...
colour 255: 0xffffff
ll = cycles = 0x10 = 16
dddd = direction = 0
rrrr = rate = 0x0eb2 = 3762 (no idea of units)
ss = start = colour 218
ee = end = colour 233
DDDD direction = 0
RRRR = rate
SS = start = d4
EE = end = d9
etc

and it shouldn't be too hard to convert a png to that format. BUT a png won't have any cycle information in it, you'll have to define that some other way.

Top Reply