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

P5.sketchplugin

 www.jacopocolo.com  116 shares 1 user

P5.sketchplugin

http://www.jacopocolo.com/p5sketchplugin/

Create rich and editable graphics inside Sketch using only few lines of JavaScript

p5.jsをSketch上で再現

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

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

 p5js.org  393 shares 20 users

p5.js | home

https://p5js.org

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

使い方

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

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

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

表示されました

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

他にもBar chartとか

Generative Grid

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

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

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

 note（ノート）  219 shares 472 users

ビジュアル・プログラミングの勉強方法｜深津 貴之 (fladdict)｜note

https://note.mu/fladdict/n/naa3dbaff6310

ビジュアルアートの教本、「Generative Design」が、ついに再販されました！長らく欠品でプレミアムがついていた一品です。 以下はGenerative Designの序文への寄稿を、一部加筆修正したもの。表現者、技術者それぞれが、アートとプログラミングを学ぶための方法で...

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

Generative Design-Processingで切り拓く、デザインの新たな地平

• Hartmut Bohnacker, Benedikt Gross, Julia Laub
• 価格　　 ￥ 10,584
• 販売者　Amazon.co.jp

クリックして今すぐチェック

書き手：小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter： @yoshikikoji