You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1372 lines
49 KiB
1372 lines
49 KiB
// Copyright (c) 2014-16 Walter Bender
|
|
//
|
|
// This program is free software; you can redistribute it and/or
|
|
// modify it under the terms of the The GNU Affero General Public
|
|
// License as published by the Free Software Foundation; either
|
|
// version 3 of the License, or (at your option) any later version.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public
|
|
// License along with this library; if not, write to the Free Software
|
|
// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA
|
|
|
|
// Turtles
|
|
const DEFAULTCOLOR = 0;
|
|
const DEFAULTVALUE = 50;
|
|
const DEFAULTCHROMA = 100;
|
|
const DEFAULTSTROKE = 5;
|
|
const DEFAULTFONT = 'sans-serif';
|
|
|
|
// Turtle sprite
|
|
const TURTLEBASEPATH = 'images/';
|
|
|
|
function Turtle (name, turtles, drum) {
|
|
this.name = name;
|
|
this.turtles = turtles;
|
|
this.drum = drum;
|
|
|
|
if (drum) {
|
|
console.log('turtle ' + name + ' is a drum.');
|
|
}
|
|
// Is the turtle running?
|
|
this.running = false;
|
|
|
|
// In the trash?
|
|
this.trash = false;
|
|
|
|
// Things used for drawing the turtle.
|
|
this.container = null;
|
|
this.x = 0;
|
|
this.y = 0;
|
|
this.bitmap = null;
|
|
this.skinChanged = false; // Should we reskin the turtle on clear?
|
|
this.blinkFinished = true;
|
|
this.beforeBlinkSize = null;
|
|
|
|
// Which start block is assocated with this turtle?
|
|
this.startBlock = null;
|
|
this.decorationBitmap = null; // Start block decoration.
|
|
|
|
// Queue of blocks this turtle is executing.
|
|
this.queue = [];
|
|
|
|
// Listeners
|
|
this.listeners = {};
|
|
|
|
// Things used for what the turtle draws.
|
|
this.penstrokes = null;
|
|
this.imageContainer = null;
|
|
this.svgOutput = '';
|
|
// Are we currently drawing a path?
|
|
this.svgPath = false;
|
|
this.color = DEFAULTCOLOR;
|
|
this.value = DEFAULTVALUE;
|
|
this.chroma = DEFAULTCHROMA;
|
|
this.stroke = DEFAULTSTROKE;
|
|
this.canvasColor = 'rgba(255,0,49,1)'; // '#ff0031';
|
|
this.canvasAlpha = 1.0;
|
|
this.orientation = 0;
|
|
this.fillState = false;
|
|
this.hollowState = false;
|
|
this.penState = true;
|
|
this.font = DEFAULTFONT;
|
|
this.media = []; // Media (text, images) we need to remove on clear.
|
|
var canvas = document.getElementById("overlayCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
// Simulate an arc with line segments since Tinkercad cannot
|
|
// import SVG arcs reliably.
|
|
this._svgArc = function(nsteps, cx, cy, radius, sa, ea) {
|
|
var a = sa;
|
|
if (ea == null) {
|
|
var da = Math.PI / nsteps;
|
|
} else {
|
|
var da = (ea - sa) / nsteps;
|
|
}
|
|
for (var i = 0; i < nsteps; i++) {
|
|
var nx = cx + radius * Math.cos(a);
|
|
var ny = cy + radius * Math.sin(a);
|
|
this.svgOutput += nx + ',' + ny + ' ';
|
|
a += da;
|
|
}
|
|
};
|
|
|
|
this.doBezier = function(cp1x, cp1y, cp2x, cp2y, x2, y2) {
|
|
// FIXME: Add SVG output
|
|
if (this.penState && this.hollowState) {
|
|
// Convert from turtle coordinates to screen coordinates.
|
|
var nx = x2;
|
|
var ny = y2;
|
|
var ix = this.turtles.turtleX2screenX(this.x);
|
|
var iy = this.turtles.turtleY2screenY(this.y);
|
|
var fx = this.turtles.turtleX2screenX(x2);
|
|
var fy = this.turtles.turtleY2screenY(y2);
|
|
var cx1 = this.turtles.turtleX2screenX(cp1x);
|
|
var cy1 = this.turtles.turtleY2screenY(cp1y);
|
|
var cx2 = this.turtles.turtleX2screenX(cp2x);
|
|
var cy2 = this.turtles.turtleY2screenY(cp2y);
|
|
|
|
// First, we need to close the current SVG path.
|
|
this.closeSVG();
|
|
|
|
// Save the current stroke width.
|
|
var savedStroke = this.stroke;
|
|
this.stroke = 1;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
// Draw a hollow line.
|
|
if (savedStroke < 3) {
|
|
var step = 0.5;
|
|
} else {
|
|
var step = (savedStroke - 2) / 2.;
|
|
}
|
|
|
|
steps = Math.max(Math.floor(savedStroke, 1));
|
|
|
|
// We need both the initial and final headings.
|
|
// The initial heading is the angle between (cp1x, cp1y) and (this.x, this.y).
|
|
var degreesInitial = Math.atan2(cp1x - this.x, cp1y - this.y);
|
|
degreesInitial = (180 * degreesInitial / Math.PI);
|
|
if (degreesInitial < 0) { degreesInitial += 360; }
|
|
// The final heading is the angle between (cp2x, cp2y) and (fx, fy).
|
|
var degreesFinal = Math.atan2(nx - cp2x, ny - cp2y);
|
|
degreesFinal = 180 * degreesFinal / Math.PI;
|
|
if (degreesFinal < 0) { degreesFinal += 360; }
|
|
|
|
// We also need to calculate the deltas for the "caps" at each end.
|
|
var capAngleRadiansInitial = (degreesInitial - 90) * Math.PI / 180.0;
|
|
var dxi = step * Math.sin(capAngleRadiansInitial);
|
|
var dyi = -step * Math.cos(capAngleRadiansInitial);
|
|
var capAngleRadiansFinal = (degreesFinal - 90) * Math.PI / 180.0;
|
|
var dxf = step * Math.sin(capAngleRadiansFinal);
|
|
var dyf = -step * Math.cos(capAngleRadiansFinal);
|
|
|
|
// The four "corners"
|
|
var ax = ix - dxi;
|
|
var ay = iy - dyi;
|
|
var axScaled = ax * this.turtles.scale;
|
|
var ayScaled = ay * this.turtles.scale;
|
|
var bx = fx - dxf;
|
|
var by = fy - dyf;
|
|
var bxScaled = bx * this.turtles.scale;
|
|
var byScaled = by * this.turtles.scale;
|
|
var cx = fx + dxf;
|
|
var cy = fy + dyf;
|
|
var cxScaled = cx * this.turtles.scale;
|
|
var cyScaled = cy * this.turtles.scale;
|
|
var dx = ix + dxi;
|
|
var dy = iy + dyi;
|
|
var dxScaled = dx * this.turtles.scale;
|
|
var dyScaled = dy * this.turtles.scale;
|
|
|
|
// Control points scaled for SVG output
|
|
var cx1Scaled = (cx1 + dxi)* this.turtles.scale;
|
|
var cy1Scaled = (cy1 + dyi) * this.turtles.scale;
|
|
var cx2Scaled = (cx2 + dxf) * this.turtles.scale;
|
|
var cy2Scaled = (cy2 + dyf) * this.turtles.scale;
|
|
|
|
ctx.moveTo(ax, ay);
|
|
this.svgPath = true;
|
|
this.svgOutput += '<path d="M ' + axScaled + ',' + ayScaled + ' ';
|
|
|
|
// Initial arc
|
|
var oAngleRadians = ((180 + degreesInitial) / 180) * Math.PI;
|
|
var arccx = ix;
|
|
var arccy = iy;
|
|
var sa = oAngleRadians - Math.PI;
|
|
var ea = oAngleRadians;
|
|
ctx.arc(arccx, arccy, step, sa, ea, false);
|
|
this._svgArc(steps, arccx * this.turtles.scale, arccy * this.turtles.scale, step * this.turtles.scale, sa, ea);
|
|
|
|
// Initial bezier curve
|
|
ctx.bezierCurveTo(cx1 + dxi, cy1 + dyi , cx2 + dxf, cy2 + dyf, cx, cy);
|
|
this.svgOutput += 'C ' + cx1Scaled + ',' + cy1Scaled + ' ' + cx2Scaled + ',' + cy2Scaled + ' ' + cxScaled + ',' + cyScaled + ' ';
|
|
|
|
this.svgOutput += 'M ' + cxScaled + ',' + cyScaled + ' ';
|
|
|
|
// Final arc
|
|
var oAngleRadians = (degreesFinal / 180) * Math.PI;
|
|
var arccx = fx;
|
|
var arccy = fy;
|
|
var sa = oAngleRadians - Math.PI;
|
|
var ea = oAngleRadians;
|
|
ctx.arc(arccx, arccy, step, sa, ea, false);
|
|
this._svgArc(steps, arccx * this.turtles.scale, arccy * this.turtles.scale, step * this.turtles.scale, sa, ea);
|
|
|
|
// Final bezier curve
|
|
ctx.bezierCurveTo(cx2 - dxf, cy2 - dyf, cx1 - dxi, cy1 - dyi, ax, ay);
|
|
this.svgOutput += 'C ' + cx2Scaled + ',' + cy2Scaled + ' ' + cx1Scaled + ',' + cy1Scaled + ' ' + axScaled + ',' + ayScaled + ' ';
|
|
this.closeSVG();
|
|
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
// restore stroke.
|
|
this.stroke = savedStroke;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.moveTo(fx,fy);
|
|
this.x = x2;
|
|
this.y = y2;
|
|
} else if (this.penState) {
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.container.x, this.container.y);
|
|
|
|
// Convert from turtle coordinates to screen coordinates.
|
|
var fx = this.turtles.turtleX2screenX(x2);
|
|
var fy = this.turtles.turtleY2screenY(y2);
|
|
var cx1 = this.turtles.turtleX2screenX(cp1x);
|
|
var cy1 = this.turtles.turtleY2screenY(cp1y);
|
|
var cx2 = this.turtles.turtleX2screenX(cp2x);
|
|
var cy2 = this.turtles.turtleY2screenY(cp2y);
|
|
|
|
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, fx, fy);
|
|
|
|
if (!this.svgPath) {
|
|
this.svgPath = true;
|
|
var ix = this.turtles.turtleX2screenX(this.x);
|
|
var iy = this.turtles.turtleY2screenY(this.y);
|
|
var ixScaled = ix * this.turtles.scale;
|
|
var iyScaled = iy * this.turtles.scale;
|
|
this.svgOutput += '<path d="M ' + ixScaled + ',' + iyScaled + ' ';
|
|
}
|
|
|
|
var cx1Scaled = cx1 * this.turtles.scale;
|
|
var cy1Scaled = cy1 * this.turtles.scale;
|
|
var cx2Scaled = cx2 * this.turtles.scale;
|
|
var cy2Scaled = cy2 * this.turtles.scale;
|
|
var fxScaled = fx * this.turtles.scale;
|
|
var fyScaled = fy * this.turtles.scale;
|
|
this.svgOutput += 'C ' + cx1Scaled + ',' + cy1Scaled + ' ' + cx2Scaled + ',' + cy2Scaled + ' ' + fxScaled + ',' + fyScaled;
|
|
this.x = x2;
|
|
this.y = y2;
|
|
ctx.stroke();
|
|
if (!this.fillState) {
|
|
ctx.closePath();
|
|
}
|
|
} else {
|
|
this.x = x2;
|
|
this.y = y2;
|
|
var fx = this.turtles.turtleX2screenX(x2);
|
|
var fy = this.turtles.turtleY2screenY(y2);
|
|
}
|
|
|
|
// Update turtle position on screen.
|
|
this.container.x = fx;
|
|
this.container.y = fy;
|
|
|
|
// The new heading is the angle between (cp2x, cp2y) and (nx, ny).
|
|
var degrees = Math.atan2(nx - cp2x, ny - cp2y);
|
|
degrees = 180 * degrees / Math.PI;
|
|
this.doSetHeading(degrees);
|
|
};
|
|
|
|
this.move = function(ox, oy, x, y, invert) {
|
|
if (invert) {
|
|
ox = this.turtles.turtleX2screenX(ox);
|
|
oy = this.turtles.turtleY2screenY(oy);
|
|
nx = this.turtles.turtleX2screenX(x);
|
|
ny = this.turtles.turtleY2screenY(y);
|
|
} else {
|
|
nx = x;
|
|
ny = y;
|
|
}
|
|
|
|
// Draw a line if the pen is down.
|
|
if (this.penState && this.hollowState) {
|
|
// First, we need to close the current SVG path.
|
|
this.closeSVG();
|
|
this.svgPath = true;
|
|
// Save the current stroke width.
|
|
var savedStroke = this.stroke;
|
|
this.stroke = 1;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = 'round';
|
|
// Draw a hollow line.
|
|
if (savedStroke < 3) {
|
|
var step = 0.5;
|
|
} else {
|
|
var step = (savedStroke - 2) / 2.;
|
|
}
|
|
|
|
var capAngleRadians = (this.orientation - 90) * Math.PI / 180.0;
|
|
var dx = step * Math.sin(capAngleRadians);
|
|
var dy = -step * Math.cos(capAngleRadians);
|
|
|
|
ctx.moveTo(ox + dx, oy + dy);
|
|
var oxScaled = (ox + dx) * this.turtles.scale;
|
|
var oyScaled = (oy + dy) * this.turtles.scale;
|
|
this.svgOutput += '<path d="M ' + oxScaled + ',' + oyScaled + ' ';
|
|
|
|
ctx.lineTo(nx + dx, ny + dy);
|
|
var nxScaled = (nx + dx) * this.turtles.scale;
|
|
var nyScaled = (ny + dy) * this.turtles.scale;
|
|
this.svgOutput += nxScaled + ',' + nyScaled + ' ';
|
|
|
|
var capAngleRadians = (this.orientation + 90) * Math.PI / 180.0;
|
|
var dx = step * Math.sin(capAngleRadians);
|
|
var dy = -step * Math.cos(capAngleRadians);
|
|
|
|
var oAngleRadians = (this.orientation / 180) * Math.PI;
|
|
var cx = nx;
|
|
var cy = ny;
|
|
var sa = oAngleRadians - Math.PI;
|
|
var ea = oAngleRadians;
|
|
ctx.arc(cx, cy, step, sa, ea, false);
|
|
|
|
var nxScaled = (nx + dx) * this.turtles.scale;
|
|
var nyScaled = (ny + dy) * this.turtles.scale;
|
|
|
|
var radiusScaled = step * this.turtles.scale;
|
|
|
|
// Simulate an arc with line segments since Tinkercad
|
|
// cannot import SVG arcs reliably.
|
|
// Replaces:
|
|
// this.svgOutput += 'A ' + radiusScaled + ',' + radiusScaled + ' 0 0 1 ' + nxScaled + ',' + nyScaled + ' ';
|
|
// this.svgOutput += 'M ' + nxScaled + ',' + nyScaled + ' ';
|
|
|
|
steps = Math.max(Math.floor(savedStroke, 1));
|
|
this._svgArc(steps, cx * this.turtles.scale, cy * this.turtles.scale, radiusScaled, sa);
|
|
this.svgOutput += nxScaled + ',' + nyScaled + ' ';
|
|
|
|
ctx.lineTo(ox + dx, oy + dy);
|
|
var nxScaled = (ox + dx) * this.turtles.scale;
|
|
var nyScaled = (oy + dy) * this.turtles.scale;
|
|
this.svgOutput += nxScaled + ',' + nyScaled + ' ';
|
|
|
|
var capAngleRadians = (this.orientation - 90) * Math.PI / 180.0;
|
|
var dx = step * Math.sin(capAngleRadians);
|
|
var dy = -step * Math.cos(capAngleRadians);
|
|
|
|
var oAngleRadians = ((this.orientation + 180) / 180) * Math.PI;
|
|
var cx = ox;
|
|
var cy = oy;
|
|
var sa = oAngleRadians - Math.PI;
|
|
var ea = oAngleRadians;
|
|
ctx.arc(cx, cy, step, sa, ea, false);
|
|
|
|
var nxScaled = (ox + dx) * this.turtles.scale;
|
|
var nyScaled = (oy + dy) * this.turtles.scale;
|
|
|
|
var radiusScaled = step * this.turtles.scale;
|
|
this._svgArc(steps, cx * this.turtles.scale, cy * this.turtles.scale, radiusScaled, sa);
|
|
this.svgOutput += nxScaled + ',' + nyScaled + ' ';
|
|
|
|
this.closeSVG();
|
|
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
// restore stroke.
|
|
this.stroke = savedStroke;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = 'round';
|
|
ctx.moveTo(nx, ny);
|
|
} else if (this.penState) {
|
|
ctx.lineTo(nx, ny);
|
|
if (!this.svgPath) {
|
|
this.svgPath = true;
|
|
var oxScaled = ox * this.turtles.scale;
|
|
var oyScaled = oy * this.turtles.scale;
|
|
this.svgOutput += '<path d="M ' + oxScaled + ',' + oyScaled + ' ';
|
|
}
|
|
var nxScaled = nx * this.turtles.scale;
|
|
var nyScaled = ny * this.turtles.scale;
|
|
this.svgOutput += nxScaled + ',' + nyScaled + ' ';
|
|
ctx.stroke();
|
|
if (!this.fillState) {
|
|
ctx.closePath();
|
|
}
|
|
} else {
|
|
ctx.moveTo(nx, ny);
|
|
}
|
|
this.penstrokes.image = canvas;
|
|
// Update turtle position on screen.
|
|
this.container.x = nx;
|
|
this.container.y = ny;
|
|
if (invert) {
|
|
this.x = x;
|
|
this.y = y;
|
|
} else {
|
|
this.x = this.turtles.screenX2turtleX(x);
|
|
this.y = this.turtles.screenY2turtleY(y);
|
|
}
|
|
};
|
|
|
|
this.rename = function(name) {
|
|
this.name = name;
|
|
|
|
// Use the name on the label of the start block.
|
|
if (this.startBlock != null) {
|
|
this.startBlock.overrideName = this.name;
|
|
if (this.name === _('start drum')) {
|
|
this.startBlock.collapseText.text = _('drum');
|
|
} else {
|
|
this.startBlock.collapseText.text = this.name;
|
|
}
|
|
this.startBlock.regenerateArtwork(false);
|
|
this.startBlock.value = this.turtles.turtleList.indexOf(this);
|
|
}
|
|
};
|
|
|
|
this.arc = function(cx, cy, ox, oy, x, y, radius, start, end, anticlockwise, invert) {
|
|
if (invert) {
|
|
cx = this.turtles.turtleX2screenX(cx);
|
|
cy = this.turtles.turtleY2screenY(cy);
|
|
ox = this.turtles.turtleX2screenX(ox);
|
|
oy = this.turtles.turtleY2screenY(oy);
|
|
nx = this.turtles.turtleX2screenX(x);
|
|
ny = this.turtles.turtleY2screenY(y);
|
|
} else {
|
|
nx = x;
|
|
ny = y;
|
|
}
|
|
|
|
if (!anticlockwise) {
|
|
sa = start - Math.PI;
|
|
ea = end - Math.PI;
|
|
} else {
|
|
sa = start;
|
|
ea = end;
|
|
}
|
|
|
|
// Draw an arc if the pen is down.
|
|
if (this.penState && this.hollowState) {
|
|
// First, we need to close the current SVG path.
|
|
this.closeSVG();
|
|
this.svgPath = true;
|
|
// Save the current stroke width.
|
|
var savedStroke = this.stroke;
|
|
this.stroke = 1;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
// Draw a hollow line.
|
|
if (savedStroke < 3) {
|
|
var step = 0.5;
|
|
} else {
|
|
var step = (savedStroke - 2) / 2.;
|
|
}
|
|
|
|
var capAngleRadians = (this.orientation + 90) * Math.PI / 180.0;
|
|
var dx = step * Math.sin(capAngleRadians);
|
|
var dy = -step * Math.cos(capAngleRadians);
|
|
|
|
if (anticlockwise) {
|
|
ctx.moveTo(ox + dx, oy + dy);
|
|
var oxScaled = (ox + dx) * this.turtles.scale;
|
|
var oyScaled = (oy + dy) * this.turtles.scale;
|
|
} else {
|
|
ctx.moveTo(ox - dx, oy - dy);
|
|
var oxScaled = (ox - dx) * this.turtles.scale;
|
|
var oyScaled = (oy - dy) * this.turtles.scale;
|
|
}
|
|
this.svgOutput += '<path d="M ' + oxScaled + ',' + oyScaled + ' ';
|
|
|
|
ctx.arc(cx, cy, radius + step, sa, ea, anticlockwise);
|
|
nsteps = Math.max(Math.floor(radius * Math.abs(sa - ea) / 2), 2);
|
|
steps = Math.max(Math.floor(savedStroke, 1));
|
|
|
|
this._svgArc(nsteps, cx * this.turtles.scale, cy * this.turtles.scale, (radius + step) * this.turtles.scale, sa, ea);
|
|
|
|
var capAngleRadians = (this.orientation + 90) * Math.PI / 180.0;
|
|
var dx = step * Math.sin(capAngleRadians);
|
|
var dy = -step * Math.cos(capAngleRadians);
|
|
|
|
var cx1 = nx;
|
|
var cy1 = ny;
|
|
var sa1 = ea;
|
|
var ea1 = ea + Math.PI;
|
|
ctx.arc(cx1, cy1, step, sa1, ea1, anticlockwise);
|
|
this._svgArc(steps, cx1 * this.turtles.scale, cy1 * this.turtles.scale, step * this.turtles.scale, sa1, ea1);
|
|
ctx.arc(cx, cy, radius - step, ea, sa, !anticlockwise);
|
|
this._svgArc(nsteps, cx * this.turtles.scale, cy * this.turtles.scale, (radius - step) * this.turtles.scale, ea, sa);
|
|
var cx2 = ox;
|
|
var cy2 = oy;
|
|
var sa2 = sa - Math.PI;
|
|
var ea2 = sa;
|
|
ctx.arc(cx2, cy2, step, sa2, ea2, anticlockwise);
|
|
this._svgArc(steps, cx2 * this.turtles.scale, cy2 * this.turtles.scale, step * this.turtles.scale, sa2, ea2);
|
|
this.closeSVG();
|
|
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
// restore stroke.
|
|
this.stroke = savedStroke;
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.moveTo(nx,ny);
|
|
} else if (this.penState) {
|
|
ctx.arc(cx, cy, radius, sa, ea, anticlockwise);
|
|
if (!this.svgPath) {
|
|
this.svgPath = true;
|
|
var oxScaled = ox * this.turtles.scale;
|
|
var oyScaled = oy * this.turtles.scale;
|
|
this.svgOutput += '<path d="M ' + oxScaled + ',' + oyScaled + ' ';
|
|
}
|
|
if (anticlockwise) {
|
|
var sweep = 0;
|
|
} else {
|
|
var sweep = 1;
|
|
}
|
|
var nxScaled = nx * this.turtles.scale;
|
|
var nyScaled = ny * this.turtles.scale;
|
|
var radiusScaled = radius * this.turtles.scale;
|
|
this.svgOutput += 'A ' + radiusScaled + ',' + radiusScaled + ' 0 0 ' + sweep + ' ' + nxScaled + ',' + nyScaled + ' ';
|
|
ctx.stroke();
|
|
if (!this.fillState) {
|
|
ctx.closePath();
|
|
}
|
|
} else {
|
|
ctx.moveTo(nx, ny);
|
|
}
|
|
// Update turtle position on screen.
|
|
this.container.x = nx;
|
|
this.container.y = ny;
|
|
if (invert) {
|
|
this.x = x;
|
|
this.y = y;
|
|
} else {
|
|
this.x = this.screenX2turtles.turtleX(x);
|
|
this.y = this.screenY2turtles.turtleY(y);
|
|
}
|
|
};
|
|
|
|
// Turtle functions
|
|
this.doClear = function(resetPen, resetSkin) {
|
|
// Reset turtle.
|
|
this.x = 0;
|
|
this.y = 0;
|
|
this.orientation = 0.0;
|
|
if (resetPen) {
|
|
var i = this.turtles.turtleList.indexOf(this) % 10;
|
|
this.color = i * 10;
|
|
this.value = DEFAULTVALUE;
|
|
this.chroma = DEFAULTCHROMA;
|
|
this.stroke = DEFAULTSTROKE;
|
|
this.font = DEFAULTFONT;
|
|
}
|
|
|
|
this.container.x = this.turtles.turtleX2screenX(this.x);
|
|
this.container.y = this.turtles.turtleY2screenY(this.y);
|
|
|
|
if (resetSkin) {
|
|
if (this.drum) {
|
|
if (this.name !== _('start drum')) {
|
|
this.rename(_('start drum'));
|
|
}
|
|
} else {
|
|
if (this.name !== _('start')) {
|
|
this.rename(_('start'));
|
|
}
|
|
}
|
|
|
|
if (this.skinChanged) {
|
|
this.doTurtleShell(55, TURTLEBASEPATH + 'turtle-' + i.toString() + '.svg');
|
|
this.skinChanged = false;
|
|
}
|
|
}
|
|
|
|
this.bitmap.rotation = this.orientation;
|
|
this.updateCache();
|
|
|
|
// Clear all media.
|
|
for (var i = 0; i < this.media.length; i++) {
|
|
// Could be in the image Container or the Stage
|
|
this.imageContainer.removeChild(this.media[i]);
|
|
this.turtles.stage.removeChild(this.media[i]);
|
|
delete this.media[i];
|
|
}
|
|
|
|
this.media = [];
|
|
|
|
// Clear all graphics.
|
|
this.penState = true;
|
|
this.fillState = false;
|
|
this.hollowState = false;
|
|
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
|
|
this.svgOutput = '';
|
|
this.svgPath = false;
|
|
this.penstrokes.image = null;
|
|
ctx.beginPath();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
this.penstrokes.image = canvas;
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.clearPenStrokes = function() {
|
|
this.penState = true;
|
|
this.fillState = false;
|
|
this.hollowState = false;
|
|
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
ctx.beginPath();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
this.penstrokes.image = canvas;
|
|
this.svgOutput = '';
|
|
this.svgPath = false;
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.doForward = function(steps) {
|
|
if (!this.fillState) {
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length - 2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.container.x, this.container.y);
|
|
}
|
|
|
|
// old turtle point
|
|
var ox = this.turtles.screenX2turtleX(this.container.x);
|
|
var oy = this.turtles.screenY2turtleY(this.container.y);
|
|
|
|
// new turtle point
|
|
var angleRadians = this.orientation * Math.PI / 180.0;
|
|
var nx = ox + Number(steps) * Math.sin(angleRadians);
|
|
var ny = oy + Number(steps) * Math.cos(angleRadians);
|
|
|
|
this.move(ox, oy, nx, ny, true);
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.doSetXY = function(x, y) {
|
|
if (!this.fillState) {
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.container.x, this.container.y);
|
|
}
|
|
|
|
// old turtle point
|
|
var ox = this.turtles.screenX2turtleX(this.container.x);
|
|
var oy = this.turtles.screenY2turtleY(this.container.y);
|
|
|
|
// new turtle point
|
|
var nx = Number(x)
|
|
var ny = Number(y);
|
|
|
|
this.move(ox, oy, nx, ny, true);
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.doArc = function(angle, radius) {
|
|
// Break up arcs into chucks of 90 degrees or less (in order
|
|
// to have exported SVG properly rendered).
|
|
if (radius < 0) {
|
|
radius = -radius;
|
|
}
|
|
var adeg = Number(angle);
|
|
if (adeg < 0) {
|
|
var factor = -1;
|
|
adeg = -adeg;
|
|
} else {
|
|
var factor = 1;
|
|
}
|
|
var remainder = adeg % 90;
|
|
var n = Math.floor(adeg / 90);
|
|
for (var i = 0; i < n; i++) {
|
|
this._doArcPart(90 * factor, radius);
|
|
}
|
|
if (remainder > 0) {
|
|
this._doArcPart(remainder * factor, radius);
|
|
}
|
|
};
|
|
|
|
this._doArcPart = function(angle, radius) {
|
|
if (!this.fillState) {
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.lineWidth = this.stroke;
|
|
ctx.lineCap = "round";
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.container.x, this.container.y);
|
|
}
|
|
|
|
var adeg = Number(angle);
|
|
var angleRadians = (adeg / 180) * Math.PI;
|
|
var oAngleRadians = (this.orientation / 180) * Math.PI;
|
|
var r = Number(radius);
|
|
|
|
// old turtle point
|
|
ox = this.turtles.screenX2turtleX(this.container.x);
|
|
oy = this.turtles.screenY2turtleY(this.container.y);
|
|
|
|
if( adeg < 0 ) {
|
|
var anticlockwise = true;
|
|
adeg = -adeg;
|
|
// center point for arc
|
|
var cx = ox - Math.cos(oAngleRadians) * r;
|
|
var cy = oy + Math.sin(oAngleRadians) * r;
|
|
// new position of turtle
|
|
var nx = cx + Math.cos(oAngleRadians + angleRadians) * r;
|
|
var ny = cy - Math.sin(oAngleRadians + angleRadians) * r;
|
|
} else {
|
|
var anticlockwise = false;
|
|
// center point for arc
|
|
var cx = ox + Math.cos(oAngleRadians) * r;
|
|
var cy = oy - Math.sin(oAngleRadians) * r;
|
|
// new position of turtle
|
|
var nx = cx - Math.cos(oAngleRadians + angleRadians) * r;
|
|
var ny = cy + Math.sin(oAngleRadians + angleRadians) * r;
|
|
}
|
|
|
|
this.arc(cx, cy, ox, oy, nx, ny, r, oAngleRadians, oAngleRadians + angleRadians, anticlockwise, true);
|
|
|
|
if (anticlockwise) {
|
|
this.doRight(-adeg);
|
|
} else {
|
|
this.doRight(adeg);
|
|
}
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.doShowImage = function(size, myImage) {
|
|
// Add an image object to the canvas
|
|
// Is there a JS test for a valid image path?
|
|
if (myImage === null) {
|
|
return;
|
|
}
|
|
|
|
var image = new Image();
|
|
var turtle = this;
|
|
|
|
image.onload = function() {
|
|
var bitmap = new createjs.Bitmap(image);
|
|
turtle.imageContainer.addChild(bitmap);
|
|
turtle.media.push(bitmap);
|
|
bitmap.scaleX = Number(size) / image.width;
|
|
bitmap.scaleY = bitmap.scaleX;
|
|
bitmap.scale = bitmap.scaleX;
|
|
bitmap.x = turtle.container.x;
|
|
bitmap.y = turtle.container.y;
|
|
bitmap.regX = image.width / 2;
|
|
bitmap.regY = image.height / 2;
|
|
bitmap.rotation = turtle.orientation;
|
|
turtle.turtles.refreshCanvas();
|
|
};
|
|
|
|
image.src = myImage;
|
|
};
|
|
|
|
this.doShowURL = function(size, myURL) {
|
|
// Add an image object from a URL to the canvas
|
|
if (myURL === null) {
|
|
return;
|
|
}
|
|
var image = new Image();
|
|
image.src = myURL;
|
|
var turtle = this;
|
|
|
|
image.onload = function() {
|
|
var bitmap = new createjs.Bitmap(image);
|
|
turtle.imageContainer.addChild(bitmap);
|
|
turtle.media.push(bitmap);
|
|
bitmap.scaleX = Number(size) / image.width;
|
|
bitmap.scaleY = bitmap.scaleX;
|
|
bitmap.scale = bitmap.scaleX;
|
|
bitmap.x = turtle.container.x;
|
|
bitmap.y = turtle.container.y;
|
|
bitmap.regX = image.width / 2;
|
|
bitmap.regY = image.height / 2;
|
|
bitmap.rotation = turtle.orientation;
|
|
turtle.turtles.refreshCanvas();
|
|
};
|
|
};
|
|
|
|
this.doTurtleShell = function(size, myImage) {
|
|
// Add image to turtle
|
|
if (myImage === null) {
|
|
return;
|
|
}
|
|
var image = new Image();
|
|
image.src = myImage;
|
|
var turtle = this;
|
|
|
|
image.onload = function() {
|
|
turtle.container.removeChild(turtle.bitmap);
|
|
turtle.bitmap = new createjs.Bitmap(image);
|
|
turtle.container.addChild(turtle.bitmap);
|
|
turtle.bitmap.scaleX = Number(size) / image.width;
|
|
turtle.bitmap.scaleY = turtle.bitmap.scaleX;
|
|
turtle.bitmap.scale = turtle.bitmap.scaleX;
|
|
turtle.bitmap.x = 0;
|
|
turtle.bitmap.y = 0;
|
|
turtle.bitmap.regX = image.width / 2;
|
|
turtle.bitmap.regY = image.height / 2;
|
|
turtle.bitmap.rotation = turtle.orientation;
|
|
turtle.skinChanged = true;
|
|
|
|
turtle.container.uncache();
|
|
var bounds = turtle.container.getBounds();
|
|
turtle.container.cache(bounds.x, bounds.y, bounds.width, bounds.height);
|
|
|
|
// Recalculate the hit area as well.
|
|
var hitArea = new createjs.Shape();
|
|
hitArea.graphics.beginFill('#FFF').drawRect(0, 0, bounds.width, bounds.height);
|
|
hitArea.x = -bounds.width / 2;
|
|
hitArea.y = -bounds.height / 2;
|
|
turtle.container.hitArea = hitArea;
|
|
|
|
if (turtle.startBlock != null) {
|
|
turtle.startBlock.container.removeChild(turtle.decorationBitmap);
|
|
turtle.decorationBitmap = new createjs.Bitmap(myImage);
|
|
turtle.startBlock.container.addChild(turtle.decorationBitmap);
|
|
turtle.decorationBitmap.name = 'decoration';
|
|
|
|
var bounds = turtle.startBlock.container.getBounds();
|
|
// FIXME: Why is the position off? Does it need a scale factor?
|
|
turtle.decorationBitmap.x = bounds.width - 50 * turtle.startBlock.protoblock.scale / 2;
|
|
turtle.decorationBitmap.y = 20 * turtle.startBlock.protoblock.scale / 2;
|
|
turtle.decorationBitmap.scaleX = (27.5 / image.width) * turtle.startBlock.protoblock.scale / 2;
|
|
turtle.decorationBitmap.scaleY = (27.5 / image.height) * turtle.startBlock.protoblock.scale / 2;
|
|
turtle.decorationBitmap.scale = (27.5 / image.width) * turtle.startBlock.protoblock.scale / 2;
|
|
turtle.startBlock.updateCache();
|
|
}
|
|
|
|
turtle.turtles.refreshCanvas();
|
|
};
|
|
};
|
|
|
|
this.resizeDecoration = function(scale, width) {
|
|
this.decorationBitmap.x = width - 30 * scale / 2;
|
|
this.decorationBitmap.y = 35 * scale / 2;
|
|
this.decorationBitmap.scaleX = this.decorationBitmap.scaleY = this.decorationBitmap.scale = 0.5 * scale / 2
|
|
};
|
|
|
|
this.doShowText = function(size, myText) {
|
|
// Add a text or image object to the canvas
|
|
|
|
var textSize = size.toString() + 'px ' + this.font;
|
|
var text = new createjs.Text(myText.toString(), textSize, this.canvasColor);
|
|
text.textAlign = 'left';
|
|
text.textBaseline = 'alphabetic';
|
|
this.turtles.stage.addChild(text);
|
|
this.media.push(text);
|
|
text.x = this.container.x;
|
|
text.y = this.container.y;
|
|
text.rotation = this.orientation;
|
|
var xScaled = text.x * this.turtles.scale;
|
|
var yScaled = text.y * this.turtles.scale;
|
|
var sizeScaled = size * this.turtles.scale;
|
|
this.svgOutput += '<text x="' + xScaled + '" y = "' + yScaled + '" fill="' + this.canvasColor + '" font-family = "' + this.font + '" font-size = "' + sizeScaled + '">' + myText + '</text>';
|
|
this.turtles.refreshCanvas();
|
|
};
|
|
|
|
this.doRight = function(degrees) {
|
|
// Turn right and display corresponding turtle graphic.
|
|
this.orientation += Number(degrees);
|
|
this.orientation %= 360;
|
|
this.bitmap.rotation = this.orientation;
|
|
// We cannot update the cache during the 'tween'.
|
|
if (this.blinkFinished) {
|
|
this.updateCache();
|
|
}
|
|
};
|
|
|
|
this.doSetHeading = function(degrees) {
|
|
this.orientation = Number(degrees);
|
|
this.orientation %= 360;
|
|
this.bitmap.rotation = this.orientation;
|
|
// We cannot update the cache during the 'tween'.
|
|
if (this.blinkFinished) {
|
|
this.updateCache();
|
|
}
|
|
};
|
|
|
|
this.doSetFont = function(font) {
|
|
this.font = font;
|
|
this.updateCache();
|
|
};
|
|
|
|
|
|
this.doSetColor = function(color) {
|
|
// Color sets hue but also selects maximum chroma.
|
|
this.closeSVG();
|
|
this.color = Number(color);
|
|
var results = getcolor(this.color);
|
|
this.canvasValue = results[0];
|
|
this.canvasChroma = results[1];
|
|
this.canvasColor = results[2];
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
};
|
|
|
|
this.doSetPenAlpha = function(alpha) {
|
|
this.canvasAlpha = alpha;
|
|
};
|
|
|
|
this.doSetHue = function(hue) {
|
|
this.closeSVG();
|
|
this.color = Number(hue);
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
};
|
|
|
|
this.doSetValue = function(shade) {
|
|
this.closeSVG();
|
|
this.value = Number(shade);
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
};
|
|
|
|
this.doSetChroma = function(chroma) {
|
|
this.closeSVG();
|
|
this.chroma = Number(chroma);
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
this.canvasColor = getMunsellColor(this.color, this.value, this.chroma);
|
|
if (this.canvasColor[0] === "#") {
|
|
this.canvasColor = hex2rgb(this.canvasColor.split("#")[1]);
|
|
}
|
|
|
|
var subrgb = this.canvasColor.substr(0, this.canvasColor.length-2);
|
|
ctx.strokeStyle = subrgb + this.canvasAlpha + ")";
|
|
ctx.fillStyle = subrgb + this.canvasAlpha + ")";
|
|
};
|
|
|
|
this.doSetPensize = function(size) {
|
|
this.closeSVG();
|
|
this.stroke = size;
|
|
ctx.lineWidth = this.stroke;
|
|
};
|
|
|
|
this.doPenUp = function() {
|
|
this.closeSVG();
|
|
this.penState = false;
|
|
};
|
|
|
|
this.doPenDown = function() {
|
|
this.penState = true;
|
|
};
|
|
|
|
this.doStartFill = function() {
|
|
/// start tracking points here
|
|
ctx.beginPath();
|
|
this.fillState = true;
|
|
};
|
|
|
|
this.doEndFill = function() {
|
|
/// redraw the points with fill enabled
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
this.closeSVG();
|
|
this.fillState = false;
|
|
};
|
|
|
|
this.doStartHollowLine = function() {
|
|
/// start tracking points here
|
|
this.hollowState = true;
|
|
};
|
|
|
|
this.doEndHollowLine = function() {
|
|
/// redraw the points with fill enabled
|
|
this.hollowState = false;
|
|
};
|
|
|
|
this.closeSVG = function() {
|
|
if (this.svgPath) {
|
|
// For the SVG output, we need to replace rgba() with
|
|
// rgb();fill-opacity:1 and rgb();stroke-opacity:1
|
|
|
|
var svgColor = this.canvasColor.replace(/rgba/g, 'rgb');
|
|
svgColor = svgColor.substr(0, this.canvasColor.length - 4) + ');';
|
|
|
|
this.svgOutput += '" style="stroke-linecap:round;fill:';
|
|
if (this.fillState) {
|
|
this.svgOutput += svgColor + 'fill-opacity:' + this.canvasAlpha + ';';
|
|
} else {
|
|
this.svgOutput += 'none;';
|
|
}
|
|
|
|
this.svgOutput += 'stroke:' + svgColor + 'stroke-opacity:' + this.canvasAlpha + ';';
|
|
var strokeScaled = this.stroke * this.turtles.scale;
|
|
this.svgOutput += 'stroke-width:' + strokeScaled + 'pt;" />';
|
|
this.svgPath = false;
|
|
}
|
|
};
|
|
|
|
// Internal function for creating cache.
|
|
// Includes workaround for a race condition.
|
|
this.createCache = function() {
|
|
var myTurtle = this;
|
|
myTurtle.bounds = myTurtle.container.getBounds();
|
|
|
|
if (myTurtle.bounds == null) {
|
|
setTimeout(function() {
|
|
myTurtle.createCache();
|
|
}, 200);
|
|
} else {
|
|
myTurtle.container.cache(myTurtle.bounds.x, myTurtle.bounds.y, myTurtle.bounds.width, myTurtle.bounds.height);
|
|
}
|
|
};
|
|
|
|
// Internal function for creating cache.
|
|
// Includes workaround for a race condition.
|
|
this.updateCache = function() {
|
|
var myTurtle = this;
|
|
|
|
if (myTurtle.bounds == null) {
|
|
console.log('Block container for ' + myTurtle.name + ' not yet ready.');
|
|
setTimeout(function() {
|
|
myTurtle.updateCache();
|
|
}, 300);
|
|
} else {
|
|
myTurtle.container.updateCache();
|
|
myTurtle.turtles.refreshCanvas();
|
|
}
|
|
};
|
|
|
|
this.blink = function(duration,volume) {
|
|
var turtle = this;
|
|
var sizeinuse;
|
|
if (this.blinkFinished == false){
|
|
sizeinuse = this.beforeBlinkSize;
|
|
} else {
|
|
sizeinuse = turtle.bitmap.scaleX;
|
|
this.beforeBlinkSize = sizeinuse;
|
|
}
|
|
this.blinkFinished = false;
|
|
turtle.container.uncache();
|
|
var scalefactor = 60 / 55;
|
|
var volumescalefactor = 4 * (volume + 200) / 1000;
|
|
//Conversion: volume of 1 = 0.804, volume of 50 = 1, volume of 100 = 1.1
|
|
turtle.bitmap.alpha = 0.5;
|
|
turtle.bitmap.scaleX = sizeinuse * scalefactor * volumescalefactor;
|
|
turtle.bitmap.scaleY = turtle.bitmap.scaleX;
|
|
turtle.bitmap.scale = turtle.bitmap.scaleX;
|
|
var isSkinChanged = turtle.skinChanged;
|
|
turtle.skinChanged = true;
|
|
createjs.Tween.get(turtle.bitmap).to({alpha: 1, scaleX: sizeinuse, scaleY: sizeinuse, scale: sizeinuse}, 500 / duration);
|
|
setTimeout(function() {
|
|
turtle.bitmap.scaleX = sizeinuse;
|
|
turtle.bitmap.scaleY = turtle.bitmap.scaleX;
|
|
turtle.bitmap.scale = turtle.bitmap.scaleX;
|
|
turtle.bitmap.rotation = turtle.orientation;
|
|
turtle.skinChanged = isSkinChanged;
|
|
var bounds = turtle.container.getBounds();
|
|
turtle.container.cache(bounds.x, bounds.y, bounds.width, bounds.height);
|
|
turtle.blinkFinished = true;
|
|
}, 500 / duration); // 500 / duration == (1000 * (1 / duration)) / 2
|
|
};
|
|
};
|
|
|
|
|
|
function Turtles () {
|
|
this.stage = null;
|
|
this.refreshCanvas = null;
|
|
this.scale = 1.0;
|
|
this._canvas = null;
|
|
this._rotating = false;
|
|
this._drum = false;
|
|
|
|
// The list of all of our turtles, one for each start block.
|
|
this.turtleList = [];
|
|
|
|
this.setCanvas = function (canvas) {
|
|
this._canvas = canvas;
|
|
return this;
|
|
};
|
|
|
|
this.setStage = function (stage) {
|
|
this.stage = stage;
|
|
return this;
|
|
};
|
|
|
|
this.setRefreshCanvas = function (refreshCanvas) {
|
|
this.refreshCanvas = refreshCanvas;
|
|
return this;
|
|
};
|
|
|
|
this.setScale = function (scale) {
|
|
this.scale = scale;
|
|
return this;
|
|
};
|
|
|
|
this.setBlocks = function (blocks) {
|
|
this.blocks = blocks;
|
|
return this;
|
|
};
|
|
|
|
this.addDrum = function (startBlock, infoDict) {
|
|
this._drum = true;
|
|
this.add(startBlock, infoDict);
|
|
};
|
|
|
|
this.addTurtle = function (startBlock, infoDict) {
|
|
this._drum = false;
|
|
this.add(startBlock, infoDict);
|
|
};
|
|
|
|
this.add = function (startBlock, infoDict) {
|
|
// Add a new turtle for each start block
|
|
if (startBlock != null) {
|
|
console.log('adding a new turtle ' + startBlock.name);
|
|
if (startBlock.value !== this.turtleList.length) {
|
|
startBlock.value = this.turtleList.length;
|
|
console.log('turtle #' + startBlock.value);
|
|
}
|
|
} else {
|
|
console.log('adding a new turtle startBlock is null');
|
|
}
|
|
|
|
var blkInfoAvailable = false;
|
|
|
|
if (typeof(infoDict) === 'object') {
|
|
if (Object.keys(infoDict).length === 8) {
|
|
blkInfoAvailable = true;
|
|
}
|
|
}
|
|
|
|
var i = this.turtleList.length;
|
|
var turtleName = i.toString();
|
|
var myTurtle = new Turtle(turtleName, this, this._drum);
|
|
|
|
if (blkInfoAvailable) {
|
|
myTurtle.x = infoDict['xcor'];
|
|
myTurtle.y = infoDict['ycor'];
|
|
}
|
|
|
|
this.turtleList.push(myTurtle);
|
|
|
|
// Each turtle needs its own canvas.
|
|
myTurtle.imageContainer = new createjs.Container();
|
|
this.stage.addChild(myTurtle.imageContainer);
|
|
myTurtle.penstrokes = new createjs.Bitmap();
|
|
this.stage.addChild(myTurtle.penstrokes);
|
|
|
|
var turtleImage = new Image();
|
|
i %= 10;
|
|
myTurtle.container = new createjs.Container();
|
|
this.stage.addChild(myTurtle.container);
|
|
myTurtle.container.x = this.turtleX2screenX(myTurtle.x);
|
|
myTurtle.container.y = this.turtleY2screenY(myTurtle.y);
|
|
|
|
var hitArea = new createjs.Shape();
|
|
hitArea.graphics.beginFill('#FFF').drawEllipse(-27, -27, 55, 55);
|
|
hitArea.x = 0;
|
|
hitArea.y = 0;
|
|
myTurtle.container.hitArea = hitArea;
|
|
|
|
function __processTurtleBitmap(turtles, name, bitmap, startBlock) {
|
|
myTurtle.bitmap = bitmap;
|
|
myTurtle.bitmap.regX = 27 | 0;
|
|
myTurtle.bitmap.regY = 27 | 0;
|
|
myTurtle.bitmap.cursor = 'pointer';
|
|
myTurtle.container.addChild(myTurtle.bitmap);
|
|
|
|
myTurtle.createCache();
|
|
|
|
myTurtle.startBlock = startBlock;
|
|
if (startBlock != null) {
|
|
startBlock.updateCache();
|
|
myTurtle.decorationBitmap = myTurtle.bitmap.clone();
|
|
startBlock.container.addChild(myTurtle.decorationBitmap);
|
|
myTurtle.decorationBitmap.name = 'decoration';
|
|
var bounds = startBlock.container.getBounds();
|
|
|
|
// Race condition with collapse/expand bitmap generation.
|
|
if (startBlock.expandBitmap == null) {
|
|
var offset = 75;
|
|
} else {
|
|
var offset = 40;
|
|
}
|
|
|
|
myTurtle.decorationBitmap.x = bounds.width - offset * startBlock.protoblock.scale / 2;
|
|
|
|
myTurtle.decorationBitmap.y = 35 * startBlock.protoblock.scale / 2;
|
|
myTurtle.decorationBitmap.scaleX = myTurtle.decorationBitmap.scaleY = myTurtle.decorationBitmap.scale = 0.5 * startBlock.protoblock.scale / 2
|
|
startBlock.updateCache();
|
|
}
|
|
|
|
turtles.refreshCanvas();
|
|
};
|
|
|
|
if (this._drum) {
|
|
var artwork = DRUMSVG;
|
|
} else {
|
|
var artwork = TURTLESVG;
|
|
}
|
|
|
|
if (sugarizerCompatibility.isInsideSugarizer()) {
|
|
this._makeTurtleBitmap(artwork.replace(/fill_color/g, sugarizerCompatibility.xoColor.fill).replace(/stroke_color/g, sugarizerCompatibility.xoColor.stroke), 'turtle', __processTurtleBitmap, startBlock);
|
|
} else {
|
|
this._makeTurtleBitmap(artwork.replace(/fill_color/g, FILLCOLORS[i]).replace(/stroke_color/g, STROKECOLORS[i]), 'turtle', __processTurtleBitmap, startBlock);
|
|
}
|
|
|
|
myTurtle.color = i * 10;
|
|
myTurtle.canvasColor = getMunsellColor(myTurtle.color, DEFAULTVALUE, DEFAULTCHROMA);
|
|
var turtles = this;
|
|
|
|
myTurtle.container.on('mousedown', function (event) {
|
|
if (turtles._rotating) {
|
|
return;
|
|
}
|
|
|
|
var offset = {
|
|
x: myTurtle.container.x - (event.stageX / turtles.scale),
|
|
y: myTurtle.container.y - (event.stageY / turtles.scale)
|
|
}
|
|
|
|
myTurtle.container.on('pressmove', function (event) {
|
|
if (myTurtle.running) {
|
|
return;
|
|
}
|
|
myTurtle.container.x = (event.stageX / turtles.scale) + offset.x;
|
|
myTurtle.container.y = (event.stageY / turtles.scale) + offset.y;
|
|
myTurtle.x = turtles.screenX2turtleX(myTurtle.container.x);
|
|
myTurtle.y = turtles.screenY2turtleY(myTurtle.container.y);
|
|
turtles.refreshCanvas();
|
|
});
|
|
});
|
|
|
|
myTurtle.container.on('click', function (event) {
|
|
// If turtles listen for clicks then they can be used as buttons.
|
|
console.log('--> [click' + myTurtle.name + ']');
|
|
turtles.stage.dispatchEvent('click' + myTurtle.name);
|
|
});
|
|
|
|
myTurtle.container.on('mouseover', function (event) {
|
|
myTurtle.bitmap.scaleX = 1.2;
|
|
myTurtle.bitmap.scaleY = 1.2;
|
|
myTurtle.bitmap.scale = 1.2;
|
|
turtles.refreshCanvas();
|
|
});
|
|
|
|
myTurtle.container.on('mouseout', function (event) {
|
|
myTurtle.bitmap.scaleX = 1;
|
|
myTurtle.bitmap.scaleY = 1;
|
|
myTurtle.bitmap.scale = 1;
|
|
turtles.refreshCanvas();
|
|
});
|
|
|
|
document.getElementById('loader').className = '';
|
|
setTimeout(function () {
|
|
if (blkInfoAvailable) {
|
|
myTurtle.doSetHeading(infoDict['heading']);
|
|
myTurtle.doSetPensize(infoDict['pensize']);
|
|
myTurtle.doSetChroma(infoDict['grey']);
|
|
myTurtle.doSetValue(infoDict['shade']);
|
|
myTurtle.doSetColor(infoDict['color']);
|
|
}
|
|
}, 1000);
|
|
this.refreshCanvas();
|
|
};
|
|
|
|
this._makeTurtleBitmap = function (data, name, callback, extras) {
|
|
// Async creation of bitmap from SVG data
|
|
// Works with Chrome, Safari, Firefox (untested on IE)
|
|
var img = new Image();
|
|
var turtles = this;
|
|
|
|
img.onload = function () {
|
|
complete = true;
|
|
var bitmap = new createjs.Bitmap(img);
|
|
callback(turtles, name, bitmap, extras);
|
|
};
|
|
|
|
img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(data)));
|
|
};
|
|
|
|
this.screenX2turtleX = function (x) {
|
|
return x - (this._canvas.width / (2.0 * this.scale));
|
|
};
|
|
|
|
this.screenY2turtleY = function (y) {
|
|
return this.invertY(y);
|
|
};
|
|
|
|
this.turtleX2screenX = function (x) {
|
|
return (this._canvas.width / (2.0 * this.scale)) + x;
|
|
};
|
|
|
|
this.turtleY2screenY = function (y) {
|
|
return this.invertY(y);
|
|
};
|
|
|
|
this.invertY = function (y) {
|
|
return this._canvas.height / (2.0 * this.scale) - y;
|
|
};
|
|
|
|
this.markAsStopped = function () {
|
|
for (var turtle in this.turtleList) {
|
|
this.turtleList[turtle].running = false;
|
|
}
|
|
};
|
|
|
|
this.running = function () {
|
|
for (var turtle in this.turtleList) {
|
|
if (this.turtleList[turtle].running) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
};
|
|
|
|
|
|
// Queue entry for managing running blocks.
|
|
function Queue (blk, count, parentBlk, args) {
|
|
this.blk = blk;
|
|
this.count = count;
|
|
this.parentBlk = parentBlk;
|
|
this.args = args
|
|
};
|
|
|
|
|
|
function hex2rgb (hex) {
|
|
var bigint = parseInt(hex, 16);
|
|
var r = (bigint >> 16) & 255;
|
|
var g = (bigint >> 8) & 255;
|
|
var b = bigint & 255;
|
|
|
|
return 'rgba(' + r + ',' + g + ',' + b + ',1)';
|
|
};
|