フラクタル画像分割・平面分割

x6s0

License: GPLv3 License

Fork
8
Fav
9
View
5047
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 258 lines
  • HTML 29 lines
  • CSS 32 lines
【平面分割・フラクタル画像分割】

初投稿ですがよろしくお願いいたします。

***画像の読み込みで、再生した瞬間に計算終了になる場合があります。再度再生を行なってください。***
 tickerの処理が早く起動してしまうためだと思います。

*元ネタはこちらになります。

fladdict モナリザの為のフラクタル分割(習作)
http://fladdict.net/blog/2013/03/monalisa.html

wonder FLのFlashのコードを読んで、自分なりにjavascriptで書換えて改変しました。

wonder FL フラクタルで画像を描画する
http://wonderfl.net/c/6dsC


*作成には、Createjsを使用していますが、既存のCreatejs EaselJS にはBitmapDataというものがありません。
なので、kudoxさんのBitmapData for EaselJSライブラリを使わせていただきました。

ピクセル職人に捧ぐ – BitmapData for EaselJS -
http://kudox.jp/java-script/createjs-easeljs-bitmapdata


高速化などできましたら、嬉しいです。


作品制作に使う予定ですが、ユーザーからの受けがいいのかわからないので、GPLライセンスですが公開いたしました。
良かったら、いろいろ遊んでみてください。


**2014-11-04からupdataしました**

・javascript 199行目のmax=>minの間違いの修正

・カウント表示・エンド処理 (1000個を越えたら止まります。)

・RGB=>HSB変換のコードをわかりやすく修正

・アルゴリズムの解説もメモ程度ですが記述します。


**アルゴリズムの解説**

まず、取得した画像のピクセルデータをすべて取得して配列に格納して置きます。
そして、分割した領域のピクセルデータを集計して、ピクセルのHSVの明度Vの標準偏差を求めて
その明度がしきい値を越えれば長方形を描画して、その領域を二つに分割して計算対象として追加してループするように設計しています。す、
*明度に設定したのは、制作時にRGBの加法混色に着目たからですが、思惑どうりにいっていません。すみません。

今回は、HSVの明度を判定の材料していますが、H(色相)やS(彩度)を判定基準にして描画することもできます。
208,209行目の配列番号を変更すれば明度でなく、hsb[0]:色相, hsb[1]:彩度に変更できます。そのとき、
16行目のしきい値のTHRESHOLDを変更することもお忘れなく。

また作成する長方形を正方形にしたい場合などは、取得する画像を正方形などにして、分割して計算する配列(fillRecttangleArray)
に加えるときに4分割して加えるようにする仕様の変更で制作可能です。
  • フラクタル画像分割・平面分割
  • フラクタル画像分割・平面分割

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

x6s0

Author

Japanese University Student. プログラミングは独学でかなり不安ですが,卒業制作でWebインタラクティブコンテンツを作るため猛勉強中。 Createjsを使いたいので,いろいろ探っています.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

k2fontk2font:

素晴らしい

Forked

sort by