3 digit code problem

Processing Coding Questions
1

Hello there!
i’m trying to make an escape game and therefore i need to make a 3 digit code. I want to work with arrays to make it a lot shorter but i don’t know to let it work. Also i want to work with a key input for the digits.This is what i have. I’m kind of a noob. I hope some of you guys can help me with this problem

PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img9;
PImage img7;
PImage img8;
PImage [] img={img1,img1,img3,img4,img5,img6,img7,img8,img9};
PImage code;
int digit[] = {1,2,3,4,5,6,7,8,9};
void setup(){
  size(1280,720);
  code = loadImage("Code.png");
for (int i=1; i<9; i = i+1){
  img[i] = loadImage(i+".png");}
   background(code);
}
void draw(){
}

void keyPressed(){
  
  if (key == 'digit' ){
for (int i =1;i<9; i = i+1){
    i = i+1;
  image(img[i],300,400,100,100);}
}
}```
1 Like
2

Hello!

And welcome to the processing forum! Great to have you here.

I haven’t understood what you goal is.
Can you please explain?
What is the connection between Escape Game and digit?

Here is a way that let’s you type the numbers from 1 to 9 and the image with the number is displayed.

Please note that an array always start with 0 not with 1 (I haven’t done that yet)

Warm regards, Chrisir

PImage [] img = new PImage [10] ;
PImage code;

int currentImg=1; 

void setup() {
  size(1280, 720);
  code = loadImage("Code.png");
  code.resize(width, height);
  for (int i=1; i<=9; i = i+1) {
    img[i] = loadImage(i+".png");
  }
}

void draw() {
  background(code);

  image(img[currentImg], 300, 400, 100, 100);
}

// ------------------------------------------------------------

void keyPressed() {

  if (key >= '1' && key <= '9') {
    currentImg=int(key-48);
  }
}
//
1 Like
3

in this version you can type 3 digits and submit with Enter

but no images are displayed


PImage [] img = new PImage [10] ;
PImage code;

int currentImg=1; 

String result="";

final int leftMargin = 100;
// final int buffMax = 5;
final color BG  = color(2), FG2 = color(255, 0, 0), FG = 0;

final int STATE_ENTER = 0;
final int STATE_GAME  = 1;
int state = STATE_ENTER; 

void setup() {
  size(1280, 720);
  code = loadImage("Code.png");
  code.resize(width, height);
  for (int i=1; i<=9; i = i+1) {
    img[i] = loadImage(i+".png");
  }
}

void draw() {

  if (state==STATE_ENTER) {
    background(0); 
    // show text
    fill(255);
    text("Please enter 3 digit number. Submit with Enter. You can use Backspace.", 
      leftMargin, 110-22);
    noFill();
    stroke(255);
    rect(leftMargin-2, 110-13, 
      100, 19);
    fill(255);
    text(result, leftMargin, 110);
    // show cursor
    makeRedCursorLine();
  } else if (state==STATE_GAME) {
    background(code);
    textSize(72);
    fill(255); 
    text(result, 300, 310);
  } 

  // image(img[currentImg], 300, 400, 100, 100);
}

// ------------------------------------------------------------

void keyPressed() {
  println(key);
  println(RETURN);

  if (key >= '1' && key <= '9') {
    if (result.length()<3)
      result+=key;
  } else if (key==RETURN || key==ENTER) {
    println("hit");
    state=STATE_GAME;
  } else if (key==BACKSPACE) {
    if (result.length()>0) {
      result=result.substring(0, result.length()-1) ;
    }
  } // else if
}//func

void makeRedCursorLine() {
  stroke( frameCount % 30 < 30 >>2 ? BG : FG2 );
  int rPos = (int) textWidth(result) 
    + leftMargin +1; 
  //stroke(255, 0, 0); 
  line(rPos, 110-9, rPos, 110+1);
}
//
1 Like
4

wauw thanks a lot! I want to make an escape game, and with some hints in the room, the user needs to typ the right 3 digit code!

5

okay. I see. Maybe you can use my program to enter the 3 digits.

Alternatively, you could make areas in your image clickable with the mouse.

Regards, Chrisir

6

I’m on it! Thank you! This helped a lot!
Regards

7

So how can I add this file to my Escape game file? I did some research on classes but can’t find the solution…

8

Hello,

you need a data structure, like a list of rooms you can be in?

And a pointer in which room you currently are.

Here is a version that let’s you enter a number and see the images.

TRY 123 and 124.

Chrisir



PImage [] img = new PImage [10] ;
PImage code;

int currentImg=1; 

String result="";

final int leftMargin = 100;
float yMargin;
// final int buffMax = 5;
final color BG  = color(2), FG2 = color(255, 0, 0), FG = 0;

String errorText = ""; 

final int SPLASH_SCREEN = 2;
final int STATE_GAME  = 1;
int state = SPLASH_SCREEN;

void setup() {
  size(1280, 720);
  yMargin=height-18;
  code = loadImage("Code.png");
  code.resize(width, height);
  for (int i=1; i<=9; i = i+1) {
    img[i] = loadImage(i+".png");
  }
}

void draw() {

  if (state == SPLASH_SCREEN ) {
    background(0);
    // show text
    fill(255);
    textSize(34); 
    text("Welcome to \nESCAPE GAME ", 
      244, 210);

    textSize(14);  
    fill(255);
    text("Please enter 3 digit number. Submit with Enter. You can use Backspace. Try 123 and 124. ", 
      244, 352);
  } 
  //-------------------------------------------------------
  else if (state==STATE_GAME) {
    background(code);

    image(img[currentImg], 
      300, 400, 
      100, 100);

    textSize(72);
    fill(255); 
    text(result, 300, 310);

    showDigitEnterField();
    fill(255, 0, 0); 
    text(errorText, 
      width-310, height-32);
  }
}

// ------------------------------------------------------------

void showDigitEnterField() {
  // enter a 3 digit number 

  // show text
  textSize(14);  
  fill(255);
  text("Please enter 3 digit number. Submit with Enter. You can use Backspace. Try 123 and 124. ", 
    leftMargin, yMargin-22);
  noFill();
  stroke(255);
  rect(leftMargin-2, yMargin-14, 
    100, 19);
  fill(255);
  text(result, 
    leftMargin, yMargin);
  // show cursor
  makeRedCursorLine();
}

// ------------------------------------------------------------

void keyPressed() {
  //
  if (state == SPLASH_SCREEN ) {
    key=0; 
    state=STATE_GAME;
  }
  // ----------------------------------------
  else if (state==STATE_GAME) {
    //

    // reset 
    errorText = ""; 

    if (key >= '1' && key <= '9') {
      if (result.length()<3)
        result+=key;
    } 
    //---
    else if (key==RETURN || key==ENTER) {
      if (result.length()!=3) {
        println("ERROR. You must enter THREE letters.");
        errorText = "ERROR. You must enter THREE letters."; 
        return;
      }//if
      // do something here
      switch(result) {
      case "123":
        currentImg=3; 
        break;
      case "124":
        currentImg=2; 
        break;
      }//switch
      result="";
    }
    //---
    else if (key==BACKSPACE) {
      if (result.length()>0) {
        result=result.substring(0, result.length()-1) ;
      }
    } 
    //---
    else if (key==ESC) {
      key=0; 
      state=STATE_GAME;
    }
    //
    else if (key==ESC) {
      key=0; 
      //state=ENTER;
    }
  }
}//func

void makeRedCursorLine() {
  stroke( frameCount % 30 < 30 >>2 ? BG : FG2 );
  int rPos = (int) textWidth(result) 
    + leftMargin +1; 
  //stroke(255, 0, 0); 
  line(rPos, yMargin-9, 
    rPos, yMargin+1);
}
//
1 Like
9

I want to add my file of the 3 digits to my other processing file of the escape room. I tried to do this with a display function, but the program says 'the function display() does not exist"

10

with the above code I tried to add my text enter code into the image display code.

Is that enough for you?

11

To make a new function you have to write the function and then call it for example from draw().

It’s case sensitive. So display != Display

To help you with the error, show your entire code.

In my code the function is called showDigitEnterField(); but also in keyPressed a lot is going on.

12

This is my 3 digit code:

class secretcode{

PImage [] img = new PImage [10] ;

PImage code;
int a = 1;
int currentImg=1; 
int secondImg=1;
int thirdImg=1;
Boolean cijfer1=false;
Boolean cijfer2=false;
Boolean cijfer3=false;
PImage binnenkant;

String s = "Ga naar het eerste cijfer met rechter pijltje, naar het tweede cijfer met pijltje omhoog en naar het derde cijfer met linker pijltje";
void setup() {
  size(1280, 720);
  binnenkant = loadImage("binnenkant.jpg");
  binnenkant.resize(width,height);
  code = loadImage("Code.png");
  code.resize(width, height);
  
  for (int i=1; i<=9; i = i+1) {
    img[i] = loadImage(i+".png");
  }
  textSize(20);
}

void draw() {
}

// ------------------------------------------------------------

void keyPressed() {
//first digit
  if (keyCode == LEFT){
    a=1;
  }
  if (key >= '1' && key <= '9' && a==1) {
    currentImg=int(key-48);
  }
  if (keyCode == UP ){
  a = 2;
  
  }
//second digit
   if (key >= '1' && key <= '9' && a==2) {
     secondImg=int(key-48);
  }
 if (keyCode == RIGHT && a == 2){
   a = 3;
 }
//third digit
 if (key >= '1' && key <= '9'  && a==3) {
    thirdImg=int(key-48);
} 
}
}

and this is the code of the room:

secretcode C = new secretcode();
PImage Basementstickers;
PImage Tafel_omlaag;
PImage Tafel_omhoog;
PImage pizzaopen;
PImage pizzadicht;
PImage Pijl;
PImage Key1;
PImage SDG2;
PImage SDG2_blank;
PImage SDG3;
PImage SDG3_blank;
PImage SDG7;
PImage SDG7_blank;
PImage Stickers;
PImage kast;
PImage kader;

Boolean kelder=true;
Boolean Tafel=false;
PImage Homer;
Boolean pizza=false;
Boolean closet=false;

int[] vlijnen = { 250, 385, 400, 470, 490, 554, 614, 700, 800 };
int[] hlijnen = {36, 110, 165, 260, 300, 310, 350, 380, 400, 435, 480, 550};


void setup() {
  size(1280, 720);
  display();
  Basementstickers= loadImage("Basementstickers.png");
  pizzadicht = loadImage("pizzadicht.png");
  pizzaopen = loadImage("pizzaopen.png");
  Pijl= loadImage("Pijl.jpg");
  Key1= loadImage("Key1.png");
  SDG2= loadImage("SDG2.jpeg");
  SDG3= loadImage("SDG3.jpg");
  SDG7= loadImage ("SDG7.png");
  Stickers= loadImage("Stickers.png");
  Tafel_omlaag= loadImage("Tafel_omlaag.png");
  Tafel_omhoog= loadImage("Tafel_omhoog.png");
  kast = loadImage("kast1.png");
  kader = loadImage("unnamed.png");
  background(Basementstickers);
  Homer= loadImage("Homer.png");
  noStroke();
}

void draw() {

  if (kelder == true) {
    C.display();
    C.play();
    image(kader, 1080, 10, 200, 200);
    image(kader, 1080, 200, 200, 200);
    image(kader, 1080, 390, 200, 200);
  }

  for (int i = 0; i < vlijnen.length; i++) {
    line(vlijnen[i], 0, vlijnen[i], 720);
  }
  for (int i = 0; i < hlijnen.length; i++) {
    line(0, hlijnen[i], 1280, hlijnen[i]);
  }
}
void display() {
}
void mouseClicked() {
  //Sticker op tafel
  if (mouseX>750 && mouseX<850 && mouseY>200 && mouseY<300 && kelder==false && Tafel==true) {
    background(Tafel_omhoog);
    image(Pijl, 0, 620, 100, 100);
  }
  //blad omhoog doen op tafel
  if (mouseX>700 && mouseX<800 && mouseY>300 && mouseY<400 && kelder==true && Tafel==false) {
    background(Tafel_omlaag); 
    image(Pijl, 0, 620, 100, 100);
    kelder=false;
    Tafel=true;
  }
  //stickers in kader
  if (mouseX>385 &&mouseX<470 && mouseY>36 && mouseY<165 && kelder==true ) {
    background(Stickers);
    image(Pijl, 0, 620, 100, 100);
    kelder=false;
  }
  //terug naar kelder
  if (mouseX<100 &&mouseX>0 && mouseY<720 && mouseY>620 && kelder==false ) {
    background(Basementstickers);
    kelder=true;
    Tafel=false;
  }
  //pizzadoos laten zien
  if (mouseX<490 && mouseX>400 && mouseY<480 && mouseY>435 && kelder==true &&pizza==false) {
    background(pizzadicht);
    image(Pijl, 0, 620, 100, 100);
    kelder = false;
    pizza = true;
  }
  if (mouseX<700 && mouseX>470 && mouseY>350 && mouseY<550 && kelder==false && pizza==true) {
    background(pizzaopen);
    image(Pijl, 0, 620, 100, 100);
    kelder= false;
    pizza = false;
  }
  //kast
  if (mouseX<400 && mouseX>250 && mouseY>110 && mouseY<380 && kelder==true && closet==false) {
    background(kast);
    image(Pijl, 0, 620, 100, 100);
    kelder = false;
    closet = true;
  }
  if (mouseX<310 && mouseX>260 && mouseY>552 && mouseY<650 && kelder==false && closet==true) {
  }
}
1 Like
13

and you want to combine the two sketches…?

14

Yes, exactly, so when I press somewhere on the screen, the digit code comes on

15

do you want to have the 3 digits displayed, during they are entered? Like in my code?

Or are they recorded invisible?

Does that mean:

  • you want to have the 3 digits displayed, during they are entered?
  • you want to have the 3 digits displayed at the mouse position?
16

Yes, so you can see which digits you typed

17

You want to see the digits during typing also?

18

Yes, i hope you know what i mean

19

You answered only one question.

Remarks

You can’t have size inside a class.

You can’t have keyPressed() inside a class.

Maybe read: Objects / Processing.org

When you don’t have a function display() in the class C.display() can’t work (you have one outside the class). New version below.

20

what do you mean by the class secretcode? The small line from my code to enter 3 digits? Or something else?

What does kelder mean?