In jsFiddle, I need to access a function in my js pane from my html pane.
My jsFiddle url is: https://jsfiddle.net/backspaces/sbfm9gu5/6/
My jsFiddle html pane looks like:
<code><html>
<head>
<title>hello</title>
</head>
<body>
<script type="module">
// import runModel from js pane. This is a guess on how to refer to it:
import runModel from 'https://jsfiddle.net/backspaces/sbfm9gu5/embedded/js'
const results = await runModel("modelDiv") // default steps, fps
</script>
<div id="modelDiv"></div>
</body>
</html>
</code>
<code><html>
<head>
<title>hello</title>
</head>
<body>
<script type="module">
// import runModel from js pane. This is a guess on how to refer to it:
import runModel from 'https://jsfiddle.net/backspaces/sbfm9gu5/embedded/js'
const results = await runModel("modelDiv") // default steps, fps
</script>
<div id="modelDiv"></div>
</body>
</html>
</code>
<html>
<head>
<title>hello</title>
</head>
<body>
<script type="module">
// import runModel from js pane. This is a guess on how to refer to it:
import runModel from 'https://jsfiddle.net/backspaces/sbfm9gu5/embedded/js'
const results = await runModel("modelDiv") // default steps, fps
</script>
<div id="modelDiv"></div>
</body>
</html>
The js pane looks like:
<code>import TwoDraw from "https://code.agentscript.org/src/TwoDraw.js";
import Animator from "https://code.agentscript.org/src/Animator.js";
import Model from "https://code.agentscript.org/models/HelloModel.js";
export default async function runModel(div, steps = 500, fps = 30) {
const model = new Model(); // use model's default world options
await model.startup();
model.setup();
// ==============================
const drawOptions = {
turtlesSize: 4
};
const view = new TwoDraw(model, {
div,
patchSize: 20,
drawOptions
});
// ==============================
const anim = new Animator(
() => {
model.step();
view.draw();
},
steps, // how many steps
fps // at fps steps/second
);
return { model, view, anim };
}
</code>
<code>import TwoDraw from "https://code.agentscript.org/src/TwoDraw.js";
import Animator from "https://code.agentscript.org/src/Animator.js";
import Model from "https://code.agentscript.org/models/HelloModel.js";
export default async function runModel(div, steps = 500, fps = 30) {
const model = new Model(); // use model's default world options
await model.startup();
model.setup();
// ==============================
const drawOptions = {
turtlesSize: 4
};
const view = new TwoDraw(model, {
div,
patchSize: 20,
drawOptions
});
// ==============================
const anim = new Animator(
() => {
model.step();
view.draw();
},
steps, // how many steps
fps // at fps steps/second
);
return { model, view, anim };
}
</code>
import TwoDraw from "https://code.agentscript.org/src/TwoDraw.js";
import Animator from "https://code.agentscript.org/src/Animator.js";
import Model from "https://code.agentscript.org/models/HelloModel.js";
export default async function runModel(div, steps = 500, fps = 30) {
const model = new Model(); // use model's default world options
await model.startup();
model.setup();
// ==============================
const drawOptions = {
turtlesSize: 4
};
const view = new TwoDraw(model, {
div,
patchSize: 20,
drawOptions
});
// ==============================
const anim = new Animator(
() => {
model.step();
view.draw();
},
steps, // how many steps
fps // at fps steps/second
);
return { model, view, anim };
}
This doesn’t work. No error messages but does not show the model running. It runs fine in codepen.
Is the url incorrect:
import runModel from ‘https://jsfiddle.net/backspaces/sbfm9gu5/embedded/js’
.. or does jsFiddle not use es6 javascript?
.. or should I try a different approach?
Thanks for any help you can give me!