p5.js
Table of Contents
-
Methods
- _isKeyInState(keystate)
- _isMouseButtonInState(buttonCodestate)
- _keyCodeFromAlias(alias)
- _warn(message)
- animation(animxy)
- createSprite(xywidthheight)
- drawSprite(sprite)
- drawSprites(group)
- getSprites()
- keyDown(key)
- keyWentDown(key)
- keyWentUp(key)
- loadAnimation(sprite)
- loadSpriteSheet()
- mouseDown(buttonCode)
- mouseUp(buttonCode)
- mouseWentDown(buttonCode)
- mouseWentUp(buttonCode)
- removeSprite(sprite)
- updateSprites(updating)
- useQuadTree(use)
- Properties
Methods
_isKeyInState
-
key -
state
Detects if a key is in the given state during the last cycle. Helper method encapsulating common key state logic; it may be preferable to call keyDown or other methods directly.
Parameters:
-
keyNumber | StringKey code or character
-
stateNumberKey state to check against
Returns:
True if the key is in the given state
_isMouseButtonInState
-
buttonCode -
state
Detects if a mouse button is in the given state during the last cycle. Helper method encapsulating common mouse button state logic; it may be preferable to call mouseWentUp, etc, directly.
Parameters:
-
[buttonCode]Number optionalMouse button constant LEFT, RIGHT or CENTER
-
stateNumber
Returns:
True if the button was in the given state
_keyCodeFromAlias
-
alias
Given a string key alias (as defined in the KEY property above), look up and return the numeric JavaScript key code for that key. If a deprecated alias is passed (as defined in the KEY_DEPRECATIONS property) it will be mapped to a valid key code, but will also generate a warning about use of the deprecated alias.
Parameters:
-
alias!string- a case-insensitive key alias
Returns:
a numeric JavaScript key code, or undefined if no key code matching the given alias is found.
_warn
-
message
Log a warning message to the host console, using native console.warn
if it is available but falling back on console.log if not. If no
console is available, this method will fail silently.
Parameters:
-
message!string
animation
-
anim -
x -
y
Displays an animation.
Parameters:
-
animSpriteAnimationAnimation to be displayed
-
xNumberX coordinate
-
yNumberY coordinate
A Sprite is the main building block of p5play: an element able to store images or animations with a set of properties such as position and visibility. A Sprite can have a collider that defines the active area to detect collisions or overlappings with other sprites and mouse interactions.
Sprites are added to the allSprites group and given a depth value that puts it in front of all other sprites by default.
Using this method is equivalent to using the Sprite constructor.
Parameters:
-
xNumberInitial x coordinate
-
yNumberInitial y coordinate
-
widthNumberWidth of the placeholder rectangle and of the collider until an image or new collider are set
-
heightNumberHeight of the placeholder rectangle and of the collider until an image or new collider are set
Returns:
The new sprite instance
drawSprite
-
sprite
Displays a Sprite. To be typically used in the main draw function.
Parameters:
-
spriteSpriteSprite to be displayed
drawSprites
-
group
Displays a Group of sprites. If no parameter is specified, draws all sprites in the sketch. The drawing order is determined by the Sprite property "depth"
Parameters:
-
[group]Group optionalGroup of Sprites to be displayed
getSprites
()
Array
Returns all the sprites in the sketch as an array
Returns:
Array of Sprites
keyDown
-
key
Detects if a key is currently pressed Like p5 keyIsDown but accepts strings and codes
Parameters:
-
keyNumber | StringKey code or character
Returns:
True if the key is down
keyWentDown
-
key
Detects if a key was pressed during the last cycle. It can be used to trigger events once, when a key is pressed or released. Example: Super Mario jumping.
Parameters:
-
keyNumber | StringKey code or character
Returns:
True if the key was pressed
keyWentUp
-
key
Detects if a key was released during the last cycle. It can be used to trigger events once, when a key is pressed or released. Example: Spaceship shooting.
Parameters:
-
keyNumber | StringKey code or character
Returns:
True if the key was released
loadAnimation
-
sprite
Loads an animation. To be typically used in the preload() function of the sketch.
Parameters:
-
spriteSpriteSprite to be displayed
loadSpriteSheet
()
Loads a Sprite Sheet. To be typically used in the preload() function of the sketch.
mouseDown
-
buttonCode
Detects if a mouse button is currently down Combines mouseIsPressed and mouseButton of p5
Parameters:
-
[buttonCode]Number optionalMouse button constant LEFT, RIGHT or CENTER
Returns:
True if the button is down
mouseUp
-
buttonCode
Detects if a mouse button is currently up Combines mouseIsPressed and mouseButton of p5
Parameters:
-
[buttonCode]Number optionalMouse button constant LEFT, RIGHT or CENTER
Returns:
True if the button is up
mouseWentDown
-
buttonCode
Detects if a mouse button was pressed during the last cycle. It can be used to trigger events once, to be checked in the draw cycle
Parameters:
-
[buttonCode]Number optionalMouse button constant LEFT, RIGHT or CENTER
Returns:
True if the button was just pressed
mouseWentUp
-
buttonCode
Detects if a mouse button was released during the last cycle. It can be used to trigger events once, to be checked in the draw cycle
Parameters:
-
[buttonCode]Number optionalMouse button constant LEFT, RIGHT or CENTER
Returns:
True if the button was just released
removeSprite
-
sprite
Removes a Sprite from the sketch. The removed Sprite won't be drawn or updated anymore. Equivalent to Sprite.remove()
Parameters:
-
spriteSpriteThe sprite to be removed
updateSprites
-
updating
Updates all the sprites in the sketch (position, animation...) it's called automatically at every draw(). It can be paused by passing a parameter true or false; Note: it does not render the sprites.
Parameters:
-
updatingBooleanfalse to pause the update, true to resume
useQuadTree
-
use
Turns the quadTree on or off. A quadtree is a data structure used to optimize collision detection. It can improve performance when there is a large number of Sprites to be checked continuously for overlapping.
p5play will create and update a quadtree automatically.
Parameters:
-
useBooleanPass true to enable, false to disable
Properties
camera
Camera
The sketch camera automatically created at the beginning of a sketch. A camera facilitates scrolling and zooming for scenes extending beyond the canvas. A camera has a position, a zoom factor, and the mouse coordinates relative to the view.
In p5.js terms the camera wraps the whole drawing cycle in a transformation matrix but it can be disabled anytime during the draw cycle, for example to draw interface elements in an absolute position.
KEY
Object
private
An object storing all useful keys for easy access Key.tab = 9
KEY_DEPRECATIONS
Object
private
An object storing deprecated key aliases, which we still support but should be mapped to valid aliases and generate warnings.