processing API ラグ 並行処理

Question

実現したいこと

APIを取得するときにカクつかないようにしたいです。

前提

APIを取得する関数を作ってみたのですが、取得の瞬間に一瞬止まってしまいす。

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

エラーは出ていませんが、API取得の際にラグが生じてしまいます。

該当のソースコード

import peasy.*;
import processing.net.*;
import processing.data.JSONObject;

String url = "https://api.wheretheiss.at/v1/satellites/25544";
JSONObject issData;
float latitude, longitude, altitude, speed;
int refreshInterval = 2 * 1000; // 2秒ごとに更新
int lastUpdateTime = 0;

PImage earthTexture;
PShape sphere;
PeasyCam cam;

float rotationX = 0;
float rotationY = 0;
float autoRotationSpeed = radians(5); // 毎秒5度の回転速度
float sphereRadius = 150;
float orbitRadius = sphereRadius + 15; // 緑の円の半径

float orbitTheta = 0; // 球が周回する角度
float sunOrbitTheta = 0; // 太陽が周回する角度
float sunOrbitRadius = 10000; // 太陽の周回半径

int numStars = 2000;  // 星の数を設定
float angleX = 0;  // X軸周りの回転角度
float angleY = 0;  // Y軸周りの回転角度
float lastMouseX, lastMouseY;
float radius = 10000;  // 星を配置する球の半径

PVector[] stars;  // 星の位置を格納する配列
color[] starColors;  // 星の色を格納する配列

void setup() {
  size(1500, 1000, P3D);  // 3Dモードでウィンドウを作成
  background(0);
  // 日本語対応のフォントを読み込み

  // 視野角とクリップ範囲を調整
  float fov = PI / 3; // 視野角を広げる
  float cameraZ = (height / 2.0) / tan(fov / 2.0);
  perspective(fov, float(width)/float(height), cameraZ / 10.0, cameraZ * 10000.0);

  // PeasyCamを初期化
  cam = new PeasyCam(this, 0, 0, 0, 500); // カメラの中心を地球に合わせる


  // 地球儀の形状を作成し、テクスチャを設定
  sphere = createShape(SPHERE, sphereRadius);
  sphere.setTexture(earthTexture);
  sphere.setStrokeWeight(0);
  noStroke();

  // 星空を初期化
  stars = new PVector[numStars];  // 星の位置を格納する配列を初期化
  starColors = new color[numStars];  // 星の色を格納する配列を初期化

  // 星を球面上にランダムに配置
  for (int i = 0; i < numStars; i++) {
    float theta = random(TWO_PI);  // ランダムな経度
    float phi = random(PI);  // ランダムな緯度
    float x = radius * sin(phi) * cos(theta);
    float y = radius * sin(phi) * sin(theta);
    float z = radius * cos(phi);
    stars[i] = new PVector(x, y, z);

    // ランダムに星の色を設定
    if (random(1) < 0.5) {
      starColors[i] = color(173, 216, 230);  // 青白い星
    } else {
      starColors[i] = color(255, 255, 255);  // 白の星
    }
  }
}

void draw() {
  //println(mouseX, mouseY);
  background(0);


  // 視点の設定（星の描画）
  pushMatrix();
  rotateX(angleX);
  rotateY(angleY);

  drawStars();  // 星空を描画
  popMatrix();

  // 自動回転
  rotationY += autoRotationSpeed * (5.0 / frameRate); // フレームレートに応じて回転速度を調整
  orbitTheta += radians(1); // 球の周回速度を調整
  sunOrbitTheta += radians(0.05); // 太陽の周回速度を調整

  // ライト（太陽光）を設定
  directionalLight(255, 255, 255, -cos(sunOrbitTheta), 0, sin(sunOrbitTheta));  // 太陽から光を当てる
  ambientLight(50, 50, 50);  // 環境光

  // 地球儀を描画
  pushMatrix();
  // 中央に地球を描画
  rotateZ(radians(23.4));

  // 自動回転
  rotateX(rotationX);
  rotateY(rotationY);
  shape(sphere);  // 地球儀の形状を描画

  // 回転軸を描画
  stroke(255, 255, 255);  // 白色の軸線
  strokeWeight(1.5);
  line(0, -sphereRadius - 50, 0, 0, sphereRadius + 50, 0);  // 北極から南極に向かう線

  // 赤道を描画
  stroke(255, 0, 0);  // 赤色の赤道線
  noFill();
  beginShape();
  for (float theta = 0; theta < TWO_PI; theta += 0.05) {
    float x = sphereRadius * cos(theta);
    float y = sphereRadius * sin(theta);
    vertex(x, 0, y);
  }
  endShape(CLOSE);

  popMatrix();

  // 明暗線の描画（固定された位置に）
  pushMatrix();
  rotateZ(radians(90));// 地球の軸に合わせて傾ける
  rotateX(sunOrbitTheta);
  rotateY(sunOrbitTheta);
  stroke(255, 255, 0, 150);  // 黄色の線
  noFill();
  beginShape();
  for (float theta = 0; theta < TWO_PI; theta += 0.05) {
    float x = sphereRadius * cos(theta);
    float y = sphereRadius * sin(theta);
    vertex(x, 0, y);
  }
  endShape(CLOSE);

  popMatrix();

  // 周回軌道
  pushMatrix();
  rotateZ(radians(90 - 15));  // 地球の軸に合わせて傾ける

  stroke(0, 255, 0, 80);  // 緑色の線
  noFill();
  beginShape();
  for (float theta = 0; theta < TWO_PI; theta += 0.05) {
    float x = orbitRadius * cos(theta); // 緑の円の半径
    float y = orbitRadius * sin(theta);
    vertex(x, 0, y);
  }
  endShape(CLOSE);

  // 周回する球を描画
  float orbitX = orbitRadius * cos(orbitTheta);
  float orbitY = orbitRadius * sin(orbitTheta);
  stroke(0, 0, 255);
  translate(orbitX, 0, orbitY); // 緑の円に沿って球を配置
  sphere(5); // 半径5の球体を描画

  popMatrix();

  // 太陽の描画と周回
  pushMatrix();
  float sunX = sunOrbitRadius * -cos(sunOrbitTheta-radians(180));
  float sunZ = sunOrbitRadius * sin(sunOrbitTheta-radians(180));
  translate(sunX, 0, sunZ);  // 太陽を周回位置に配置

  // 4方向からの点光源
  directionalLight(255, 255, 255, 1, 0, 0);
  directionalLight(255, 255, 255, -1, 0, 0);
  directionalLight(255, 255, 255, 0, 1, 0);
  directionalLight(255, 255, 255, 0, -1, 0);
  directionalLight(255, 255, 255, 0, 0, 1);
  directionalLight(255, 255, 255, 0, 0, -1);

  // 外側3層の太陽
  for (int i = 10; i <= 40; i += 10) {
    noStroke();
    fill(255, 255, 255, 255 - 3 * i);  // 太陽のようなグラデーション効果
    sphere(50+(i * 2));  // 小さな球体を重ねて描画
  }

  popMatrix();
  noLights();//ライトのリセット(他に影響しなくなる)

  hint(DISABLE_DEPTH_TEST);
  cam.beginHUD();
  pushMatrix();
  translate(380, -330);
  drawISSdata();
  popMatrix();
  cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}

void drawStars() {
  for (int i = 0; i < numStars; i++) {
    PVector star = stars[i];
    pushMatrix();
    translate(star.x, star.y, star.z);

    // ビルボード効果で星が常に地球の中心方向を向くようにする
    PVector toCenter = star.copy().normalize().mult(-1);  // 地球の中心方向へのベクトルを計算

    // Z軸を中心方向に回転させる
    float angleZ = atan2(toCenter.y, toCenter.x);
    rotateZ(angleZ);

    // Y軸を中心方向に回転させる
    float hyp = sqrt(toCenter.x * toCenter.x + toCenter.y * toCenter.y);
    float angleY = atan2(hyp, toCenter.z);
    rotateY(angleY);

    fill(starColors[i]);  // 星の色を設定
    ellipse(0, 0, 30, 30);  // 星を描画
    popMatrix();
  }
}

void drawISSdata() {
  fill(255);
  textSize(20);
  text("International Space Station (ISS)", width / 2, height / 2 - 100);
  text("Latitude: " + nf(latitude, 1, 4), width / 2, height / 2 - 50);
  text("Longitude: " + nf(longitude, 1, 4), width / 2, height / 2);
  text("Altitude: " + nf(altitude, 1, 3) + " km", width / 2, height / 2 + 50);
  text("Speed: " + nf(speed/3600, 1, 5) + " km/s", width / 2, height / 2 + 100);

  // 指定した間隔でデータを更新
  if (millis() - lastUpdateTime > refreshInterval) {
    try {
      issData = loadJSONObject(url);
      latitude = issData.getFloat("latitude");
      longitude = issData.getFloat("longitude");
      altitude = issData.getFloat("altitude");
      speed = issData.getFloat("velocity");
    }
    catch (Exception e) {
      println("Error fetching ISS data: " + e.getMessage());
    }
    lastUpdateTime = millis();
  }
}

試したこと

メインのプログラムを動かしながら、ラグの生じるdrawISSdata()を別で動かしてみようとしたのですが、上手くいきませんでした。並行処理や非同期処理ができるか試してみたのですが、上手くできませんでした。私のやり方が良くなかったのかもしれません。ほかの方法でもなんでも構いませんので、ラグを生じさせないようにしていただけると嬉しいです。

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

カレンダーを表示するコードも書いてあったのですが、最大文字数を超えてしまったので、カットしました。そのため不自然に切れているところがあるかもしれません。

Comments

[TN8001]

読みづらい上「import peasy.;」等記号（*）が消えたりするので、ソースコードはコードブロックを使用してください（回答のようになります）
[ヘルプ｜質問する時のヒント](https://teratail.com/help/question-tips#questionTips35)

質問はいつでも何度でも編集できます。

Answer 1

メインのプログラムを動かしながら、ラグの生じるdrawISSdata()を別で動かしてみようとしたのですが、上手くいきませんでした。並行処理や非同期処理ができるか試してみたのですが、上手くできませんでした。私のやり方が良くなかったのかもしれません。

「上手くいきません」では情報ゼロです。やってみたことを記述してください。

ほかの方法でもなんでも構いませんので、ラグを生じさせないようにしていただけると嬉しいです。

threadを使いましょう。
thread() / Reference / Processing.org

差分のみ

void drawISSdata() {
  fill(255);
  textSize(20);
  text("International Space Station (ISS)", width / 2, height / 2 - 100);
  text("Latitude: " + nf(latitude, 1, 4), width / 2, height / 2 - 50);
  text("Longitude: " + nf(longitude, 1, 4), width / 2, height / 2);
  text("Altitude: " + nf(altitude, 1, 3) + " km", width / 2, height / 2 + 50);
  text("Speed: " + nf(speed/3600, 1, 5) + " km/s", width / 2, height / 2 + 100);

  // 指定した間隔でデータを更新
  if (millis() - lastUpdateTime > refreshInterval) {
    thread("requestData");
    lastUpdateTime = millis();
  }
}

void requestData() {
  try {
    issData = loadJSONObject(url);
    latitude = issData.getFloat("latitude");
    longitude = issData.getFloat("longitude");
    altitude = issData.getFloat("altitude");
    speed = issData.getFloat("velocity");
  }
  catch (Exception e) {
    println("Error fetching ISS data: " + e.getMessage());
  }
}

Comments

[yt_taurus]

コードブロックを使用する方法がわかったので編集しておきました。質問するときのヒントに「上手くいきません」とはか書かないようにとちゃんと書いてありました。申し訳ございません。思い通りのプログラムになりました。ありがとうございます。次回質問するときは質問するときのヒントを参考にして、自分のトラブルが回答者に適切に伝わるようにします。わかりずらくて申し訳ございません。