スライドショー

処理の確認


 細かな値に関しては変更があるかもしれませんが、このような流れで処理してみようと思っています。

ソース

PImage[] slide_img = new PImage[3];

int imageWidth = 320;
int imageHeight = 160;

int fps = 20;	//フレームレート

int slideTime = 0.5;	//画像の切り替えに要する時間(秒)
int waitTime = 5;	//画像が表示されている時間(秒)
int slice = 10;	//画像の分割数 slideTime * fpsととimageWidthの公約数であること

int animeTime = (slideTime + waitTime) * fps;	//一枚当りの所要フレーム数
int totalTime = animeTime * slide_img.length;	//全ての画像を表示するのに必要なフレーム数

int currentTime;	//totalTimeを基準にした時の現在のフレーム
int imgID;	//現在切り替え・表示を行っている画像のID

int actionTime = (slideTime * fps) / slice;	//短冊の表示間隔
int sliceID;	//表示する短冊のID 分割数以上なら何もしない
int sliceWidth = imageWidth / slice;	//短冊の幅

boolean startCheck = false;	//最初をスライドなしで表示するための処理

void setup(){
  //初期化
  size(imageWidth, imageHeight);
  noStroke();
  frameRate(fps);
  //画像の準備
  for(int i = 0; i < slide_img.length; i++){
    slide_img[i] = loadImage("img/slide/slide" + i + ".png");
  }
}

void draw(){
  //ページ読み込み時は1枚目の画像をスライドなしで表示する
  if ((startCheck == false) && (slide_img[0].width != 0) && (slide_img[0].width != -1)){
    copy(slide_img[0], 0, 0, width, height, 0, 0, width, height);
    startCheck = true;
  }
  //現在のフレーム数から画像番号を計算
  currentTime = frameCount % totalTime;
  imgID = int(currentTime / animeTime);
  //現在のフレーム数から短冊番号を計算する
  sliceID = int((currentTime % animeTime) / actionTime);
  //短冊フェーズの時、短冊を配置するX座標を計算して、元のイメージからCanvasへコピーする
  if (sliceID < slice){
    int x = sliceID * sliceWidth;
    copy(slide_img[imgID], x, 0, sliceWidth, height, x, 0, sliceWidth, height);
  }
}

PImage

 リファレンスによると画像を格納しておくデータ型ということです。
 gif、jpg、tga、pngの画像形式を扱えます。
 width、height及びピクセルごとの情報を持つpixels[]配列があるようですが、後者はまだ使用したことがないのでよくわかりません。

loadImage()

 PImage型変数に画像ファイルを読み込む命令です。

copy(img, ix, iy, iw, ih, cx, cy, cw, ch)

 読み込んだ画像をCanvas上へコピーする命令です。
 前半5つがコピー元、後半4つがコピー先のパラメータとなっています。

 Canvasサイズと画像サイズは同じである必要はありません。

完成


<slide.pde>

 予定通りの物が出来ましたが、汎用性がなく他のアニメーションへ作り変えるのが難しそうな気がします。

ハイパーリンク

 リンク先が固定なら<a href="url"><canvas data-p~></canvas></a>でOKです。
 画像ごとにリンク先を変える方法は、できるようになったら別のページを用意したいと思っています。