title: Navigation bar in Processing for bigger than screen drawing
body: <p>I'm having trouble moving the perspective in a 10000 pixel wide window, in which I am performing a drawing every millisecond or so, and all the drawings are stacking in the x direction. I want to be able to move the perspective that is shown on my screen along the x axis where I want it to, so that i can see the real time drawing happening.</p>
  
  <p>I am using the light sensor on an Arduino-type board to communicate to the PDE the light levels, and I am drawing a Bezier curve for each instance of the light read, making the Bezier wider when the light is dim, and narrower when the light is intense.</p>
  
  <p><a href="https://i.stack.imgur.com/NGLn2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGLn2.png" alt="The Beziers covering all the screen allready"></a></p>
  
  <p>I am trying to implement a navigator bar of this type:</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>    void setup()
  {
    size(1800, 1800);
  }
  
  void draw()
  { int x_navigator = width / 2 - width / 6, y_navigator = 80, navigator_width = width / 3, navigator_height = 40;
    fill(204);
    rect(x_navigator, y_navigator, navigator_width, navigator_height);
    fill(250, 204, 0, 160);
    if (mouseX &gt; x_navigator &amp;&amp; mouseY &gt; y_navigator &amp;&amp; mouseX &lt; x_navigator + navigator_width &amp;&amp; mouseY &lt; y_navigator + navigator_height)
    {
      if (mouseX &lt; x_navigator + navigator_width / 12)
      {
        rect(x_navigator, y_navigator, navigator_width / 6, navigator_height);
      }
      else
      {
        if (mouseX &gt; x_navigator + ((11 * navigator_width) / 12))
        {
          rect(x_navigator + (5 * navigator_width) / 6, y_navigator, navigator_width / 6, navigator_height);
        }
        else
        {
          rect(mouseX - (navigator_width / 12), y_navigator, navigator_width / 6, navigator_height);
        }
      }
    }
  }
  </code></pre>
  
  <p>on my code that draws Beziers:</p>
  
  <pre class="lang-java prettyprint-override"><code>import processing.serial.*;
  
  Serial Engduino;
  String light_String = "", temperature_String = "";
  int constant = 300;
  float begin_x = 0, begin_y = 550, end_x, end_y, control = 1, light, temperature;
  
      void setup()
      {
        String portName = "COM3";
        Engduino = new Serial(this, portName, 9600);
        size(1000, 800);
        noFill();
        smooth();
        strokeWeight(3);
      }
  
      void draw()
      {
        if (Engduino.available() &gt; 0) 
        {
          light_String = Engduino.readStringUntil('\n');
          try{light = parseFloat(light_String);}
          catch(NullPointerException e)
          {;}
          println("The light is: ");
          println(light);
          end_x = begin_x + (400 / (sqrt(light) + 1));
          end_y = begin_y - constant;
          control = end_x - begin_x;
          bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y);
          constant = constant * (-1);
          begin_x = end_x;
          begin_y = end_y;
        }
      }
  </code></pre>
  
  <p>While making it functional as to move the displayed image where the cursor is, so that I can see the drawing in real time, and also to check the previous curves drawn if I so wish.</p>
  
  <p>EDIT: So the code that works without an Engduino is this:</p>
  
  <pre class="lang-java prettyprint-override"><code>int constant = 300;
  float begin_x = 0, begin_y = 550, end_x, end_y, control = 1, light = 30; // Light is what I get through the serial port from the Engduino (an Arduino type board`)
  
  void setup()
  {
    size(10000, 800); // The 10000-pixel wide window.
    noFill();
    smooth();
    strokeWeight(3);
  }
  
  void draw()
  {
      end_x = begin_x + (400 / (sqrt(light) + 1));
      end_y = begin_y - constant;
      control = end_x - begin_x;
      bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y);
      constant = constant * (-1);
      begin_x = end_x;
      begin_y = end_y;
  }
  </code></pre>
  
  <p>What I want is to have a navigation bar of the type I've shown (at least in design) to navigate around the 10000-pixel wide window. The navigation bar code I have uploaded is only a design of the navigation, and has no functionality, that's where I want some help.</p>