Processing 1.0 - Processing Discourse - Using images in tictactoe

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Programs › Using images in tictactoe

‹ Previous Topic | Next Topic ›

Pages: 1

Using images in tictactoe (Read 932 times)

ditto

Using images in tictactoe
May 26^th, 2010, 5:24pm

Hi,

I'm still exploring with processing and I've just stumbled across something about using images.

This isn't my code it's a code from TfGuy44:

Hope you don't mine me using your code as an example!

Quote:

int [] data = new int[9];
int selected = 1;

void setup(){
size(300,400);
}

void draw(){
background(255);
// Draw the tiles.
for(int i=0; i<3; i++){
for(int j=0; j<3; j++){
drawTile(i,j);
}
}

// Draw the buttons.
stroke(0);

fill(200,255,200);
if( selected == 1){
fill(100,255,100);
}
rect(20, 295, 80, 80 );

fill(200,255,200);
if( selected == 2){
fill(100,255,100);
}
rect(110, 295, 80, 80 );

fill(200,255,200);
if( selected == 0){
fill(100,255,100);
}
rect(200, 295, 80, 80 );

noStroke();
fill(255,0,0);
ellipse(150,335, 60, 60 );
fill(200,255,200);
if( selected == 2){
fill(100,255,100);
}
ellipse(150,335, 40, 40 );

noStroke();
fill(0,0,255);
pushMatrix();
translate(60, 335);
rotate(HALF_PI/2.0);
rect(-10,-30,20,60);
rect(-30,-10,60,20);
popMatrix();

// Update tiles.
if(mousePressed){
if( mouseX > 30 && mouseX < 270 && mouseY > 30 && mouseY < 270 ){
int tempi = (mouseX-30)/80;
int tempj = (mouseY-30)/80;
data[tempi+3*tempj] = selected;
}
}
}

void mouseClicked(){
if( mouseX > 20 && mouseX < 100 && mouseY > 295 && mouseY < 375 ){
selected = 1;
}
if( mouseX > 110 && mouseX < 190 && mouseY > 295 && mouseY < 375 ){
selected = 2;
}
if( mouseX > 200 && mouseX < 280 && mouseY > 295 && mouseY < 375 ){
selected = 0;
}
}

void drawTile(int i, int j){
drawBlank(i,j);
if( data[i+3*j] == 1 ){
drawCross(i,j);
}
if( data[i+3*j] == 2 ){
drawCircle(i,j);
}
}

void drawBlank(int i, int j){
stroke(0);
fill(200,255,200);
rect(30+80*i,30+80*j,80,80);
}

void drawCross(int i, int j){
noStroke();
fill(0,0,255);
pushMatrix();
translate(70+80*i, 70+80*j);
rotate(HALF_PI/2.0);
rect(-10,-30,20,60);
rect(-30,-10,60,20);
popMatrix();
}

void drawCircle(int i, int j){
noStroke();
fill(255,0,0);
ellipse(70+80*i,70+80*j, 60, 60 );
fill(200,255,200);
ellipse(70+80*i,70+80*j, 40, 40 );
}

But I was wondering if say I wanted to use my own images for the crosses and circles. How would I do that?
Like I know how to load images but not sure how to get the images to appear when the mouse selects from the tiles and then pressed onto a selected tile on the grid.
Any ideas would be much appreciated!

Cedric

Re: Using images in tictactoe
Reply #1 - May 26^th, 2010, 10:55pm

This is pretty easy, if you read the reference of loadImage for example :
http://processing.org/reference/loadImage_.html

you know how to declare, load, and draw an image. Thats all you need.

first write,
PImage circleIMG;

in setup load it.

circleIMG = loadImage("circle.png");

and then call it instead of the circle/cross function he wrote.
you have to copy 70+80*i, 70+80*j from the function though:

image(crossIMG,70+80*i, 70+80*j);

At last you have to change imageMode() from CORNER, to CENTER, call it in setup. Should work now. Hope that helps

twitter.com/CedricKiefer

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: Using images in tictactoe Reply #2 - May 26^th, 2010, 10:56pm The code is sufficiently well structured to make it simple: replace the drawCross() and drawCircle() calls by the appropriate image() call. You can then remove these drawXxx functions.

Pages: 1

‹ Previous Topic | Next Topic ›