Solved: see answer below
Hi everyone.
I’m trying to adapt the nice Yutaka Kachi’s Turtle Graphics project (https://ycatch.github.io/p5.turtle.js/) for Processing in p5.js mode. I’d like that my students could program the turtle inside Processing IDE. The turtle moves correctly but its doe not draw any line on the offscreen buffer used by the project (Turtle class) and instancianted with createGraphics (or maybe it’s the offscreen buffer that isn’t update by draw(). Any idea why the path of the turtle is not drawn on screen (see code below)?
Thanks a lot! 
Laurent
Here is the adapted code I’ve got into the sketch:
new added project library (inside ‘libraries’ subfolder)
p5.turtle.js
/** Example of turtle graphics for p5.js.
Copyright 2015 Yutaka Kachi released under the MIT license.
*/
var turtleSprite;
var turtles_path = []; // array of Turtle objects
var pathPointer = 0;
/** Turtle Data */
function TBody() {
this.x = 200;
this.y = 60;
this.step = 3;
this.stepAngle = Math.PI / 36;
this.angleInRadians = 0;
this.penDown = false;
this.penColor = "#000000";
this.lineWidth = 2;
};
/** Turtle class */
function Turtle() {
var body = new TBody();
var tPlane; // graphic plane for pen layer
turtleSprite = createSprite(0, 0, 56, 64);
turtleSprite.addAnimation("moving", "images/turtle_1.png", "images/turtle_4.png");
turtleSprite.changeAnimation("moving");
this.tPlane = createGraphics(width, height); // pen layer
for (var prop in body) {
this[prop] = body[prop];
}
this.color = {
black : "#000000",
gray: "#808080",
lightgray: "#C0C0C0",
red: "#ff0000",
green: "#00ff00",
blue: "#0000ff",
yellow: "#ffff00",
magenta: "#ff00ff",
aqua: "#00ffff",
white: "#ffffff"
};
this.draw = function(){
background(200);
this.draw2(pathPointer);
image(this.tPlane, 0 , 0);
drawSprites();
pathPointer += 1;
if (pathPointer >= turtles_path.length) {
pathPointer = 0;
this.tPlane.fill(200);
this.tPlane.noStroke();
this.tPlane.rect(0, 0, width, height);
noLoop();
}
}
this.forward = function(length) {
var x0 = this.x;
var y0 = this.y;
var xx = sin(this.angleInRadians);
var yy = cos(this.angleInRadians);
var count = abs(int(length / this.step));
var dir = 1;
if(length < 0) {dir = -1};
for(var i=0; i < count - 1; i++) {
this.x += dir * this.step * xx;
this.y += dir * this.step * yy;
this.copy();
}
this.x = x0 + length * xx;
this.y = y0 + length * yy;
this.copy();
};
this.back = function(length) {
this.forward(-length);
};
this.left = function(angleInDegrees) {
var angle0 = this.angleInRadians;
var targetAngle = angleInDegrees * Math.PI / 180.0;
var count = abs(int(targetAngle / this.stepAngle));
var dir = 1;
if(targetAngle < 0) {dir = -1};
for(var i=0; i < count - 1; i++) {
this.angleInRadians += dir * this.stepAngle;
this.copy();
}
this.angleInRadians = angle0 + targetAngle;
this.copy();
};
this.right = function(angleInDegrees) {
this.left(-angleInDegrees);
};
// copy TBody object
this.copy = function() {
turtles_path.push(new TBody());
var target = turtles_path[turtles_path.length - 1];
for (var prop in this) {
target[prop] = this[prop];
}
};
// drawing turtle in loop
this.draw2 = function(pointer) {
var target = turtles_path[pointer];
// draw path by Pen
if (target.penDown) {
this.tPlane.strokeWeight(target.lineWidth);
this.tPlane.stroke(target.penColor);
var nextPointer = pointer + 1;
if(nextPointer >= turtles_path.length) {
nextPointer = 0;
}
this.tPlane.line(target.x, target.y, turtles_path[nextPointer].x, turtles_path[nextPointer].y);
}
// draw turtle by sprite
turtleSprite.rotation = target.angleInRadians * -180 / Math.PI + 180;
turtleSprite.position.x = target.x;
turtleSprite.position.y = target.y;
};
};
Main script (into main folder): turtle.js
var turtle;
function setup() {
canvas = createCanvas(480, 360);
background(100);
turtle = new Turtle();
turtle.x = 120;
turtle.y = 150;
turtle.forward(141);
turtle.left(135);
turtle.forward(100);
turtle.left(90);
turtle.forward(100);
}
function draw() {
turtle.draw();
}
And finally the index.html
<html>
<head>
<meta charset="UTF-8">
<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" type="text/javascript" src="libraries/p5.play_patch119.js"></script>
<script language="javascript" type="text/javascript" src="libraries/p5.turtle.js"></script>
<script language="javascript" type="text/javascript" src="turtle1.js"></script>
<!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
<!-- This line removes any default padding and style.
You might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
: that seems very interesting. The only limitation for us is that we’d like to program with Javascript and this project is developped in Java.