Question

In the code below I convert a 2dim array to a buffered image (which works, the image is binary (back and white)). Then I display this image.

My question now is how can I update this image (because I want to draw something in every run of a loop which is not displayed here).

This also brings me to my second question: how can I draw a point on this image. (This also means that if I want to draw a point on 150,100 ; it should be on pixel 150,100 of the image).

public void showImage(int xPoint, int yPoint) throws IOException {

    // Two dim array conversion to a bufferedImage
    BufferedImage bimg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    for (int y = 0; y < width; y++) {
        for (int x = 0; x < height; x++) {

            tempValue = (pixelArray[y][x]==1) ? 255 : 0;
            int value = tempValue << 16 | tempValue << 8 | tempValue;
            bimg.setRGB(x, y, value);

        }
    }

    JFrame canvas = new JFrame();
    canvas.setSize(bimg.getWidth(), bimg.getHeight());
    canvas.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    canvas.setTitle("Contour");
    Container pane = canvas.getContentPane();
    ColorPanel panel = new ColorPanel(bimg,xPoint,yPoint);
    pane.add(panel);
    canvas.setVisible(true);
}

and

    class ColorPanel extends JPanel {
    BufferedImage bimg;
    int x;
    int y;

    public ColorPanel(BufferedImage image,int _x, int _y) {
        bimg = image;
        x = _x;
        y = _y;
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;
        g2d.drawImage(bimg, null, 0, 0);
    }
}

what I tried was:

  g2d.setColor(Color.RED);
  g2d.drawLine(x, y, x, y);

Though a new window opened on every run and I don’t think the point was on the right

Answer 1

I did a small example for you.

Basically it is a JFrame with a custom JPanel called ColorPanel (which is much like yours with a few extra methods namely drawDot(..) and setBufferedImage(..))

The JFrame will initialize and add the JPanel with an BufferedImage (completely black in this case). Thereafter white dots/pixels will be drawn on the Image at random co-ordinates (within the images bounds) every 2 seconds using BufferedImage#setRGB(...).

I set the timer to faster (200milis) and this is what the picture begins to look like:

NB its accurate, make it color an obvious co-ordinate like drawPoint(0,0) and you will see ( i did not demonstrate this as a screenshot would than not be possible or of any use)

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;
import java.net.URL;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.swing.AbstractAction;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.Timer;

public class PixelDotOnImage {

    public PixelDotOnImage() throws Exception {
        JFrame frame = new JFrame();
        frame.setTitle("Random Pixel Dots On Image with Timer");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setResizable(false);

        initComponents(frame);

        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {

        //create frame and components on EDT
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    new PixelDotOnImage();
                } catch (Exception ex) {
                    ex.printStackTrace();
                }
            }
        });
    }

    private void initComponents(JFrame frame) throws Exception {

        final BufferedImage bi = ImageIO.read(new URL("http://2.bp.blogspot.com/_KI3IRH6RxSs/S-uuLsgGJ3I/AAAAAAAAA5E/AA5mWBMLIvo/s1600/mat-black-lg.jpg"));
        final ColorPanel cPanel = new ColorPanel(bi);
        frame.add(cPanel);

        //create timer to color random pixels
        Timer timer = new Timer(2000, new AbstractAction() {
            int xMax = bi.getWidth(), yMax = bi.getHeight();
            Random rand = new Random();

            @Override
            public void actionPerformed(ActionEvent ae) {

                int x = rand.nextInt(xMax);
                int y = rand.nextInt(yMax);

                if (cPanel.drawDot(x, y)) {
                    System.out.println("Drew white dot at: (" + x + "," + y + ")");
                } else {
                    System.out.println("Cant draw white dot at: (" + x + "," + y + ")");
                }

            }
        });

        timer.start();
    }
}

class ColorPanel extends JPanel {

    private BufferedImage bimg;
    private Dimension dims;

    public ColorPanel(BufferedImage image) {
        bimg = image;
        dims = new Dimension(bimg.getWidth(), bimg.getHeight());
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;
        g2d.drawImage(bimg, 0, 0, null);
    }

    //this method will allow the changing of image
    public void setBufferedImage(BufferedImage newImg) {
        bimg = newImg;
    }

    //ths method will colour a pixel white
    public boolean drawDot(int x, int y) {

        if (x > dims.getWidth() || y > dims.getHeight()) {
            return false;
        }

        bimg.setRGB(x, y,  0xFFFFFFFF);//white

        repaint();
        return true;
    }

    @Override
    public Dimension getPreferredSize() {
        return dims;
    }
}

Hope this helps.