loading...

Coding Hints. Part II: Drawing

codeguppy profile image Adrian ・7 min read

codeguppy.com is a great environment for graphical based activities using both cartesian and turtle graphics. Please refer to this page for a quick overview of graphical based commands:

Alt Text

About canvas

In codeguppy.com, the graphical canvas is 800 x 600 pixels.
The system is automatically initializing the width and height variables with the dimensions of the canvas

It is recommended to use these variables in your program instead of hardcoding constants (whenever is possible).

println(width);
println(height);
Enter fullscreen mode Exit fullscreen mode

Clearing the canvas

clear() is used to clear the drawing canvas. This function is very useful for animations, inside the loop() event, to clear the frame before the next draw.

clear();
Enter fullscreen mode Exit fullscreen mode

Background color

The background command is used to set the background color of the canvas.

💡 The background command is not erasing the shapes drawn on the canvas. To erase the canvas, use clear() instead.

Set the background color to a built-in color specified as a string

background("navy");
Enter fullscreen mode Exit fullscreen mode

Set the background color to a color specified as a hex "#RRGGBB" string

background("#F012D3");
Enter fullscreen mode Exit fullscreen mode

Set the background color to a gray color (0 - black, 255 - white)

background(255);
Enter fullscreen mode Exit fullscreen mode

Note: In codeguppy.com you can set even an image as the background. Please refer to the "Games" page for more details about how to set an image as a background.

Drawing shapes

Draw a circle at coordinates 400 x 300 and radius of 200 pixels

circle(400, 300, 200);
Enter fullscreen mode Exit fullscreen mode

Draw an ellipse at coordinates 400 x 300 and width and height of 300 x 200 pixels

ellipse(400, 300, 300, 200);
Enter fullscreen mode Exit fullscreen mode

Draw a rectangle having the top-left corner at coordinates 400 x 300 and width and height of 300 x 200 pixels

rect(400, 300, 300, 200);
Enter fullscreen mode Exit fullscreen mode

Draw a line between coordinates 400 x 300 and 500 x 500

line(400, 300, 500, 500);
Enter fullscreen mode Exit fullscreen mode

Draw a triangle by specifying each corner coordinates

triangle(400, 100, 200, 400, 600, 500);
Enter fullscreen mode Exit fullscreen mode

Draw an arc

To draw an arc, you specify the coordinates as for an ellipse (center position, width and height) and in addition you specify the start and end angle.

arc(400, 300, 300, 200, 0, 180);
Enter fullscreen mode Exit fullscreen mode

Draw a point at coordinates 400 x 300

point(400, 300);
Enter fullscreen mode Exit fullscreen mode

Draw text JavaScript at coordinates 400 x 300

text('JavaScript', 400, 300);
Enter fullscreen mode Exit fullscreen mode

Shape settings

Note: Once set, these settings will be applied to all successive shape drawn on the canvas

Set the size of text to 20

textSize(20);

text("JavaScript", 400, 300);
Enter fullscreen mode Exit fullscreen mode

Set "Magenta" as the color to fill shapes

fill('Magenta');

circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Set "Teal" as the color to draw shapes

stroke('Teal');

circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Set the line thickness to 2 px

strokeWeight(2);

circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Draw empty shapes, without fill color

noFill();

circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Draw shapes without an outline

noStroke();

fill("lightblue");
circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Turtle Graphics

codeguppy.com allows you to combine cartesian graphics with turtle graphics.

When working with Turtle Graphics, you can use the default turtle (recommended for beginners and regular programs) or create additional turtles (for complex programs).

Working with the default Turtle

To use the default turtle, all you need to do is to use the following global instructions.

Reset the default turtle to home position

home();
Enter fullscreen mode Exit fullscreen mode

Sets to Red the pen color of the default turtle

pencolor("Red");
Enter fullscreen mode Exit fullscreen mode

Sets to 2 the pen size of the default turtle

pensize(2);
Enter fullscreen mode Exit fullscreen mode

Put the pen on the paper. The turtle will draw.

pendown();
Enter fullscreen mode Exit fullscreen mode

Raise the pen from the paper. The turtle will advance but not draw

penup();
Enter fullscreen mode Exit fullscreen mode

Move the turtle to an arbitrary position on the canvas

setposition(100, 100);
Enter fullscreen mode Exit fullscreen mode

Turns the default turtle to the left by the number of specified degrees

left(30);
Enter fullscreen mode Exit fullscreen mode

Turns the default turtle to the right by 30 degrees

right(30);
Enter fullscreen mode Exit fullscreen mode

Sets the turtle heading (direction) to an arbitrary angle

setheading(180);
Enter fullscreen mode Exit fullscreen mode

Moves the turtle forward by number of specified pixels.

Note: The turtle moves in the direction that was previosly set with left, right or setheading. If the pen is on the paper, the turtle will draw.

forward(100);
Enter fullscreen mode Exit fullscreen mode

Moves the turtle back by number of specified pixels.

Note: The turtle moves in the oposite direction than would move with forward

back(100);
Enter fullscreen mode Exit fullscreen mode

Retrieve the x and y position of the default turtle as an array of 2 numbers

let p = position();

println(p[0]);
println(p[1]);
Enter fullscreen mode Exit fullscreen mode

Retrieve the default turtle direction in degrees

let angle = heading();

println(angle);
Enter fullscreen mode Exit fullscreen mode

Working with multiple turtles

In complex programs, you may find useful to work with multiple turtles, since each of them maintains their own state such as position, color, etc.

Create multiple turtles

let t1 = createTurtle();
let t2 = createTurtle();

t1.pencolor("Red");
t1.forward(100);

t2.pencolor("Blue");
t2.right(90);
t2.forward(100);
Enter fullscreen mode Exit fullscreen mode

Get the default turtle

let t = getDefaultTurtle();
t.forward(100);
Enter fullscreen mode Exit fullscreen mode

Colors

As observed in the above examples, codeguppy.com allow users to specify colors in a variaty of ways. In this way, you can use the most convenient method for your program.

Named colors

There are a variaty of colors with predefined names in codeguppy.com You can explore all of them on the "Backgrounds" pallete.

fill("Red");
circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

RGB / HTML style colors

When predefined colors are not enough, you can create any color by specifying the Red, Green and Blue ammounts. You can pass these colors as strings to fill and stroke functions using the #RRGGBB format:

fill("#F3E2B5");
circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Quick gray colors

If you need to quickly create a shade of gray, just pass a number from 0 to 255 to any function that expects a color such as fill or stroke

fill(100);
circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Colors using the color() function

Another way to create a color is by using the color function and the R, G, B ammounts. These ammounts are in the range of 0 to 255

let myColor = color(100, 200, 150);
fill(myColor);

circle(400, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Changing to HSB mode

By default, codeguppy.com color system is using the RGB mode, where colors are specified by R, G, B ammounts (as seen above).
However, advanced users can switch to HSB mode, where colors are specified by Hue, Saturation and Brightness.

In HSB mode, the values for color function are in the interval 0 - 360

colorMode(HSB);

let c1 = color(100, 50, 300);
fill(c1);
circle(300, 300, 50);

let c2 = color(100, 300, 300);
fill(c2);
circle(500, 300, 50);
Enter fullscreen mode Exit fullscreen mode

Changing back to RGB mode

colorMode(RGB);
Enter fullscreen mode Exit fullscreen mode

Angles

All the trigonometric functions, as well as certain drawing functions such as arc are working with angles.

To appeal to young coders and beginners, all angles in codeguppy.com are in "DEGREES" by default.

However, advanced users can switch to "RADIANS" mode by using angleMode. Don't forget to switch back to "DEGREES" when done working with RADIANS.

angleMode(RADIANS);
arc(400, 150, 300, 200, 0, PI);

angleMode(DEGREES);
arc(400, 350, 300, 200, 0, 180);
Enter fullscreen mode Exit fullscreen mode

Using trigonometric functions

Via the p5.js library, codeguppy.com offers users a series of easy to use trigonometric functions such as sin, cos, etc.

textSize(40);
let x = 0;

function loop()
{
    let y = 300 + 50 * sin(frameCount);
    x++;

    clear();
    text("Hello, World", x, y);
}
Enter fullscreen mode Exit fullscreen mode

Animations

To implement animations, codeguppy.com offers users a method similar to the one use by "cartoons": think of your animation as a series of frames! All you have to do is to draw the first frame, then erase and draw the second frame in a slightly different position, and so on!

loop() is at the base of animations

In codeguppy.com, function loop() is special. All you have to do is to define this function in your code, and the codeguppy.com engine will run it for you up to 60 times per second! There is no need to call it yourself.

Move an horizontal line on the screen

let y = 0;

function loop()
{
    // Clear the frame
    clear();

    // Draw the frame
    line(0, y, 800, y);

    // Update the state
    y++;
    if (y > 600)
        y = 0;
}
Enter fullscreen mode Exit fullscreen mode

Bounce a circle on the screen

let x = 400;
let y = 300;

let dx = 1;
let dy = 1;

let speed = 3;

function loop()
{
    // Clear the frame
    clear();

    // Draw the frame
    circle(x, y, 10);

    // Update the state
    x += speed * dx;
    y += speed * dy;

    if (x < 0 || x > width)
        dx *= -1;

    if (y < 0 || y > height)
        dy *= -1;
}
Enter fullscreen mode Exit fullscreen mode

Change the default frame rate

frameRate(30);
textSize(40);

let n = 0;

function loop()
{
    clear();
    text(n, 400, 300);

    n++;
}
Enter fullscreen mode Exit fullscreen mode

Obtain the frame rate

function loop()
{
    clear();
    text(frameRate(), 400, 300);
}
Enter fullscreen mode Exit fullscreen mode

codeguppy.com is using the p5.js library at runtime. Advanced users can leverage almost the entire p5.js functionality. If you are familiar with p5.js, please check codeguppy for p5.js connoisseurs to see how to properly use it in your codeguppy.com programs.


This article is part of a series of mini-articles containing JavaScript coding hints applicable to codeguppy.com environment.

Discussion

pic
Editor guide