How do you insert multiple buttons on processing?

marie91

Hello, how do you insert multiple images and sounds into the buttons? My code:

PImage p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11;

//Interface con il linguaggio Javascript, mediante una classe di oggetti che espone le funzioni di interesse interface Javascript { void playS0(); void playS1(); void playSoundtrack(); }

//legame vero e proprio tramite oggetto passato js void bindJavascript(Javascript js) { javascript = js;

}

//oggetto interface Javascript javascript;

// dimensioni display window int ratio_x=1000; int ratio_y=500;

// INTERATTIVITA' String [] images = {"Romania2.jpg", "Albania.JPG", "Morocco.jpg", "Cina.JPG", "Ucraina.JPG", "Philippines.jpg", "Moldova.JPG", "indiana.JPG", "Bangladesh.JPG", "peru.JPG"};

void setup() { size(1000, 500); //finestra 1000 x 500 pixel di sfondo bianco p1 = loadImage("mappa.JPG"); //inserire file di sfondo imageMode(CENTER);

p2 = loadImage("Romania2.jpg"); //inserire le altre immagini p3 = loadImage("Albania.JPG"); p4 = loadImage("Morocco.jpg"); p5 = loadImage("Cina.JPG"); p6 = loadImage("Ucraina.JPG"); p7 = loadImage("Philippines.jpg"); p8 = loadImage("Moldova.JPG"); p9 = loadImage("indiana.JPG"); p10 = loadImage("Bangladesh.JPG"); p11 = loadImage("peru.JPG");

} // end setup

void draw() { background(0);
//disegna l'immagine sullo schermo a coordinate (0,0) image(p1, 500, 150);

 rect(20, 400, 70, 40);
if(mousePressed) {
        if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}
rect(120, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(220, 400, 70, 40); if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(320, 400, 70, 40); if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(420, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(520, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(620, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(720, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

rect(820, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}
rect(910, 400, 70, 40);
if(mousePressed) {

  if(mouseButton==LEFT){
    fill(255);
  }
  if(mouseButton==RIGHT) {
    fill(100);
  }

}

}

void mouseClicked(){ rect(mouseX,mouseY,80, 50); }

kfrajer

Format your code. Edit post, select code and press ctrl+o

Kf

marie91

Sorry? I am not understand...

quark

If you look at your original post you will see that some of your code is not formatted. It is possible for you to edit this post and correct it.

1) Click on the black cog in the top right corner of your post and select edit.

2) Use the mouse to select all the code you pasted in (as if you are about to copy it)

3) With the code selected hit Ctrl + O keys or cmd + O (that the letter O for omega). This will indent each line of code 4 spaces.

4) Click on the Save button.

fuzzySi

So far you have made some rectangles, but when the mouse is clicked you need to work out where the mouse is, to know which rectangle you have clicked on.

https://forum.processing.org/one/topic/simple-button-tutorial.html

you will also need to load your images into the rectangles.

Look at the interactivity and images tutorials, which will help.