ジェネレーティブアートなダミーイメージを表示させる「Generative Placeholders」

ジェネレーティブアートなダミーイメージを表示させる「Generative Placeholders」

「Generative Placeholders」は、ジェネレーティブアートなダミーイメージを表示させるツールです。
サイズ指定はもちろん、7タイプのスタイルと100種類のカラーパレットを任意で組み合わせたイメージを表示させることができます。

単純に表示

使用時は下記URLがベースとなり、さらに後述するパラメータを付与することで様々な見た目のジェネレーティブアートなダミーイメージを表示できます。

https://generative-placeholders.glitch.me/image

ちなみに、このままimgなどに記述した場合は、1200x720pxのサイズでランダムに選ばれたカラーが適用されたイメージが表示されます。

異なるイメージを表示

同ページ内でイメージを複数表示させる際にすべて異なるものにしたい場合は、「Generative Placeholders」内では使用していない文字列を使ったパラメータを付与して記述します。
例えば、imgタグを3つ用意してsrcにはいずれも上で紹介したベースとなるURLを記述した場合はすべて同じイメージが表示されますが、下記のようにそれぞれパラメータ付きで記述した場合はすべて異なるイメージで表示されます。

<img src="https://generative-placeholders.glitch.me/image?example=01">
<img src="https://generative-placeholders.glitch.me/image?example=02">
<img src="https://generative-placeholders.glitch.me/image?example=03">

exampleというパラメータ名を使用した場合

サイズ指定で表示

イメージのサイズ(幅・高さ)を指定して表示したい場合は、widthheightのパラメータを付与して記述し、例として下記のように記述することで横600px・高さ400pxのサイズでイメージが表示されます。

https://generative-placeholders.glitch.me/image?width=600&height=400

スタイル指定で表示

上で紹介した指定方法では、いずれもカラーは異なっているものの同スタイルのイメージが表示されます。
これは下記のようにstyleのパラメータを付与して記述することで見た目を任意で選ぶこともでき、この場合は「triangles」のスタイルでイメージが表示されます。

https://generative-placeholders.glitch.me/image?style=triangles
各スタイル指定のイメージ

用意されているスタイルは全7タイプで、ここで紹介している見た目で常に表示されるのではなく、実際にはリロードする度に異なる見た目で表示されます。

  • cellular-automata (default)
  • triangles
  • circles
  • tiles
  • cubic-disarray
  • joy-division
  • 123

さらにスタイルを指定

用意されている7タイプの中で「cellular-automata」と「triangles」についてはさらにスタイルを指定することができます。
「cellular-automata」の場合はcellsパラメータで各行のセル数を、「triangles」の場合はgapパラメータで三角形のサイズを制御でき、使用時はそれぞれ下記のように記述します。

<!-- 「cellular-automata」で `cells` を指定 -->
https://generative-placeholders.glitch.me/image?style=cellular-automata&cells=10

<!-- 「triangles」で `gap` を指定 -->
https://generative-placeholders.glitch.me/image?style=triangles&gap=100

カラー指定で表示

イメージのカラーは、デフォルトで「nice-color-palettes」を参照して且つランダムで選ばれたものが適用されますが、下記のようにcolorsのパラメータを付与して記述することで任意のカラーパレットを適用したイメージが表示されます。

https://generative-placeholders.glitch.me/image?colors=10

この手のジェネレータでよく見る単色イメージでも明らかにダミーだとわかるなどのメリットがありますが、単色に飽きたとかダミーイメージとはいえもう少しカラーやデザインを入れたい人は利用してみてください。

Close the search window,
please press close button or esc key.