プログラミング/p5js の履歴(No.3)

目次†

• プログラミング/p5js/VisualStudioCodeでTypeScript開発

アニメーション gif に制御用のスライダーを付けて表示する†

マウスでスライダーを動かすと巻き戻しや早送り、一時停止が可能です。

LANG: p5js_live
// =============== ここが設定
const gif_url = 'https://dora.bk.tsukuba.ac.jp/~takeuchi/?plugin=attach&refer=%E5%B7%A5%E4%BD%9C%2FFusion360%E6%AD%AF%E8%BB%8A%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%2F%E5%B9%B3%E6%AD%AF%E8%BB%8A&openfile=shifted-gears.gif';
const multi = 10;     // スライダーは multi 回ループで最大値になる
const fps = 10;       // 描画頻度 (frame per second)
const maxWidth = 600; // 横幅最大値 
// ================ ここから下は汎用コード

let gif = null;
let frameSlider = null;
let w, h;

p.preload = () => gif = p.loadImage(gif_url);

const draw = () => {
  let index = frameSlider.value();
  gif.setFrame(index % gif.numFrames()); // フレームを選択して
  p.image(gif, 0, 0, w, h);              // 描画
}

p.setup = () => {
  p.frameRate(fps);
  w = Math.min(maxWidth, gif.width);
  h = gif.height * w / gif.width;
  p.createCanvas(w, h + 20);

  frameSlider = p.createSlider(0, gif.numFrames() * multi - 1);
  frameSlider.value(0);
  frameSlider.position(0, h);
  frameSlider.size(w);
  frameSlider.input(draw);
  draw();
}

p.draw = () => {
  if(p.mouseIsPressed) return;
  frameSlider.value((frameSlider.value() + 1) % (gif.numFrames() * multi));
  draw();
}

LANG: js
// =============== ここが設定
const gif_url = 'https://dora.bk.tsukuba.ac.jp/~takeuchi/?plugin=attach&refer=%E5%B7%A5%E4%BD%9C%2FFusion360%E6%AD%AF%E8%BB%8A%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%2F%E5%B9%B3%E6%AD%AF%E8%BB%8A&openfile=shifted-gears.gif';
const multi = 10;     // スライダーは multi 回ループで最大値になる
const fps = 10;       // 描画頻度 (frame per second)
const maxWidth = 600; // 横幅最大値 
// ================ ここから下は汎用コード

let gif = null;
let frameSlider = null;
let w, h;

p.preload = () => gif = p.loadImage(gif_url);

const draw = () => {
  let index = frameSlider.value();
  gif.setFrame(index % gif.numFrames()); // フレームを選択して
  p.image(gif, 0, 0, w, h);              // 描画
}

p.setup = () => {
  p.frameRate(fps);
  w = Math.min(maxWidth, gif.width);
  h = gif.height * w / gif.width;
  p.createCanvas(w, h + 20);

  frameSlider = p.createSlider(0, gif.numFrames() * multi - 1);
  frameSlider.value(0);
  frameSlider.position(0, h);
  frameSlider.size(w);
  frameSlider.input(draw);
  draw();
}

p.draw = () => {
  if(p.mouseIsPressed) return;
  frameSlider.value((frameSlider.value() + 1) % (gif.numFrames() * multi));
  draw();
}