p5js 画像表示最適化　参考コード

imageの取得方法は無視してもらって、
各自で取得処置を実装してください。

コピペでは動きません。

画像ビュワーにおける画像の表示の最適化です。

画面内の画像のみしか描画しないので、高速に動作します。

参考用コードとして使用してください。

 if(y + image_height>0 && y < windowHeight ){
        count++;
        image(images[i], x, y, imageWidth,  image_height);
        
    }

この処理によって、画面内の画像のみをびょうがするようにしています。

// p5.js のグローバル変数
let images = [];
let contents = [];
let targetScrollPos = 0;
let draw_flag = false;
// window.api.getSiteContents から取得した情報を格納する変数
const sitePath = `C:\\Users\\zzzzzzzzz\\Documents\\03_ローカル画像website\\anime chr`; // ここを適切なパスに置き換えてください


function setup() {
  //windowWidth,windowHeightを使うと画面全体にキャンバスの大きさを指定できる．
  createCanvas(windowWidth, windowHeight);

}



let img; //画像表示の変数

//事前読み込みをpreload関数で行う
async function preload() {
  // メインプロセスからコンテンツ情報を取得
  contents = await window.api.getSiteContents(sitePath);

  // 取得したコンテンツを元に画像を読み込む
  if (contents.length > 0) {
    for (let i = 0; i < contents.length; i++) {
      const item = contents[i];
      // 画像ファイルのみを読み込む
      if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(item.type)) {
        images.push(loadImage(item.path));
      }
    }
  }
}


function draw() {
   
  // 画像をグリッド状に並べて表示
  background(10, 80, 100);
  const imageWidth = 500;
  const margin = 20;
  let x = margin;
  let y = margin + targetScrollPos ;
  let max_height = 0;
    let count = 0;
  for (let i = 0; i < images.length; i++) {
    // 画像を現在の座標に描画
    let image_height = imageWidth * images[i].height/images[i].width;
    if(y + image_height>0 && y < windowHeight ){
        count++;
        image(images[i], x, y, imageWidth,  image_height);
        
    }
    if(max_height < image_height){

        max_height = image_height;
    }
    // 次の画像の X 座標を計算
    x += imageWidth + margin;

    // キャンバスの右端に到達したら、次の行へ
    if (x + imageWidth + margin > width) {
    x = margin;
    y += max_height + margin;
    max_height = 0;
    }
    
    
  }
  console.log("count " + count);
}

//マウスクリックしたときに実行
function mousePressed() {
  let fs = fullscreen();
  fullscreen(!fs);
 
}

//ウィンドウサイズが変更されたときに実行される関数
function windowResized() {
  // print("ウィンドウサイズの変更");
  resizeCanvas(windowWidth, windowHeight);

}
// マウスホイールイベントでスクロールを処理
function mouseWheel(event) {
    targetScrollPos -= event.deltaY;
    
    return false; // ブラウザのデフォルトスクロールを防ぐ
}