画面描画より大きい処理のナビゲーションバー

Question

10000ピクセル幅のウィンドウでパースペクティブを移動するのに問題があります。このウィンドウでは、1ミリ秒ごとに描画を実行しており、すべての描画がx方向に積み重なっています。自分の画面に表示されている視点をx軸に沿って動かすことができるようにしたいので、リアルタイムの描画が行われるのを見ることができます。

光のレベルをPDEと通信するためにArduinoタイプのボード上の光センサーを使用しています。光が暗いときにBezierを広げ、光が強くなると狭くなります。

私はこのタイプのナビゲーションバーを実装しようとしています：ベジエを描く私のコードに

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()関数を呼び出しますelse。

しかし、複数のフレームにわたってすべてを描画しているので、バッファーを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); 
}