p5をScrapboxで実行する

(2019/1/20)

D3をScrapboxで実行することができるようにしたが、p5.jsという情報視覚化ライブラリもScrapboxから簡単に使える。

のようなリンクをクリックすると別ウィンドウが開いて下のp5.jsが実行されて表示される。ソースは https://github.com/masui/runp5 にある。

code:p5.js

setup = () => {

$('<h2>').text('ランダムに点を打つ').appendTo($('body'))

createCanvas(400,400)

fill('#ffd')

strokeWeight(0)

rect(0,0,400,400)

}

draw = () => {

fill('#000')

rect(random(400),random(400),2,2)

}

実行結果:

https://gyazo.com/f012656d1f0614e3ea93314ff33dc1c3