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

アニメーション 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';
let gif = null;
let frameSlider = null;
let multi = 10;
let fps = 10;

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

const draw = () => {
  // Get the slider's value.
  let index = frameSlider.value();

  // Set the GIF's frame.
  gif.setFrame(index % gif.numFrames());

  // Display the image.
  p.image(gif, 0, 0);
}

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

  // Create a slider to control which frame is drawn.
  frameSlider = p.createSlider(0, gif.numFrames() * multi - 1);
  frameSlider.value(0);
  frameSlider.position(0, h - 20);
  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';
let gif = null;
let frameSlider = null;
let multi = 10;
let fps = 10;

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

const draw = () => {
  // Get the slider's value.
  let index = frameSlider.value();

  // Set the GIF's frame.
  gif.setFrame(index % gif.numFrames());

  // Display the image.
  p.image(gif, 0, 0);
}

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

  // Create a slider to control which frame is drawn.
  frameSlider = p.createSlider(0, gif.numFrames() * multi - 1);
  frameSlider.value(0);
  frameSlider.position(0, h - 20);
  frameSlider.size(w);
  frameSlider.input(draw);
  draw();
}

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