Develop Reference

Weird output while processing images with Processing 3.3.7

What I have:
I have 2 images with same size (500), one is a normal image and the other have a message with only black pixels (message) and white pixels (nothing).
What i do in encodeImage() is create messageEncoded with pixels of originalImage and incrementing it by 1 if the pixel of the messageImage isn't white.
This is how i'm hidding a image in another image, so decodeImage() should read the originalImage and messageEncoded to extract the messageImage, creating messageDecoded with white pixel when doens't change the pixel and black and it changes.
PImage originalImage;
PImage messageImage;
PImage messageEncoded;
PImage messageDecoded;
void setup() {
size(500, 500);
originalImage = loadImage("jap.jpg");
messageImage = loadImage("msg.jpg");
messageEncoded = createImage(originalImage.width, originalImage.height, RGB);
messageDecoded = createImage(originalImage.width, originalImage.height, RGB);
encodeImage();
}
void decodeImage() {
originalImage.loadPixels();
messageEncoded.loadPixels();
messageDecoded.loadPixels();
PImage msg = loadImage("messageEncoded.jpg");
msg.loadPixels();
for (int x = 0; x < originalImage.width; x++) {
for (int y = 0; y < originalImage.height; y++ ) {
int loc = x + y * originalImage.width;
if (messageEncoded.pixels[loc] == originalImage.pixels[loc]) {
messageDecoded.pixels[loc] = color(255);
} else {
messageDecoded.pixels[loc] = color(0);
}
}
}
messageDecoded.updatePixels();
messageDecoded.save("messageDecoded.jpg");
image(messageDecoded, 0, 0);
}
void encodeImage() {
originalImage.loadPixels();
messageImage.loadPixels();
messageEncoded.loadPixels();
for (int x = 0; x < originalImage.width; x++) {
for (int y = 0; y < originalImage.height; y++ ) {
int loc = x + y * originalImage.width;
if (messageImage.pixels[loc] != color(255)) {
float r = red(originalImage.pixels[loc]);
float g = green(originalImage.pixels[loc]);
float b = blue(originalImage.pixels[loc]);
messageEncoded.pixels[loc] = color(r + 1, g + 1, b + 1);
} else {
messageEncoded.pixels[loc] = originalImage.pixels[loc];
}
}
}
messageEncoded.updatePixels();
messageEncoded.save("messageEncoded.jpg");
//image(messageEncoded, 0, 0);
decodeImage();
}
The Problems:
I have the variable PImage msg in void decodeImage() that I'm not using. This variable should be the same as the global messageEncoded because it's reading the file that it just outputed, but if I use msg, changing
if (messageEncoded.pixels[loc] == originalImage.pixels[loc]) {
messageDecoded.pixels[loc] = color(255);
} else {
messageDecoded.pixels[loc] = color(0);
}
into
if (msg.pixels[loc] == originalImage.pixels[loc]) {
messageDecoded.pixels[loc] = color(255);
} else {
messageDecoded.pixels[loc] = color(0);
}
the result is totally different and weird. Why? What is the difference between messageEncoded and msg?
messageDecoded is a little bit wrong, why it's having this wrong black dots?
I made the messageImage in paint, so i though paint is creating non-black dots, but i look all pixels, even put a single black pixel and still appeared some black dots around it.
The originalImage. I found this on google by typing '500x500 images'.
The messageImage. I created this on paint and save it with 500x500 dimentions (for testing it can be and draw with only black and with pixels).
The very weird picture that happens when I use msg. (Problem 1)
The messageDecoded the have black dots around it. Can I call it noise? (Problem 2)
Edit 1:
The weird image and the problem 1 is solved when I use PNG images, but the 2 problem of the "noise" isn't fixed yet

It's likely that JPEG encoding is causing the problem (the noise looks characteristic of compression artifacts). You'll need to work with images in a lossless format such as .PNG to alleviate the problem.
Recreate messageImage, saving it as a .PNG this time.
Convert originalImage to .PNG and modify your code such that
Processing saves the images as .PNG.
It's ok to use a JPEG as the source image; the problem arises from successive JPEG saving/encoding (where more pixels than simply those which are being encoded are changed).

Incomplete Light Circle

I've made a lighting engine which allows for shadows. It works on a grid system where each pixel has a light value stored as an integer in an array. Here is a demonstration of what it looks like:
The shadow and the actual pixel coloring works fine. The only problem is the unlit pixels further out in the circle, which for some reason makes a very interesting pattern(you may need to zoom into the image to see it). Here is the code which draws the light.
public void implementLighting(){
lightLevels = new int[Game.WIDTH*Game.HEIGHT];
//Resets the light level map to replace it with the new lighting
for(LightSource lightSource : lights) {
//Iterates through all light sources in the world
double circumference = (Math.PI * lightSource.getRadius() * 2),
segmentToDegrees = 360 / circumference, distanceToLighting = lightSource.getLightLevel() / lightSource.getRadius();
//Degrades in brightness further out
for (double i = 0; i < circumference; i++) {
//Draws a ray to every outer pixel of the light source's reach
double radians = Math.toRadians(i*segmentToDegrees),
sine = Math.sin(radians),
cosine = Math.cos(radians),
x = lightSource.getVector().getScrX() + cosine,
y = lightSource.getVector().getScrY() + sine,
nextLit = 0;
for (double j = 0; j < lightSource.getRadius(); j++) {
int lighting = (int)(distanceToLighting * (lightSource.getRadius() - j));
double pixelHeight = super.getPixelHeight((int) x, (int)y);
if((int)j==(int)nextLit) addLighting((int)x, (int)y, lighting);
//If light is projected to have hit the pixel
if(pixelHeight > 0) {
double slope = (lightSource.getEmittingHeight() - pixelHeight) / (0 - j);
nextLit = (-lightSource.getRadius()) / slope;
/*If something is blocking it
* Using heightmap and emitting height, project where next lit pixel will be
*/
}
else nextLit++;
//Advances the light by one pixel if nothing is blocking it
x += cosine;
y += sine;
}
}
}
lights = new ArrayList<>();
}
The algorithm i'm using should account for every pixel within the radius of the light source not blocked by an object, so i'm not sure why some of the outer pixels are missing.
Thanks.
EDIT: What I found is, the unlit pixels within the radius of the light source are actually just dimmer than the other ones. This is a consequence of the addLighting method not simply changing the lighting of a pixel, but adding it to the value that's already there. This means that the "unlit" are the ones only being added to once.
To test this hypothesis, I made a program that draws a circle in the same way it is done to generate lighting. Here is the code that draws the circle:
BufferedImage image = new BufferedImage(WIDTH, HEIGHT,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
g.setColor(Color.white);
g.fillRect(0, 0, WIDTH, HEIGHT);
double radius = 100,
x = (WIDTH-radius)/2,
y = (HEIGHT-radius)/2,
circumference = Math.PI*2*radius,
segmentToRadians = (360*Math.PI)/(circumference*180);
for(double i = 0; i < circumference; i++){
double radians = segmentToRadians*i,
cosine = Math.cos(radians),
sine = Math.sin(radians),
xPos = x + cosine,
yPos = y + sine;
for (int j = 0; j < radius; j++) {
if(xPos >= 0 && xPos < WIDTH && yPos >= 0 && yPos < HEIGHT) {
int rgb = image.getRGB((int) Math.round(xPos), (int) Math.round(yPos));
if (rgb == Color.white.getRGB()) image.setRGB((int) Math.round(xPos), (int) Math.round(yPos), 0);
else image.setRGB((int) Math.round(xPos), (int) Math.round(yPos), Color.red.getRGB());
}
xPos += cosine;
yPos += sine;
}
}
Here is the result:
The white pixels are pixels not colored
The black pixels are pixels colored once
The red pixels are pixels colored 2 or more times
So its actually even worse than I originally proposed. It's a combination of unlit pixels, and pixels lit multiple times.

You should iterate over real image pixels, not polar grid points.
So correct pixel-walking code might look as
for(int x = 0; x < WIDTH; ++x) {
for(int y = 0; y < HEIGHT; ++y) {
double distance = Math.hypot(x - xCenter, y - yCenter);
if(distance <= radius) {
image.setRGB(x, y, YOUR_CODE_HERE);
}
}
}
Of course this snippet can be optimized choosing good filling polygon instead of rectangle.

This can be solved by anti-aliasing.
Because you push float-coordinate information and compress it , some lossy sampling occur.
double x,y ------(snap)---> lightLevels[int ?][int ?]
To totally solve that problem, you have to draw transparent pixel (i.e. those that less lit) around that line with a correct light intensity. It is quite hard to calculate though. (see https://en.wikipedia.org/wiki/Spatial_anti-aliasing)
Workaround
An easier (but dirty) approach is to draw another transparent thicker line over the line you draw, and tune the intensity as needed.
Or just make your line thicker i.e. using bigger blurry point but less lit to compensate.
It should make the glitch less obvious.
(see algorithm at how do I create a line of arbitrary thickness using Bresenham?)
An even better approach is to change your drawing approach.
Drawing each line manually is very expensive.
You may draw a circle using 2D sprite.
However, it is not applicable if you really want the ray-cast like in this image : http://www.iforce2d.net/image/explosions-raycast1.png
Split graphic - gameplay
For best performance and appearance, you may prefer GPU to render instead, but use more rough algorithm to do ray-cast for the gameplay.
Nonetheless, it is a very complex topic. (e.g. http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-16-shadow-mapping/ )
Reference
Here are more information:
http://what-when-how.com/opengl-programming-guide/antialiasing-blending-antialiasing-fog-and-polygon-offset-opengl-programming/ (opengl-antialias with image)
DirectX11 Non-Solid wireframe (a related question about directx11 with image)

java color correction on giant image on the fly

I have to handle VERY large (1-2GB) Tiff files, and only need to do some RGB manipulations on pixels, where I only make local corrections (color of a modified pixel is only depending on its old values, but not on e.g. neighbor pixels).
Is their (JAVA) a way to read the file as some kind of pixel stream, make adjustments on the RGB values, and write the stuff immediately to another file? I will not have enough memory to store the entire file in RAM (or at least I hope I could avoid it)
Thx for any hints...
THX
-Marco

Well, I don't actually know what a tiff file is 😅, but if it is a file, which you can store in a BufferedImage, it should be relatively easy.
I would do something like:
public BufferedImage correctRGB()
{
BufferedImage b = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//width and height are the width and height of the original image
Graphics g = b.getGraphics();
for(int x = 0; x < b.getHeight(); x++)
{
for(int y = 0; y < b.getWidth(); y++)
{
//loop through all the pixels in the image ONCE to spare RAM
int pixels = b.getRGB(x, y);
int alpha = (pixels >> 24) &0xff;
int red = (pixels >> 16) &0xff;
int green = (pixels >> 8) &0xff;
int blue = pixels &0xff;
//in here you play around with the values
g.setColor(new Color(red, green, blue, alpha));
g.fillRect(x, y, 1, 1);
}
}
g.dispose();
return b;
}
you can basically do everything you want with the argb values now.
For example, you could turn the whole image negative by doing red = 255 - red and so on.
or turn the whole image into grayscale by doing
int average = (red + green + blue) / 3;
g.setColor(new Color(average, average, average, alpha));

Adding colour to greyscale image

Im looking to add colour to a greyscale image; it doesnt have to be an accurate colour representation but adding a colour to a different shade of grey, this is just to identify different areas of interest within an image. E.g. areas of vegetation are likely to be of a similar shade of grey, by adding a colour to this range of values it should be clear which areas are vegetation, which are of water, etc.
I have the code for getting colours from an image and storing them as a colour object but this doesnt seem to give a way to modify the values.
E.g. if the grey vale is less than 85, colour red, if between 86 and 170 colour green and between 171 and 255 colour blue. I have no idea how this will look but in theory the resulting image should allow a user to identify the different areas.
The current code I have for getting pixel value is below.
int total_pixels = (h * w);
Color[] colors = new Color[total_pixels];
for (int x = 0; x < w; x++)
{
for (int y = 0; y < h; y++)
{
colors[i] = new Color(image.getRGB(x, y));
i++;
}
}
for (int i = 0; i < total_pixels; i++)
{
Color c = colors[i];
int r = c.getRed();
int g = c.getGreen();
int b = c.getBlue();
System.out.println("Red " + r + " | Green " + g + " | Blue " + b);
}
I appreciate any help at all! Thanks a lot

You are going to have to choose your own method of converting colours from the greyscale scheme to whatever colour you want.
In the example you've given, you could do something like this.
public Color newColorFor(int pixel) {
Color c = colors[pixel];
int r = c.getRed(); // Since this is grey, the G and B values should be the same
if (r < 86) {
return new Color(r * 3, 0, 0); // return a red
} else if (r < 172) {
return new Color(0, (r - 86) * 3, 0); // return a green
} else {
return new Color(0, 0, (r - 172) * 3); // return a blue
}
}
You may have to play around a bit to get the best algorithm. I suspect that the code above will actually make your image look quite dark and dingy. You'd be better off with lighter colours. For example, you might change every 0 in the code above to 255, which will give you shades of yellow, magenta and cyan. This is going to be a lot of trial and error.

I recommend you to take a look at Java2D. It has many classes that can make your life much easier. You may end up reinventing the wheel if you ignore it.
Here is a short showcase of what you can do:
int width = 100;
int height = 100;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
image.getRGB(x, y);
Graphics2D g2d = (Graphics2D)image.getGraphics();
g2d.setColor(Color.GREEN);
g2d.fillRect(x, y, width, height);

Java: Composite

I'm implementing a diagram that shows the level of a container. Depending on the fill level, the colour of the line should change (for instance, close to the maximum it should show red). Rather than calculating different segments of the line and setting their colours manually, I'd like to define a band in which the colour automatically changes. I thought to do this with a custom Composite/CompositeContext, but I seem not to be able to work out the locations of the pixels returned by the raster. My idea is to check for their y-Values and change the colour if a colour value is defined in the source and if the y-Value exceeds a threshold value.
My CompositeContext looks like this:
CompositeContext context = new CompositeContext() {
#Override
public void compose(Raster src, Raster dstIn, WritableRaster dstOut) {
int width = Math.min(src.getWidth(), dstIn.getWidth());
int height = Math.min(src.getHeight(), dstIn.getHeight());
int[] dstPixels = new int[width];
for (int y = 0; y < height; y++) {
dstIn.getDataElements(0, y, width, 1, dstPixels);
for (int x = 0; x < width; x++) {
if ( y ??? > 50) {
dstPixels[x] = 1;
} else {
// copy pixels from src
}
}
dstOut.setDataElements(0, y, width, 1, dstPixels);
}
}
"y" seems to be related to something, but it does not contain the absolute y-Value (in fact the compose method is called several times with 32x32 rasters). Maybe someone knows how to retrieve the position on the component or even a better way to define an area in which a given pixel value is replaced by another value.

Can't you just fill with a gradient with 0 alpha and then draw the line with full alpha?