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

P5.sketchplugin

www.jacopocolo.com

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

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（ノート）

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

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

ビジュアルアートの教本、「Generative Design」が、ついに再販されました！長らく欠品でプレミアムがついていた一品です。 以下はGenerative Designの序文への寄稿を、一部加筆修正したもの。表現者、技術者それぞれが、アートとプログラミングを学ぶための方法です。ビジュアルコーディングに興味のある人はどうぞ。（あと僕の落書きはこちらから見れます） Generative Design 序文 Generative Designの日本語版が、いよいよ出版されました。本書は、プログラミングによる視覚表現の「最高の教本」です。この素晴らしい...

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

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