I want to pixelize a Image with JavaFx.
My problem is that I only have one written pixel in the end, so that it works for just one time.
i tried a
Here is my code:
Image img = imgView.getImage();
PixelReader pixelReader = img.getPixelReader();
WritableImage wImage = new WritableImage(
(int) img.getWidth(),
(int) img.getHeight());
PixelWriter pixelWriter = wImage.getPixelWriter();
for (int y = 1; y < img.getHeight(); y += 3) {
for (int x = 1; x < img.getWidth(); x += 3) {
Color px = pixelReader.getColor(x, y);
float red = (float) px.getRed();
float green = (float) px.getGreen();
float blue = (float) px.getBlue();
Color all = new Color(red / 3, green / 3, blue / 3, 1);
for (int u = 0; u <= 3; u++) {
for (int i = 0; i <= 3; i++) {
pixelWriter.setColor(u, i, all);
}
}
}
}
Just check the part where you set the color:
for (int u = 0; u <= 3; u++) {
for (int i = 0; i <= 3; i++) {
pixelWriter.setColor(u, i, all);
}
}
As you can see you always set the color of pixel at (0,0) - (3,3).
You need to use
pixelWriter.setColor(x + u, y + i, all);
However, you need to be sure that you won't try to set color of some pixels outside the image. Check the boundaries of loops by x, y, u and i.
Related
Suppose I have a two-dimensional grid of pixels (4 by 4 pixels) - and I have an image the size of my sketch that has been cut into 16 parts.
Now I load all 16 parts into an array. I want to map this array onto the 2D grid in turn, so that my overall image is put together again correctly. That is, top left image 0.png and bottom right image 16.png.
I just can't find the formula that allows me to do this. For example, I know that with x+y*width you can run trough all pixels – from top left to bottom right - so I tried that. Without *width it doesn't sit together properly - with x+y*width- ArrayIndexOutOfBoundsException (for sure).
So I thought I needed a 2D array - but with images[x][y] i get a NullPointerException. I attached you an image of what I am trying to create:
This is my code so far – without the 2D Array…
float pixelamount = 4;
float pixelsize;
PImage[] images = new PImage [16];
void setup() {
size(1080, 1080);
pixelsize = width/pixelamount;
for (int i = 0; i < images.length; i++) {
images[i] = loadImage(i + ".png");
}
imageMode(CENTER);
}
void draw() {
background(0);
pushMatrix();
translate(pixelsize/2, pixelsize/2);
for (int x = 0; x < pixelamount; x++) {
for (int y = 0; y < pixelamount; y++) {
pushMatrix();
translate(pixelsize*x, pixelsize*y);
image(images[x+y], 0, 0, pixelsize, pixelsize);
popMatrix();
}
}
popMatrix();
}
As I said – in the line image(images[x+y], 0, 0, pixelsize, pixelsize); I just do not get the math right. Do I need a 2D Array to solve this? Or something totally different?
This should be resolved without 2D array.
If the dimensions of the field are known 4x4, then possibly the loop should run from 0 to 4 something like this:
void draw() {
background(0);
pushMatrix();
translate(pixelsize/2, pixelsize/2);
for (int x = 0; x < 4; x++) {
for (int y = 0; y < 4; y++) {
pushMatrix();
translate(pixelsize * x, pixelsize * y);
image(images[4 * x + y], 0, 0, pixelsize, pixelsize);
popMatrix();
}
}
popMatrix();
}
Alex is correct.
Cyrill, you're on the right track but seem to get confused between 3 ways at looking at your data:
The images array is a 1D array (indices 0 to 15)
The for loop is nested therefore you need to convert 2D indices to 1D. You are right: x+y*width would give you the correct array index, but in this case width is not the full width of your sketch in pixels but the width of the grid (i.e. the number of columns in the 4x4 grid: 4)
You are getting a null pointer pointer because you're trying to access elements in a 1D array as if it's 2D.
Something like this should work:
float pixelamount = 4;
float pixelsize;
PImage[] images = new PImage [16];
void setup() {
size(1080, 1080);
pixelsize = width/pixelamount;
for (int i = 0; i < images.length; i++) {
images[i] = loadImage(i + ".png");
}
//imageMode(CENTER);
}
void draw() {
background(0);
pushMatrix();
translate(pixelsize/2, pixelsize/2);
for (int x = 0; x < pixelamount; x++) {
for (int y = 0; y < pixelamount; y++) {
pushMatrix();
translate(pixelsize*x, pixelsize*y);
image(images[x + y * pixelamount], 0, 0, pixelsize, pixelsize);
popMatrix();
}
}
popMatrix();
}
If you want to loop with a single for loop (instead of a nested for loop) which would match how you store your data you can use this formula to go from 1D index to 2D indices:
x = index % gridColumns
y = index / gridColumns
(Bare in mind these are integers (so in other languages (like Python/JS/etc.) you'd pay attention to the division operation))
Here's a basic example to illustrate this:
size(1080, 1080);
textAlign(CENTER, CENTER);
textFont(createFont("Courier New Bold", 12));
int pixelAmount = 4;
int pixelSize = width/pixelAmount;
int gridColumns = 4;
// iterate once
for(int i = 0; i < 16; i++){
// calculate 2D grid indices
int xIndex = i % gridColumns;
int yIndex = i / gridColumns;
// convert from index to pixel size
int x = xIndex * pixelSize;
int y = yIndex * pixelSize;
// render debug data
String debugText = "1D index:" + i +
"\n2D indices:[" + xIndex + "][" + yIndex + "]" +
"\nx, y pixels::" + x + "," + y;
fill(255);
rect(x, y, pixelSize, pixelSize);
fill(0);
text(debugText, x + pixelSize / 2, y + pixelSize / 2);
}
Here's the same example as the above using a 2D array and nested loops:
size(1080, 1080);
textAlign(CENTER, CENTER);
textFont(createFont("Courier New Bold", 12));
int pixelAmount = 4;
int pixelSize = width/pixelAmount;
int[][] grid = new int[pixelAmount][pixelAmount];
// mimick image loading (storing 1D index)
int index = 0;
for(int y = 0; y < pixelAmount; y++)
for(int x = 0; x < pixelAmount; x++)
grid[x][y] = index++;
// mimick reading 2D array data
for(int y = 0; y < pixelAmount; y++){
for(int x = 0; x < pixelAmount; x++){
int xPixels = x * pixelSize;
int yPixels = y * pixelSize;
// manually copute index
// index = x + y * pixelAmount;
// or retrieve stored index
index = grid[x][y];
String debugText = "1D index:" + index + ".png" +
"\n2D indices:[" + x + "][" + y + "]" +
"\nx, y pixels::" + xPixels + "," + yPixels;
fill(255);
rect(xPixels, yPixels, pixelSize, pixelSize);
fill(0);
text(debugText, xPixels + pixelSize / 2, yPixels + pixelSize / 2);
}
}
My answer is more for the sake of completeness: displaying both 1D/2D ways at looking at the data.
Based on the latest answer – this is my code – working perfectly!
float pixelamount = 4;
float pixelsize;
PImage[] images = new PImage [16];
void setup() {
size(1080, 1080);
pixelsize = width/pixelamount;
for (int i = 0; i < images.length; i++) {
images[i] = loadImage(i + ".png");
}
imageMode(CENTER);
}
void draw() {
background(0);
pushMatrix();
translate(pixelsize/2, pixelsize/2);
for (int x = 0; x < pixelamount; x++) {
for (int y = 0; y < pixelamount; y++) {
pushMatrix();
translate(pixelsize * x, pixelsize * y);
image(images[x + y * int(pixelamount)], 0, 0, pixelsize, pixelsize);
popMatrix();
}
}
popMatrix();
}
I have a script that draws a game board of hexagon shaped tiles. I want to add an InnerShadow effect to each tile but I also want each tile to have a semi-transparent background. The normal shadow should be on top of the transparent background(if that makes sense). For some reason unknown to me, the shadow shows up as artifacts. If I remove setFill from the tile, it automatically has a black background. In the screenshot, the little white dots are what I am referring to as artifacts. What am I doing wrong?
Update
After further investigation, I realized that the white dots are actually part of the image. But the problem of the InnerShadow not showing up remains. So I have changed the title of the question. How can I add an InnerShadow and a transparent background to my polygon?
private void drawHexGridLoop(GraphicsContext g, Point origin, int size, int radius, int padding, boolean blank) {
String rsrc;
double ang30 = Math.toRadians(30);
double xOff = Math.cos(ang30) * (radius + padding);
double yOff = Math.sin(ang30) * (radius + padding);
int half = size / 2;
int i = 0;
for (int row = 0; row < size; row++) {
int cols = size - java.lang.Math.abs(row - half);
for (int col = 0; col < cols; col++) {
int xLbl = row < half ? col - row : col - half;
int yLbl = row - half;
int x = (int) (origin.x + xOff * (col * 2 + 1 - cols));
int y = (int) (origin.y + yOff * (row - half) * 3);
Hexagon hex = new Hexagon(x, y, radius);
int diceNum = diceSpaces.get(i);
if(!blank){
rsrc = resources.get(i);
} else {
rsrc = null;
}
//hex.draw(g, x, y, diceNum, rsrc);
Polygon tile = new Polygon();
for(int p = 0; p < hex.xpoints.length; p++){
double xpoint = hex.xpoints[p];
tile.getPoints().add(xpoint);
double ypoint = hex.ypoints[p];
tile.getPoints().add(ypoint);
}
tile.setFill(Color.web("rgba(255, 255, 255, 0.3)"));
InnerShadow innerShadow = new InnerShadow(5, Color.WHITE);
innerShadow.setOffsetX(4);
innerShadow.setOffsetY(4);
tile.setEffect(innerShadow);
wrapperPane.getChildren().add(tile);
tiles[i] = new Tile(i, xLbl, yLbl, rsrc, diceSpaces.get(i), hex.xpoints, hex.ypoints);
i++;
}
}
}
I am trying to rotate image without standard method , making color array and manipulate it, but when I invoke the, rotation I get black points (look the picture)
Here is my code, colScaled is the picture I am trying to convert to an array:
public void arrays() {
colScaled = zoom2();
int j = 0;
int i = 0;
angel = Integer.parseInt(this.mn.jTextField1.getText());
float degree = (float) Math.toRadians(angel);
float cos = (float) Math.cos(degree);
float sin = (float) Math.sin(degree);
int W = Math.round(colScaled[0].length * Math.abs(sin) + colScaled.length * Math.abs(cos));
int H = Math.round(colScaled[0].length * Math.abs(cos) + colScaled.length * Math.abs(sin));
int x;
int y;
int xn = (int) W / 2;
int yn = (int) H / 2;
int hw = (int) colScaled.length / 2;
int hh = (int) colScaled[0].length / 2;
BufferedImage image = new BufferedImage(W + 1, H + 1, im.getType());
for (i = 0; i < colScaled.length; i++) {
for (j = 0; j < colScaled[0].length; j++) {
x = Math.round((i - hw) * cos - (j - hh) * sin + xn);
y = Math.round((i - hw) * sin + (j - hh) * cos + yn);
image.setRGB(x, y, colScaled[i][j]);
}
}
ImageIcon ico = new ImageIcon(image);
this.mn.jLabel1.setIcon(ico);
}
Notice this block in your code :-
for (i = 0; i < colScaled.length; i++) {
for (j = 0; j < colScaled[0].length; j++) {
x = Math.round((i - hw) * cos - (j - hh) * sin + xn);
y = Math.round((i - hw) * sin + (j - hh) * cos + yn);
image.setRGB(x, y, colScaled[i][j]);
}
}
The x and y is pixel coordinate in source image (colScaled).
The objective of this code is to fill all pixels in destination image (image).
In your loop, there is no guarantee that all pixels in the destination image will be filled, even it is in the rectangle zone.
The above image depict the problem.
See? It is possible that the red pixel in the destination image will not be written.
The correct solution is to iterating pixel in destination image, then find a corresponding pixel in source image later.
Edit: After posting, I just saw the Spektre's comment.
I agree, it seems to be a duplicated question. The word "pixel array" made me thing it is not.
I'm creating a method that takes two parameters with 2 indexes a start and an end that takes a location of the picture being edited and turn those pixels to a different color. Using a while loop to index start and end.
The problem I'm having is I'm only a getting a really small portion to change color:
Don't mind some of the code that is commented out. I was trying a bunch of different things.
public void negative(int start, int end)
{
Pixel[] pixelArray = this.getPixels(); //pixelarray index
Pixel pixel = null;
// int height = this.getHeight();
//int paintPoint = height / 2;
//int width = this.getWidth();
int i = 0;
int red, green, blue = 0;
// int x = 0;
Pixel topPixel = null;
Pixel bottomPixel = null;
//int startY;
//int startX;
int y = start;
int x = end;
//int count;
while( y < this.getHeight())
{
y++;
while (x < this.getWidth()) //loops through index
{
pixel = this.getPixel(x,y);
red = pixel.getRed();
green = pixel.getGreen();//collects color green
blue = pixel.getBlue();//collects color blue
Color negColor = new Color( 255 - red, 255 - green, 255 - blue);//sets new values of pixels
pixel.setColor(negColor);
x++;
//count = count + 1;
i++;//indexes continuing
}
}
}
A picture is 2D yet you are treating it as 1D (notice after once through your inner x loop it never is reset to its min value). If you wish to color an arbitrary rectangle within a given photo the parms should include two points : minx, miny and maxx maxy then your pair of 2D loops visits each point in that region line by line.
// do sanity checks on your parms
if (this.getWidth() < maxx) {
maxx = this.getWidth();
}
if (this.getHeight() < maxy) {
maxy = this.getHeight();
}
if (minx < 0) {
minx = 0;
}
if (miny < 0) {
miny = 0;
}
for (y = mixy; y < maxy; y++) {
for (x = mixx; x < maxx; x++) {
// now your have valid x and y values
}
}
This method sets the pixel color from one image to the other. How can i set the pixels from the imgPix array to the screen.pixels array so that the image appears larger on the screen.pixels array? I dumbed down the code to make the concept easy to understand.
public void drawSprite(Screen screen)
{
for(int y = 0; y < 16; y++)
{
for(int x = 0; x < 16; x++)
{
screen.pixels[x + y * screen.WIDTH] = this.imgPix[x + y * this.WIDTH];
}
}
}
A nice little trick that i discover is to cast to an int. this rounds down the number repeating the pattern..
// scale = 2
-------------y = 0,1,2,3,4,5,6,7,8,9 // as y increase.. y++
(int) y/scale = 0,0,1,1,2,2,3,3,4,4
//
// out of 10 numbers 5 were drawn this is scaling up
// As you can see from the above as y increase y/scale repeats with a the correct pattern
// this happends because casting the (int) rounds down.
//
// scale = 0.8
-------------y = 0,1,2,3,4,5,6,7,8,9
(int) y/scale = 0,1,2,3,5,6,7,8,10,11
//
// out of 10 numbers 2 were skipped this is scaling down an image
public void drawSprite(Screen screen,Image image,float scale)
{
for(int y = 0; y < image.height*scale; y++)
{
int scaleY = (int)(y/scale);
for(int x = 0; x < image.width*scale; x++)
{
int scaleX = (int)(x/scale);
screen.pixels[x + y * screen.WIDTH] = image.pixels[scaleX + scaleY * image.width];
}
}
}
I've answered this question before on programmers.stackexchange.com (similar enough to java to be relevant):
https://softwareengineering.stackexchange.com/questions/148123/what-is-the-algorithm-to-copy-a-region-of-one-bitmap-into-a-region-in-another/148153#148153
--
struct {
bitmap bmp;
float x, y, width, height;
} xfer_param;
scaled_xfer(xfer_param src, xfer_param det)
{
float src_dx = dst.width / src.width;
float src_dy = dst.height / src.height;
float src_maxx = src.x + src.width;
float src_maxy = src.y + src.height;
float dst_maxx = dst.x + dst.width;
float dst_maxy = dst.y + dst.height;
float src_cury = src.y;
for (float y = dst.y; y < dst_maxy; y++)
{
float src_curx = src.x;
for (float x = dst.x; x < dst_maxx; x++)
{
// Point sampling - you can also impl as bilinear or other
dst.bmp[x,y] = src.bmp[src_curx, src_cury];
src_curx += src_dx;
}
src_cury += src_dy;
}
}