mieki256's diary

2024/10/26(土) [n年前の日記]

#1 [proce55ing][processing][javascript] p5.jsで木の葉サワサワ処理を試しに書いてみた

#1 [proce55ing][processing][javascript] p5.jsで木の葉サワサワ処理を試しに書いてみた

#1 [gimp] GIMPを使ってWindows用のマルチアイコンファイルを作ってみたい

#2 [hsp] mp3しかサポートしてないゲーム制作ライブラリはよろしくない

#1 [game] 延々走るドライブゲーム

#1 [ubuntu] Kubuntu Linux 21.10を少しだけ試用

#1 [godot] Godot Engineで上から落ちてくる林檎キャラを作成

#1 [krita] kritaを久々に起動

#1 [pc] 昨今のCPUとチップセットについて少しググってたり

#2 [web] なぜblogを消すのだろう

#1 [raspberrypi][golang] Raspberry Pi Zero WにSDL2 + golang + go-sdl2をインストール

#2 [raspberrypi][linux] Raspberry Pi Zero W上にtmuxをインストールしてみたり

#1 [pc] メインPCのHDDが遅い気がする

#2 [nitijyou] 自転車で買い物に

#1 [anime][neta] 「またつま」

#1 [nitijyou] 福島県自治選挙に行ってきた

#2 [nitijyou] ペンキ塗り工事は終わったらしい

#3 [nitijyou] HDDレコーダが一杯になってた

#1 [nitijyou] 夜中に地震

#2 [windows] SearchFilterHost.exeがCPUコア1つ分使い果たしてしまう

#3 [anime] ガンダムビルドファイターズ1～2話を視聴

#4 [anime] 蒼き鋼のアルペジオ、1～2話を視聴

#1 [nitijyou] 煙管を重曹で掃除

#1 [pc] ダンボール製PCケースを作り直した

#2 [pc] 日立製HDDが読み取れず

#1 [nitijyou] なんだか急に風が強く

#2 [anime] パプリカを再鑑賞

#1 [pc] クローンゲームなる分野がちょっと気になる

#1 [anime] ゲゲゲの鬼太郎、磯女の回

#2 [anime] ガンダムOO2期目を鑑賞

#3 [windows] 動画再生用のアレコレをインストールしたりアンインストールしたり

#1 [pc][web] _Nvu は一年前に開発中止がアナウンスされおり、現在は KompoZer というプロジェクトが後継になっています。

#2 [cg_tools] _VectorMagic | Index

#3 [prog][iappli] python勉強中

#1 [cg_tools] _がんばれ3DCG - 第1回 Poserに挑戦! [Step1]

#2 [iappli] サウンドデータ差し替え版を送った

#1 [web] _強化されつつあるプロバイダーのセキュリティ対策サービス Outbound Port 25 Blockingを検証する

#2 [web] _Google Adsense狩り、そしてGoogleは言った。「オマエ、そんなにカネが欲しいのかよ！」

#3 [game] _スラッシュドット ジャパン | PlayStation 2 の新モデルに互換性問題

#4 [digital] _電子「水滴の拷問」デバイス

#5 [zatta] _空飛ぶ絨毯

#6 [java] _Forte for Java 3.0 Community Edition レビュー

#1 [windows] xyzzyのftpupdate.lが遅い件

#3 [game] _スラッシュドットジャパン | PlayStation 2 の新モデルに互換性問題

◎ 処理内容その他 :

◎ 作った経緯 :

◎ 処理内容その他 :

◎ 作った経緯 :

◎ 専用のスクリプトを導入 :

◎ 試してみる :

◎ 実は使わないほうがいい :

◎ オススメのツール :

◎ mp3は良くない :

◎ mp3でギャップレス再生できる事例 :

◎ 「TURBO FreeWay」を連想。 :

◎ Linux上でVMwareをインストールしてみた。 :

◎ VirtualBoxで試してみた。 :

◎ シーンを新規作成。 :

◎ ルートノードを追加。 :

◎ 子ノードを追加。 :

◎ Spriteにテクスチャ画像を指定。 :

◎ アタリ範囲を設定。 :

◎ 重力を設定。 :

◎ シーンを保存。 :

◎ 実行してみる。 :

◎ スクリプトをアタッチ。 :

◎ 爆弾キャラを作成。 :

◎ ブラシの整理が上手くいかない。 :

◎ 前提条件。libSDL2*.soの在り処。 :

◎ SDL2のビルドに必要なパッケージをインストール。 :

◎ SDL2のソースを取得。 :

◎ SDL2をビルド。 :

◎ 他のSDL2関係もビルド。 :

◎ 共有ライブラリを探す順番を変更。 :

◎ golangをインストール。 :

◎ golangの動作確認。 :

◎ go-sdl2をインストール。 :

◎ go-sdl2の動作確認。 :

◎ gopherrunを試しに動かしたり。 :

◎ ゴールデンバットがフィルタ付きになってた。 :

◎ pdfはインデックスしてくれないらしい。 :

◎ 2013/10/27追記。Googleドライブのせいかもしれず。 :

◎ xmlで何かしら渡す方法がよくわからず。 :

◎ xyzzyでiアプリ関係の補完をしたいのだけど何をどうすれば反映できるのかさっぱりわからん :

JavaScriptライブラリ p5.js を使って、サワサワと動く木の葉を描く処理を試しに書いてみた。動作確認環境は Windows10 x64 22H2 + p5.js 1.10.0。Firefox 131.0.3 64bit、Google Chrome 130.0.6723.70。

以下のページで動作確認できる。

_draw_leafs

マウスクリックで葉っぱを増やせる。
Cキーで画像を切替。葉っぱ1枚と、葉っぱ複数の画像を切り替えられる。
Rキーで全消去。

スクリーンショットは以下。解像度が荒いけど雰囲気ぐらいは伝わるかなと…。

一応関連ファイルを zip でまとめておいた。

_draw_leafs.zip

sketch.js は以下。

// draw rotate image with noise.
// Last updated: <2024/10/26 03:17:06 +0900>

let fps = 24;
let base_ang = 90 + 45;
let spd = 0.03;
let lmax = 10;
let rmax = 100;

var img;
var img2;
let leafs = [];
let resetfg = false;
let imgkind = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  img = loadImage("./leaf.png");
  img2 = loadImage("./leaf2.png");
  imgkind = 0;
  angleMode(DEGREES);
  frameRate(fps);
}

function draw() {
  background("#1989ca");

  // draw text
  noStroke();
  fill(255);
  textSize(16);
  text("Please click", 8, 20);
  text("R: Reset", 8, 40);
  text(`C: Change image (${imgkind})`, 8, 60);
  text("Leaf: " + leafs.length, 8, 80);

  if (resetfg) {
    // leafs all clear
    leafs = [];
    resetfg = false;
  }

  // draw leafs
  for (let leaf of leafs) {
    leaf.update();
    leaf.draw();
  }
}

function mouseClicked() {
  let x = mouseX;
  let y = mouseY;
  if (imgkind == 0) {
    set_leafs(x, y, img);
  } else {
    set_leafs(x, y, img2);
  }
}

function keyTyped() {
  if (key == "r") {
    // reset
    resetfg = true;
  }
  if (key == "c") {
    // change image
    imgkind = (imgkind + 1) % 2;
  }
}

function set_leafs(bx, by, img) {
  for (let i = 0; i < lmax; i++) {
    let r = random() * rmax;
    let ang = random() * 360.0;
    let x = bx + r * cos(ang);
    let y = by + r * sin(ang);
    let tintv = 255 - 180 * ((lmax - i) / lmax);
    // tv = 255 - 200 * random();
    let rv = random() * 65536;
    let leaf = new Leaf(img, x, y, rv, spd, tintv);
    leafs.push(leaf);
  }
  sort_tintv();
}

function sort_tintv() {
  let len = leafs.length;
  for (let i = 0; i < len; i++) {
    leafs[i].set_tintv(255 - 180 * ((len - i) / len));
  }
}

// ----------------------------------------
// leaf class
class Leaf {
  constructor(img, bx, by, tm, spd, tv) {
    this.img = img;
    this.bx = bx;
    this.by = by;
    this.tm = tm;     // counter
    this.spd = spd;   // animation speed
    this.tintv = tv;
    this.x = 0;
    this.y = 0;
    this.ang = 0;
  }

  set_tintv(v) {
    this.tintv = v;
  }

  update() {
    this.x = -(100 * noise(this.tm * this.spd * 1.0));
    this.y = -(50 * noise(this.tm * this.spd * 1.0));
    let a = 75;
    this.ang = base_ang + a * noise(this.tm * this.spd) - (a / 2);
    this.tm += 1;
  }

  draw() {
    // draw rotate image
    push();
    translate(this.bx, this.by);
    translate(this.x, this.y);
    rotate(this.ang);
    tint(this.tintv);
    image(this.img, 0, - this.img.height / 2);
    pop();
  }
}

使用画像は以下。

_leaf.png
_leaf2.png

やってることは、葉っぱの画像をその場で回転させてるだけ。回転の基準座標と、回転角度を、noise() (パーリンノイズ) で変化させてる。

ところで、p5.js は思っていたより処理が重かった…。200個ぐらい描画すると処理落ちしてしまう。AMD Ryzen 5 5600X + NVIDIA GeForce GTX 1060 6GB のスペックで、60FPS を 24FPS に落としても処理落ちしてしまうので、ちょっと残念…。

Processing で動かしたらもっと軽いのだろうか？それとも重いのだろうか？何にせよ p5.js では、各フレームをアルファチャンネルを持った画像として保存することができないので、この生成結果を動画編集ソフトに持っていって利用することができない。Processing で書き直して、連番画像として保存できないか試してみる予定。

葉っぱの色は tint() を使って明度だけ変えてる状態だけど、もっと色数を絞って、3～4色で描画したほうが、かえって奥行きを感じる見た目になるのではと想像したりもする。

TVアニメ「オーイ！とんぼ」を視聴していたら、満開の桜の木が風でサワサワとするカットがあって、「どうやって作ってるんだろう？」と…。TVer で視聴していたからコマ送りができなくて、3DCGでやってるのか、それとも After Effects でやってるのか、それすら分からなかったのだけど、2D処理でも似た感じが出せないものかなと試してみた次第。

余談。TVアニメ「アクロトリップ」を見ていたら、木の幹と木の葉っぱをレイヤー分けしておいて、木の葉っぱ部分だけ何かのフィルタをかけて動かして、強風でザワザワしてる感じを出していて感心してしまった。コストパフォーマンスが圧倒的に高そう。企画のジャンルによるだろうけど、このぐらいでも十分な場面って多いだろうなと…。

もっとも、そういうことをしたかったらレイヤー分けした素材が必要になるだろうけど。せめて、動かすところと動かさないところをレイヤー分けしておいてくれないと…。セル＋フィルムで作ってた時代ですら、動くところだけセルにしてたよな…。BOOKとかもあったし…。

Prev - 2024/11 - Next