So what I need to do is use an image that I picked, and break it down into tiles. I need the picture up top broken into tiles, the middle to have a scramble button, and the bottom to have the image as a reference. What I'm doing first is defining the image (I think, and then I'm going to set up the size of the sketch...but I'm not sure how big to make it at the moment. After I set everything up, I will most likely be completely lost. I will post what I have if anyone is willing to help. 

Did you see my response to a similar thread a couple of days ago?  I thought I'd do a test run and went through the steps I listed and managed to get something up and running pretty quickly...  I'd recommend you forget about images for the moment and first figure out how to get the basic functionality working with numbers in text fields.  And break it into parts and do one thing at a time: don't try and do everything at once...  And yes, post your code: people will definitely be willing to offer advice.

All this sounds very coincidental, and I wouldn't be surprised if we were all in the same class (My suspicion is that blindfish is the professor, but its just a hunch). I myself am having trouble but so far have come up with a rickety frame of code that at the moment is riddled with errors. In my search to find examples for this slider puzzle, I found an example of a slider puzzle coded in processing for cell phones at this address. I hope this helps, although it seems that this code has been assembled differently than the instructions dictate, so stick to the instructions. You can all have my code if it is useful, I will post it below (keep in mind it is INCOMPLETE and ugly).

***MAIN PROGRAM***
//Sybolic constants
final int IMAGE_NAME = ("simpsons.jpg");
final int TILES_HORZ = 4;
final int TILES_VERT = 4;
final int TOTAL_TILES = TILES_HORZ*TILES_VERT;
final int BTN_HEIGHT = 50;  //height of button
final int FONT_NAME = Ariel;
final int EMPTY_GRAY = color(204);  //default background

//Global variables
PImage fullImage;
int tileWidth, tileHeight;
Tile[] tiles;
int Posn.empty;
int Button.scramble;
int Button.quit;
boolean.scrambled;
PFont font;
Message.msg;

void setup()
{
  imageMode(CENTER);
  img = loadImage("simpsons.jpg").fullImage;
  int SKETCH_WIDTH = 442;
  int SKETCH_HEIGHT = 1000;
  image(simpsons, Posn.x, Posn.y);
 
  PImage[] tiles = new PImage [4][4];
 
  tiles[0] = (110.5, 80);
  tiles[1] = (110.5, 160);
  tiles[2] = (110.5, 240);
  tiles[3] = (110.5, 320);
 
  for (int Posn.p != 0; 2 < pixels.length, Posn.p++) {
    for(
  }
Posn.empty = (442, 320);
Button.scramble = false;
Message.msg =
println("Click the Scramble button to start the game");
}

void draw()
{
 correctPlace = 0;
 
}

mousePressed();
{
  if (Posn.y < fullImage.height == true)
 
  mPos.row = mouseY / tileHeight
 
  mPos.col = mouseX / tileWidth
}

scramble()
{
 
}

void move(Posn.p)
{
  Tile temp = tiles[p.pos];
  tiles[p.pos] = tiles[empty.pos];
  tiles[empty.pos] = temp;
  empty = p;
}

***BUTTON CLASS***
class Button
{

  void draw()
  {
    stroke(black);
    fill(EMPTY_GRAY);
    rect();
    rect();
  }

  boolean mouseInside()
  {
    return(this.x <= mouseX && mouseY <= this.x + this.w) &&
      (this.y <= mouseY && mouseY <= this.y + this.h);
  }
}

***MESSAGE CLASS***
class Message
{
  int x, y, w, h;
  PFont.font;

  void display(String msg)
  {
    fill(black);
    Message.msg = (this.x, this.y);
  }

  void clear()
  {
    noStroke();
    fill(EMPTY_GRAY);
    rect(this.x, this.y - this.h * 3/4, this.w, this.h);
  }
}
***POSITION CLASS***
class Posn
{
  int row;
  int col;
  int pos;

  Posn(int row, int col)
  {
    this.row = row;
    this.col = col;
    this.pos =

      (1,2) => 6
      row * tiles - Horiz + col
      1 * 4 + 2
      4 + 2
      6
      col = [0, tiles_horiz)
      row = [0, 4, 8, 12]
        =>[0, 1, 2, 3]
    }

    String to String()
    {
      return string.format("[%d][%d][%d]");
      this.row, this.col, this.pos;
    }

  // "[1][2](6)" //
  boolean equals (posn.that)
  {
    if (that != null) {
      if (this.pos == that.pos) return true;
    }
    else return false;
  }
}

***TILE CLASS***
class Tile
{
  PImage img;
  int originalPosition;
  Tile (Posn.p)
  {
    int ySrc = p.row * tileHeight;
    int xSrc = p.col * tileWidth;
    this.img = createImage(tileWidth, tileHeight, ARGB);
    this.img.set (0, 0, fullImage.get(
    xSrc, ySrc, tileWidth, tileHeight));
  }

  int draw(Posn.p)
  {
    int ySrc = p.row * tileHeight;
    int xSrc = p.col * tileWidth;
  }
}

Thank you for that code, I'll study it a bit and see if it answers some of my problems. I'm pretty sure we are in the same class, seeing as that is the exact same structure I'm supposed to be doing. Unluckily for me, the page with all the instructions on it won't load on my computer anymore, so now I'm in the dark. But that helped me a lot, I'll try to work with that and see what I can do. If you want to email me directly at any point, my email is infinite222@msn.com and I check it frequently. I'd be more than happy to help you with anything I can figure out too. 

It's funny to see that someone responded so quickly, I guess I'm not the only person who stays up all night with this stuff. If its any more help, the picture I'm using is a 442x320 jpeg that is different from the one used in class. One thing I can say to do is defiantly draw it out on a piece of paper, labeling all the coordinates of the tiles for reference. My email is unixisbetter@gmail.com for the record.

Yeah its really messy, not unlike all my other projects. I don't intend for this thing to actually work....the best I can hope for is an ample grade because of a near miss. Programming is a sticky business, if you hang yourself up on one thing you can end up with a programmers block for weeks and get nothing out of it. Don't stop coding just because it doesn't work. Just keep typing in what you THINK might work, because if you find out what your initial problem was, you can fix that one thing and it might snap back to life. That's why I messed up the frogger and Pong projects. I hung myself up on the fact that It didn't run, and didn't realize that the Professor might give a better grade for a program that doesn't run...but is more substantial.

What I think might be my problem is that the classes and the variables aren't synchronized correctly or that the variables weren't declared right. Code will always be wrong before it's right, and programs come to a grinding halt if ONE thing happens to be out of place. I am not good programmer, nor do I claim to be, haha. I'll keep this forum posted with any breakthroughs.

Thank you very much, you did save me when I was in a bad spot. And that's kind of the mindset I've got right now. I wasn't able to really finish the frogger project either, but I gave it my best and handed in what I had. That's kind of what I wanted to do with this, at least give it my best. I'm not looking for an A, but I would have liked to understand this decently enough to know what I'm doing. I keep adding and removing code though because I feel like without a way to test what the code is doing, I don't know if I'm adding in something that could be worse. But again, thank you for the basis of the code. It helped me right when I was about to give up. 

We all need to stick together, us non-programmers caught in this whirlwind of physics and calculus (and not to mention plain old math). There was a time when people got jobs just twisting wires for un-twisted paired CAT cables, that has changed. I myself have not been exposed to calculus or physics until this course, not to mention computer mathematics. But what I do know is that I have a passion for computers, they are the only thing that I feel I can manipulate in this world of finite madness. Don't give up because you lack programming skills and/ or mathematical know-how. I interned with a man who knew nothing of these concepts, yet he ran a small business maintaining computer networks. Whichever path you choose in the field of computer technologies, don't ever think that you are chained to one aspect of them. I've been plagued with the same frustration that faces many programming students. Let us not forget the frustration the developers at MIT faced when they created the internet in the Utopian hope of a free exchange of information, only to find out that DARPA (Defense Advance Research Projects Agency) had developed it for it's own military gains. It is of the nature of men to create monsters, and it is the nature of monsters to destroy their makers. 

  I am NOT "the professor", just someone willing to offer some advice.

Personally I'd advise against just writing code that doesn't work all in one sketch.  I suspect you'll be marked better if you split the various principles up into separate working sketches first and then work on combining these into a single sketch (that may or may not work...)

So figure out:

- how to draw a grid of numbers (tip: use nested for loops - plenty of examples of this around if you look; and don't bother with images just yet, stick with text fields) 
- how to convert the mouse coordinates to an x and y 'index' corresponding to the number of boxes (tip: divide by box width/height and set to int)
- TBH you could use a 1 dimensional array to store the numbers; but I suspect a 2D array might make shifting the numbers round when they're clicked a little easier to figure out.
- As I said checking for an empty cell next to the clicked cell is the trickiest part; though IIRC I managed to come up with something using just 4 conditions.
- Finally the test for completion is something you could test in a separate sketch without needing to get everything else working...

It's much simpler to break problems down into these constituent parts, in separate sketches...  post code and we'll help ;)

Ok, so this is what I have now, but I don't know exactly where to put some of it or why some of it won't work. I'll post what I have.

Still stuck with that if anyone could help...

Is this multiple code tabs? 

Yeah, this is multiple tabs...the second draw is actually something I could get rid of completely. I haven't been working with that yet, since that is just going to be for buttons. That's not what's giving me an issue at the moment, but thank you for pointing that out. 

what is it that's giving you an issue ?

I keep getting a "unexpected token Tile" I have NO idea why. And that's just one of the many problems I am riddled with. But I cant figure out what else is working, cause I keep getting that message no matter what I do. 

My array's also giving me the finger. Ive had little progress since my last post but here's some code for the setup() in the main program..It's the only thing Ive been able to beef up

void setup()
{
  imageMode(CENTER);
  img = loadImage("simpsons.jpg").fullImage;
  IMAGE_NAME.fullImage;
  int SKETCH_WIDTH = 442;
  int SKETCH_HEIGHT = 1000;
  image(simpsons, Posn.x, Posn.y);

  PImage[] tiles = new PImage [TOTAL_TILES];

  tiles[0] = new Tile(110.5, 80);
  tiles[1] = new Tile(110.5, 160);
  tiles[2] = new Tile(110.5, 240);
  tiles[3] = new Tile(110.5, 320);

 
      for(int row = 0; row < TILES_VERT; row++) {
          for(int col = 0; col < TILES_HORIZ; col++) {
      Posn p = new Posn(row, col);
  tiles[p.pos] = newTile(p);
      }
    }
 
 
  Posn empty = TOTAL_TILES - 1;
  Button scramble = false;
  Message msg =
    println("Click the Scramble button to start the game");
}

I'll reiterate that you may be jumping ahead of yourselves going down the OOP route (and using images) when you don't appear to have a clear handle on some basic principles.  Whilst a Class based approach definitely has advantages, you really would do better to concentrate on getting the basic functionality working in simpler sketches, before worrying about buttons and images etc.

To prove the point I'm going to post a basic framework that can be used to make a bare-bones version of the game.  The one thing you both seem to be missing is how you're going to keep track of the position of the tiles (I've called them cells) and that's where the array comes in:

1. // this is required by the shuffle() function
2. import java.util.Random;
3. // I'm assuming there will always be equal number of rows and columns
4. int puzzleSize = 4;
5. // this array will be used to represent the position of the cells during play
6. int[] jumbledCells= new int[puzzleSize*puzzleSize];
7. int cellWidth;
8. int cellHeight;
9. int halfCellWidth;
10. int halfCellHeight;
11. PFont font;
12. 
    
13. void setup() {
14.   size(400,400);
15.   cellWidth = width/puzzleSize;
16.   cellHeight = height/puzzleSize;
17.   halfCellWidth = cellWidth/2;
18.   halfCellHeight = cellHeight/2;
19.  
20.   // populate jumbledCells array
21.   for(int i=0; i<jumbledCells.length; i++){
22.     jumbledCells[i] = i;
23.   }
24.   // set the last value to -1
25.   // this will represent the empty cell
26.   jumbledCells[jumbledCells.length-1] = -1;
27.  
28.   // shuffle the cells (see function below)
29.   shuffle(jumbledCells);
30.   //println(jumbledCells);
31.  
32.   // rather than using images I'm using text in the first instance for simplicity
33.   font= createFont("Arial", 18);
34.   textFont(font);
35.   textAlign(CENTER,CENTER);
36. }
37. 
    
38. void draw() {
39.   background(0);
40.   for(int i=0; i<puzzleSize; i++){
41.     for(int j=0; j<puzzleSize; j++){
42.       // calculate the index to reference the array values
43.       int index = j*puzzleSize+i;
44.       int cellNumber = jumbledCells[index]+1;
45.       if(cellNumber != 0){
46.         fill(50);
47.         stroke(155);
48.         rect(i*cellWidth, j*cellHeight, cellWidth, cellHeight);
49.         fill(200);
50.         text(cellNumber, i * cellWidth + halfCellWidth, j * cellHeight + halfCellHeight);
51.       }
52.     }
53.   }
54. }
55. 
    
56. void mouseReleased() {
57.   // all the game play dynamics can be built into here
58. }
59. 
    
60. // Don't think you need to reinvent the wheel so long as you quote your source
61. // From: http://en.wikipedia.org/wiki/Fisher-Yates_shuffle
62. static Random rng = new Random();
63. public static void shuffle(int[] array) {
64.     // i is the number of items remaining to be shuffled.
65.     for (int i = array.length; i > 1; i--) {
66.         // Pick a random element to swap with the i-th element.
67.         int j = rng.nextInt(i);  // 0 <= j <= i-1 (0-based array)
68.         // Swap array elements.
69.         int tmp = array[j];
70.         array[j] = array[i-1];
71.         array[i-1] = tmp;
72.     }
73. }

As I suggest in the comment: the actual gameplay can all be handled in mouseReleased: check which cell the mouse is over, check if it's next to an empty cell and swap if it is; then check if the cells are in the correct order - which can be done with a simple loop checking that the value at jumbledCells[i] == i except of course the last value ;)

Only once you've figured out this functionality would I bother starting to think about using images, additional interface elements or OOP...

Its funny that classes were supposed to simplify and better organize the code, but instead gives headaches. I want to thank everyone on this thread for helping out the best they could. And blindfish props to you, I guess your just THAT GOOD because I thought you were defiantly the professor, so keep on helping people because we do appreciate it. 

Don't get me wrong: Classes are great and phenomenally useful; but they do take a little getting used to and you shouldn't just create a Class for the sake of it.  And when you're figuring something out simple sketches can help you understand the basic principles involved before you start building them into a Class.

 In this case a Tile class would certainly make sense: it could store the image and location for the tile.  The 'Posn' class infinitylancer created doesn't make that much sense though: since that's essentially a property of the Tile you could store both the x/y coordinates and the row/column indices of the Tile within the Tile class and write suitable methods to calculate them when the Tile changes position...

Best of luck with it ;)

Haha, I wish you were our prof, all the classes were specified in the directions and were mandatory, and even though the Posn code was given to us in class, it complicated things wayy out of proportion. That being said, I'm glad I was exposed to Processing in addition to VB in the course. It's just mind blowing to a first time programmer to have to know both at once. I think our class was an experiment to see if Processing would be a good substitute for VB, so we all got a little confused and crazy towards the end. Thank god that's over. I'll always continue to keep processing and java programming alive in my life... just not to that extent!!