myzmbg

アプリ / the app: https://reirisono.github.io/myzmbg/myzmbg.html 日本語と英語の説明あり。Available in Japanese and English.

日本語

にじさんじの黛灰が一時期使っていた雑談配信っぽい背景を自動生成します。
JavaScriptをオンにした状態で myzmbg.html をWebブラウザで表示すると、同じテーマですがランダム要素によってディテールが毎回違う画像が生成されます。
“submit” ボタンを何度も押して気に入ったのが出るまで試してみてください。
左の入力フォームから画像サイズやパーツの位置・サイズも一部調整できます。

入力フォーム仕様

描画スイッチ

クリックで背景のハイライトが右に流れたり止まったりを切り替えられます。白丸が左にある時は停止し、右にある時は動きます。

ご注意：デフォルトより大きいサイズだととても重くなります！自己責任でどうぞ。

大きさ

• スケール: HTML Canvas画像をブラウザ上でリアルサイズで表示するか、見やすいようにピクセル数を減らして表示するかの違いです。テストでは0.25, DL用には1を推奨。
• キャンバス横幅と縦幅：単位＝ピクセル。スケールを1にした場合にDLされる画像の大きさ。
• 三角形横幅と縦幅：単位＝ピクセル。デフォでは正三角形になるように調整されています。縦横比率を変えると二等辺三角形になります。各々計算してもろて。形そのままにサイズを変える時は掛け算割り算、形を変える時は三角関数が必要になるかもしれません。

灰ロゴ

• 中心点の縦位置：0-1の範囲内で、小さいほど円の中心点が上に、大きいほど下に配置されます。
• 直径：画像幅の比率：0-1の範囲内で、円の直径が画像幅に占める比率を決めます。スマホ壁紙など縦長画像の場合は1に近い数値を、パソコン壁紙など横長画像の場合は半分以下を推奨。
• 不透明度：0-1の範囲内で、0=見えない, 1=フル原色。

背景数字

• 数字の色：RGB方式。0-255の三つの整数をコンマ(,)で分けて入力。

三角形の色

基本の仕様として、このプログラムでは三角形の色を作る際に「ベースとなる上下グラデ色」＋「ノイズの色」という構造を取っています。ノイズ色は1色ですが、乱数によって全三角形への混入率が均一にばらけています。

• 上側の色、下側の色：RGBA方式でスペース抜きで入力。最初の３つの数字は0-255の整数で、最後は0-1の小数を入力してください。Aの値が大きいほど目立ちます。
• ノイズ色：RGB方式でスペース抜きで入力。上下側の色と違い、最後のAにあたる数字は入力不可です。
• ノイズ色最大混入率：0-1の範囲内で、大きければ大きいほどノイズ色が目立ちます。

三角形の透明度の移行

基本の仕様として、上の方の三角形はほとんど見えないほど透明に、下の方は不透明です。

• 位置：0に近いほど上辺で、1に近いほど下辺で透明度の移り変わりが発生します。
• 緩急：大きいほど急に、小さいほどゆるやかに透明度が変わります。
• 不均一さ：大きいほど移行中の位置にある三角形どうしの透明度がバラけます。

乱数固定

該当パーツのチェックボックスをチェックしてから”submit”ボタンを押すと、現在の乱数出力が次の出力に引き継がれます。 ただし、パーツの位置と数が全く同じ場合に限ります。 現在、三角形のノイズ色混入率と透明度、そして背景数字の光り方が独立に固定できます。

改善点

• 背景の数字マトリックスの光を動かすことに成功しましたが、重さを何とかしたいです。いつ治るかは不明です。
• 絵の一部を動かす方法が分かったので、マイクに反応して音声成分のヒストグラムを動かすことも視野に入れております。

English

This is a web-based script that generates an image resembling the virtual background used by Kai Mayuzumi’s live casts at one time.
Open myzmbg.html on your web browser with JavaScript turned on to generate an image with the same theme but with slight difference in details due to random variable elements.
Click the “submit” button as many times as you like until you see what you like.
The input form on the left allows adjustment of image size and the locations / sizes of some image elements.

Input form specs

Animation switch

Click to toggle the rightward flow of the background highlights. It stops when the white circle is at the left; moves when it's on the right.

Attention: it gets slow when the image is larger than its default size!

Sizes & scales

• Scale: whether to show the same size of HTML Canvas image object in its real size or shrunken with fewer pixel size for the ease of view. Recommends 0.25 to test and 1 for download.
• Canvas width and height: unit = pixels. The actual size of the downloadable image.
• Triangle width and height: unit = pixels. Adjusted to be equilateral triangles by default. Change the width-heght proportion and you will get isosceles triangles. Please do your own math - changing size while keeping the shape requires multiplication or division; changing the shape may require trigonometry.

The Logo

• vertical location of center: in a 0-1 range, small value posts the center of the circle at the top; large value posts it at the bottom.
• diameter-to-width proportion: in a 0-1 range, it determines the portion of the image width occupied by the diameter of the circle. A value near 1 is recommended for a long/thin image e.g. for your smart phone; a value below 0.5 is recommended for a short/wide image e.g. for your laptop or desktop.
• transparency: in a 0-1 range, 0=invisible; 1=full brightness.

Background numbers

• color of numbers: RGB format, with three integers within 0-255.

Triangle colors

As a basic spec, this program determines the colors of the triangles as a linear sum of "base gradation (above to below)" + "noise color". There is a single noise color, which "contaminates" all triangles at a uniformly distributed, random proportion.

• colors above & below: RGBA format, space not allowed. The first three numbers should be an integer within 0-255 and the last should be a decimal number within 0-1. The color stands out more with a bigger "A".
• noise color: RGB format, space not allowed. Do not enter the fourth number, unlike the colors above & below.
• Noise color max mix ratio: within 0-1, larger=see more of mix color.

Triangle transparency transition

As a basic spec, triangles at the top are nearly invisible and those at the bottom are nearly fully visible.

• Location: a number close to 0 makes the transition from invisible to visible happen at the top; a number close to 1 makes it happen at the bottom.
• Suddenness: a large number for sudden transition; small number for a gradual transtion.
• Unevenness: a large number makes the opacity of the triangles at the transition zone more uneven or scattered.

Keeping the current random output

Check the checkbox of the corresponding parts before hitting the “submit” button to keep the current random output to the next output. However, this is limited to when the exact same number of parts are placed in the exact same positions. The app currently allows independent fixation of the noise color/transparency of the triangles and the highlights of the number matrix.

Issues

• The highlights of the number matrix successfully flows from left to right, but it needs to be lighter. I have no clue when this can be achieved :P
• Now that I know how to animate parts of the canvas, I am considering to mobilize the vocal histogram in response to mic input.