p5-sketch-button

editor部の下に描画される

パソコンからしか動かないかも

AndroidのChromeで動いた

↓実行ボタン

p5-sketch-button.icon

表示を消すにはリロード

↓アイコン用画像

https://gyazo.com/af16333c1a931f605a96298f5a9cfd8b

code: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';

document.head.appendChild(script);

}

})()

動的importを使用したversion

↓remove()がうまく動いていないみたい（リロードでリセットできる）

code:button2.js

import {installCDN} from '/api/code/villagepump/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;

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...');

}

}

code:script.js

scrapbox.PageMenu.addItem({

title: "p5-sketch",

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;

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...');

}

}

p5.jsのスケッチは、インスタンスモードで記述しなければならない。

code:sketch.js

const sketch = p => {

p.setup = () => {

//キャンバスを作成

const canvas = p.createCanvas(600,425);

//背景色

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');

↓別の環境（runp5）で実行

js-script-button.icon