ITエンジニア/デザイナ向けにオープンソースを毎日紹介

コンピュータは正確な図形を描くのは得意です。逆に人は正確な線をフリーハンドでは引けませんが、それがかえって味があったりして柔らかな印象を与えます。コンピュータの描く線は冷たい印象を受けるでしょう。

そこで使ってみたいのがshakyです。Canvasを使ってドローするのですが、その描く図形が手書き風でいい感じなのです。

shakyの使い方

デモの編んだ図形。右側に行くほど乱れているのが分かるかと思います。
デモの編んだ図形。右側に行くほど乱れているのが分かるかと思います。

マウスに連動して動く線。ちょっとした乱れがいい感じです。
マウスに連動して動く線。ちょっとした乱れがいい感じです。

こちらは四角。並んではいつつも線がぶれています。
こちらは四角。並んではいつつも線がぶれています。

直線。
直線。

四角。これはぶれて動きます。
四角。これはぶれて動きます。

円。とはいっても完全な円にはなっていません。
円。とはいっても完全な円にはなっていません。

こちらはちゃんとした円。ですが崩れています。
こちらはちゃんとした円。ですが崩れています。

楕円。かなり乱れています。
楕円。かなり乱れています。

右下にいくほど崩れる図形。
右下にいくほど崩れる図形。

正確に書かないというのは面白いテクニックと言えます。フリーハンド風に描くことで、プロトタイプをスクラップ&ビルドで仕上げていくのに役立ったり、柔らかな印象を与えることができるのではないでしょうか。

shakyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

bit101/shaky

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2