Help creating an interactive menu.

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();
  }
}
Tagged:

Answers

  • edited July 2017

    Fixed post with regards to format, thanks TfGuy44.

  • edited July 2017

    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

  • Answer ✓

    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');
            }
        }
    
    }
    
  • I think there was also a recent related post about creating UI in p5.js:

  • 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

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

Sign In or Register to comment.