Reference

Canvas

setCanvasSize()

Examples

setCanvasSize(640, 360)

Description

Sets the size of the canvas that all drawings are written to. The first parameter specifies the width in pixels and the second the height. The third parameter is optional and specifies the direction of the y-axis. The constant CARTESIAN can be used to specify a y-axis that is used in maths and a constant of JAVASCRIPT can be used to specify the regular javascript y-axis which moves down the screen. If no value is provided as the third parameter, a default of CARTESIAN is used.

Syntax

setCanvasSize(w, h, yAxisMode)

Parameters

w - The width of the canvas in pixels.

h - The height of the canvas in pixels.

yAxisMode - Optionally used to set the direction of the y-axis. Use the constants CARTESIAN or JAVASCRIPT. CARTESIAN is used as the default value if this parameter is not supplied.


noCanvas()

Examples

noCanvas()

Description

Hides the canvas from the page. This may be useful if you are running a text only Python program.

Syntax

noCanvas()

Parameters

This function takes no parameters.


focusCanvas()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
input("Press ENTER to continue")
focusCanvas()

Description

Places the focus back on the canvas. This is necessary if you wish to receive keyboard events that occur on the canvas and the focus has been moved away. The focus can be moved when a user responds to an input function or clicks away from the canvas. The focus can be returned by the user clicking on the canvas but this function gives you a programmatic way to return focus.

Syntax

focusCanvas()

Parameters

This function takes no parameters.


Basic Shapes

rect()

Examples

# Draw a rectangle at location (10, 20) with a width of 50 and height of 25.
setCanvasSize(100, 100)
rect(10, 20, 50, 25)

Description

Draws a rectangle on the canvas. By default, the first two parameters set the location of the bottom left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function. If the setCanvasSize() function is called and sets the yAxisMode to JAVASCRIPT, then the first two parameters specify the top left corner of the rectangle.

Syntax

rect(x, y, w, h)

Parameters

x - The x coordinate of the rectangle.

y - The y coordinate of the rectangle.

w - The width of the rectangle.

h - The height of the rectangle.


circle()

Examples

# Draw a circle at location (100, 200) with a radius of 50.
setCanvasSize(200, 400)
circle(100, 200, 50)

Description

Draws a circle on the canvas. By default, the first two parameters set the location of the center of the circle, and the third sets the radius. The way these parameters are interpreted, may be changed with the circleMode() function.

Syntax

circle(x, y, radius)

Parameters

x - The x coordinate of the circle.

y - The y coordinate of the circle.

radius - The radius of the circle.


ellipse()

Examples

# Draw an ellipse at location (100, 200) with an X radius of 50 and a Y radius of 100.
setCanvasSize(200, 400)
ellipse(100, 200, 50, 100)

Description

Draws an ellipse (oval) on the canvas. By default, the first two parameters set the location of the center of the circle, the third sets the X radius, and the fourth sets the Y radius. The way these parameters are interpreted, may be changed with the circleMode() function.

Syntax

ellipse(x, y, radiusX, radiusY)

Parameters

x - The x coordinate of the ellipse.

y - The y coordinate of the ellipse.

radiusX - The X radius of the ellipse.

radiusY - The Y radius of the ellipse.


arc()

Examples

# Draw an arc at location (50, 50) with an X radius of 40 and a Y radius of 30. The arc spans from 0 to 270 degrees.
setCanvasSize(100, 100)
arc(50, 50, 40, 30, 0, 270)

Description

Draws an arc (a portion of an ellipse) on the canvas. By default, the first two parameters set the location of the center of the circle, the third sets the X radius, and the fourth sets the Y radius. The fifth parameter is the start angle and the sixth is the end angle. The arc is always drawn clockwise from the start angle to the end angle. The way these parameters are interpreted, may be changed with the circleMode() function. By default the start and end angle are specified in degrees. This can be changed to radians with the angleMode() function.

Syntax

arc(x, y, radiusX, radiusY, startAngle, endAngle)

Parameters

x - The x coordinate of the arc.

y - The y coordinate of the arc.

radiusX - The X radius of the arc.

radiusY - The Y radius of the arc.

startAngle - The starting angle of the arc.

endAngle - The ending angle of the arc.


line()

Examples

# Draw a line starting at (40, 20) and finishing at (60, 40).
setCanvasSize(100, 100)
line(40, 20, 60, 40)
# Draw 3 lines of different colours that give a 3D effect.
setCanvasSize(640, 360)
stroke(0, 0, 0)
line(40, 30, 95, 30)
stroke(120, 120, 120)
line(95, 30, 95, 85)
stroke(255, 255, 255)
line(95, 85, 40, 85)

Description

Draws an line between two points to the screen. By default the line has a width of a single pixel. This can be modified by the strokeWeight() function. The colour of a line can be changed by calling the stroke() function.

Syntax

line(x1, y1, x2, y2)

Parameters

x1 - The x coordinate of the starting point.

y1 - The y coordinate of the starting point.

x2 - The x coordinate of the ending point.

y2 - The y coordinate of the ending point.


point()

Examples

# Draw a point at (40, 20).
setCanvasSize(100, 100)
point(40, 20)
# Draw a blue point at (50, 30) that is 20 pixels in size.
setCanvasSize(100, 100)
stroke(0, 0, 255)
strokeWeight(20)
point(50, 30)

Description

Draws a pixel to the screen at the position given by the two parameters. The first parameter specifies the x position and the second parameter specifies the y position. By default the pixel has a size of a one pixel. This can be modified by the strokeWeight() function. The colour of a point can be changed by calling the stroke() function.

Syntax

point(x, y)

Parameters

x - The x coordinate.

y - The y coordinate.


triangle()

Examples

# Draw a triangle specified by the three points (50, 75), (25, 100), and (75, 100).
setCanvasSize(200, 200)
triangle(50, 75, 25, 100, 75, 100)

Description

Draws a triangle on the canvas specified by three points.

Syntax

triangle(x1, y1, x2, y2, x3, y3)

Parameters

x1 - The x coordinate of the first point.

y1 - The y coordinate of the first point.

x2 - The x coordinate of the second point.

y2 - The y coordinate of the second point.

x3 - The x coordinate of the third point.

y3 - The y coordinate of the third point.


quad()

Examples

# Draw a quad specified by the four points (50, 75), (25, 100), (75, 100), and (100, 75).
setCanvasSize(200, 200)
quad(50, 75, 25, 100, 75, 100, 100, 75)

Description

Draws a quadrilateral (a four sided polygon) on the canvas specified by four points.

Syntax

quad(x1, y1, x2, y2, x3, y3, x4, y4)

Parameters

x1 - The x coordinate of the first point.

y1 - The y coordinate of the first point.

x2 - The x coordinate of the second point.

y2 - The y coordinate of the second point.

x3 - The x coordinate of the third point.

y3 - The y coordinate of the third point.

x4 - The x coordinate of the fourth point.

y4 - The y coordinate of the fourth point.


rectMode()

Examples

setCanvasSize(640, 360)
rectMode(CORNER)
fill(0, 0, 255)
# draw a blue rectangle with rectMode(CORNER)
rect(30, 30, 60, 60)
rectMode(CORNERS)
fill(255, 0, 0)
# draw a red rectangle with rectMode(CORNERS)
rect(30, 30, 60, 60)
setCanvasSize(640, 360)
rectMode(CENTER)
fill(0, 0, 255)
# draw a blue rectangle with rectMode(CENTER)
rect(30, 30, 60, 60)
rectMode(CORNER)
fill(255, 0, 0, 0.5)
# draw a red rectangle with rectMode(CORNER)
rect(30, 30, 60, 60)

Description

Changes the way the rect() function uses the paramters passed to it.

The default mode is CORNER, which indicates that the first two parameters are the coordinates of the bottom left corner, and the third and fourth parameters specify the width and the height. If the setCanvasSize() function is called specifying to set the yAxisMode to JAVASCRIPT, then the first two parameters represent the top left corner.

The mode CORNERS indicates the first two parameters are the coordinates of the bottom left corner, and the third and fourth specify the top right coordinate.

The mode CENTER indicates the first two parameters are the coordinates of the center of the rectangle, and the third and fourth specify the width and height.

Syntax

rectMode(mode)

Parameters

mode - Can be CORNER, CORNERS, or CENTER


circleMode()

Examples

setCanvasSize(640, 360)
circleMode(CENTER)
fill(0, 0, 255)
# draw a blue circle with circleMode(CENTER)
circle(100, 100, 50)
circleMode(CORNER)
fill(255, 0, 0, 0.5)
# draw a red circle with circleMode(CORNER)
circle(100, 100, 50)

Description

Changes the way the circle(), ellipse(), and arc() functions use the paramters passed to them.

The default mode is CENTER, which indicates that the first two parameters are the coordinates of the center of the shape. The remaining parameters refer to the radius for the circle() function, and the X radius and Y radius for the ellipse() and arc() functions.

The mode CORNER indicates the first two parameters are the coordinates of the bottom left corner of the shape. The meaning of any extra parameters remain unchanged.

Syntax

circleMode(mode)

Parameters

mode - Can be CORNER, or CENTER


strokeWeight()

Examples

setCanvasSize(640, 360)
strokeWeight(1)
line(10, 10, 100, 10)
strokeWeight(2)
line(10, 20, 100, 20)
strokeWeight(4)
line(10, 30, 100, 30)
strokeWeight(8)
line(10, 40, 100, 40)

Description

Sets the width of any lines, points and the border around shapes. All widths are specified in pixels.

Syntax

strokeWeight(weight)

Parameters

weight - the weight of the stroke in pixels.


Vertex

beginShape()

Examples

setCanvasSize(400, 400)
fill(200, 90, 90)
beginShape()
vertex(10, 10)
vertex(20, 100)
vertex(60, 110)
vertex(50, 50)
vertex(200, 5)
endShape()

Description

The beginShape(), vertex(), and endShape() functions allow you to create more complex shapes. The beginShape() function starts recording vertices that are added via the vertex() function.

Syntax

beginShape()


vertex()

Examples

setCanvasSize(400, 400)
fill(200, 90, 90)
beginShape()
vertex(10, 10)
vertex(20, 100)
vertex(60, 110)
vertex(50, 50)
vertex(200, 5)
endShape()

Description

The vertex() function adds a point to the list of vertices that will be connected when the endShape() function is called. It takes two parameters, the x and y coordinates of the vertex to add.

Syntax

vertex(x, y)

Parameters

x - The x coordinate of the vertex to add.

y - The y coordinate of the vertex to add.


endShape()

Examples

setCanvasSize(400, 400)
fill(200, 90, 90)
beginShape()
vertex(10, 10)
vertex(20, 100)
vertex(60, 110)
vertex(50, 50)
vertex(200, 5)
endShape()
setCanvasSize(400, 400)
fill(200, 90, 90)
beginShape()
vertex(10, 10)
vertex(20, 100)
vertex(60, 110)
vertex(50, 50)
vertex(200, 5)
endShape(OPEN)

Description

Draws a shape specified by the list of vertices added by calling beginShape() followed by any number of vertex() function calls. By default the entire shape is closed by linking the last vertex back to the first. This can be changed by passing the constant OPEN as a parameter.

Syntax

endShape(mode)

Parameters

mode - CLOSE or OPEN. CLOSE specifies the shape should be closed and is the default where OPEN does not connect the last vertex to the first.


Colour

This section describes how colour is used in the canvas when using graphics functions. For colour related to the console see the setTextColour, setHighlightColour, and clear functions.

background()

Examples

# Draw a yellow rectangle as the background of the canvas.
setCanvasSize(640, 360)
background(255, 255, 0)

Description

Draws a rectangle the size of the canvas. The colour of the rectangle is specifed by the first three parameters representing an RGB colour. The function is typically called as part of loop to clear the canvas each frame. If a fourth parameter is passed it specifies an alpha value ranging from 0 to 1 where 0 is fully transparent and 1 specifies no transparency.

Syntax

background(r, g, b, a)

Parameters

r - The red value of the colour ranging from 0 to 255.

g - The green value of the colour ranging from 0 to 255.

b - The blue value of the colour ranging from 0 to 255.

a - The alpha value of the background ranging from 0 to 1.


fill()

Examples

setCanvasSize(640, 360)
fill(100, 220, 100)
rect(50, 50, 100, 100)

Description

Sets the colour used to fill shapes. The colour is specified using the RGB colour scheme. The first parameter represents the amount of red, the second the amount of green, and the third the amount of blue in the colour. If a fourth parameter is passed it represents the alpha value ranging from 0 to 1.

Syntax

fill(r, g, b, a)

Parameters

r - The red value of the colour ranging from 0 to 255.

g - The green value of the colour ranging from 0 to 255.

b - The blue value of the colour ranging from 0 to 255.

a - The alpha value of the background ranging from 0 to 1.


noFill()

Examples

setCanvasSize(640, 360)
noFill()
rect(50, 50, 100, 100)

Description

Specifies that shapes should not be filled when drawn. If both noStroke() and noFill() are called then nothing will be drawn to the screen.

Syntax

noFill()


stroke()

Examples

setCanvasSize(640, 360)
strokeWeight(5)
stroke(255, 0, 0)
rect(10, 10, 100, 75)

Description

Sets the colour used to draw points, lines, and the border around shapes. The colour is specified using the RGB colour scheme. The first parameter represents the amount of red, the second the amount of green, and the third the amount of blue in the colour. If a fourth parameter is passed it represents the alpha value ranging from 0 to 1.

Syntax

stroke(r, g, b, a)

Parameters

r - The red value of the colour ranging from 0 to 255.

g - The green value of the colour ranging from 0 to 255.

b - The blue value of the colour ranging from 0 to 255.

a - The alpha value of the background ranging from 0 to 1.


noStroke()

Examples

setCanvasSize(640, 360)
noStroke()
rect(50, 50, 100, 100)

Description

Specifies that no stroke should be drawn for points, lines, and borders. If both noStroke() and noFill() are called then nothing will be drawn to the screen.

Syntax

noStroke()


Keyboard

isKeyPressed()

Examples

pyangelo = Image("/samples/images/PyAngelo.png")
setCanvasSize(640, 360)
x = width/2 - 64
y = height/2 - 48
while True:
    background(255, 255, 0)
    drawImage(pyangelo, x, y)
    text("Use the WASD keys to move me around!", 20, 30)
    if isKeyPressed(KEY_W):
        y -= 1
    if isKeyPressed(KEY_A):
        x -= 1
    if isKeyPressed(KEY_S):
        y += 1
    if isKeyPressed(KEY_D):
        x += 1
    sleep(0.005)

Description

Returns True if the key specified by the first parameter is currently pressed, otherwise returns False. Once the key has been pressed the function will continue to return True each time it is called until the key is released. There is a list of constants that can be used in PyAngelo to represent each key for clarity.

Syntax

isKeyPressed(code)

Parameters

code - The code representing a key on the keyboard. See a list of codes.


wasKeyPressed()

Examples

pyangelo = Image("/samples/images/PyAngelo.png")
setCanvasSize(640, 360)
x = width/2 - 64
y = height/2 - 48
while True:
    background(255, 255, 0)
    drawImage(pyangelo, x, y)
    text("Use the WASD keys to move me around!", 20, 30)
    if wasKeyPressed(KEY_W):
        y -= 1
    if wasKeyPressed(KEY_A):
        x -= 1
    if wasKeyPressed(KEY_S):
        y += 1
    if wasKeyPressed(KEY_D):
        x += 1
    sleep(0.005)

Description

Returns True if the key specified by the first parameter has been pressed and not yet released before this function is called. Otherwise, it returns False. Once the key has been pressed and the function has been called, the function will then return False until the key is either pressed again, or if it is being held down the operating system sends another keypressed event. This is different from the isKeyPressed() function which continues to return True when called until the key is released. There is a list of constants that can be used in PyAngelo to represent each key for clarity.

Syntax

wasKeyPressed(code)

Parameters

code - The code representing a key on the keyboard. See a list of codes.


Mouse

mouseX

Description

This variable holds the current horizontal position of the mouse. The value is the number of pixels from the origin (0, 0) of the canvas.

Syntax

mouseX

mouseY

Description

This variable holds the current vertical position of the mouse. The value is the number of pixels from the origin (0, 0) of the canvas.

Syntax

mouseY

mouseIsPressed

Description

This boolean variable is True when the mouse is currently pressed, otherwise it is False.

Syntax

mouseIsPressed


wasMousePressed()

Examples

setCanvasSize(400, 400)
forever:
    if wasMousePressed():
        print("Mouse was pressed")
    sleep(0.005)

Description

Returns True if the mouse has been pressed and not yet released before this function is called. Otherwise, it returns False. Once the mouse has been pressed and the function has been called, the function will then return False until the mouse is pressed again. This is different from the mouseIsPressed inbuilt boolean variable which continues to be set to True until the mouse is released.

Syntax

wasMousePressed()

Parameters

This function takes no parameters.


Typography

text()

Examples

setCanvasSize(400, 100)
background(220, 220, 220)
text("I love PyAngelo!", 20, 30)
setCanvasSize(800, 100)
background(220, 220, 220)
text("I'm a new font that is big!", 20, 30, 50, 'Times New Roman')

Description

Draws text to the screen. The first 3 parameters are mandatory. The first specified the text to display. The second is the x position and the third is the y position. The fourth parameter is optional and is the size of the text. This defaults to 20 pixels. The fifth parameter is optional is the font to use. The font defaults to Arial.

Syntax

text(text, x, y, fontSize, fontName)

Parameters

text - The text to display.

x - The x position of the top left of the text.

y - The y position of the top left of the text.

fontSize - The size of the text in pixels.

fontName - The type of font to use when displaying the text.


Images

Image()

Examples

setCanvasSize(300, 300)
hero = Image("/samples/images/PyAngelo.png")
drawImage(hero, 50, 100)

Description

Loads an image into memory which can later be displayed with the image() function. This function does not draw anything to the canvas but is required before an image can be drawn to the canvas. It returns a variable which is used by the image() function.

Syntax

Image(file)

Parameters

file - The location of the image file to load.

Class Properties

This function returns a class which has the following properties:

  • width
  • height
  • file

drawImage()

Examples

# Draw PyAngelo at (0, 0)
setCanvasSize(350, 300)
hero = Image("/samples/images/PyAngelo.png")
drawImage(hero, 0, 0)

# Draw PyAngelo at (128, 96) with a width of 64 and height of 48 pixels
smallHero = Image("/samples/images/PyAngelo.png")
drawImage(smallHero, 128, 96, 64, 48)

# Draw PyAngelo at (194, 144) with an opacity of 0.2
opacityHero = Image("/samples/images/PyAngelo.png")
drawImage(opacityHero, 194, 144, opacity=0.2)

Description

Draws an image to the canvas that has previously been loaded by creating an image object via the Image() class. The first parameter is the image object created using the Image() class. The second parameter is the x position and the third parameter is the y position to draw the image. The x and y position refers to the top left of the image. The fourth parameter is the width of the image and is optional. If this is not passed in the actual width of the image is used. This can be used to scale the image. The fifth parameter is the height of the image and is optional. If this is not passed in the actual height of the image is used. This can be used to scale the image. The sixth parameter is the opacity of the image specified by a number from 0 to 1 where 0 is full opacity and 1 is no opacity. If you wish to only specify the opacity with specifying a width and height you can use named parameters as shown in the example above.

Syntax

drawImage(image, x, y, width, height, opacity)

Parameters

image - The loaded image to be drawn. This image is an object created via the Image() class.

x - The x coordinate of the image.

y - The y coordinate of the image.

width - How wide to draw the image in pixels.

height - How high to draw the image in pixels.

opacity - Changes the transparency of the image from 0 (full opacity) to 1 (no opacity).


Transformation

angleMode()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
translate(width/2, height/2) # translate to the center of the screen
rectMode(CENTER)
angleMode(RADIANS)
rotate(1)
rect(0, 0, 50, 50)

Description

Sets the type of angle to use in many functions. This takes 1 parameter and it is suggested to use the constants of DEGREES and RADIANS when calling this function for clarity.

Syntax

angleMode(mode)

Parameters

mode - an integer where 1 represents RADIANS and 2 represents DEGREES.


translate()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
rect(0, 0, 50, 50) # Draw rect at original 0,0
translate(50, 50)
rect(0, 0, 50, 50) # Draw rect at new 0,0
translate(25, 10)
rect(0, 0, 50, 50) # Draw rect at new 0,0

Description

Moves the position of the origin. The first parameter specifies the number of pixels along the x axis, and the second paramter specifies the number of pixels along the y axis.

If tranlate is called twice, the effects are cumulative. So calling translate(10, 10) followed by translate(20, 20) is the same as calling translate(30, 30). The saveState() and restoreState() functions can be used to save and restore transformations.

Syntax

translate(x, y)

Parameters

x - The number of pixels to move the origin along the x axis.

y - The number of pixels to move the origin along the y axis.


rotate()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
translate(width/2, height/2) # translate to the center of the screen
rectMode(CENTER)
rotate(45)
rect(0, 0, 50, 50)

Description

Rotates the shape by the angle specified in the only parameter. By default, the angle is in degrees. This can be changed to radians by using the angleMode() function.

Shapes are rotated around the origin. Positive numbers rotate in a clockwise direction. Rotations are cumulative so calling rorate(45) followed by rotate(30) is the same as calling rotate(75). The saveState() and restoreState() functions can be used to save and restore transformations.

Syntax

rotate(angle)

Parameters

angle - The number of of degrees or radians to rotate the shape depending on the angleMode.


applyMatrix()

Examples

setCanvasSize(640, 360)
fill(100, 220, 100, 0.5)
for i in range(5):
    applyMatrix(1, i*0.1, i*-0.1, 1, i*30, i*10)
    rect(0, 0, 250, 100)

Description

The applyMatrix() method lets you scale, rotate, move, and skew the current context.

Syntax

applyMatrix(a, b, c, d, e, f)

Parameters

a - Horizontal scaling

b - Horizontal skewing

c - Vertical skewing

d - Vertical scaling

e - Horizontal moving

f - Vertical moving


shearX()

Examples

setCanvasSize(640, 360)
translate(250, 200)
shearX(45)
rect(0, 0, 30, 30)

Description

Skews the shape around the x-axis by the angle specified in the only parameter. By default, the angle is in degrees. This can be changed to radians by using the angleMode() function. The skew is relative to the origin.

Syntax

shearX(angle)

Parameters

angle - The number of of degrees or radians to shear the shape around the x-axis depending on the angleMode.


shearY()

Examples

setCanvasSize(640, 360)
translate(250, 200)
shearY(45)
rect(0, 0, 30, 30)

Description

Skews the shape around the y-axis by the angle specified in the only parameter. By default, the angle is in degrees. This can be changed to radians by using the angleMode() function. The skew is relative to the origin.

Syntax

shearY(angle)

Parameters

angle - The number of of degrees or radians to shear the shape around the y-axis depending on the angleMode.


saveState()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
saveState()
translate(width/2, height/2) # translate to the center of the screen
rectMode(CENTER)
rotate(45)
rect(0, 0, 50, 50)

restoreState()
rectMode(CORNER)
rect(0, 0, 50, 50)

Description

Saves the current drawing style settings and transformations. These can be restored using the restoreState() function. This allows you to change the style and transformation settings and then return to the previous version of these settings.

This function saves the settings of the fill(), stroke(), strokeWeight(), translate(), and rotate() functions.

Syntax

saveState()


restoreState()

Examples

setCanvasSize(640, 360)
background(220, 220, 220)
saveState()
translate(width/2, height/2) # translate to the center of the screen
rectMode(CENTER)
rotate(45)
rect(0, 0, 50, 50)

restoreState()
rectMode(CORNER)
rect(0, 0, 50, 50)

Description

Restores the latest version of the drawing style settings and transformations. To save these settings the saveState() function must be used. This allows you to change the style and transformation settings and then return to the previous version of these settings.

This function restores the previously saved settings of the fill(), stroke(), strokeWeight(), translate(), and rotate() functions.

Syntax

restoreState()


Console

setConsoleSize()

Examples

setConsoleSize(SMALL_SCREEN)
setConsoleSize(MEDIUM_SCREEN)
setConsoleSize(LARGE_SCREEN)

Description

Sets the size of the console in pixels. The first and only parameter is an integer that must be between between 100 and 2000. The PyAngelo constants of SMALL_SCREEN (100), MEDIUM_SCREEN (500), and LARGE_SCREEN (1000) can be used.

Syntax

setConsoleSize(size)

Parameters

size - The height of the console in pixels.


setTextSize()

Examples

setTextSize(SMALL_FONT)
setTextSize(MEDIUM_FONT)
setTextSize(LARGE_FONT)

Description

Sets the size of the text printed to the console in pixels. The first and only parameter is an integer that must be between between 8 and 128. The PyAngelo constants of SMALL_FONT (8), MEDIUM_FONT (16), and LARGE_FONT (24) can be used.

Syntax

setTextSize(size)

Parameters

size - The size of the text in pixels.


setTextColour()

Examples

setTextColour(RED)
print("I am red.")

Description

Sets the text colour for any print statements which will be output on the console. The following constants should be used as a parameter:

  • YELLOW
  • ORANGE
  • RED
  • MAGENTA
  • VIOLET
  • BLUE
  • CYAN
  • GREEN
  • WHITE
  • GREY or GRAY
  • BLACK
  • DRACULA_BACKGROUND
  • DRACULA_CURRENT_LINE
  • DRACULA_SELECTION
  • DRACULA_FOREGROUND
  • DRACULA_COMMENT
  • DRACULA_CYAN
  • DRACULA_GREEN
  • DRACULA_ORANGE
  • DRACULA_PINK
  • DRACULA_PURPLE
  • DRACULA_RED
  • DRACULA_YELLOW

Syntax

setTextColour()

Parameters

colour - An integer between 1 and 22 represeting the colour. The above constants should be used for clarity.


setHighlightColour()

Examples

setTextColour(RED)
setHighlightColour(WHITE)
print("I am red text on a white background.")

Description

Sets the highlight or background colour for any print statements which will be output on the console. The following constants should be used as a parameter:

  • YELLOW
  • ORANGE
  • RED
  • MAGENTA
  • VIOLET
  • BLUE
  • CYAN
  • GREEN
  • WHITE
  • GREY or GRAY
  • BLACK
  • DRACULA_BACKGROUND
  • DRACULA_CURRENT_LINE
  • DRACULA_SELECTION
  • DRACULA_FOREGROUND
  • DRACULA_COMMENT
  • DRACULA_CYAN
  • DRACULA_GREEN
  • DRACULA_ORANGE
  • DRACULA_PINK
  • DRACULA_PURPLE
  • DRACULA_RED
  • DRACULA_YELLOW

Syntax

setHighlightColour()

Parameters

colour - An integer between 1 and 22 represeting the colour. The above constants should be used for clarity.


clear()

Examples

print("I am displayed but will be removed after 1 second. Help!")
sleep(1)
clear()
clear(RED)

Description

Clears the console.

Syntax

clear(colour)

Parameters

colour - The colour of the console after the screen is cleared. This is an optional parameter. If no colour is specified, a black colour will be displayed. The parameter is an integer from 1 to 22 but the following constants should be used for clarity:

  • YELLOW
  • ORANGE
  • RED
  • MAGENTA
  • VIOLET
  • BLUE
  • CYAN
  • GREEN
  • WHITE
  • GREY or GRAY
  • BLACK
  • DRACULA_BACKGROUND
  • DRACULA_CURRENT_LINE
  • DRACULA_SELECTION
  • DRACULA_FOREGROUND
  • DRACULA_COMMENT
  • DRACULA_CYAN
  • DRACULA_GREEN
  • DRACULA_ORANGE
  • DRACULA_PINK
  • DRACULA_PURPLE
  • DRACULA_RED
  • DRACULA_YELLOW


Sprites

To use the sprite library you need to import it using the following code:

from sprite import *

Sprite()

Examples

from sprite import *
setCanvasSize(500, 400)
pyangelo = Sprite("/samples/images/PyAngelo.png", 100, 75)
imposter = Sprite("/samples/images/PyAngelo.png", 300, 75)
while True:
    background(220, 220, 220)
    pyangelo.draw()
    imposter.draw()
    pyangelo.moveBy(1, 1)
    imposter.moveBy(-1, 1)

    if pyangelo.overlaps(imposter):
        text("I found you imposter!", 0, 0, fontSize=30)

    sleep(0.005)

Description

The Sprite class loads an image specified as the first parameter at a starting position specified by the second and third parameters. You can also specify the optional parameters of width, height, and opacity for the image.

Methods

Sprite(image, x, y, width, height, opacity, angle)

The image specifies the location on the Internet of the image to use. This is the only mandatory parameter, the rest are optional. The x and y parameters specify the starting position of the Sprite. The width and height parameters can adjust the size of the image and the opacity will change the transparency of the image. The angle will rotate the sprite with a positive angle indicating a clockwise rotation and a negative number an anti-clockwise rotation.

draw()

Draws the Sprite's image to the canvas at the Sprite's X and Y position.

moveBy(x, y)

Updates the Sprite's position by x pixels along the x axis, and y pixels along the y axis.

moveTo(x, y)

Updates the Sprite's position to the (x, y) coordinate.

overlaps(other)

Returns True if this Sprite overlaps with the "other" Sprite passed in as the first parameter. If the two Sprites do not overlap then False is returned. The overlap method uses the bounding rectangle principle to check if the Sprites are overlapping.

contains(point)

Returns True if the point passed in as the first parameter is inside the area occupied by this Sprite, otherwise it returns False.

rotate(angle)

Rotates the sprite around its centre by the angle specified. By default the angle is specified in degrees. This can be changed to radians with the angleMode() function.


TextSprite()

Examples

from sprite import *
setCanvasSize(500, 400)
hello = TextSprite("Hello", 100, 75)
hello.setColour(255, 100, 200)
smiley = TextSprite("☺️", 300, 75, fontSize=50)
while True:
    background(220, 220, 220)
    hello.draw()
    smiley.draw()
    hello.moveBy(1, 1)
    smiley.moveBy(-1, 1)

    if hello.overlaps(smiley):
        text("Hello there good friend", 0, 0, fontSize=30)

    sleep(0.005)

Description

The TextSprite class inherits from the Sprite class and so it has the same methods draw(), moveBy(), moveTo(), contains(), overlaps(), and rotate(). However the first parameter passed to a TextSprite is the text to display. This text can also be an emoji.

TextSprite(text, x, y, fontSize, fontName, r, g, b, a, angle)

The text parameter specifies what text will be displayed by the draw() method. This is the only mandatory parameter, the rest are optional. The x and y parameters specify the starting position of the Sprite. The fontSize specified the size of the text, the fontName specifies the type of font to use, and the r, g, b, and a parameters specify the colour and transparency of the text. The angle will rotate the text with a positive angle indicating a clockwise rotation and a negative number an anti-clockwise rotation.

Extra Methods

setColour(r, g, b, a)

This method sets the colour and transparency of the text.


RectangleSprite()

Examples

from sprite import *
setCanvasSize(500, 400)
r = RectangleSprite(100, 100, 50, 50)
r.setColour(255, 10, 170)
r.noStroke()
xSpeed = 1
ySpeed = 1

while True:
    background(220, 220, 220)
    r.draw()
    r.moveBy(xSpeed, ySpeed)
    if r.x >= width - r.width:
        r.x = width - r.width
        xSpeed *= -1
    elif r.x <= 0:
        r.x = 0
        xSpeed *= -1
    if r.y >= height - r.height:
        r.y = height - r.height
        ySpeed *= -1
    elif r.y <= 0:
        r.y = 0
        ySpeed *= -1
    sleep(0.005)

Description

The RectangleSprite class inherits from the TextSprite class and so it has the same methods draw(), setColour(), moveBy(), moveTo(), contains(), overlaps(), and rotate(). However the first four parameter passed to a RectangleSprite are the x and y coordinates and the width and height of the rectangle.

RectangleSprite(x, y, width, height, r, g, b, a, angle)

The first four parameter specify the x and y coordinates and the width and height of the rectangle. The first four parameters are mandatory, the rest are optional. The r, g, b, and a parameters specify the colour and transparency of the rectangle. The angle will rotate the rectangle with a positive angle indicating a clockwise rotation and a negative number an anti-clockwise rotation.

Extra Methods

noStroke()

This updates the rectangle so no border will be drawn when the draw() method is called.

stroke(r, g, b, a)

This method ensures the rectangle is drawn with a border of the colour and transparency specified by the r, g, b, and a parameters.

strokeWeight(weight)

Specifies in pixels, how thick the border should be around the rectangle.


CircleSprite()

Examples

from sprite import *
setCanvasSize(500, 400)
c = CircleSprite(100, 100, 50)
c.setColour(255, 10, 170)
c.noStroke()
xSpeed = 1
ySpeed = 1

while True:
    background(100, 100, 200)
    c.draw()
    c.moveBy(xSpeed, ySpeed)
    if c.x >= width - c.radius:
        c.x = width - c.radius
        xSpeed *= -1
    elif c.x <= c.radius:
        c.x = c.radius
        xSpeed *= -1
    if c.y >= height - c.radius:
        c.y = height - c.radius
        ySpeed *= -1
    elif c.y <= c.radius:
        c.y = c.radius
        ySpeed *= -1
    sleep(0.005)

Description

The CircleSprite class inherits from the RectangleSprite class and so it has the same methods draw(), stroke(), noStroke(), strokeWeight(), setColour(), moveBy(), moveTo(), contains(), and overlaps(). However the first three parameter passed to a CircleSprite are the x and y coordinates of the center of the circle, and the radius of the circle.

CircleSprite(x, y, radius, r, g, b, a, angle)

The first three parameter specify the x and y coordinates of the center of the circle and the radius of the circle. The first three parameters are mandatory, the rest are optional. The r, g, b, and a parameters specify the colour and transparency of the circle.


EllipseSprite()

Examples

from sprite import *
setCanvasSize(500, 400)
e = EllipseSprite(100, 100, 50, 25)
e.setColour(255, 10, 170)
e.stroke(255, 0, 0)
xSpeed = 1
ySpeed = 1

while True:
    background(100, 100, 200)
    e.draw()
    e.moveBy(xSpeed, ySpeed)
    if e.x >= width - e.radiusX:
        e.x = width - e.radiusX
        xSpeed *= -1
    elif e.x <= e.radiusX:
        e.x = e.radiusX
        xSpeed *= -1
    if e.y >= height - e.radiusY:
        e.y = height - e.radiusY
        ySpeed *= -1
    elif e.y <= e.radiusY:
        e.y = e.radiusY
        ySpeed *= -1
    sleep(0.005)

Description

The EllipseSprite class inherits from the RectangleSprite class and so it has the same methods draw(), stroke(), noStroke(), strokeWeight(), setColour(), moveBy(), moveTo(), contains(), overlaps(), and rotate(). However the first four parameter passed to a EllipseSprite are the x and y cooridinates of the center of the circle, and the X radius and Y radius of the ellipse.

EllipseSprite(x, y, radiusX, radiusY, r, g, b, a, angle)

The first four parameter specify the x and y coordinates of the center of the ellipse and the X radius and Y radius of the ellipse. The first four parameters are mandatory, the rest are optional. The r, g, b, and a parameters specify the colour and transparency of the ellipse. The angle will rotate the ellipse with a positive angle indicating a clockwise rotation and a negative number an anti-clockwise rotation.


Animation

sleep()

Examples

setCanvasSize(640, 360)
x = 0
radius = 50
sleepSeconds = 0.005

noStroke()
fill(255, 255, 0, 0.7)
while True:
    background(0, 0, 0)
    circle(x, 180, radius)
    x += 1
    if x > width + radius:
        x = -radius
    sleep(sleepSeconds)

Description

The sleep() function causes the program to suspend for the number of seconds specified by the first parameter. This is extremely useful for animation purposes inside a while loop as shown in the example above. Try changing some of the variables in the program to see the effect it has.

Syntax

sleep(delay)

Parameters

delay - The number of seconds to delay the program for.


Sounds

loadSound()

Examples

blip = loadSound("/samples/sounds/blip.wav")

Description

loadSound loads a sound file that can be played with the playSound() function.

Syntax

loadSound(filename)

Parameters

filename - A URL specifying the location of the sound file to load.

Return Values

The filename is returned and can be stored in a variable. This variable can then be passed to the playSound() function in order to play the sound.

playSound()

Examples

setCanvasSize(500, 400)
blip = loadSound("/samples/sounds/blip.wav")

text("Hit W to make a 'blip' sound!", 0, 0)
while True:
    if isKeyPressed(KEY_W):
        playSound(blip)

Description

playSound() plays a sound. The sound can be loaded previously via the loadSound() function or can be the location of a sound file. You can also specify the optional parameters of loop and volume.

Syntax

playSound(sound, loop, volume)

Parameters

sound - Either the name of a variable returned from the of the loadSound() function or the URL specifying the loaction of a sound file.

loop - A boolean value specifying if the sound should loop when played.

volume - The volume at which to play the sound ranging from 0 to 1.


stopSound()

Examples

setCanvasSize(500, 400)
music = loadSound("/samples/music/Myth.mp3")
playSound(music)

text("Hit W to stop the music!", 0, 0)
while True:
    if isKeyPressed(KEY_W):
        stopSound(music)

Description

stopSound() stops a sound from playing.

Syntax

stopSound(sound)

Parameters

sound - The name of a sound that has been previously played.


pauseSound()

Examples

setCanvasSize(500, 400)
music = loadSound("/samples/music/Myth.mp3")
playSound(music)
playing = True

text("Hit W to pause the music!", 0, 0)
text("Hit S to re-start the music!", 0, 30)
while True:
    if isKeyPressed(KEY_W):
        playing = False
        pauseSound(music)
    elif isKeyPressed(KEY_S) and not playing:
        playSound(music)
        playing = True

Description

pauseSound() pauses a sound from playing.

Syntax

pauseSound(sound)

Parameters

sound - The name of a sound that has been previously played.


stopAllSounds()

Examples

setCanvasSize(50, 50)
music1 = loadSound("/samples/music/Myth.mp3")
music2 = loadSound("/samples/music/SuperMonaco.mp3")
playSound(music1)
playSound(music2)
sleep(3)
stopAllSounds()

Description

stopAllSounds() stops all sounds from playing.

Syntax

stopAllSounds()


Variables

width

Description

This variable holds the width of the canvas. The default width of the canvas is 500 pixels and can be changed by calling the setCanvasSize() function.

Syntax

width

height

Description

This variable holds the height of the canvas. The default height of the canvas is 400 pixels and can be changed by calling the setCanvasSize() function.

Syntax

height

windowWidth

Description

This variable holds the width of the web browser's window minus 15 pixels.

Syntax

windowWidth

windowHeight

Description

This variable holds the height of the web browser's window minus 15 pixels.

Syntax

windowHeight

Maths

constrain()

Examples

setCanvasSize(100, 100)

forever:
    background(200)

    leftWall = 25
    rightWall = 75

    # xm is just the mouseX, while
    # xc is the mouseX, but constrained
    # between the leftWall and rightWall!
    xm = mouseX
    xc = constrain(mouseX, leftWall, rightWall)

    # Draw the walls.
    stroke(150, 150, 150)
    line(leftWall, 0, leftWall, height)
    line(rightWall, 0, rightWall, height)

    # Draw xm and xc as circles.
    noStroke()
    fill(150, 150, 150)
    ellipse(xm, 33, 9, 9) # Not Constrained
    fill(0, 0, 0)
    ellipse(xc, 66, 9, 9) # Constrained

Description

Constrains a value between a minimum and maximum value.

Syntax

constrain(n, low, high)

Parameters

n - The number to constrain

low - The minimum limit

high - The maximum limit

Returns

The constrained number

dist()

Examples

from math import *
setCanvasSize(500, 400)
fill(0, 0, 0)
x1 = 20
y1 = height - 50
angleMode(RADIANS)

while True:
    saveState()
    background(220, 220, 220)

    x2 = mouseX
    y2 = mouseY

    line(x1, y1, x2, y2)
    circle(x1, y1, 5)
    circle(x2, y2, 5)

    d = int(dist(x1, y1, x2, y2))

    # Let's write d along the line we are drawing
    translate((x1+x2)/2, (y1+y2)/2)
    rotate(atan2(y2-y1, x2 - x1))
    text(d, 0, -20)
    restoreState()

Description

Calculates the distance between two points.

Syntax

dist(x1, y1, x2, y2)

Parameters

x1 - The x coordinate of the first point.

y1 - The y coordinate of the first point.

x2 - The x coordinate of the second point.

y2 - The y coordinate of the second point.

Returns

The distance between two points as a floating point number.

mapToRange()

Examples

from math import *
setCanvasSize(500, 400)

while True:
    r = mapToRange(mouseX, 0, width, 0, 255)
    fill(int(r), 0, 0)
    circle(width/2, height/2, 50)
    sleep(0.005)

Description

Re-maps a number from one range to another.

Syntax

mapToRange(value, start1, stop1, start2, stop2, withinBounds)

Parameters

value - The incoming value to be converted.

start1 - The lower bound of the current range.

stop1 - The upper bound of the current range.

start2 - The lower bound of the target range.

stop2 - The upper bound of the target range.

withinBounds - Should the value be constrained to the target range.

Returns

The converted number.

Constants

QUARTER_PI

Description

QUARTER_PI is a mathematical constant with a value of 0.7853982.

HALF_PI

Description

HALF_PI is a mathematical constant with a value of 1.57079632679489661923.

PI

Description

PI is a mathematical constant with a value of 3.14159265358979323846.

TWO_PI

Description

TWO_PI is a mathematical constant with a value of 6.28318530717958647693.

TAU

Description

TAU is a mathematical constant with a value of 6.28318530717958647693. It is equal to TWO_PI.

DEGREES

Description

DEGREES is a constant that is used with the angleMode() function to inform PyAngelo to use degrees for the rotate() and arc() functions.

RADIANS

Description

RADIANS is a constant that is used with the angleMode() function to inform PyAngelo to use radians for the rotate() and arc() functions.

CARTESIAN

Description

CARTESIAN is a constant that is used with the setCanvasSize() function to inform PyAngelo to use a maths based y-axis where the y value increases as you move up the canvas.

JAVASCRIPT

Description

JAVASCRIPT is a constant that is used with the setCanvasSize() function to inform PyAngelo to use a JavaScript based y-axis where the y value increases as you move down the canvas.

KEY_A to KEY_Z

Description

KEY_A through to KEY_Z are constants that can be used with the isKeyPressed function to check if the A through to the Z key has been pressed. In addition there is also KEY_SPACE, KEY_ENTER, KEY_ESCAPE, KEY_DEL, KEY_BACKSPACE, KEY_TAB, KEY_LEFT, KEY_RIGHT, KEY_UP and KEY_DOWN.