107 lines
2.5 KiB
JavaScript
107 lines
2.5 KiB
JavaScript
|
|
function getLiveCodeOptions() {
|
|
var START = `
|
|
import sketch
|
|
code = open("main.py").read()
|
|
env = dict(sketch.__dict__)
|
|
exec(code, env)
|
|
`
|
|
|
|
var SKETCH = `
|
|
import json
|
|
|
|
def sendmsg(msgtype, function, args):
|
|
"""Sends a message to the frontend.
|
|
|
|
The frontend will receive the specified message whenever
|
|
this function is called. The frontend can decide to some
|
|
action on each of these messages.
|
|
"""
|
|
msg = dict(msgtype=msgtype, function=function, args=args)
|
|
print("--MSG--", json.dumps(msg))
|
|
|
|
def _draw(func, **kwargs):
|
|
sendmsg(msgtype="draw", function=func, args=kwargs)
|
|
|
|
def circle(x, y, d):
|
|
"""Draws a circle of diameter d with center (x, y).
|
|
"""
|
|
_draw("circle", x=x, y=y, d=d)
|
|
|
|
def line(x1, y1, x2, y2):
|
|
"""Draws a line from point (x1, y1) to point (x2, y2).
|
|
"""
|
|
_draw("line", x1=x1, y1=y1, x2=x2, y2=y2)
|
|
|
|
def rect(x, y, w, h):
|
|
"""Draws a rectangle on the canvas.
|
|
|
|
Parameters
|
|
----------
|
|
x: x coordinate of the top-left corner of the rectangle
|
|
y: y coordinate of the top-left corner of the rectangle
|
|
w: width of the rectangle
|
|
h: height of the rectangle
|
|
"""
|
|
_draw("rect", x=x, y=y, w=w, h=h)
|
|
|
|
def clear():
|
|
_draw("clear")
|
|
|
|
# clear the canvas on start
|
|
clear()
|
|
`
|
|
const CANVAS_FUNCTIONS = {
|
|
circle: function(ctx, args) {
|
|
ctx.beginPath();
|
|
ctx.arc(args.x, args.y, args.d/2, 0, 2*Math.PI);
|
|
ctx.stroke();
|
|
},
|
|
line: function(ctx, args) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(args.x1, args.y1);
|
|
ctx.lineTo(args.x2, args.y2);
|
|
ctx.stroke();
|
|
},
|
|
rect: function(ctx, args) {
|
|
ctx.beginPath();
|
|
ctx.rect(args.x, args.y, args.w, args.h);
|
|
ctx.stroke();
|
|
},
|
|
clear: function(ctx, args) {
|
|
var width = 300;
|
|
var height = 300;
|
|
ctx.clearRect(0, 0, width, height);
|
|
}
|
|
}
|
|
|
|
function drawOnCanvas(canvasElement, funcName, args) {
|
|
var ctx = canvasElement.getContext('2d');
|
|
var func = CANVAS_FUNCTIONS[funcName];
|
|
|
|
var scalex = canvasElement.width/300;
|
|
var scaley = canvasElement.height/300;
|
|
|
|
ctx.save();
|
|
ctx.scale(scalex, scaley);
|
|
func(ctx, args);
|
|
ctx.restore();
|
|
}
|
|
|
|
return {
|
|
runtime: "python",
|
|
files: [
|
|
{filename: "start.py", contents: START},
|
|
{filename: "sketch.py", contents: SKETCH},
|
|
],
|
|
command: ["python", "start.py"],
|
|
codemirror: true,
|
|
onMessage: {
|
|
draw: function(editor, msg) {
|
|
const canvasElement = editor.parent.querySelector("canvas");
|
|
drawOnCanvas(canvasElement, msg.function, msg.args);
|
|
}
|
|
}
|
|
}
|
|
}
|