CodeGuppy.com: JavaScript environment for young coders

In this article I want to introduce you codeguppy.com – an online coding environment especially designed for young coders, parents and educators.

In order to better understand codeguppy.com let’s first make a journey in time and remember the first microcomputers that started the entire IT revolution. Perhaps you can still remember the Apple II, the ZX-Spectrum, the Commodore 64 or the BBC Micro. Although very primitive by current standards, those early computers were perfect platforms for learning to code.

They provided everything a user needed to make the jump into programming: a language (BASIC), a library of friendly commands and a code editor.

A whole generation of today’s professional developers started their careers by learning to code as kids on those early computers.

The entry path to coding is no longer as simple at is was back then. Modern computing devices are friendlier and easier to use than ever, but their advanced design makes them very difficult to program them.

Introducing CodeGuppy

codeguppy.com is trying to recreate the programming experience of those early machines in a new environment adapted to the modern world. codeguppy.com is offering parents with software engineering background one of the best environments for introducing their kids to coding. codeguppy.com is also a valuable tool in coding clubs and computer science classes.

At a glance, CodeGuppy is an online environment that comes with a modern code editor, a modern language (JavaScript) and a set of kid friendly commands.

What makes JavaScript especially interesting for education is its flexible syntax which makes the language appealing to beginners. When further coupled with a library of graphic oriented functions, JavaScript becomes the perfect language for introducing kids as kids as young as 13 into the wonderful world of programming!

And since codeguppy.com is online, there is nothing to install. You can literally bookmark the code editor in your browser and you can start coding in no time. CodeGuppy works will all modern HTML5 browsers such as Google Chrome, FireFox, Safari and Edge.

CodeGuppy for p5.js connoisseurs

CodeGuppy is based on the popular p5.js, p5.play and p5.scenemanager libraries.

Since CodeGuppy is intended to education, a few extra extensions has been added on top of the above mentioned libraries.

If you used p5.js before and you want to better understand codeguppy.com environment, then you are invited to read the rest of this article.

No setup()

Users familiar with p5.js know that one of the first functions they have to define in their sketch is the setup() function.

With CodeGuppy the p5.js setup() function is no longer required. As an educational environment, CodeGuppy does a few decisions automatically for the program in order to simplify coding for beginners.

For instance, CodeGuppy automatically initiate the canvas to 800x600 resolution. In this way you can focus on writing interesting programs imediately after starting the editor.

Give it a try. Start the codeguppy.com editor and type-in the following line of code:

circle(400, 300, 200);

Gentle introduction to programming

The decision to eliminate the setup() function from codeguppy has been taken in order to allow young coders learn programming in a progressive way.

You can do a lot of cool stuff without functions:

• you can draw with code
• you can learn about decision and looping instructions
• you can work with expressions

Try to copy the following code in the codeguppy.com editor and see the effect:

stroke("Navy");

for(var i = 0; i < 100; i++)
{
    circle(400, 300, i);
}

Of course functions are very important to JavaScript programming. But functions can be introduced later in the curriculum, once the basic knowledge of JavaScript is assimilated.

Enriched drawing API

CodeGuppy enriches the p5.js drawing APIs with a few new functions that are easier to use and understand by young coders.

For example: circle()

Did you know you can have lots of fun with just one function? Checkout this code extracted from the first CodeGuppy lesson.

// #SKETCHNAME Draw with circles
// Draw bear face
circle(400, 300, 200);

// Draw left year
circle(250, 100, 50);
circle(270, 122, 20);

// Draw right year
circle(550, 100, 50);
circle(530, 122, 20);

// Draw left eye
circle(300, 220, 30);
circle(315, 230, 10);

// Draw right eye
circle(500, 220, 30);
circle(485, 230, 10);

// Draw nose
circle(400, 400, 90);
circle(400, 350, 20);

As a matter of fact codeguppy.com is promoting "Drawing with code" activities. These activities are intended for young coders who start text based coding for the first time.

CodeGuppy defaults

CodeGuppy changes a few of the p5.js defaults to different values.

For instance:

• There is no fill color defined upon program initialization. Try to draw a few shapes and you’ll see that they are transparent
• The default angle mode is changed to DEGREES. p5.js sketches uses RADIANS as default.

Example:

background("Navy");
stroke("White");

// Notice that ellipse is transparent
ellipse(400, 300, 300, 300);

5 layers

At codeguppy.com users create different kind of programs:

• games with animated 2D sprites and realistic backgrounds
• creative coding programs
• data input / output math programs

To support all these types of programs in an easy way, CodeGuppy runtime is layering the main canvas into 5 distict layers.

From bottom to top:

• Background layer
• Sprites with .depth <= 0
• Drawing layer
• Sprites with .depth > 0
• HTML widgets

The background layer is drawn at the bottom, and the objects from all the other layers are added on top. Objects from an upper layer may hide the content in a layer below.

This simple program tries to use all the layers exposed by CodeGuppy.

// Layer 1 (Bottom layer)
background('Autumn');

// Layer 2 (sprites with .depth <= 0)
var cat = sprite('cat', 200, 300)
cat.depth = -1;

// Layer 4 (sprites with .depth > 0)
var dog = sprite('dog', 600, 300);
dog.depth = 1;

// Layer 5 (Top layer. HTML5 widgets)
var btn = createButton(650, 560, 100, 30);
btn.setText("Click me");


// Layer 3 (drawing)
fill("White");

function loop()
{
    clear();

    circle(mouseX, mouseY, 100);
}

Setting the background

The background() function operates in the background layer.

The function has also been enriched to accept more values as parameters. For instance, background() can be used with a color or a static background from the assets library.

Note: Because background() operates on the bottom layer only, you cannot use this function to erase the drawing layer inside the loop() event. For that purpose you need to use clear().

background("Hearts");

// background("Pink");

// background("#104210");

function loop()
{
    clear();
    circle(random(width), random(height), 100);
}

Type-in programs

With CodeGuppy, type-in programs are back! Popular in the 70s and 80s, type-in programs were small programs included in magazines or other printed materials that required users to enter them from the keyboard.

Although this method of entering programs is not very time efficient, it is very good in educational terms. Users that type in programs gets comfortable much quicker with the language and eventually learn to program much faster.

Afterall, coding is all about typing programs using the keyboard.

How CodeGuppy enables type-in programs? Very simple: all assets and libraries come included! Users don’t need to focus on project organization or asset management. They only need to open the code editor and type the program.

Educators and parents can leverage this feature and hand over printed code listings to kids so they can exercise typing.

// This program can be found in a magazine...
background('Icebergs');
sprite('santa', 0.9);

stroke("Red")
textSize(30);
text("We wish you a Merry Christmas!", 150, 30);

Built-in assets

CodeGuppy comes with assets built-in. This allows users to focus on writing code, rather than organizing projects or managing assets. This is what enables “type-in” programs.

There are four groups of assets. Each asset has a unique name.

• Backgrounds
• Sprites
• Music
• Sound effects

The following CodeGuppy functions can work with assets. They receive as argument the asset name.

• background()
• sprite()
• music()
• sound()

Because assets need to be pre-loaded before the program is executed, the CodeGuppy environment is parsing the code prior to execution to identify what assets are used by the program in order to load them.

In most cases users use static names with these functions. If variables are used instead, CodeGuppy won’t be able to figure the used assets. In that case users have to call the preload() function as explained later.

background('Scene1');
sprite('plane');
music('8 bit retro');

sound('female_congratulations');

Sprites

CodeGuppy comes with a library of pre-selected sprites. Many of the included sprites are animated. The CodeGuppy runtime takes care of proper animation display by leveraging the p5.play library.

However, for ease of use, a few functions and extensions are built on top of this library.

To load and display a sprite, you only need to call the sprite() function, passing as argument the sprite name.

You can also specify, the size of the sprite, the animation that you want to display and the position on the screen where you want the sprite to be initially displayed. You can obviously change these later.

sprite("plane").velocity.x = 1;

Preloading assets

In majority cases users are using background, music, sound, sprite with static arguments. This allow CodeGuppy environment to determine the assets used by a program and pre-load them automatically.

If however, the user wants to let the code at runtime determine what asset to use, then he must declare all assets used by the program using the preload() function. This can appear in any part of the program although it is recommended to place it at the beginning.

preload("Scene1", "Scene2");

var scene = random(["Scene1", "Scene2"]);
background(scene);

Games and Animations

The most popular way of building games and animations is by implementing the “game loop” pattern. In p5.js sketches, the game loop is implemented via the draw() function.

In CodeGuppy, this function is named loop() instead of draw(). If you’re porting p5.js sketches to CodeGuppy, make sure you rename your draw() function to loop().

Also – since the background() effects are visible on the bottom layer only, you cannot use background() calls inside the loop() to clear the screen. Instead you need to call clear()

var y = 0;

background("Azure");

function loop()
{
    clear();

    circle(400, y, 10);

    y++;

    if (y > height)
        y = 0;
}

Multi-scene games

Scene management is a common topic when building games. Even the most basic games have at least three scenes: an intro scene, the main game scene and the credits scene.

With CodeGuppy, beginners can quickly build these multi-scene games without having to worry about the details of scene management.

The editor itself places each scene in a separate code page. You can define as many scenes as you want. Upon execution the first scene code is executed. To switch the scene, you can use the friendly showScene() function providing the name of the scene you want to jump to.

You can optionally pass arguments to the new scene you’re switching.

To perform initialization actions when a scene is displayed, you can define an enter() function in each scene. This function will be automatically called when that scene is displayed.

Scene Intro

function enter()
{
    background("Scene1");
    textSize(30);
    text("Click to begin...", 300, 570);
}

function mouseClicked()
{
    showScene("Game");
}

Scene Game

background("Scene2");
function loop()
{
    line(pmouseX, pmouseY, mouseX, mouseY);
}

function mouseClicked()
{
    showScene("Credits", [mouseX, mouseY]);
}

Scene Credits

function enter()
{
    background("Hearts2");
    textAlign(CENTER, CENTER);

    textSize(30);
    text("Congratulations", width / 2, height / 2);

    if (PublicVars.Arguments)
    {
        textSize(10);
        text("Last known coordinates: " + PublicVars.Arguments[0] + " x " + PublicVars.Arguments[1], width / 2, height / 2 + 50);
    }
}

function mouseClicked()
{
    showScene("Intro");
}

Modules

As presented before, the code pages from the CodeGuppy editor are mostly used for writing code for scenes.

A second use of the code pages is for defining code modules. This usage is intended for advanced coding. Code modules can be used from the rest of the code via the require() function.

Note: the require() function is executing the code of that module upon each invocation.

Scene Code

var utils = require("Utils");

var r1 = utils.add(100, 200);
println(r1);

var r2 = utils.mult(100, 200);
println(r2);

Module Utils

function add(n1, n2)
{
    return n1 + n2;
}

function mult(n1, n2)
{
    return n1 * n2;
}

Support “text-based output” programs

When teaching coding or when building algorithms / math programs it is very convenient to just print the results on the screen.

CodeGuppy allow users to quickly print numbers and strings via the print() and println() functions.

Note: These functions are printing on the top most layer in a dedicated HTML5 transparent area. This area is scrollable in order to accommodate an arbitrary number of rows. Once the printing layer has been displayed, you cannot hide it… therefore you need to decide ahead of time if you need a text-based output or a graphical output for your program.

Note: Since the printing layer is transparent, you can use the background() function to set a fun background for boring programs.

background("Fabric2");

for(var i = 0; i < 10; i++)
{
    println("i = " + i);
}

Support “INPUT” programs

If you’re building string processing programs, or even some games, you often need to ask for user input. For instance, to enter a long text using the keyboard.

CodeGuppy provides two very simple APIs to display textbox-es and buttons.

The two functions are createTextBox() and createButton(). They operate on the top most layer, therefore they are displayed on top of the graphical canvas.

var edit1 = createEdit(100, 100, 500, 30);
edit1.setText("I love Codeguppy!");

var btn1 = createButton(100, 150, 100, 30);
btn1.setText("Click Me");
btn1.onclick = handleButton1Click;

function handleButton1Click()
{
    var txt = edit1.getText();
    alert(txt);
}

Other APIs

CodeGuppy contains also other useful APIs that help you easily build games and fun applications. For instance users may find particular useful the APIs for collision detection:

• collisionPointCircle(pointX, pointY, circleX, circleY, circleR)
• collisionPointLine(pointX, pointY, lineX1, lineY1, lineX2, lineY2)
• collisionCircleCircle(circle1X, circle1Y, circle1R, circle2X, circle2Y, circle2R)
• collisionCircleRect(circleX, circleY, circleR, rectX, rectY, rectWidth, rectHeight)
• collisionPointRect(pointX, pointY, rectX, rectY, rectWidth, rectHeight)
• collisionRectRect(rect1X, rect1Y, rect1Width, rect1Height, rect2X, rect2Y, rect2Width, rect2Height)

Note: Some collision functions are duplicated for convenience:

• collisionCirclePoint(circleX, circleY, circleR, pointX, pointY)
• collisionLinePoint(lineX1, lineY1, lineX2, lineY2, pointX, pointY)
• collisionRectCircle(rectX, rectY, rectWidth, rectHeight, circleX, circleY, circleR)
• collisionRectPoint(rectX, rectY, rectWidth, rectHeight, pointX, pointY)

Happy coding! Don't forget to check also @codeguppy.com for fun activities.