Навигационная панель в обработке для большего, чем рисунок экрана

Question

У меня возникли проблемы с перемещением перспективы в окне шириной 10000 пикселей, в котором я выполняю чертеж каждые миллисекунды или около того, и все рисунки складываются в направлении x. Я хочу, чтобы иметь возможность перемещать перспективу, которая отображается на моем экране вдоль оси x, где я хочу, чтобы я мог видеть, как происходит рисование в реальном времени.

Я использую датчик освещенности на плате типа Arduino, чтобы сообщать PDE уровни освещенности, и я рисую кривую Безье для каждого экземпляра прочитанного света, делая Безье шире, когда свет тусклый, и уже, когда свет интенсивный.

Я пытаюсь реализовать навигатор бар этого типа:

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 > x_navigator && mouseY > y_navigator && mouseX < x_navigator + navigator_width && mouseY < y_navigator + navigator_height) 
    { 
    if (mouseX < x_navigator + navigator_width/12) 
    { 
     rect(x_navigator, y_navigator, navigator_width/6, navigator_height); 
    } 
    else 
    { 
     if (mouseX > 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); 
     } 
    } 
    } 
} 

на мой код, который черпает Безье:

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() > 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; 
     } 
    } 

Пока что делает его функциональным, чтобы переместите отображаемое изображение, где находится курсор, чтобы я мог видеть рисунок в реальном времени, а также проверить предыдущий c притяжения, если я так хочу.

EDIT: Так код, который работает без Engduino это:

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; 
} 

То, что я хочу, чтобы иметь навигационную панель типа я показал (по крайней мере, в области дизайна), чтобы перемещаться по 10000-пиксельное окно. Код навигационной панели, который я загрузил, - это только дизайн навигации, и у меня нет функциональности, вот где мне нужна помощь.

Answer 1

Это будет немного сложнее только потому, что ваш рисунок выполняется на нескольких кадрах. Вы не очищаете холст в каждом кадре, вы наращиваете рисунок с течением времени.

Если вы очищая полотно и перерисовки все каждый кадр (что и делают многие обработки зарисовки), то вы можете просто изменить значение, где вы рисуете все X, или просто вызовите функцию translate() перед нанесением все остальное.

Но поскольку вы рисуете все по нескольким кадрам, вам придется рисовать буфер PGraphics. Затем на каждом кадре вы рисуете буфер, используя любое смещение X, которое вы хотите. Вот небольшой пример:

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`) 

PGraphics pg; 

void setup() 
{ 
    size(10000, 800); // The 10000-pixel wide window. 
    pg = createGraphics(width, height); 
} 

void draw() 
{ 

    end_x = begin_x + (400/(sqrt(light) + 1)); 
    end_y = begin_y - constant; 
    control = end_x - begin_x; 

    pg.beginDraw(); 
    pg.noFill(); 
    pg.smooth(); 
    pg.strokeWeight(3); 
    pg.bezier(begin_x, begin_y, begin_x + control, begin_y, end_x - control, end_y, end_x, end_y); 
    pg.endDraw(); 

    constant = constant * (-1); 
    begin_x = end_x; 
    begin_y = end_y; 

    background(200); 
    image(pg, -mouseX, 0); 
}