This is great – thank you so much for sharing it.
I do have one suggestion. I actually began learning my first BASIC programming back in the early 1980s by typing in programs from magazines – with extensive adult help. I also encountered type-in curricula in early Logo programming experiences in elementary school computer labs.
Thinking in numbers was still a challenge, so it was helpful for those numbers to be a) simple and b) patterned. So I would recommend that you consider using scale(10)
and make you base drawing system units less than 100, primarily in increments of 5 or 10, like working with graph paper.
So, for example your mouse head is like this:
triangle(242, 192, 556, 192, 400, 500);
but would instead be:
scale(10);
triangle(25, 20, 55, 20, 40, 50);
Instead of using hex colors like “#c55a11"”, they would be expressed in easy to write and read doubles, like “#336699”, “#000000”, or “#FFFFFF”. Shapes would also be symmetrical where possible to make it easier to reason about their position. And so forth.
Here is a simple example, rewriting the mouse demo with simplified coordinates and colors:
background("#aacc88");
noStroke();
scale(10);
// Head and ears
fill("#cc5511");
triangle(25, 20, 55, 20, 40, 50);
circle(25, 15, 10);
circle(55, 15, 10);
fill("black");
triangle(35, 40, 45, 40, 40, 50);
// Eyes
fill("white");
circle(35, 25, 3);
circle(45, 25, 3);
fill("black");
circle(35, 27, 1);
circle(45, 27, 1);
// Whiskers
stroke("black");
strokeWeight(1);
line(25, 40, 35, 43);
line(25, 50, 35, 46);
line(55, 40, 45, 43);
line(55, 50, 45, 46);
Aside: One odd thing I noticed is that the codeguppy examples appear to use radius-based circles rather than the diameter-based circles used in p5.js, so code cannot be copied between the two without changes.
p5 editor version: https://editor.p5js.org/jeremydouglass/sketches/358h8c_yd