I need a working scoreboard!

Processing Coding Questions
1

Hey there! I am busy with a schoolproject, but I can’t figure out how to configure the scoreboard.
There is a grid with yellow rects. These are points and there is a purple rect that is the player. Don’t mind the red rectangles at this moment. I want to have a working code so when the purple rect goes over the yellow rect the point wil be +1 and the yellow rect wil dissapear and spawn onto another random place of the grid.

Can someone please help me!!?

Thank you in advance!

This is my code so far:

int breedteGrid = 60;
int lengteGrid = 40;
int heleGrid = breedteGrid*lengteGrid;
int huidig=0;
int duikerX = 0;
int duikerY = 150;
int duikerH = 21;
int duikerB = 31;
int itemsr = 80;
int itemsb = 50;
int speelveld;
int score = 0;
int[][] grid = new int[breedteGrid][lengteGrid];

final float stopKnopX = 1350;
final float stopKnopY = 55;
final float stopKnopW = 120;
final float stopKnopH = 50;

IntList seq = new IntList(heleGrid);
IntList seqb = new IntList(heleGrid);
IntList seqr = new IntList(heleGrid);

boolean stopKnopDrukken;

void preset() {
  for (int i = 0; i<heleGrid; i++) 
    seq.append(i);
  seq.shuffle();
  for (int i = 0; i<heleGrid; i++);
}

void presetb() {
  for (int i = 0; i < heleGrid; i++) 
    seqb.append(i);

  seqb.shuffle();

  for (int i = heleGrid-1; i >= itemsb; i--) {

  }
  seqb.sort();
}

void presetr() {
  for (int i = 0; i < heleGrid; i++) 
    seqr.append(i); 

  for (int i = heleGrid-1; i >= 0; i--) 
    if ( seqb.hasValue(i) ) { 

    }

  seqr.shuffle();

  seqr.sort();
}

void reset() {
  for (int i = 0; i < breedteGrid; i++) {
    for (int j = 0; j < lengteGrid; j++) {
      grid[i][j] = 0;
    }
  }
}

void setitem(int rec, int value1) {
  for (int i = 0; i < breedteGrid; i++)
    for (int j = 0; j < lengteGrid; j++)
      if ( seq.get(j+i*lengteGrid) == rec ) 
        grid[i][j] = value1;
}

void setitems(int item, int value1) {
  for ( int i = 0; i < item; i++ )
    setitem(i, value1);
}

void checkitem() {
  for (int i = 0; i < breedteGrid; i++)
    for (int j = 0; j < lengteGrid; j++)
      if ( grid[i][j] == 1) {

      }
}

void draw_grid() {
  int x0 = 0, y0 = 150, w = 31, h = 21, off = 1;

  for (int i = 0; i < breedteGrid; i++)
    for (int j = 0; j < lengteGrid; j++) {
      fill(255);
      if ( grid[i][j] == 1 )
        fill(#FFD700);
      else if ( grid[i][j] == 2 )
        fill(#FF0000);
      rect(x0+i*(w+off), y0+j*(h+off), 
        w, h);
    }
     
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      duikerY -= duikerH+1;
    } else if (keyCode == DOWN) {
      duikerY += duikerH+1;
    } else if (keyCode == LEFT) {
      duikerX -= duikerB+1;
    } else if (keyCode == RIGHT) {
      duikerX += duikerB+1;
    }
  }

  // Gezorgd dat de duiker altijd binnen de grid blijft.
  if (duikerX > width-32) duikerX = 0;
  if (duikerX < 0) duikerX = width-32;
  if (duikerY >height-60) duikerY = 150;
  if (duikerY < 150) duikerY = height-72;
}

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

void setup() {
  size(1920, 1080);
  reset();
  preset();
  setitems(itemsr, 1);
  setitems(itemsb, 2);
  checkitem();
}

void draw() {
  background(0);
  draw_grid();
  fill(#000FFF);
  rect(duikerX, duikerY, duikerB, duikerH);
  fill(#1E90FF);
  rect(0, 0, 1920, 149);
  rect(0, 1030, 1920, 30);
  fill(#000000);
  textSize(66);
  textAlign(CENTER);
  text("Diving For Treasure", width/2, 75);
  fill(#FFFFFF);
  rect(1670,55,220,70);
  fill(0);
  textSize(40);
  textAlign(CENTER);
  text("Score:", 1730, 45);
  stroke(#000000);
  fill(#FFFFFF);
  rect(stopKnopX,stopKnopY,stopKnopW,stopKnopH);
  fill(0);
  textSize(40);
  textAlign(CENTER);
  text("Stop", 1410, 95);
  fill(0);
  textSize(40);
  textAlign(CENTER);
  text("Levens:", 125, 45);
  text("" + score , 1720, 105);
}
1 Like
2

Goedemorgen oude snorkelaar,

Zou je de code van je post gelieve kunnen corrigeren? Als wij het op deze manier kopiëren/plakken dan werkt het programma niet, omdat sommige tekens automatisch worden aangepast. Druk op de knop </> (Preformatted text) en kopieer opnieuw vanuit Processing de code op de juiste plaats. Het eindresultaat zou er als volgt uit moeten zien:

int breedteGrid = 60;
// ...
// rest van je code
// ...
  text("" + score , 1720, 105);
}
2 Likes
3

Heb je discord? Zou je me via daar kunnen helpen?

4

Please go back, edit your post and format your code as code

Please remember to hit ctrl-t in processing prior to posting

1 Like
5

What have you tried so far? Which line Numbers did you look at?

Coming from your last post we don’t want to have the impression you are not working on your code on your own.

2 Likes
6

Hey, I have tried to make some if statements like

if (duikerX & duikerY) = (muntX & muntY) score +1

But I couldn’t figure out what the muntX and muntY variables where because they are all random in the grid.

7

Thanks for editing your code. Don’t have Discord, but we can take care of things just fine here on the forum :slight_smile:

Somewhere in your code you’re generating these random locations. I guess that you tell your sketch to calculate a randomised x and y number, followed by drawing a rectangle on those coordinates.

Besides instantly drawing it, why not save the coordinates of these coins in an array? That way you could compare the x and y location of your diver with the values in the array. If these match, something needs to get triggered (like +1 on the scoreboard, and removing the coin from the field).

2 Likes
8

But the question then is, how? I am stuck in this code because I really don’t know where to start or how to do it.

9

hi Fluxy
you already understand that processing draws in
pixel from 0 … width and 0 … height.
for image work and painting that is great.

but you actually have a GRID job
so you not think in pix anymore, only in column and row

with my array 0 … many i even go one step further,
i not think in column rows anymore as by set a cols = N
somewhere in the grid definition the drawings down to the pix is done automatically.

but if you go this way you can not mix

  • 0 … many-1
  • cols-1 * rows-1
  • pix position for walker…

you stay in one " coordinate system "

so your walker walks also 0 … many-1
and the easy logic used for color
can be used also for walker, if it hits BLUE or RED position

think about it, and if you want follow me in my “coordinate system”
we can work together…

or you stay with grid, then you urgently need
that conversion function

pix_xi = f(c,r);
pix_yi = f(c,r);

while in my world it’s

//______________________________________________________________________ grid math
int arrayToPix_X( int i ) { 
  return x0+(i%cols)*(w+off);
}

int arrayToPix_Y( int i ) {
  return y0+(floor(i/cols))*(h+off);
}

an other thing is you use print to diagnostic logic and status
so it is a mess when you work with

  • canvas size(1920, 980)
    as you not see the PDE console any more
  • no need to use 60 * 40 column * rows when while develop 6 * 4 also work
  • and also consequently not need to set 80 RED and 50 BLUE

what you later adjust as show is up to you, but for working it is just headache
here a

score example 
// https://discourse.processing.org/t/i-need-random-circles-and-rectangles-in-a-grid-stuck-in-a-problem-i-cant-solve/15061/3
// rev 02 change from i , j to i .. many and erase the GRID array
// rev 03 add a second shuffled list for RED items what may not overlap BLUE items
// rev 03b add a walker ( but in array / grid not pixel thinking ) and arrayToPix functions
// rev 4 score counter ( shown on walker, in new program header and printed in console.
// rev 4b add key 'n' for number show toggle

int cols = 15, rows = 10, many = cols*rows; //_________________________ GRID layout
int x0 = 0, y0 = x0, w = 0, h = 0, off = 0; //_________________________ grid rect layout ( auto size to canvas see setup )

color green = color(0, 200, 0);
color red   = color(200, 0, 0);
color blue  = color(0, 0, 200);
color white = color(255);

int itemsb = 20; //_____________________________________________________ BLUE items to be placed randomly unique on a grid
IntList seqb = new IntList(many); //____________________________________ BLUE list
int itemsr = 10; //_____________________________________________________ RED  items to be placed randomly unique on a grid ! NOT OVER BLUE
IntList seqr = new IntList(many); //____________________________________ RED  list

int score = 0; //_______________________________________________________ green walker 
// eat the blue  +1  ( and blue removed / later created new elsewhere )
// touch the red -1

boolean diagp = true; //________________________________________________ print
boolean diagn = true; //________________________________________________ show cell number
void presetb() {
  for (int i = 0; i < many; i++) seqb.append(i); //_____________________ make a list of numbers 0 .. many-1
  seqb.shuffle(); //____________________________________________________ and shuffle them
  for (int i = many-1; i >= itemsb; i--) seqb.remove(i); //_____________ keep only as many we need
  seqb.sort(); //_______________________________________________________ optional sort in draw order
}

void presetr() { //_____________________________________________________ may only run AFTER presetb()
  for (int i = 0; i < many; i++) seqr.append(i); //_____________________ make a list of numbers 0 .. many-1
  for (int i = many-1; i >= 0; i--) 
    if ( seqb.hasValue(i) ) seqr.remove(i); //__________________________ must be different from BLUE 
  seqr.shuffle(); //____________________________________________________ and shuffle them
  for (int i = seqr.size()-1; i >= itemsr; i--) seqr.remove(i); //______ keep only as many we need !! size is shorter now
  seqr.sort(); //_______________________________________________________ optional sort in draw order
}

void diag_print() {
  if ( diagp ) {
    println("BLUE items: "+itemsb);
    for (int i = 0; i < seqb.size(); i++) println("BLUE i "+i+" "+seqb.get(i));
    println("RED items: "+itemsr);
    for (int i = 0; i < seqr.size(); i++) println("RED i "+i+" "+seqr.get(i));
  }
}

void draw_grid() {
  stroke(0);
  for (int i = 0; i < many; i++) {
    fill(white);
    if ( seqb.hasValue(i) ) fill(blue);
    if ( seqr.hasValue(i) ) fill(red);
    int xi = arrayToPix_X( i );
    int yi = arrayToPix_Y( i );
    rect(xi, yi, w, h);
    if ( diagn ) {
      fill(0);
      textSize(12);
      text(i, xi+2, yi+13); //_____________________________________________ optional number print
    }
  }
}

void setup() {
  size(960, 490);//(1920, 980); //size(200, 200);
  w = ( width - 2*x0 )/cols - off; //___________________________________ auto size rects
  h = ( height -2*y0 )/rows - off;
  dH = h; //____________________________________________________________ init walker
  dB = w;
  presetb(); //_________________________________________________________ create a shuffled list BLUE, itemsb long
  presetr(); //_________________________________________________________ create a shuffled list RED,  itemsr long
  diag_print();
  println("use: arrow keys for walker");
}

void draw() {
  background(0, 0, 0);
  surface.setTitle("Eat Blue: score "+score);
  draw_grid(); //_______________________________________________________ green rect on yellow background w. BLUE and RED items
  draw_walker();
}

//______________________________________________________________________ WALKER
int dX = 0, dY = 0, dH = h, dB = w;
int dC = 0, dR = 0, dA = 0; //__________________________________________ point to Colums, Row, Array position

void draw_walker() {
  fill(green);
  rect(dX, dY, dB, dH);
  fill(0);
  textSize(12);
  if ( diagn ) text(dA, dX+2, dY+13);
  textSize(20);
  text(score, dX+3, dY+h-3);
}

void keyPressed() {
  if      (keyCode == UP)        dR--;
  else if (keyCode == DOWN)      dR++;
  else if (keyCode == LEFT)      dC--;
  else if (keyCode == RIGHT)     dC++;
  //____________________________________________________________________ wrap around
  if ( dR < 0 )                  dR = rows-1;
  if ( dR >= rows )              dR = 0;
  if ( dC < 0 )                  dC = cols-1;
  if ( dC >= cols )              dC = 0;
  dA =                           dC + dR * cols;
  dX = arrayToPix_X( dA );
  dY = arrayToPix_Y( dA );
  // println( dC, dR, dA, dX, dY );
  if ( seqb.hasValue(dA) && diagp ) { //________________________________ report CATCH
    int idA = listFind(seqb, dA );    //int idA = seqb.indexOf( dA ); // need to learn to get that JAVA running in processing
    if ( idA >= 0 )seqb.remove(idA); //_________________________________ found and record deleted
    score++;
    //seqb.append(0); //_______________________need new random logic later
    println("walker on BLUE "+dA+ " score "+score);
  }
  if ( seqr.hasValue(dA) && diagp ) {
    score--;
    println("walker on RED "+dA+ " score "+score);
  }
  if ( key == 'n' ) diagn = ! diagn; //_________________________________ toggle number show
}

//______________________________________________________________________ grid math
int arrayToPix_X( int i ) { 
  return x0+(i%cols)*(w+off);
}

int arrayToPix_Y( int i ) {
  return y0+(floor(i/cols))*(h+off);
}

int listFind(IntList ar, int val ) { //__find first occurance of val in a IntList and returns its index
  int idA = -1;
  for ( int i=0; i < ar.size(); i++ ) 
    if ( val == ar.get(i) ) idA = i; //_________________________________ seems IntList no integrated find function??
  return idA;
}
1 Like