turtle-r7rs/server/canvas.js

;/*
(define script-page ::String "
; // */

var scaleX = 1.5;
var scaleY = 1.5;
var displaceX = 500;
var displaceY = 500;

var bgColor = null;
var lineColor = null;
var lineWidth = null;

var pageId = null;

function drawLine(lineObject) {
    var x1 = lineObject.x1 * scaleX + displaceX;
    var y1 = -lineObject.y1 * scaleY + displaceY;
    var x2 = lineObject.x2 * scaleX + displaceX;
    var y2 = -lineObject.y2 * scaleY + displaceY;

    var c = document.getElementById('LineCanvas');
    var ctx = c.getContext('2d');
    ctx.beginPath();
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
}

function redrawTurtle(redrawObject) {
    var x = redrawObject.x * scaleX + displaceX;
    var y = -redrawObject.y * scaleY + displaceY;
    
    var c=document.getElementById('TurtleCanvas');
    var ctx=c.getContext('2d');

    ctx.clearRect(0, 0, c.width, c.height);

    ctx.beginPath();

    var theta1 = redrawObject.facing / 180 * Math.PI;
    var theta2 = theta1 + 2.5;
    var theta3 = theta1 - 2.5;

    ctx.beginPath();
    ctx.moveTo(Math.cos(theta1)*12+x, Math.sin(-theta1)*12+y);
    ctx.lineTo(Math.cos(theta2)*12+x, Math.sin(-theta2)*12+y);
    ctx.lineTo(Math.cos(theta3)*12+x, Math.sin(-theta3)*12+y);
    ctx.closePath();

    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = lineColor;
    ctx.stroke();

    ctx.fillStyle = bgColor;
    ctx.fill();
}

function deleteTurtle() {
    var c=document.getElementById('TurtleCanvas');
    var ctx=c.getContext('2d');

    ctx.clearRect(0, 0, c.width, c.height);
}

function drawTurtleLine(lineObject) {
    var dy = lineObject.y2 - lineObject.y1;
    var dx = lineObject.x2 - lineObject.x1;

    var facingAmount = 180 * Math.atan(dy/dx) / Math.PI;

    if (lineObject.x1 > lineObject.x2) {
        facingAmount = facingAmount + 180;
    } else if (facingAmount < 0) {
        facingAmount = facingAmount + 360;
    }

    if (lineObject.shown) {
        redrawTurtle({
            x: lineObject.x2,
            y: lineObject.y2,
            facing: facingAmount
        });
    } else {
        deleteTurtle();
    }

    if (lineObject.penDown) {
        drawLine(lineObject);
    }
}

function clearAll() {
    var c=document.getElementById('LineCanvas');
    var ctx=c.getContext('2d');
    ctx.clearRect(0, 0, c.width, c.height);
}

function setBgColor(bgColorObject) {
    var c=document.getElementById('BgCanvas');
    var ctx=c.getContext('2d');
    ctx.fillStyle = bgColorObject.color;
    ctx.fillRect(0, 0, c.width, c.height);

    bgColor = bgColorObject.color;
}

function setLineColor(lineColorObject) {
    lineColor = lineColorObject.color;
}

function setLineWidth(lineWidthObject) {
    lineWidth = lineWidthObject.width;
}

function turtleDo(instruction) {
    if (instruction.type === 'line') {
        drawLine(instruction);
    } else if (instruction.type === 'turtleLine') {
        drawTurtleLine(instruction);
    } else if (instruction.type === 'rotate') {
        redrawTurtle(instruction);
    } else if (instruction.type === 'clear') {
        clearAll();
    } else if (instruction.type === 'bgColor') {
        setBgColor(instruction);
    } else if (instruction.type === 'lineColor') {
        setLineColor(instruction);
    } else if (instruction.type === 'lineWidth') {
        setLineWidth(instruction);
    } else if (instruction.type === 'hideTurtle') {
        deleteTurtle();
    } else if (instruction.type === 'showTurtle') {
        redrawTurtle(instruction);
    } else {
        console.error('unknown: ', instruction);
    }
}

setBgColor({color: 'black'});
setLineColor({color: 'white'});
setLineWidth({width: 1.0});

setTimeout(function() {
    $.post('/api/NewId', '', function(response) {
        pageId = response;
    });
}, 250);

setInterval(function() {
    if (pageId != null) {
        $.post('/api/PullBuffer', String(pageId), function(response) {
            var json = JSON.parse(response);
            if (json == 'CLEAR') {
                clearAll()
            } else {
                for (var i = 0; i < json.length; i += 1) {
                    turtleDo(json[i]);
                }
            }
        }, 'text');
    }
}, 250);

" ;; "
;/*
)
;*/