テレビの砂嵐

画像を使用せずに、canvasでテレビの砂嵐を描くチュートリアルhttp://jsdo.it/hakobera/nZe4を見て自分で書くならどうするか考えてみた。

  • fillRectじゃなくてImageDataを使ったほうが早いかも
  • 砂嵐といったら白黒というイメージ
  • アニメーションもさせたい
  • backgroundにtoDatURLで渡す方法はなるほどと思った
    • 自分で繰り返ししなくていいのは楽
    • でもアニメーションさせるとちらつく
    • 影の薄いcreatePatternを使えばfillRectでいいのでは

ということでjsdo.itのをforkしてできたのがこれ。

forked from: テレビの砂嵐

二倍表示にして負荷を減らして、白黒と色つきの切り替えと、走査線っぽいものも加えてみた(こういう余計な物を加えるのが悪い癖)。

ところで、パターンの大きさが小さいと、どうしても繰り返しが気になる。現実世界の壁紙とか模様ガラスでも気になる。あきらかに模様っぽいものなら気にならないけど、一見ランダムそうだけど実は規則性があるものとかに弱いらしい。