lib
; copy thep5.play.js
file from that directory into your own sketch’s libraries
directory. Make sure to add the necessary <script>
tag to your sketch’sindex.html
file as well. (More information here about installing externallibraries when using the p5.js editor.)createSprite()
function. This function returns a sprite object, which itself has a number ofattributes and methods that allow us to query and change properties of thesprite.createSprite()
function takes four parameters: the position of thesprite, and its width and height. The .shapeColor
attribute sets the color ofthe rectangle that represents the sprite. In order for p5.play to display thesprite, we need to add the drawSprites()
function to the end of draw()
.position
attribute and a velocity
attribute. Both ofthose attributes have x
and y
attributes, which you can set to control theposition of the sprite and its velocity (in both dimensions). The p5.playlibrary takes care of updating the position according to the velocity foryou—you don’t have to do any of the math. In the example above, thesprite is constantly moving downwards, unless you click the mouse, in whichcase the sprite is instantly moved to the mouse position..velocity.x
and .velocity.y
. You can also call the sprite’s setSpeed()
Av grabber pro. attribute to tell the sprite to move in a particular direction at a particularrate. In this example, use the arrow keys to control the sprite:key
variable in p5.js only works for alphanumeric characters. In orderto detect the arrow keys, we need to use thekeyCode variable.).setSpeed()
method). Here’s an example that causes asprite to be drawn to the screen, which moves downward on every frame and thenbounces when it reaches the bottom:.attractionPoint()
method to set a force that pushesthe sprite in the direction of the mouse’s position:.maxSpeed
attribute (which controlshow fast a sprite can move, regardless of the forces operating on it), its.friction
attribute (which is a multiplier that slowly reduces the velocityof the object on each frame), and the .rotateToDirection
attribute (which,when set to true
, causes the object to rotate to the direction it’s moving).onMouseOver
(when the mouse cursor moves over the object)onMouseOut
(when the mouse cursor leaves the object)onMousePressed
(when the user presses the mouse button, and the mousecursor is over the object)onMouseReleased
(when the user releases the mouse button, after anonMousePressed
event)this
refers tothe object that the interaction happened to. (This is helpful for writingevent handlers that can be applied to more than one object; see below.)mouseIsOver
attribute, which has a booleanvalue: true
if the mouse is currently over the object, and false
otherwise.In the following example, the two sprites respond when the mouse is over them.(For the second sprite, the reaction behavior only happens if the mouse buttonis pressed as well.).rotation
attribute, which sets thesprite’s current rotation (in degrees).createSprite()
function as many times as you want to! Thep5.play framework keeps track of all the sprites you’ve added behind the scenes(so you don’t need to create your own data structure to store them). In thefollowing example, I’ve written some code in mousePressed()
that creates anew sprite whenever the user clicks the mouse:.life
attribute, which is the maximum number offrames that the sprite will “live” before it’s automatically deleted by thep5.play framework.draw()
method. How to hack onenote for mac. The framework supplies abuilt-in array called allSprites
which contains every active sprite in thesketch. In the following example, we use the allSprites
variable to apply“gravity” (i.e., a constant downward force) to each sprite added to the scenein mousePressed()
. Another if
statement checks to see if the sprite hasextended beyond the height of the sketch, and causes it to “bounce” if so.Still another if
statement removes any sprites that have exceeded theboundary of the sketch in the X dimension.removeAndScore
function—the this
keywordkeeps everything straightGroup()
.overlap()
method returns true if one sprite overlaps another..collide()
.displace()