Scrolling problem with a bar graph

Processing Coding Questions
1

Hi! I’m new to processing and working on a data visualization of word frequency in a corpus of poems, shown through a bar graph. My problem is I can’t seem to figure out how to add vertical scroll/panning to my sketch to navigate it in its entirety, I’ve tried with keyPressed but it won’t work. Right now the sketch only shows part of my graph.

The graph is drawn through a for loop. To stop the graph to be redrawn over and over again I’ve used a boolean and made the for loop run < n times, where n is the size of my IntDict, instead of using a noLoop();.

The fact that I’ve used a boolean to draw the graph only once is what keeps the panning from working.
Are there any alternative ways to make the sketch scroll down to see the whole graph, that are compatible with the way I used the boolean?
Or other ways for my graph to only be drawn once?

I tried to narrow down and comment my code. For the example code I replaced my poetry corpus with a sequence of 200 random numbers

IntDict concordance;
int repeat = 0;
boolean runOnce= true;

//PANNING VARIABLES
float xPan = 720;
float yPan = 450;
boolean panUp = false;
boolean panDown = false;

void setup() {
  background(0);
  fullScreen();
  textSize(13);
  smooth(2);
  concordance = new IntDict();
}


void draw() {
  translate (width/2, height/2);
  translate (-xPan, -yPan);

  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
  if (runOnce) {
    if (repeat < 200) {
      for (int i = 0; i < numbers.length; i++) {
        String s=(numbers[i].toLowerCase());
        concordance.increment(s);
      }

      concordance.sortValuesReverse();

      String[] keys = concordance.keyArray();

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

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

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

        textAlign(LEFT);
        text(num, (frequency*2.2)+40, (i*13)+16);
        fill(255);
      }
    }
    runOnce=false;
  } 
  if (panUp) {
    yPan +=1;
  }
  if (panDown) {
    yPan -=1;
  }
}    

void keyPressed() {
  //NAVIGATE
  if (keyCode == UP) {
    panUp = true;
    panDown = false;
  }

  if (keyCode == DOWN) {
    panUp=false;
    panDown = true;
  }
}
1 Like
2

I got it scrolling up and down by adding a Y offset in second loop for text() and rect(); you are on the right track.

  1. Do a plot for each draw() cycle; that is how processing works.
  2. Add a panY variable to offset the Y for text() and rect();
  3. Increment or decrement panY with a keyPressed; I did this in the keyPressed().
  4. I ran that first for loop ONCE only and then the second for loop for each draw(); I had to move the bracket to do this.
  5. I used some creative liberty and changed the rect() to yellow; make sure the fill() comes before text() or rect()!

That will do it! I got this working… thank you for the challenge!

:slight_smile:

2 Likes
3

Hey thank you for replying, I will try follow your advice!

4

I had fun working through your code! Thank you!

You can do a println(); to send data to console to help with debugging.

https://processing.org/reference/println_.html

I did not post code because this is very achievable and I have confidence in you!

:slight_smile:

The yellow was my favourite part:
image

1 Like
5

Another simple and approach to vertically scrolling content is to use the mouse – e.g. with mouseDragged. Update a single global variable whenever the mouse is dragged, then use that variable with translate at the beginning of draw.

/**
 * Simple vertical mouse scroll
 * 2019-06-30 Processing 3.4
 */
float yscroll;
void draw() {
  background(0);
  // scroll content
  translate(0, yscroll);

  // content
  ellipse(width/2, height/2, 20, 20);
  text((int)yscroll, width/2 + 20, height/2);
}

void mouseDragged() {
  // update scroll while dragging
  yscroll += mouseY - pmouseY;
}

This can be adapted to horizontal, or combined horizontal and vertical panning, et cetera. If you have a big scene and a lot of content, you may also which to check whether things are in the view frame before drawing them. You can however just draw as normal, to normal coordinates (e.g. width/2,height/2 is the middle of the screen) – and the translate() command will shift the content appropriately, so that the “middle” of the screen can be pushed off the top or down below the bottom.

1 Like