How To Scramble Image in Java

Question

I found this source code from http://zetcode.com/tutorials/javagamestutorial/puzzle/ And I wanted to play around with it. It's a picture puzzle game, however when I run the program, it doesn't show up scrambled and I was wondering how will I go about this to get it scrambled? I'm still new to programming and I just wanted to play around with this to learn a bit. Thank you!

import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;

import javax.swing.Box;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class Puzzle extends JFrame implements ActionListener {

private JPanel centerPanel;
private JButton button;
private JLabel label;
private Image source;
private Image image;
int[][] pos;
int width, height;

public Puzzle() {

    pos = new int[][] {
                        {0, 1, 2}, 
                        {3, 4, 5}, 
                        {6, 7, 8}, 
                        {9, 10, 11}
                    };


    centerPanel = new JPanel();
    centerPanel.setLayout(new GridLayout(4, 4, 0, 0));

    ImageIcon sid = new ImageIcon(Puzzle.class.getResource("icesid.jpg"));
    source = sid.getImage();

    width = sid.getIconWidth();
    height = sid.getIconHeight();


    add(Box.createRigidArea(new Dimension(0, 5)), BorderLayout.NORTH);    
    add(centerPanel, BorderLayout.CENTER);


    for ( int i = 0; i < 4; i++) {
        for ( int j = 0; j < 3; j++) {
            if ( j == 2 && i == 3) {
                label = new JLabel("");
                centerPanel.add(label);
            } else {
                button = new JButton();
                button.addActionListener(this);
                centerPanel.add(button);
                image = createImage(new FilteredImageSource(source.getSource(),
                    new CropImageFilter(j*width/3, i*height/4, 
                        (width/3)+1, height/4)));
                button.setIcon(new ImageIcon(image));
            }
        }
    }

    setSize(325, 275);
    setTitle("Puzzle");
    setResizable(false);
    setLocationRelativeTo(null);
    setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
    setVisible(true);
}


public static void main(String[] args) {

    new Puzzle();

}

public void actionPerformed(ActionEvent e) {
    JButton button = (JButton) e.getSource();
    Dimension size = button.getSize();

    int labelX = label.getX();
    int labelY = label.getY();
    int buttonX = button.getX();
    int buttonY = button.getY();
    int buttonPosX = buttonX / size.width;
    int buttonPosY = buttonY / size.height;
    int buttonIndex = pos[buttonPosY][buttonPosX];



    if (labelX == buttonX && (labelY - buttonY) == size.height ) {

         int labelIndex = buttonIndex + 3;

         centerPanel.remove(buttonIndex);
         centerPanel.add(label, buttonIndex);
         centerPanel.add(button,labelIndex);
         centerPanel.validate();
    }

    if (labelX == buttonX && (labelY - buttonY) == -size.height ) {

         int labelIndex = buttonIndex - 3;
         centerPanel.remove(labelIndex);
         centerPanel.add(button,labelIndex);
         centerPanel.add(label, buttonIndex);
         centerPanel.validate();
    }

    if (labelY == buttonY && (labelX - buttonX) == size.width ) {

         int labelIndex = buttonIndex + 1;

         centerPanel.remove(buttonIndex);
         centerPanel.add(label, buttonIndex);
         centerPanel.add(button,labelIndex);
         centerPanel.validate();
    }

    if (labelY == buttonY && (labelX - buttonX) == -size.width ) {

         int labelIndex = buttonIndex - 1;

         centerPanel.remove(buttonIndex);
         centerPanel.add(label, labelIndex);
         centerPanel.add(button,labelIndex);
         centerPanel.validate();
    }
}
}

Answer 1

1. Create each Icon and add the Icon to an ArrayList.
2. Then you can use the Collections.shuffle(...) method
3. Then iterate through the shuffled ArrayList and create your buttons add add the Icons to each button.

Edit:

Simple example showing the concept:

import java.awt.*;
import java.util.*;
import javax.swing.*;

public class SSCCE extends JPanel
{
    public SSCCE()
    {
        setLayout( new GridLayout(3, 4) );

        ArrayList<Integer> numbers = new ArrayList<Integer>();

        for (int i = 0; i < 12; i++)
            numbers.add( new Integer(i) );

        Collections.shuffle(numbers);

        for (int i = 0; i < 12; i++)
            add( new JLabel( "" + numbers.get(i) ) );
    }

    private static void createAndShowGUI()
    {
        JFrame frame = new JFrame("SSCCE");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new SSCCE());
        frame.setLocationByPlatform( true );
        frame.setSize(300, 300);
        frame.setVisible( true );
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowGUI();
            }
        });
    }
}