Hi community,
I want to share with you a booklet with small JavaScript programs for young kids. These programs can be used as part of hour of code or with any other occasion to introduce young kids to the wonderful world of coding.
The programs are possible due to the great processing API.
Direct PDF download:
Enjoy!
P.S. Please leave a comment or sent a tweet if you find this book useful in your daily activities.
Hi,
Nice work! 
One single suggestion I think is that these examples don’t show what exactly code is. You could recreate these with a vector graphics software like Inkscape or pixel like with Gimp.
The fact that you are drawing each shape by giving them coordinates exactly as you would do with a specific software doesn’t show the full power of programming (it’s something that beginners do a lot : repetition).
Instead introducing some random behavior or loops to speed the process might be more interesting.
Anyway maybe that for very young kids, it’s much simpler to start with simple shapes 
Have a nice day!
Beautiful, clear images and clear code.
I like it that’s one project per page. So it’s very clean and beautiful layout.
The question of programming is a good point. It depends on the age of the kids.
void setup() {
size(600, 600);
background(0);
}
void draw() {
background(0);
stroke(255);
for (int i = 0; i<= 50; i++) {
line(i*5+width/2-200, 400+i,
i*42+width/2-290, 100);
}
} //
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
@jeremydouglass That’s so cool! Thanks for the feedback and for the educational related tips you provided! I totally appreciate them and consider them for a future project!
P.S. On the short term, I plan to update the booklet with more details about the graphics system and colors. I will provide a new version once available.
Thanks again.
@Chrisir Thanks for the feedback! Indeed this booklet is for small kids. The features you suggest makes total sense as a natural progression of this booklet! Thanks again!
