Tips: P5.jsプログラムをScrapboxページ上で実行する工夫.

Tips: P5.jsプログラムをScrapboxページ上で実行する工夫.(expanded from p5をScrapboxで実行する このページは編集しないでください)

(2019/1/20)

    D3をScrapboxで実行することができるようにしたが、p5.jsという情報視覚化ライブラリもScrapboxから簡単に使える。
https://runp5.com/?p=masui/p5をScrapboxで実行する&c=p5.js のようなリンクをクリックすると別ウィンドウが開いて下の p5.js が実行されて表示される。ソースは https://github.com/masui/runp5 にある。
    プログラミング練習問題集に例が沢山ある。

以下を実行
p5.jsCopied!
 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)
 }

実行結果:

#p5 #技術情報 #ブログ #Tips

Tips: P5.jsプログラムをScrapboxページ上で実行する工夫.

関連ページ