Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Mini Turtle</title>On appelle la bibliothèque JQUERY.
Cette biblothèque rajoute des fonctions de programmation.
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>Mini Turtle</h1>
<div>
<h4>Les fonctions</h4>On regroupe les instructions dans une table avec les commandes de style du tableau.
Dans une table <tr> est la balise pour les lignes et <td> pour les colonnes.
Donc cette table a 2 lignes et 13 colonnes.
<table style="border-collapse: collapse">
<tr>
<td style=" border: 1px solid black">forward(d)</td>
<td style=" border: 1px solid black">right(a)</td>
<td style=" border: 1px solid black">left(a)</td>
<td style=" border: 1px solid black">goto(x,y)</td>
<td style=" border: 1px solid black">clear()</td>
<td style=" border: 1px solid black">penup()</td>
<td style=" border: 1px solid black">pendown()</td>
<td style=" border: 1px solid black">reset()</td>
<td style=" border: 1px solid black">width(ep)</td>
<td style=" border: 1px solid black">colour(r,g,b,a)</td>
<td style=" border: 1px solid black">write(text)</td>
<td style=" border: 1px solid black">hideTurtle()</td>
<td style=" border: 1px solid black">showTurtle()</td>
</tr>
<tr>
<td style=" border: 1px solid black">forward(d)</td>
<td style=" border: 1px solid black">right(a)</td>
<td style=" border: 1px solid black">left(a)</td>
<td style=" border: 1px solid black">goto(x,y)</td>
<td style=" border: 1px solid black">clear()</td>
<td style=" border: 1px solid black">penup()</td>
<td style=" border: 1px solid black">pendown()</td>
<td style=" border: 1px solid black">reset()</td>
<td style=" border: 1px solid black">width(ep)</td>
<td style=" border: 1px solid black">colour(r,g,b,a)</td>
<td style=" border: 1px solid black">write(text)</td>
<td style=" border: 1px solid black">hideTurtle()</td>
<td style=" border: 1px solid black">showTurtle()</td>
</tr>
</table>
</div>
On crée une nouvelle division avec une zone de texte, textarea, pour écrire le code javascript.
On crée aussi un bouton, input, pour exécuter le code.
<div>
<h4>Instructions</h4>
<textarea id="instructions" cols="72" rows="18" style="resize:none">
function carre(cote) {
for(k = 1; k <5; k ++) {
forward(cote);
right(90);
};
}
function demo() {
hideTurtle();
colour(0,0,255,1);
for(s = 100; s > 0; s -= 10) {
carre(s);
right(36);
}
}
demo()
</textarea><br>
<input type='button' value='Exécuter' onClick="command()">
</div>
On crée une nouvelle division pour afficher une fenêtre graphique avec la balise canvas.
On utilisera un code javascript pour dessiner à l'intérieur.
<div>
<h4>Fenêtre graphique</h4>
<canvas id="turtlecanvas" width="600" height="300" style="border: 2px solid red"></canvas>
<canvas id="imagecanvas" width="600" height="300" style="display:none"></canvas>
</div>
Le code source du programme en JavaScript débute ici.
<script>
C'est une fonction Jquery (en général on utilise getElementById()) qui va permettre d'aller chercher et cibler l'élément <canvas>
identifié par son attribut id unique (ici imagecanvas et turtlecanvas), puis la méthode getContext() de l'élément ainsi récupéré pour
savoir dans quel contexte de dessin (2D ou 3D), le script va pouvoir agir, et de quelles fonctions il pourra disposer.
Le contexte sera l'élément central de gestion de Canvas.
var imageCanvas = $('#imagecanvas')[0];
var imageContext = imageCanvas.getContext('2d');
var turtleCanvas = $('#turtlecanvas')[0];
var turtleContext = turtleCanvas.getContext('2d');
var turtle = undefined;
On dédinit l'objet turtle.
On initialise le <canvas> où on fera les dessins.
function initialise() {
turtle = { pos: {
x: 0,
y: 0
},
angle: 0,
penDown: true,
width: 1,
visible: true,
colour: {r: 0, g: 0, b: 0, a: 1},
};
imageContext.lineWidth = turtle.width;
imageContext.strokeStyle = "black";
imageContext.globalAlpha = 1;
imageContext.textAlign = "center";
imageContext.textBaseline = "middle";
turtleContext.globalCompositeOperation = 'destination-over';
}
function centerCoords (context) {
var width = context.canvas.width;
var height = context.canvas.height;
context.translate(width/2, height/2);
context.transform(1, 0, 0, -1, 0, 0);
}
On utilise le deuxième canvas pour la tortue (le triangle vert).
function draw() {
clearContext(turtleContext);
if (turtle.visible) {
var x = turtle.pos.x;
var y = turtle.pos.y;
var w = 10;
var h = 15;
turtleContext.save();
centerCoords(turtleContext);
turtleContext.translate(x, y);
turtleContext.rotate(-turtle.angle);
turtleContext.translate(-x, -y);
turtleContext.beginPath();
turtleContext.moveTo(x - w/2, y);
turtleContext.lineTo(x + w/2, y);
turtleContext.lineTo(x, y + h);
turtleContext.closePath();
turtleContext.fillStyle = "green";
turtleContext.fill();
turtleContext.restore();
}
turtleContext.drawImage(imageCanvas, 0, 0, 600, 300, 0, 0, 600, 300);
}
On crée les fonctions de notre mini Turtle.
function clear() {
clearContext(imageContext);
draw();
}
function clearContext(context) {
context.save();
context.setTransform(1,0,0,1,0,0);
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.restore();
}
function reset() {
initialise();
clear();
draw();
}
function forward(distance) {
imageContext.save();
centerCoords(imageContext);
imageContext.beginPath();
var x = turtle.pos.x;
var y = turtle.pos.y;
imageContext.moveTo(x, y);
var cosAngle = Math.cos(turtle.angle);
var sinAngle = Math.sin(turtle.angle)
var newX = x + sinAngle * distance;
var newY = y + cosAngle * distance;
imageContext.lineTo(newX, newY);
turtle.pos.x = newX;
turtle.pos.y = newY;
if (turtle.penDown) {
imageContext.stroke();
}
imageContext.restore();
draw();
}
function hideTurtle() {
turtle.visible = false;
draw();
}
function showTurtle() {
turtle.visible = true;
draw();
}
function penup() { turtle.penDown = false; }
function pendown() { turtle.penDown = true; }
function right(angle) {
turtle.angle += degToRad(angle);
draw();
}
function left(angle) {
turtle.angle -= degToRad(angle);
draw();
}
function goto(newX,newY) {
imageContext.save();
centerCoords(imageContext);
imageContext.beginPath();
var x = turtle.pos.x;
var y = turtle.pos.y;
imageContext.moveTo(x, y);
imageContext.lineTo(newX, newY);
turtle.pos.x = newX;
turtle.pos.y = newY;
if (turtle.penDown) {
imageContext.stroke();
}
imageContext.restore();
draw();
}
function angle(angle) {
turtle.angle = degToRad(angle);
}
function degToRad(deg) {
return deg / 180 * Math.PI;
}
function radToDeg(deg) {
return deg * 180 / Math.PI;
}
function width(w) {
turtle.width = w;
imageContext.lineWidth = w;
}
function write(msg) {
imageContext.save();
centerCoords(imageContext);
imageContext.translate(turtle.pos.x, turtle.pos.y);
imageContext.transform(1, 0, 0, -1, 0, 0);
imageContext.translate(-turtle.pos.x, -turtle.pos.y);
imageContext.fillText(msg, turtle.pos.x, turtle.pos.y);
imageContext.restore();
draw();
}
function colour (r,g,b,a) {
imageContext.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
turtle.colour.r = r;
turtle.colour.g = g;
turtle.colour.b = b;
turtle.colour.a = a;
}
Grace à une fonction Jquery, on récupère le code javascript de la zone de texte.
function command() {
var definitionsText = $('#instructions').val();
eval(definitionsText);
}
reset();
</script>
</body>
</html>