# Cash register game

**URL:** <https://discourse.processing.org/t/cash-register-game/9938>\
**Category:** Project Guidance\
**Created:** [April 3, 2019, 9:17pm UTC](https://discourse.processing.org/t/cash-register-game/9938 "2019-04-03T21:17:57Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [April 3, 2019, 9:17pm UTC](https://discourse.processing.org/t/cash-register-game/9938/1 "2019-04-03T21:17:57Z")

</div>

Hello!

I am making a game, which is a simulation of sitting as a cashier at the check-out register in a supermarket.

I have trouble with which code to use, in order to make a good “library” of data. If fx a banana is displayed on the screen, I would want the user to type 406 in order to get it correct, and another number if it is an apple and so on.

Do you have any ideas?

Thank you very much.

P.S. I would like to add that I am a beginner at programming

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 4, 2019, 12:05am UTC](https://discourse.processing.org/t/cash-register-game/9938/2 "2019-04-04T00:05:59Z")

</div>

> [@anna](#):
>
> I would want the user to type 406

that is a very old style of [Cash\_register](https://en.wikipedia.org/wiki/Cash_register)  
today you would have a computer display what show the

- photo of a banana ( with a little text overlay “406” )
- and the photo is a button ( mouse over photo rectangle and click )
- then the price is added up in a SUM field.

* * *

point is when you buy 10 bananas,  
they press that button 10 times,  
but usually there is a way to

- press banana
- add a multiplier (10 ).

( but that is for the next exercise )

* * *

- what you need to learn ( play with )
- 
  - load photo file and display at a given (tile style ) display position ( and size )

- 
  - make it a button with

- 
  - 
    - mouse over rectangle function

- 
  - 
    - register a mouse button CLICK

- 
  - 
    - and give back the banana code 406

- 
  - make (1) array OR (2) array list OR (3) class  
( give it a month and learn to do it using all 3 ways. )  
( as a good to know practice ) but finally use

> way (4) table

by loading a CSV file with the  
/ item / code / price / (picture file name)  
List at start.

for (start with ) 3 type of items.  
banana / apple / ??  
but keep that open like with a variable like:  
`int many = 3;`  
so you can change that later easily.

> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language

is your friend!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 6, 2019, 3:48am UTC](https://discourse.processing.org/t/cash-register-game/9938/3 "2019-04-06T03:48:45Z")

</div>

A post was merged into an existing topic: [Processing stereo volume control using sound library](https://discourse.processing.org/t/processing-stereo-volume-control-using-sound-library/9950/3)

---

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [April 8, 2019, 9:21am UTC](https://discourse.processing.org/t/cash-register-game/9938/4 "2019-04-08T09:21:54Z")

</div>

Hello again!

Thanks you for your help, but that is not quite what I want to. What I would like to do (as I said in my post) is a way for the programme to understand, that if a certain picture is shown a certain 3-digit number needs to be written in order to get it correct.

I don’t want any buttons like that because it’s not how it “typically” is. The reason I’m making this game is to have cashiers practice at learning the numbers, in a programme that is similar to the actual cash register.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [April 8, 2019, 9:38am UTC](https://discourse.processing.org/t/cash-register-game/9938/5 "2019-04-08T09:38:51Z")

</div>

```auto
String str_n = "";
int cur_img;
PImage[] images;
String[] answers;

void setup() {
  size(400, 400);
  // TODO setup arrays...
}

void draw() {
  background(0);
  fill(255, 0, 0);
  textSize(48);
  // TODO draw image...
  text( str_n, 100, 100);
}

void keyPressed() {
  if ( key >= '0' && key <= '9' ) {
    if ( str_n.length() < 3 ) {
      str_n += key;
    }
  } else if ( key == BACKSPACE || key == DELETE ) {
    if ( str_n.length() > 0 ) {
      str_n = str_n.substring(0, str_n.length() - 1 );
    }
  } else if( key == ENTER || key == RETURN ){
    check_number();
  }
}

void check_number(){
  // TODO check answer...
  str_n = "";
  // TODO pick new image...
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 9:42am UTC](https://discourse.processing.org/t/cash-register-game/9938/6 "2019-04-08T09:42:36Z")

</div>

good, so how far you got with your key board input code?

because unless use a better library ( like G4P )  
[http://www.lagers.org.uk/g4p/ref/classg4p\_\_controls\_1\_1\_g\_text\_field.html](http://www.lagers.org.uk/g4p/ref/classg4p__controls_1_1_g_text_field.html)  
you not have a input field in your screen where the typed text show up…

you can try code that manually aggregate the key pressed to a string, and  
on [enter] try to convert that to a number…

and inbetween that two solutions

- using ready library
- coding your own keyboard input

is a JAVA way to call up little input windows  
`import static javax.swing.JOptionPane.*;`

pls. show us your code so far about the picture  
and what features you want to have for the keyboard number input.

---

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [April 8, 2019, 1:29pm UTC](https://discourse.processing.org/t/cash-register-game/9938/7 "2019-04-08T13:29:45Z")

</div>

Thank you så much!!

> [@TfGuy44](#):
>
> TODO

Does this mean that this is where i should setup my arrays? and if yes, how do I do so?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 8, 2019, 2:22pm UTC](https://discourse.processing.org/t/cash-register-game/9938/8 "2019-04-08T14:22:38Z")

</div>

> [@kll](#):
>
> you not have a input field in your screen

I _think_ ? OP wants keyboard input only.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 2:35pm UTC](https://discourse.processing.org/t/cash-register-game/9938/9 "2019-04-08T14:35:21Z")

</div>

> [@jeremydouglass](#):
>
> OP wants keyboard input only

still i recommend to somehow see what you are typing,

- minimal a prinln(str\_n)
- better text(str\_n,x,y); @TfGuy44 example
- JOptionPane is a real editable text input in a extra little window what often hides behind main window
- G4P textField is the best ( as it shows up in the canvas )  
takes [ctrl][c] / [ctrl][v] .select…cursor move…  
( but not select [ctrl] ??? )

* * *

for play that little input window after a button press and check for number ( float / int )

```auto
import javax.swing.JOptionPane;

int N = 0, Y = 69;
float A, B, C, D = 0.0;

color B_border = color(255); // white
color B_fillG = color(0, 255, 0); // green
color B_fillB = color(0, 0, 255); // blue
color B_fillY = color(255, 255, 0); // yellow
color B_text = color(255, 0, 0); // red
int B_textsize=15;

// _________________________________________________________________ Button Menu
void show_Parameter_Buttonmenu() {
  textAlign(CENTER);
  textSize(15);
  strokeWeight(1);
  stroke(255); // white
  line(480, 0, 480, 384); // for button area

  //show_button(int xpos, int ypos, int xwide, int ywide, String Btxt, color border, color filler, color texter)
  show_button(485, 5, 73, 20, "A:"+A, B_border, B_fillG, B_text );
  show_button(485, 30, 73, 20, "B:"+B, B_border, B_fillG, B_text );
  show_button(485, 55, 73, 20, "C:"+C, B_border, B_fillG, B_text );
  show_button(485, 80, 73, 20, "D:"+D, B_border, B_fillG, B_text );
  show_button(485, 105, 73, 20, "N:"+N, B_border, B_fillB, B_text );
  show_button(485, 130, 73, Y, "dY:"+Y, B_border, B_fillY, B_text );
}

// _________________________________________________________________ SETUP
void setup() {
  size(562, 340);
}

// _________________________________________________________________ DRAW
void draw() {
  background(200);   
  ambient(80); //lights(); // static settings
  textAlign(LEFT);
  textSize(20);
  text("Z = "+A+" + "+B+" * X + "+C+" * XX + "+D+" * XXX ", 20, 25); // float
  text("N = "+N, 20, 45); // int
  show_Parameter_Buttonmenu();
}

// _________________________________________________________________ diag print only
void mouseReleased() {
  if (mouseButton == LEFT) { 
    print("LEFT: "); 
    if (overRect(485, 5, 73, 20)) A = askF("A", A);
    if (overRect(485, 30, 73, 20)) B = askF("B", B);
    if (overRect(485, 55, 73, 20)) C = askF("C", C);
    if (overRect(485, 80, 73, 20)) D = askF("D", D);
    if (overRect(485, 105, 73, 20)) N = askI("N", N);
    if (overRect(485, 130, 73, Y)) Y = askI("dY", Y);
  }
  if (mouseButton == RIGHT) { 
    print("RIGHT: ");
  }
  if (mouseButton == CENTER) { 
    print("WHEEL: ");
  }
}

// tab common

// for button menu ask setpoint input
// _________________________________________________________________ askI call: A = askI("A",A);
int askI(String ask, int I) {
  String r = JOptionPane.showInputDialog(null, "new Setpoint for "+ask+" (now "+I+" )", "Input (INT)", JOptionPane.QUESTION_MESSAGE);
  if (r == null ) { 
    print(" NULL "); 
    r = str(I);
  } // handle CANCEL
  try { 
    I = Integer.parseInt(r);
  } 
  catch(NumberFormatException e) { 
    println("you did not enter a int number!");
  }
  println("new "+ask, I);
  return I;
}

// _________________________________________________________________ askF call: A = askF("A",A);
float askF(String ask, float F) {
  String r = JOptionPane.showInputDialog(null, "new Setpoint for "+ask+" (now "+F+" )", "Input (FLOAT)", JOptionPane.QUESTION_MESSAGE);
  if (r == null ) { 
    print(" NULL "); 
    r = str(F);
  } // handle CANCEL
  try { 
    F = Float.parseFloat(r);
  } 
  catch(NumberFormatException e) { 
    println("you did not enter a int or float number!");
  }
  println("new "+ask, F);
  return F;
}

// _________________________________________________________________ mouse position over rectangle yes/no
boolean overRect(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

// _________________________________________________________________ show_button
void show_button(int xpos, int ypos, int xwide, int ywide, String Btxt, color border, color filler, color texter) {
  textAlign(CENTER);
  textSize(B_textsize);
  strokeWeight(2); // Button border width
  stroke(border); // Button border color
  fill(filler); // Button fill color
  rect(xpos, ypos, xwide, ywide); // Button rectangle
  fill(texter); // text color
  text(Btxt, xpos + xwide/2, ypos+ywide/2+B_textsize/2); // some pix too low
  noStroke();
}

```

![SNAG-0065](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c5af35b72a0db3083896bd20d82d5e27824438ac.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 8, 2019, 3:01pm UTC](https://discourse.processing.org/t/cash-register-game/9938/10 "2019-04-08T15:01:40Z")

</div>

> <https://gist.github.com/GoToLoop/bba0c288aaeeb5ef9bb1>

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 8, 2019, 3:25pm UTC](https://discourse.processing.org/t/cash-register-game/9938/11 "2019-04-08T15:25:07Z")

</div>

thanks, @GoToLoop for a class version

@anna  
you got the first idea of what is happening?

there was a good reason for my first answer, and yes, i did read your request.  
but i also know that you can learn and do many nice graphic things with  
processing,  
while something like a keyboard input of a number…  
is far from any basic / beginner lesson.  
so i hoped we could avoid that at this stage.

but you go for it! start coding  
and post your code using

```auto
</> code format

```

if you have any questions.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 8, 2019, 4:01pm UTC](https://discourse.processing.org/t/cash-register-game/9938/12 "2019-04-08T16:01:39Z")

</div>

> [@anna](#):
>
> I am a beginner at programming

Hi @anna

As you can see, there are many different ways to let the user type numbers. @TfGuy44 has given a partial answer that is close to a “beginner” answer. However, as a beginner, I recommend you break your project down into steps, and add each step so that you understand it. My recommendation:

1. start with one image and a 1-digit code.

```auto
PImage img;
void setup(){
  size(600,600);
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/600px-Processing_3_logo.png");
}
void draw(){
  background(0);
  image(img, 0, 0);
}
void keyReleased(){
  if(key=='1'){
    println("correct:", key);
  }
}

```

1. now, make two images

2. Add image display logic in draw so that you show different images. How will the screen choose which image to display? At random? every x seconds? Will it display the first, then display the second after the code is correct? A very simple method is to have a global `int currentImage=0` variable, and increase it every time a code is correct

3. now, make ten images and the number 0-9.

4. now, how to handle 2-digit or 3-digit codes? Look carefully at TfGuy44’s keyPressed code to understand what it does – building, checking, and clearing a global string based on keys. You may wish to switch that to keyReleased. A key part of finishing his partially complete example is that you need a list of correct answers, which you then check against your global string to find a match. You may want to try this, then post to this thread with more questions if you get stuck.

5. After you have everything working in your basic example, then consider some of the examples of advanced library-based, class-based, pop-up based and screen-based interactive models.