プログラミング/p5js の変更点

更新 
#author("2025-03-15T09:53:03+00:00","default:administrator","administrator")
#author("2025-03-17T06:59:15+00:00","default:administrator","administrator")
[[公開メモ]]

* 目次 [#aafbd5de]

#contents

* VisualStudioCodeでTypeScript開発 [#t8afb5dc]

VisualStudioCode 上で TypeScript で p5js のプログラムを開発する環境を整える方法を覚書き。

Chrome を使ったデバッグ（ブレークポイント、ステップ実行）も行えるようになりました。

- [[プログラミング/p5js/VisualStudioCodeでTypeScript開発]]


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

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

 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();
 }

** ソースコード [#e137f129]

 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();
 }
Counter: 78 (from 2010/06/03), today: 1, yesterday: 1