Creating multiple buttons that change colour when clicked?

angpalmer

Hello, I am new to processing and am looking for some help with creating buttons. The premise behind my sketch is each page asks a certain question for the audience, and they are to respond by clicking a different button (they are going to be emotions eg: smiley face button, sad face button, confused button and angry button) I simply wish to have the different emotional responses lined up horizontally under each question on each page. The only page i want to have the buttons on is the "maker, teacher, guest and family" question page. I have separated each question page on different tabs as welL, they are all the same so i just inserted the "void family" page

`PImage bg; PImage refresh; PImage img; int y;

int shade1; int shade2; int shade3; int shade4; int shade5; int shade6; int shade7;

int INTRO = 0; int CHOOSE = 1; int GUEST = 2; int FAMILY = 3; int MAKER = 4; int TEACHER = 5;

int gameState = INTRO;

color currentColor; boolean typeIsRect;

void setup() { //fullScreen(); size(900, 600);
background(255); bg = loadImage("test.jpg"); img = loadImage("Guest.jpg"); image(bg, 0, height-150, width, 150); // reset();

refresh = loadImage("refresh.png"); image(refresh, 10, 10, 50, 50);

frameRate(60);

shade1 = color(#CBEBF4); shade2 = color( #7B8EC4); shade3= color( #394C9F); shade4= color( #59426E); shade5= color( #72312F); shade6= color(#A04647 ); shade7= color(#E1B9D7); currentColor = color(255); typeIsRect = true; }

void draw() { if(gameState == INTRO) intro(); if(gameState == CHOOSE) choose(); if(gameState == GUEST) guest(); if(gameState == FAMILY) family(); if(gameState == MAKER) maker(); if(gameState == TEACHER) teacher();

// stroke(0); // line(pmouseX, pmouseY, mouseX, mouseY); }

void mousePressed() {

if(mouseX >700 && mouseX<864 && mouseY>482 && mouseY<600) { gameState = CHOOSE; }

//REFRESH THE BACKGROUND TO WHITE if ((mouseX>0) && (mouseY>0) && (mouseX<60) && (mouseY<60)) { background(255); currentColor=(255); image(bg, 0, height-150, width, 150); image(refresh, 10, 10, 50, 50); }

//SHADE 1 if ((mouseX>100) && (mouseY>20) && (mouseX<190) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade1); line(pmouseX, pmouseY, mouseX, mouseY); }

//SHADE 2 if ((mouseX>200) && (mouseY>20) && (mouseX<290) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade2); }

//SHADE 3 if ((mouseX>300) && (mouseY>20) && (mouseX<390) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade3); }

//SHADE 4 if ((mouseX>400) && (mouseY>20) && (mouseX<490) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade4); }

//SHADE 5 if ((mouseX>500) && (mouseY>20) && (mouseX<590) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade5); }

//SHADE 6 if ((mouseX>600) && (mouseY>20) && (mouseX<690) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade6); }

//SHADE 7 if ((mouseX>700) && (mouseY>20) && (mouseX<790) && (mouseY<70)) { typeIsRect = false; currentColor = color(shade7); } }

`void choose() {

img = loadImage("whoareyou.jpg"); background(img);

if (mousePressed) { if(mouseX >558 && mouseX<790 && mouseY>400 && mouseY<500) gameState = GUEST; } if (mousePressed) { if(mouseX >558 && mouseX<790 && mouseY>300 && mouseY<400) gameState = FAMILY; } if (mousePressed) { if(mouseX >558 && mouseX<790 && mouseY>200 && mouseY<300) gameState = MAKER; } if (mousePressed) { if(mouseX >558 && mouseX<790 && mouseY>100 && mouseY<200) gameState = TEACHER; } }

`void family() {

img = loadImage("Family.jpg"); background(img);

if (mousePressed) { if(mouseX >800 && mouseX<850 && mouseY>33 && mouseY<60) exit();

}

}```

TfGuy44

Welcome to the forums. You have made two of the classic mistakes.

1) Your code did not format properly for the forums. Go here: https://forum.processing.org/two/discussion/15473/how-to-format-code-and-text If you can't get this right, we basically refuse to even look at your code.

2) You are loading images in functions that draw() calls. This is wrong. The draw() function runs about 60 times a second - you do not need to reload your images that often! You only need to load them once, in fact, which is why you should load all your images in setup(). Basically, ANY AND ALL CALLS TO loadImage() NEED TO BE IN setup().

Please fix these things and post your code again!

Chrisir

what is your exact question? How to position the images?