ScrapExec

code:script.js

function observeUrlChange(handler) {

let lastUrl = location.href;

const titleObserver = new MutationObserver((records, observer) => {

for (const record of records) {

if (lastUrl !== location.href) {

const newUrl = location.href;

const oldUrl = lastUrl;

lastUrl = location.href;

handler(newUrl, oldUrl, observer);

}

}

});

const title = document.querySelector('head title');

titleObserver.observe(title, {childList: true});

}

const targetProject = scrapbox.Project.name;

observeUrlChange((newUrl, oldUrl, observer) => {

setExecButtons();

if (scrapbox.Project.name !== targetProject) {

observer.disconnect();

}

});

async function setExecButtons(){

$('.execButton').remove()

for(let line of scrapbox.Page.lines){

const m = line.text.match(/^\s*code:(.*\.js)/);

if(m){

const code = await res.text();

$('<div>').css("position","absolute")

.addClass('execButton')

.append("☕")

.css({left: left - 25,top, 'z-index': 900})

.attr('code',code)

.on('click',function() {

(1,eval)($(this).attr('code')); // グローバル環境で式を評価

})

.appendTo($('.lines'))

}

}

}

setExecButtons();

⇩を実行するたびにvalが√2に近づく

code:calcroot.js

if (typeof val == 'undefined'){ val = 1000 }

if (typeof count == 'undefined'){ count = 0 }

val = (val + 2.0/val) / 2

count += 1

結果表示

code:calcroot_disp.js

code:dekfractal.js

(async function (){

(0,eval)(await (await fetch("/files/6055b46e625aa9001ccde19c.js")).text())

//(0,eval)(await (await fetch("/files/6058808647f6090020511db5.js")).text())

})()

//alert("load")

// Cannot use import statement outside a module になってしまう

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 (){

})()

/// ここから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)

}

ScrapExec + p5.js の動作テスト

（p5.js のファイルを変えている）

code:torus.js

//"use strict";

(async function (){

// (0,eval)(await (await fetch("/files/6055b46e625aa9001ccde19c.js")).text())

(0,eval)(await (await fetch("/files/6058808647f6090020511db5.js")).text())

// (0,eval)(await (await fetch("/files/605894ff590f82001c13c31b.js")).text())

})()

code:torus.js.x

function setup(){

createCanvas(400, 400, WEBGL);

}

function draw(){

background(220);

rotateX(frameCount * 0.01);

rotateY(frameCount * 0.03);

rotateZ(frameCount * 0.05);

torus(150,20);

rotateZ(frameCount * 0.07);

rotateY(frameCount * 0.11);

torus(100,20);

rotateX(frameCount * 0.13);

torus(50,20);

}

code:torus.js

const sketch = p => {

p.setup = () => {

p.createCanvas(400, 400, p.WEBGL);

}

p.draw = () => {

p.background(220);

p.rotateX(p.frameCount * 0.01);

p.rotateY(p.frameCount * 0.01);

p.rotateZ(p.frameCount * 0.01);

p.torus(150,20);

p.rotateZ(p.frameCount * 0.02);

p.rotateY(p.frameCount * 0.02);

p.torus(100,20);

p.rotateX(p.frameCount * 0.03);

p.torus(50,20);

}

}

new p5(sketch, 'editor');

code:torus2.js

(async function (){

(0,eval)(await (await fetch("/files/6058808647f6090020511db5.js")).text())

const sketch = p => {

p.setup = () => {

p.createCanvas(400, 400, p.WEBGL);

}

p.draw = () => {

p.background(220);

p.rotateX(p.frameCount * 0.01);

p.rotateY(p.frameCount * 0.01);

p.rotateZ(p.frameCount * 0.01);

p.torus(150,20);

p.rotateZ(p.frameCount * 0.02);

p.rotateY(p.frameCount * 0.02);

p.torus(100,20);

p.rotateX(p.frameCount * 0.03);

p.torus(50,20);

}

}

new p5(sketch, 'editor');

})()