Scrapboxでp5.jsを動かす
ScrapExecで実行できる 増井俊之.icon
p5.jsをscrapbo.ioにアップロードしたものをfetch()して使う (苦しい)
canvasが表示される場所は指定できるのだろうか?
p5-sketch-buttonというのが有ったのだった 増井俊之.icon
使ったことなくて忘れてました
code:dekfractal.js
(async function (){
(0,eval)(await (await fetch("/files/6055b46e625aa9001ccde19c.js")).text())
})()
// Cannot use import statement outside a module になってしまう
//import 'https://scrapbox.io//files/6055b46e625aa9001ccde19c.js';
var w=20,h=20;
function setup(){
createCanvas(400,400);
}
function draw(){
background(255);
fill(240);
for(var x=0;x<20;x++){
for(var y=0;y<20;y++){
var n=pow(noise(x/5.,y/5.,frameCount/200.),3);
strokeWeight(n*20);
stroke(0,255*n+10);
if(n>.05) rect(w*x,h*y,w-5,h-5);
}
}
}
ランダムに点を打つ
code:p5sample.js
// p5.jsを読み込む
(async function (){
(0,eval)(await (await fetch("/files/6055b46e625aa9001ccde19c.js")).text())
})()
/// ここからP5.jsスクリプト
function setup(){
createCanvas(400,400)
fill('yellow')
strokeWeight(0)
rect(0,0,400,400)
}
function draw(){
fill('blue')
rect(random(400),random(400),2,2)
}