Help creating an interactive menu.

pwii

I'm trying to get an work out an interactive menu for a tictactoe game using p5js. There's a menu1 where you select a choice of 'X' or 'O' and a menu2 where you select a choice of 'single player' and 'multi player'. I'm trying to use elements in the canvas in order to work that out, but I can't seem to work around it. I managed to work it out with html buttons and mousePressed() but i can't seem to get it right via Canvas . I'm trying to follow something like in this tutorial (), but with canvas elements instead of html buttons. My problem is that mousePressed() presses both buttons and I can't differentiate between what was pressed so the computer ends up storing as if both 'X' and 'O' were pressed. Any help would go a long way. Thanks!

var button1;
var button2;

var choice = [];

var menuCounter = 1;

var button3;
var button4;

function Bubble(x,y,col,str){
  this.str = 0;
  this.x = x;
  this.y = y;
  this.col  = col;
  this.str = str;
  this.display = function(){
    fill(this.col);
    ellipse(this.x,this.y,48,48);
  }
  this.clicked = function(pick){
    if(pick==='O'){
      this.str = 'O';
    }else if(pick==='X'){
      this.str = 'X';
    }

    console.log(this.str);
    var d = dist(mouseX,mouseY,this.x,this.y);
    if(d < 48){
      this.col = color(227, 70, 27);
      menuCounter = 2;
    }
  }
}

  function menu(){
    var color1 = color(168,44,138);
    var color2 = color(131, 155, 218);
    button1 = new Bubble(130,150,color1);
    button2 = new Bubble(550,150,color2);
    button1.display();
    button2.display();

      textSize(25);
      fill(168,44,138);
      textAlign(RIGHT);
      text("PLAY-", 70, 30);
      textAlign(CENTER);
      text("ER-", 70, 50);
      textAlign(LEFT);
      textSize(30);
      text("O", 70, 80);

      textSize(25);
      fill(131, 155, 218);
      textAlign(RIGHT);
      text("PLAY-", 500, 30);
      textAlign(CENTER);
      text("ER-", 500, 50);
      textAlign(LEFT);
      textSize(30);
      text("X", 500, 80);

  }

  function menu2(){
    var color1 = color(168,44,138);
    var color2 = color(131, 155, 218);
    button3 = new Bubble(130,150,color1);
    button4 = new Bubble(550,150,color2);
    button3.display();
    button4.display();
    button3.clicked("multiPlay");
    button4.clicked("singlePlay");

    textSize(20);
    fill(168,44,138);
    textAlign(RIGHT);
    text("SELECT-", 100, 30);
    textAlign(CENTER);
    text("MULTI-", 100, 50);
    textAlign(LEFT);
    text("PLAYER", 100, 80);

    textSize(20);
    fill(131, 155, 218);
    textAlign(RIGHT);
    text("SELECT-", 500, 30);
    textAlign(CENTER);
    text("SINGLE-", 500, 50);
    textAlign(LEFT);
    text("PLAYER", 500, 80);
  }


function mousePressed(){
  button1.clicked('O');
  button2.clicked('X');
}

function setup() {
  createCanvas(720,400);

}
function draw() {
  background(0);
  if(menuCounter==1){
    menu();
  }else if(menuCounter==2){
    menu2();
  }
}

TfGuy44

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text#latest

pwii

Fixed post with regards to format, thanks TfGuy44.

GoToLoop

You're gonna need to write a method in your class which checks whether mouse's coordinates are within a button's area: http://JeffreyThompson.org/collision-detection/point-rect.php

kfrajer

Ok, I rewrite your code a bit but I think there are better approaches to do what you want to do. Check the code below.

@GoToLoop Something I notice in sketchpad is that I cannot autoformat my code, similar to Ctrl+T in P3. Does any of your online editors have this feature? I keep sticking to sketchPad as that is the first online editor I start using and I haven't been forced to try something different.

Kf

Available at: http://p5js.sketchpad.cc/sp/pad/view/7CKtPmKgDA/latest

var button1;
var button2;
var button3;
var button4;

var choice = [];
var menuCounter = 1;

var color1;
var color2;

function setup() {
    createCanvas(720, 400);
    color1 = color(168, 44, 138);
    color2 = color(131, 155, 218);
    button1 = new Bubble(130, 150, color1);
    button2 = new Bubble(550, 150, color2);

    button3 = new Bubble(130, 150, color1);
    button4 = new Bubble(550, 150, color2);


}

function draw() {
    background(0);
    if (menuCounter == 1) {
        menu();
    } else if (menuCounter == 2) {
        menu2();
    } else {
        menu3();
    }
}


function Bubble(x, y, col, str) {
    this.str = 0;
    this.x = x;
    this.y = y;
    this.col = col;
    this.str = str;
    this.r = 48;

    this.display = function () {
        fill(this.col);
        ellipse(this.x, this.y, this.r, this.r);
        text("" + this.str, this.x, this.y + this.r);
    }

    this.hover = function (xx, yy) {
        return (dist(xx, yy, this.x, this.y) < this.r);
    }

    this.report = function (xx, yy) {
        text('val=' + this.str, xx, yy);
    }

    this.clicked = function (pick) {
        if (pick === 'O') {
            this.str = 'O';
        } else if (pick === 'X') {
            this.str = 'X';
        } else {
            this.str = 'ELSE->' + pick;
        }

        console.log(this.str);
        if (this.hover(mouseX, mouseY)) {
            this.col = color(227, 70, 27);
            menuCounter = menuCounter + 1;
        }
    }
}

function menu() {

    button1.display();
    button2.display();

    textSize(25);
    fill(color1);
    textAlign(RIGHT);
    text("PLAY-", 70, 30);
    textAlign(CENTER);
    text("ER-", 70, 50);
    textAlign(LEFT);
    textSize(30);
    text("O", 70, 80);

    textSize(25);
    fill(color2);
    textAlign(RIGHT);
    text("PLAY-", 500, 30);
    textAlign(CENTER);
    text("ER-", 500, 50);
    textAlign(LEFT);
    textSize(30);
    text("X", 500, 80);

}

function menu2() {

    button3.display();
    button4.display();
    //button3.clicked("multiPlay");
    //button4.clicked("singlePlay");

    textSize(20);
    fill(color1);
    textAlign(RIGHT);
    text("SELECT-", 100, 30);
    textAlign(CENTER);
    text("MULTI-", 100, 50);
    textAlign(LEFT);
    text("PLAYER", 100, 80);

    textSize(20);
    fill(color2);
    textAlign(RIGHT);
    text("SELECT-", 500, 30);
    textAlign(CENTER);
    text("SINGLE-", 500, 50);
    textAlign(LEFT);
    text("PLAYER", 500, 80);
}

function menu3() {

    button1.report(50, 50);
    button2.report(350, 50);
    button3.report(50, 250);
    button4.report(350, 250);

}


function mousePressed() {

    if (menuCounter == 1) {

        if (button1.hover(mouseX, mouseY)) {
            button1.clicked('O');
        }

        if (button2.hover(mouseX, mouseY)) {
            button2.clicked('X');
        }
    } else if (menuCounter == 2) {
        if (button3.hover(mouseX, mouseY)) {
            button3.clicked('multiPlay');
        }

        if (button4.hover(mouseX, mouseY)) {
            button4.clicked('singlePlay');
        }
    }

}

jeremydouglass

I think there was also a recent related post about creating UI in p5.js:

• https://forum.processing.org/two/discussion/23557/p5-gui-canvas-textbox-with-buttons

GoToLoop

Does any of your online editors have this feature?

For small sketches, I just use Notepad2. Pretty much I indent my own code alone. #:-S
But we can beautify our code automatically by pasting them below: O:-)
http://JSBeautifier.org

pwii

@kfrajer your fix emulates exactly what i was aiming for. Thanks a lot!