ProcessingのようにビジュアルプログラミングできるSketchプラグイン「P5.sketchplugin」

更新日:2017年11月12日

Sketch上でProcessing風にビジュアルプログラミングできるSketchプラグインが出ていたので紹介します。

P5.sketchplugin

p5.jsをSketch上で再現

こちらのプラグイン、p5.jsというProcessingをJavaScriptで書けるようにしたライブラリをSketch上で再現したというものです。

p5.jsについてはこちら。

Sketch上ではアニメーションを再生することはできないので、あくまでp5.jsの一部を再現したというものになります。止まっている図形の描画(グラフとか、幾何学模様とか)にちょうど良さそうです。

使い方

まずはP5.sketchpluginをインストール。
メニュー>プラグイン>p5>Edit and runを選択します。

こんな感じでエディターが表示されます

試しに「Play」ボタンを押してみると

表示されました

Presetsの中にいくつか見本が入っていたのでPie chartを選択してみました。

他にもBar chartとか

Generative Grid

おもしろい…!管理画面みたいなグラフなどを表示する画面のデザインが作れそう。ただし、一度このプラグインで作成した画面をSketch側の機能で編集してもコードの内容は変わらないので注意です。

ビジュアル・プログラミングの勉強方法

先日、深津さんのnoteでこんな記事があがっていたので合わせて紹介。

い…1万円か…!すごい…。欲しい…。

Generative Design-Processingで切り拓く、デザインの新たな地平
  • Hartmut Bohnacker, Benedikt Gross, Julia Laub
  • 価格   ¥ 10,584
  • 販売者 Amazon.co.jp
クリックして今すぐチェック

@yoshikikoji 書き手:小島 芳樹

Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。


Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事