Problems with background in draw();

Processing Coding Questions
1

Hello! I’m new to processing and I’m having some background issues.
I’m working on a data visualization of word frequency in a text, shown through a bar graph.

For the example code I replaced my text with a sequence of 200 random numbers: the bar graph scrolls when pressing UP and DOWN on the keyboard while the other half of the screen is supposed to show one of the 200 numbers picked randomly, every time the key R is pressed.

The background is in draw(); for it has to be drawn each time my graph moves. However this doesn’t allow the random number to stay on screen.

IntDict concordance;

String numbers[];
String randomnumber;

//PANNING VARIABLES
float yPan = 0;
boolean panUp = false;
boolean panDown = false;

boolean once=true;

void setup() {
  fullScreen();
  smooth(2);
  concordance = new IntDict();

  String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
  String[] numbers = splitTokens(numberString, ",");

  //FREQUENCY COUNT
  for (int i = 0; i < numbers.length; i++) {
    String s=(numbers[i].toLowerCase());
    concordance.increment(s);
  }
}


void draw() {
  background(0);

  concordance.sortValuesReverse();
  String[] keys = concordance.keyArray();
  for (int i = 0; i < keys.length; i++) {
    String num = keys[i];
    int frequency = concordance.get(num);

    //DRAW GRAPH
    fill(255);
    rect(35, (((i*13)+9)+(yPan)), (frequency*2.2), 6);

    fill(255);
    textAlign(RIGHT);
    textSize(13);
    text(frequency, 30, ((i*13)+16)+(yPan));

    fill(255);
    textAlign(LEFT);
    text(num, (frequency*2.2)+40, ((i*13)+16)+(yPan));
  }
}   

void keyPressed() {

  //SCROLL GRAPH
  if (keyCode == UP) {
    if (panUp) {
      yPan +=35;
    }
    panUp = true;
    panDown = false;
  }

  if (keyCode == DOWN) {
    if (panDown) {
      yPan -=35;
    }
    panUp=false;
    panDown = true;

    //PICK AND SHOW A RANDOM NUMBER WHEN R IS PRESSED
  } else if (key == 'R' || key == 'r') { 

    String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
    String[] numbers = splitTokens(numberString, ",");

    int index = int(random(numbers.length));
    randomnumber = numbers[index];

    textAlign(TOP);
    textSize(60);
    text (randomnumber, width/2+10, 9, width/2, height);
  }
}

Is there a way that allows both graph and random number to be shown properly?
Perhaps this is obvious but I can’t seem to figure it out. :face_with_monocle:

1 Like
2

The background is being drawn every frame where as keyPressed only draws whenever a key is pressed, to have the number stay on the screen you have to move the draw code for the number into the draw function like this:

IntDict concordance;

String numbers[];
String randomnumber;

//PANNING VARIABLES
float yPan = 0;
boolean panUp = false;
boolean panDown = false;

boolean once=true;

void setup() {
  fullScreen();
  smooth(2);
  concordance = new IntDict();

  String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
  String[] numbers = splitTokens(numberString, ",");

  //FREQUENCY COUNT
  for (int i = 0; i < numbers.length; i++) {
    String s=(numbers[i].toLowerCase());
    concordance.increment(s);
  }
}


void draw() {
  background(0);

  concordance.sortValuesReverse();
  String[] keys = concordance.keyArray();
  for (int i = 0; i < keys.length; i++) {
    String num = keys[i];
    int frequency = concordance.get(num);

    //DRAW GRAPH
    fill(255);
    rect(35, (((i*13)+9)+(yPan)), (frequency*2.2), 6);

    fill(255);
    textAlign(RIGHT);
    textSize(13);
    text(frequency, 30, ((i*13)+16)+(yPan));

    fill(255);
    textAlign(LEFT);
    text(num, (frequency*2.2)+40, ((i*13)+16)+(yPan));
  }
  if (randomnumber!=null) {
    textAlign(TOP);
    textSize(60);
    text (randomnumber, width/2+10, 9, width/2, height);
  }
}   

void keyPressed() {

  //SCROLL GRAPH
  if (keyCode == UP) {
    if (panUp) {
      yPan +=35;
    }
    panUp = true;
    panDown = false;
  }

  if (keyCode == DOWN) {
    if (panDown) {
      yPan -=35;
    }
    panUp=false;
    panDown = true;

    //PICK AND SHOW A RANDOM NUMBER WHEN R IS PRESSED
  } else if (key == 'R' || key == 'r') { 

    String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
    String[] numbers = splitTokens(numberString, ",");

    int index = int(random(numbers.length));
    randomnumber = numbers[index];
  }
}
1 Like
3

Hey thanks! I didn’t know about null.

But what if I had a slightly different scenario with two different key interactions that I had to juggle between: when I press R I get a random number and when I press H I get a text saying “Hello there”?

I tried like this but it’s not right:

IntDict concordance;

String numbers[];
String randomnumber;
String h;

//PANNING VARIABLES
float yPan = 0;
boolean panUp = false;
boolean panDown = false;

void setup() {
  fullScreen();
  smooth(2);
  concordance = new IntDict();

  String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
  String[] numbers = splitTokens(numberString, ",");

  //FREQUENCY COUNT
  for (int i = 0; i < numbers.length; i++) {
    String s=(numbers[i].toLowerCase());
    concordance.increment(s);
  }
}


void draw() {
  background(0);

  concordance.sortValuesReverse();
  String[] keys = concordance.keyArray();
  for (int i = 0; i < keys.length; i++) {
    String num = keys[i];
    int frequency = concordance.get(num);

    //DRAW GRAPH
    fill(255);
    rect(35, (((i*13)+9)+(yPan)), (frequency*2.2), 6);

    fill(255);
    textAlign(RIGHT);
    textSize(13);
    text(frequency, 30, ((i*13)+16)+(yPan));

    fill(255);
    textAlign(LEFT);
    text(num, (frequency*2.2)+40, ((i*13)+16)+(yPan));
  }
  if (randomnumber!=null) {
    fill(0);
    rect(width/2, 0, width/2, height);

    fill(255);
    textAlign(TOP);
    textSize(60);
    text (randomnumber, width/2+10, 9, width/2, height);
  }

  if (h!=null) {
    fill(0);
    rect(width/2, 0, width/2, height);

    fill(255);
    textAlign(TOP);
    textSize(60);
    text (h, width/2+30, 9, width/2, height);
  }
}

void keyPressed() {

  //SCROLL GRAPH
  if (keyCode == UP) {
    if (panUp) {
      yPan +=35;
    }
    panUp = true;
    panDown = false;
  }

  if (keyCode == DOWN) {
    if (panDown) {
      yPan -=35;
    }
    panUp=false;
    panDown = true;

    //PICK AND SHOW A RANDOM NUMBER WHEN R IS PRESSED
  } else if (key == 'R' || key == 'r') { 
    String numberString = "74,34,62,41,81,11,36,76,37,14,54,57,50,57,95,35,82,100,49,67,48,18,11,97,14,41,85,53,80,72,61,91,93,67,72,73,72,20,32,45,62,9,36,70,99,47,6,98,36,26,65,32,75,8,93,71,72,55,95,7,1,36,93,9,21,100,43,22,30,58,21,4,9,4,35,12,57,26,3,90,16,65,36,11,67,4,22,14,63,89,45,10,51,60,3,32,12,41,83,37,100,91,74,76,73,69,6,22,26,100,59,16,24,30,41,77,79,91,86,37,88,26,10,49,32,95,79,50,46,49,45,58,74,22,53,44,82,61,60,61,73,31,41,5,94,38,48,5,90,77,91,6,45,11,1,16,13,23,10,52,45,8,48,16,96,24,61,25,59,40,44,6,13,51,88,42,62,43,94,8,24,47,96,71,10,30,22,68,54,87,70,45,8,78,77,81,24,7,21,7";
    String[] numbers = splitTokens(numberString, ",");

    int index = int(random(numbers.length));
    randomnumber = numbers[index];
    
  } else if (key == 'H' || key == 'h') { 
    String h = "hello there";
  }
}
4

Solved! if anyone is wondering how to achieve this result:

1 Like