DEV Community

Cover image for Free book: Creative Coding for Kids
Adrian
Adrian

Posted on

Free book: Creative Coding for Kids

In this short post, I'd like to present you a free book (PDF format) that aims at offering a gentle introduction to coding to kids and beginners alike.

The book is called "Creative Coding for Kids" by Tariq Rashid.

Tariq is an extraordinary educator with a big passion for writing. He has been nicely enough to share a free version of his book with codeguppy.com users.

Download PDF

You can download the PDF from:

https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf

The book is using the creative coding way to offer a gentle introduction to JavaScript programming.

The writing style and the provided examples are totally captivating.

The book is aimed at absolute beginners with no prior knowledge into JavaScript or any other programming language.

However, as the book progresses towards more complex examples, even the most experienced programmers will probably find something interesting to learn or have fun with the included examples.

Examples

It is amazing what can be created in just a few lines of code. Just check out these examples:

Noisy stripe

Source code:

noStroke();
fill('purple');
repeat(100, 700, 1, 100, 500, 1, noisy_stripe);

noFill(); stroke(0); strokeWeight(1); rect(0, 0, width-1, height-1);

function noisy_stripe(x, y) 
{
    var x2 = x + (100 * noise(y / 50, x / 50)) - 50;
    var y2 = y + (100 * noise(x / 50, y / 50)) - 50;

    circle(x2, y2, 0.5);
}

To see this code running use this link: https://codeguppy.com/code.html?tariq/ex07

Alien landscape

Source code:

background('black');
colorMode(HSB);

noStroke();
repeat(0, 500, 1, 200, 500, 1, alien_landscape);

noFill(); stroke('white'); strokeWeight(1); rect(0, 0, width-1, height-1);

function alien_landscape(x, y) 
{
    var x2 = x + (y / 2);
    var h = 200 * noise(x / 200, y / 200);
    h += 30 * noise(x / 30, y / 30);
    var y2 = y - h + 50;

    var hue = (h - 180 + 360) % 360;
    var brightness = h*0.75;
    fill(hue, 80, brightness, 0.3);

    circle(x2, y2, 1);
}

To see this code running use this link: https://codeguppy.com/code.html?tariq/ex08

Conclusion

If you are teaching coding to beginners... then this book may be for you.

If you enjoy this book, you may also find author's youtube channel also very interesting: https://www.youtube.com/channel/UCO6iBPzIvUdzxcf87BN24FQ

Top comments (0)