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:
- About canvas
- Clearing the canvas
- Background color
- Drawing shapes
- Shape settings
- Turtle Graphics
- Colors
- Angles
- Animations
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);
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();
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");
Set the background color to a color specified as a hex "#RRGGBB" string
background("#F012D3");
Set the background color to a gray color (0 - black, 255 - white)
background(255);
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);
Draw an ellipse at coordinates 400 x 300 and width and height of 300 x 200 pixels
ellipse(400, 300, 300, 200);
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);
Draw a line between coordinates 400 x 300 and 500 x 500
line(400, 300, 500, 500);
Draw a triangle by specifying each corner coordinates
triangle(400, 100, 200, 400, 600, 500);
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);
Draw a point at coordinates 400 x 300
point(400, 300);
Draw text JavaScript at coordinates 400 x 300
text('JavaScript', 400, 300);
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);
Set "Magenta" as the color to fill shapes
fill('Magenta');
circle(400, 300, 100);
Set "Teal" as the color to draw shapes
stroke('Teal');
circle(400, 300, 100);
Set the line thickness to 2 px
strokeWeight(2);
circle(400, 300, 100);
Draw empty shapes, without fill color
noFill();
circle(400, 300, 100);
Draw shapes without an outline
noStroke();
fill("lightblue");
circle(400, 300, 100);
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();
Sets to Red the pen color of the default turtle
pencolor("Red");
Sets to 2 the pen size of the default turtle
pensize(2);
Put the pen on the paper. The turtle will draw.
pendown();
Raise the pen from the paper. The turtle will advance but not draw
penup();
Move the turtle to an arbitrary position on the canvas
setposition(100, 100);
Turns the default turtle to the left by the number of specified degrees
left(30);
Turns the default turtle to the right by 30 degrees
right(30);
Sets the turtle heading (direction) to an arbitrary angle
setheading(180);
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);
Moves the turtle back by number of specified pixels.
Note: The turtle moves in the oposite direction than would move with forward
back(100);
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]);
Retrieve the default turtle direction in degrees
let angle = heading();
println(angle);
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);
Get the default turtle
let t = getDefaultTurtle();
t.forward(100);
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);
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);
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);
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);
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);
Changing back to RGB mode
colorMode(RGB);
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);
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);
}
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;
}
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;
}
Change the default frame rate
frameRate(30);
textSize(40);
let n = 0;
function loop()
{
clear();
text(n, 400, 300);
n++;
}
Obtain the frame rate
function loop()
{
clear();
text(frameRate(), 400, 300);
}
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.
Top comments (0)