表示に穴を開けるには。

Question

前提・実現したいこと

以下の図の赤丸のようにスケールバーの指定の場所をくり抜いて奥の表示を出現させるテクニック、あるいは目的の描写を周囲に被らせないように行うトリミングのテクニックを知りたい。

出典はこちら

発生している問題・エラーメッセージ

beginContour()とendContour()内に図に表示された赤丸内の白線をvertexで作成すると、リファレンス通り、指定した個所をくり抜いてくれるのですが、beginShape()とbeginContour()のコード内に座標変換や他の図形(例：rect、ellipse)を使うことが出来ないので、どうしたものかと行き詰っています。
###取り得る手法
1)一番奥のレイヤ(エディタ内では上の行)に赤丸内のラベルを潜ませて、何かしらの方法でくりぬく
→そのくり抜く方法とは？

2)一番手前のレイヤ(エディタ内では下の行)に枠からはみ出した部分をトリミングして指定した位置に貼り付ける。
→後ろを透かせつつトリムする方法がわからない。

該当のソースコード

一応ソースを載せます。
大雑把の説明ですが、1つ目のソースコードはsetup()とdraw()しか記述していません。2つ目にはdraw()の中にあるspeed_region()の中身を書いており、
一番下の15行がbeginContour()を使ってくり抜いている部分になっています。
それ以外のところはラベルを表示しているコードになっています。

import hypermedia.net.*;
UDP udp;

PFont Font;//HUDフォント
float newX = 0, newY = 0;
float bank;
float font_size_small;
float font_size_large;

float theta = 0;//ピッチ各
float phi = 0;//バンク角
float psi = 0;//方位角
float kvc = 0;//CAS
float kph = 0;//気圧高度

void setup()
{
  size(displayWidth, displayHeight);
  Font = loadFont("Verdana-48.vlw");
  strokeWeight(displayHeight/350);

  //udp = new UDP (this, 60000);
  //udp.listen(true);
}

void draw()
{
  font_size_small = displayHeight/40;
  font_size_large = displayHeight/30;
  textFont(Font, font_size_small);

  kvc = 50;

  bank = radians(-phi);

  background(255);
  fill(0, 255, 0);
  smooth();
  speed_region();
}

void speed_region()
{
  float mask_width = displayWidth / 8.0;
  float mask_height = displayHeight / 7.5;
  int spd_label_max = 1000; //速度の最大表示はMAX1000 [kt]
  int spd_delta = 20;//速度の表示間隔は20 [kt]
  int spd_num = spd_label_max / spd_delta;
  float spd_scale_length = displayHeight * 0.35;
  float spd_num_distance = spd_scale_length / spd_num;
  float spd_num_reach = mask_width * 0.35;
  float spd_scale_main_reach = mask_width * 0.20;
  float spd_scale_sub_reach = mask_width * 0.10;
  float spd_num_exist;
  float spd_scale_sub_exist;
  float R = displayHeight / 50;

  textFont(Font, font_size_large);
  rectMode(CORNER);
  noStroke();
  fill(0);
  rect(0, 0, mask_width, displayHeight);//速度計の背景をセット
  stroke(0, 255, 0);
  line(mask_width, mask_height, mask_width, displayHeight - mask_height);
  fill(0);
  translate(mask_width, displayHeight / 2);
  textAlign(RIGHT);
  //速度計表示
  for (int i = 0; i <= spd_label_max; i += spd_delta)
  {
    float y = map(kvc, 0, 1000, 0, spd_scale_length * ((spd_label_max / spd_delta) - 30));

    spd_num_exist = -(i * spd_num_distance) + y;
    spd_scale_sub_exist = spd_num_exist - spd_num_distance * (spd_label_max/100);
    fill(0, 255, 0);
    text(i, -spd_num_reach, spd_num_exist + font_size_large * 0.3);
    line(0, spd_num_exist, -spd_scale_main_reach, spd_num_exist);
    line(0, spd_scale_sub_exist, -spd_scale_sub_reach, spd_scale_sub_exist);
  }
  beginShape();
  fill(0, 255, 0);
  scale(-1, 1);
  for (int i = 0; i < 3; i++) {
    vertex(R*cos(radians(360*i/3)), R*sin(radians(360*i/3)));
  }
  endShape(CLOSE);
  fill(0);
  scale(-1, 1);
  translate(-mask_width, -displayHeight / 2);
  noStroke();
  rect(0, 0, displayWidth, mask_height);//速度計の上端の見切れをセット
  stroke(0, 255, 0);
  line(0, mask_height, mask_width, mask_height);
  translate(0, displayHeight);
  scale(1, -1);
  noStroke();
  rect(0, 0, displayWidth, mask_height);//速度計の下端の見切れをセット
  stroke(0, 255, 0);
  line(0, mask_height, mask_width, mask_height);
  scale(1, -1);
  translate(0, -displayHeight);
  
  //noFill();
  beginShape();
  vertex(0, 0);
  vertex(mask_width, 0);
  vertex(mask_width, displayHeight);
  vertex(0, displayHeight);
  beginContour();
  vertex(0, displayHeight / 15 + displayHeight / 2);
  vertex(mask_width / 1.25, displayHeight / 15 + displayHeight / 2);
  vertex(mask_width / 1.25, displayHeight / 45 + displayHeight / 2);
  vertex(mask_width / 1.10, displayHeight / 2);
  vertex(mask_width / 1.25, -displayHeight / 45 + displayHeight / 2);
  vertex(mask_width / 1.25, -displayHeight / 15 + displayHeight / 2);
  vertex(0, -displayHeight / 15 + displayHeight / 2);
  endContour();
  endShape(CLOSE);
  
}

補足情報（FW/ツールのバージョンなど）

processing 3.3.6

Answer 1

おっしゃっていることをちゃんと理解しているか自信がありませんが、2)の方法というのはこういうことでしょうか。
PGraphicsプレーンを作成して、画に載せて「吹き出し」を作って、外側部分をマーカー色で塗りつぶした上で最後にマーカー色をピクセル単位で透明にし(この辺がイケてない気がするけど)、メイン画面に貼り付けています。

PFont Font;
PGraphics pg;

void setup() {
  size(300, 300);
  Font = createFont("メイリオ", 48);
  pg=createGraphics(100, 100);
}

void draw() {
  pg.beginDraw();
  pg.background(0);
  pg.fill(255);
  pg.textFont(Font, 48);
  pg.text("0123", -10, 30);
  pg.text("1234", -10, 70);
  pg.text("2345", -10, 110);
  pg.fill(128, 0, 0);//後で透明にするマーカー色
  pg.stroke(255, 255, 0);
  pg.strokeWeight(5);
  pg.beginShape();//吹き出しの外側を塗りつぶす
  pg.vertex(-10, -10);//枠線を表示させないために画面外に
  pg.vertex(pg.width+10, -10);
  pg.vertex(pg.width+10, pg.height+10);
  pg.vertex(-10, pg.height+10);
  pg.beginContour();//吹き出しのくり抜き描画
  pg.vertex(10, 90);
  pg.vertex(70, 90);
  pg.vertex(70, 60);
  pg.vertex(95, 50);
  pg.vertex(70, 40);
  pg.vertex(70, 10);
  pg.vertex(10, 10);
  pg.endContour();
  pg.endShape(CLOSE);
  pg.loadPixels();
  for (int i=0; i<pg.pixels.length; i++) {
    if (red(pg.pixels[i])==128) {//マーカー色を
      pg.pixels[i]=color(0, 0, 0, 0);//透明に置き換える
    }
  }
  pg.updatePixels();
  pg.endDraw();
  background(0, 128, 0);
  image(pg, 100, 100);//透明色付きのPGraphicsを貼り付け
}

追記:
1)の方も、こんなでいいのかなぁ。

void setup() {
  size(800, 600);
  Font=createFont("メイリオ", 48);
  font_size_large = height/30;
}

PFont Font;
float font_size_large;
float kvc = 0;

void draw() {
  speed_region();
}

void speed_region()
{
  float mask_width = width / 8.0;
  float mask_height = height / 7.5;
  int spd_label_max = 1000; //速度の最大表示はMAX1000 [kt]
  int spd_delta = 20;//速度の表示間隔は20 [kt]
  int spd_num = spd_label_max / spd_delta;
  float spd_scale_length = height * 0.35;
  float spd_num_distance = spd_scale_length / spd_num;
  float spd_num_reach = mask_width * 0.35;
  float spd_scale_main_reach = mask_width * 0.20;
  float spd_scale_sub_reach = mask_width * 0.10;
  float spd_num_exist;
  float spd_scale_sub_exist;
  float R = height / 50;

  PGraphics pg=createGraphics((int)(mask_width+R/2), height);

  pg.beginDraw();
  pg.background(255, 0, 0);
  pg.textFont(Font, font_size_large);
  pg.rectMode(CORNER);
  pg.noStroke();
  pg.fill(200);
  pg.stroke(0, 255, 0);
  pg.rect(0,0,mask_width, height);
  pg.translate(mask_width, height/2);
  pg.fill(0);
  pg.textAlign(RIGHT);
  //速度計表示
  for (int i = 0; i <= spd_label_max; i += spd_delta)
  {
    float y = map(kvc, 0, 1000, 0, spd_scale_length * ((spd_label_max / spd_delta) - 30));

    spd_num_exist = -(i * spd_num_distance) + y;
    spd_scale_sub_exist = spd_num_exist - spd_num_distance * (spd_label_max/100);
    pg.fill(0, 255, 0);
    pg.text(i, -spd_num_reach, spd_num_exist + font_size_large * 0.3);
    pg.line(0, spd_num_exist, -spd_scale_main_reach, spd_num_exist);
    pg.line(0, spd_scale_sub_exist, -spd_scale_sub_reach, spd_scale_sub_exist);
  }
  pg.fill(0, 255, 0);
  pg.beginShape();
  pg.scale(-1, 1);
  for (int i = 0; i < 3; i++) {
    pg.vertex(R*cos(radians(360*i/3)), R*sin(radians(360*i/3)));
  }
  pg.endShape(CLOSE);
  pg.fill(255,0,0);
  pg.resetMatrix();
  pg.beginShape();//くり抜くところを描画
  pg.vertex(0, -height / 15 + height / 2);
  pg.vertex(mask_width / 1.25, -height / 15 + height / 2);
  pg.vertex(mask_width / 1.25, -height / 45 + height / 2);
  pg.vertex(mask_width / 1.10, height / 2);
  pg.vertex(mask_width / 1.25, height / 45 + height / 2);
  pg.vertex(mask_width / 1.25, height / 15 + height / 2);
  pg.vertex(0, height / 15 + height / 2);
  pg.endShape(CLOSE);
  pg.loadPixels();
  for(int i=0;i<pg.pixels.length;i++){
    if(red(pg.pixels[i])==255){
      pg.pixels[i]=color(0,0,0,0);
    }
  }
  pg.updatePixels();
  pg.endDraw();
  background(0, 200, 200);
//マスクの下のラベルを描く
  translate(0,height/2);
  fill(0);
  rect(0,-height/15,mask_width,height*2/15);
  fill(255);
  textAlign(RIGHT,BOTTOM);
  textFont(Font, font_size_large*2);
  text("123",mask_width/1.25,0);
  text("456",mask_width/1.25,height/15);
  text("456",mask_width/1.25,height*2/15);
  
  
  resetMatrix();
  image(pg, 0, 0);//速度計マスク(?)を被せる
}

普通の描画では透明度をつけても、何かを描いた上から描くと下に描いてあるものが透過して見えるだけなので、PGraphicsに描いて、結果の一部の色を透過色に置き換えてやる、なんていうことをやっているわけですが。