同心円を重ねたパターンを生成できるオンラインジェネレーター - Concentrics
Post on:2012年8月15日
同心円を重ねたさまざまなパターンを生成できるちょっと面白いオンラインジェネレーターを紹介します。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081501.png)
ジェネレーターはHTML5 CanvasとJavaScriptで作成されており、簡単な操作でさまざまなパターンが生成できます。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081502.png)
右パネルからパターンの設定ができます。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081505.png)
設定パネル(上から、サイズ、スペース、カラー)
「Sizing」の値を全体的に大きくして、波状のパターンにしてみます。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081503.png)
和風の波状のパターン
形状は円だけでなく、四角も利用できます。
「Use Squares」のチェックボックスをオンにします。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081504.png)
四角を使ったパターン
生成したパターンは「Save」ボタンをクリックすると、PNG画像でダウンロードできます。
また、ジェネレーターのコードや同心円を描くJavaScriptも公開されています。
- Concentrics -GitHub
ジェネレーターのコード - Canvasで描く同心円
ジェネレーターでは、手元の画像とブレンドもできます。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081506.png)
ただのバナナ画像
「Upload Image」から画像をアップロードして、パターンにブレンドします。
![パターンのキャプチャ](/wp-content/uploads-2012/2012081507.png)
バナナ画像とパターンをブレンド
sponsors