Where do I put this rectangle in this code?

qewer3322 · June 25, 2020, 10:39am

I’m trying to make a main menu and have this atm

float x = 260;
float y = 480;
float w = 240;
float h = 60;
float q = 160;
float a = 335;
float s = 280;
float d = 60;
PFont zigBlack;
boolean screen2 = false;

void setup(){
 size(600,600);
 background(159, 222, 0);
 stroke(0);
 noFill();
 zigBlack = createFont("Minecraftia 2.0", 32);
  textFont(zigBlack);
  fill(0);
}

void draw(){
 background(159, 222, 0);
 rect(x,y,w,h);
 fill(217, 125, 4);
 if(mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h){
   fill(191, 108, 0);
 }
 if(mousePressed){
  if(mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h){
   println("The mouse is pressed and over the button");
   fill(138, 78, 1);
   //do stuff 
  }
 }
}

I need to add a couple of rectangles but whenever I try to do it, it causes problems with the button. Here one of the rectangles:

rect(20,0,150,600);
  fill(0,140);

Where should I put this in the code so it wouldn^t cause problems?

you need this font to run it btw
https://www.dafont.com/minecraftia.font (or delete the font code)

Chrisir · June 25, 2020, 11:11am

first, remember to use fill BEFORE rect, like a painter selects a color from the palette before drawing and not after.

second, in the if-clause you set a color. This won’t work because when we start draw() again (60 times per second) another color is set by fill (drawing the long green rect).
I put the rect for the button now at the end of draw (or the function drawButton()), so he really uses the color.
Alternative Solution: store the color in a variable (I haven’t done this part)

In some scenarios it’s better to call the function mousePressed() insetad of using the variable mousePressed like you do now.

Chrisir

float x = 260;
float y = 480;
float w = 240;
float h = 60;
float q = 160;
float a = 335;
float s = 280;
float d = 60;
boolean screen2 = false;

void setup() {
  size(600, 600);
  background(159, 222, 0);
  stroke(0);
  noFill();
  //zigBlack = createFont("Minecraftia 2.0", 32);
  // textFont(zigBlack);
  fill(0);
}

void draw() {
  background(159, 222, 0);

  // long side bar
  fill(0, 140);
  rect(20, 0, 150, 600);

  drawButton();
}

void drawButton() {

  // set default color for button 
  fill(217, 125, 4);

  // if mouse over button, color for button gets changed!!!!!  
  if (mouseX>x && 
    mouseX <x+w && 
    mouseY>y && 
    mouseY <y+h) {
    fill(191, 108, 0);
  }

  // -----

  if (mousePressed) {
    if (mouseX>x && 
      mouseX <x+w && 
      mouseY>y && 
      mouseY <y+h) {
      println("The mouse is pressed and over the button");
      fill(138, 78, 1);
      //do stuff
    }
  }

  // -----

  // draw button at the end with one of the 3 colors
  rect(x, y, w, h);
}
//

qewer3322 · June 25, 2020, 11:43am

Oh okaay. I got it. Looks like I need to learn more about the void function. Works perfectly now thanks!

Chrisir · June 25, 2020, 12:08pm

Yeah… please don’t say void function, just say function.

void is just the return type; could also be boolean or whatever.

It would work of course without the function.

The trick was to have the fill commands before the rect and don’t let the rectangles interfere. And also don’t set something at the end of draw to be used in the next loop of draw().

qewer3322 · June 25, 2020, 12:45pm

Told you I need to learn more :D. I first did it with fill before but it didn’t work so I tried fill after and I accidently pasted it with fill after. Thanks for the info!

qewer3322 · June 25, 2020, 1:04pm

Really sorry to disturb you again but I have one last question:
When I try to make another button using the same code, the first one doesn’t work.

float x = 290;
float y = 480;
float w = 240;
float h = 60;
float q = 290;
float a = 335;
float s = 240;
float d = 60;
boolean screen2 = false;
PFont zigBlack;
boolean button1pressed = false;
boolean button2pressed = false;

void setup() {
  size(600, 600);
  background(159, 222, 0);
  stroke(0);
  noFill();
  //zigBlack = createFont("Minecraftia 2.0", 32);
  //textFont(zigBlack);
  fill(0);
}

void draw() {
  background(159, 222, 0);

  // long side bar
  fill(0, 140);
  rect(20, 0, 200, 600);

  drawButton();
  
  drawButton2();
  
}

void drawButton() {

  // set default color for button 
  fill(217, 125, 4);
  
  if (mouseX>x && 
    mouseX <x+w && 
    mouseY>y && 
    mouseY <y+h) {
    fill(191, 108, 0);
  }

  if (mousePressed) {
    if (mouseX>x && 
      mouseX <x+w && 
      mouseY>y && 
      mouseY <y+h) {
      println("The mouse is pressed and over the button");
      fill(138, 78, 1);
      boolean button1pressed = true;
    }
  }
}
  
void drawButton2(){
   
  fill(217, 125, 4);
  
  if (mouseX>q && 
    mouseX <q+s && 
    mouseY>a && 
    mouseY <a+d) {
    fill(191, 108, 0);
  }

  if (mousePressed) {
    if (mouseX>q && 
      mouseX <q+s && 
      mouseY>a && 
      mouseY <a+d) {
      println("The mouse is pressed and over the button");
      fill(138, 78, 1);
      boolean button2pressed = true;
    }
  }
  

  // draw button at the end with one of the 3 colors
  rect(q, a, s, d);
}

Why could it be?

Chrisir · June 25, 2020, 1:10pm

…missing in your first function (using x,y,w,h of course)

Remark

names qasd are not so brilliant, better go for

btn1X, btn1Y,btn1W,btn1H
btn2X, btn2Y,btn2W,btn2H

Remark

It occurred to you that both functions are virtually the same.

You know there are data types like int and String?

You can now define your own data type and teach it to processing. Call the data type Button. Now you can use the data type and say

Button btn1;
Button btn2;

part of defining the data type would also include the function itself, so the data type knows the function as its own. You can and should also include the data x,y,w,h into it.

The concept is called as you know “object oriented programming” (OOP) and the data type is called a “class”:

The class is the cookie maker (button maker),
the objects are the cookies (meaning the buttons, they are individual, but all derived from the same class).

See Objects / Processing.org

Chrisir

Entire Demo for OOP



Button b1, b2; 

void setup() {
  size(600, 600);
  background(111);
  textSize(30);

  b1 = new Button(40, 150, 240, 80, "Play Game!"); 
  b2 = new Button(40, 299, 240, 80, "Game Info");
}

void draw() {
  background(111);
  showHeader("Button Demo", "with Object Oriented Programming (OOP)" );    

  b1.display();
  b2.display();
}

// ---------------------------------------------------------------------------------
// Inputs 

void mousePressed() {
  if (b1.checkMouse()) {
    println ("1");
  } else if (b2.checkMouse()) {
    println ("2");
  }
}

// ---------------------------------------------------------------------------------
// Tools / Other functions  

void showHeader(String s1_, String s2_) {
  // Headline 
  pushStyle(); 
  fill(#FFFFFF);
  textSize(30);
  text (s1_, 40, 40);
  // smaller text line underneath
  textSize(17);
  text (s2_, 40, 69);
  popStyle();
}

// ================================================================ 

class Button {

  PVector position = new PVector();
  float sizeW, sizeH; 
  String string1; 

  // constructor
  Button (float x_, float y_, 
    float sizeW_, float sizeH_, 
    String s1_) {

    position.set(x_, y_);

    sizeW = sizeW_;
    sizeH = sizeH_;

    string1=s1_;
  }// constr

  // method
  void display() {
    // show button 

    // rect
    stroke(200);
    //noFill();
    fill(255); 
    if (checkMouse())
      fill(255, 0, 0); 
    if (checkMouse()&&mousePressed)
      fill(255, 0, 120); 
    rect(position.x, position.y, 
      sizeW, sizeH);

    // text 
    fill(0);
    text(string1, 
      position.x+13, position.y+47);
  }// method

  // method
  boolean checkMouse() {
    // returns true when inside
    return
      mouseX > position.x &&
      mouseX < position.x + sizeW &&
      mouseY > position.y &&
      mouseY < position.y + sizeH;
  } // method
  //
}//class
//

qewer3322 · June 25, 2020, 1:26pm

bruh okay
Thanks again!

Chrisir · June 25, 2020, 2:50pm

I made some additions to my previous post…

qewer3322 · June 25, 2020, 3:20pm

Now that is cool. It saves time and lines. Thanks for telling this, I will definitely use it.

qewer3322 · June 26, 2020, 11:55am

Hey! Was not going to post in this thread but didn’t want to make a seperate thread for this.
I’m trying to implement OOP for coins in a game I’m making. Wrote this from what I understand:

class coin {
  PVector position = new PVector();
  float w_ = 20;
  float h_ = 15;
  boolean hide = false;
  //constructor
  Coin (float x_, float y_) {
    position.set(x_, y_);
  }
  void display() {
    if (hide == false);
    image(loadImage("coin.png"), position.x, position.y, w_, h_);
    if (playerIndexX == 5) {
      if (playerIndexY == 5) {
        w_ = 0;
        h_ = 0;
        hide = true;
      }
    }
  }
}

But it gives ‘Return type for the method is missing’ error on the constructor line:

 Coin (float x_, float y_) {
    position.set(x_, y_);
  }

And cause of that, it says ‘the class Coin does not exist’ on the other window.

Chrisir · June 26, 2020, 2:00pm

need Capital Letter Coin here - both must have same spelling.

It’s all case-sensitive

Chrisir · June 26, 2020, 2:35pm

Oh and please please don’t load an image in a function that’s called 60 times per second

It slows things really down

Load it in the constructor and store image in a variable

When you have 100 coins… maybe even load in setup once

glv · June 27, 2020, 11:52am

It is very common to categorize functions as void or non-void functions:
Two Kinds of Functions
:)

qewer3322 · June 27, 2020, 6:21pm

Hmm that helped thanks! Didn’t know stuff like println were also void functions.

Topic		Replies	Views
Weird rectangle Coding Questions	6	511	February 25, 2020
Colouring rectangles with distance function Coding Questions	4	472	July 19, 2018
Four rectangle buttons Coding Questions homework	5	278	July 4, 2021
Rectangle button Coding Questions	3	597	June 23, 2021
Make rect when clicked Coding Questions	3	335	December 7, 2020

Where do I put this rectangle in this code?

Related topics