p5-sketch-button
p5.js の描画テスト
p5.jsのスケッチは、インスタンスモードで記述しなければならない。
↓アイコン用画像
button.js(() => {
let P5js = document.getElementById('__P5js__')
if (!P5js){
P5js = document.createElement("script");
P5js.id = '__P5js__';
P5js.src = '//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js';
document.head.appendChild(P5js);
}
let script = document.getElementById('__P5sc__')
if (script){
// リロードしてリセット
location.reload(false);
} else {
script = document.createElement("script");
script.id = '__P5sc__';
script.type = 'module';
script.type = 'text/javascript';
script.src = `https://scrapbox.io/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/sketch.js`
document.head.appendChild(script);
}
})()button2.jsimport {installCDN} from '/api/code/suto3scratchpad/UserScript:install-CDN/script.js';
export async function execute() {
await installCDN({id: '__P5js__', src: '//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js'});
const p5Script = new P5Script('__P5sc__');
if(p5Script.hasScript()) {
p5Script.remove();
alert("removed");
// remove()はDOMツリーから削除するだけなのでリロードする
location.reload(false); //
return;
}
p5Script.draw();
}
class P5Script {
constructor(id) {
this.id = id;
//console.log(id);
}
draw() {
const p5script = document.createElement("script");
p5script.id = this.id;
p5script.src = `https://scrapbox.io/api/code//${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/sketch.js` ;
document.body.appendChild(p5script);
}
hasScript() { return document.getElementById(this.id) !== null;}
remove() {
const p5script = document.getElementById(this.id);
console.log(p5script);
if (!p5script) return;
// 既にscriptがある場合は削除する
p5script.parentNode.removeChild(p5script);
console.log('The script already exists. Removing it...');
}
}
script.js scrapbox.PageMenu.addItem({
title: "p5-sketch",
image: "https://gyazo.com/af16333c1a931f605a96298f5a9cfd8b/raw",
onClick: async () => {
const path = '//cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js';
await import(path).then(() => {
const p5Script = new P5Script('__P5sc__');
if(p5Script.hasScript()) {
p5Script.remove();
alert("removed");
// remove()はDOMツリーから削除するだけなのでリロードする
location.reload(false); //
return;
}
p5Script.draw();
});
}
});
class P5Script {
constructor(id) {
this.id = id;
//console.log(id);
}
draw() {
const p5script = document.createElement("script");
p5script.id = this.id;
p5script.src = `https://scrapbox.io/api/code//${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/sketch.js` ;
document.body.appendChild(p5script);
}
hasScript() { return document.getElementById(this.id) !== null;}
remove() {
const p5script = document.getElementById(this.id);
console.log(p5script);
if (!p5script) return;
// 既にscriptがある場合は削除する
p5script.parentNode.removeChild(p5script);
console.log('The script already exists. Removing it...');
}
}sketch.jsconst sketch = p => {
p.setup = () => {
//キャンバスを作成
const canvas = p.createCanvas(600,425);
canvas.id = '__P5sc__';
//背景色
p.background(0);
p.noStroke();
}
p.draw = () => {
//オブジェクトの色
p.fill(255,255,0,127);
//キャンバスの中心に直径100pxの丸を描画
p.ellipse(p.random(p.width),p.random(p.height),100);
p.fill(240,240,240);
let s = 'Scrapbox上からp5.jsが走るよ！';
p.textSize(40);
p.text(s, 0, 0, p.width, p.height);
}
}
new p5(sketch, 'editor');
テスト→https://suto3.github.io/runp5/?code=https://scrapbox.io/api/code/suto3/p5-sketch-button/sketch.js