Properties and Methods
Properties vs Methods
In order ot talk to our sprites, we will need to utilize the dot notation that was first mentioned in this chapter.
In the code below we have generated a single sprite and set specific properties and methods. The way you set these values is similar (both using dot notation), but their purposes are slightly different.
See the Pen Example Code by LSU DDEM ( @lsuddem) on CodePen.
https://codepen.io/lsuddem/pen/RzPbrYProperties
A property is an element of a sprite’s characteristics that can be set to a value and changed, similar to a variable. Properties are utilized in the following format:
sprite.property = value;
Looking in the setup() function of the code above we can see several properties being used to make our sprite function in a specific way.
- .shapeColor can be used to make a sprite be drawn with th same shape every time it is created instead of being given a random color. You can assign this to the results of the
color()function. - .rotation rotates the sprite by a given number of degrees. Positive numbers move the sprite clockwise, negative move the sprite counter clockwise.
- .rotationSpeed rotates a sprite by a given number of degrees per frame of the draw() function; resulting in the shape spinning on the canvas. Positive values cause a clockwise rotation, and negative cause a counter clockwise rotation.
- .maxSpeed keeps the speed of a sprite from moving past a given threshold.
- .friction applies friction to the movement of a sprite to slow down and stop its movement. 0 = no friction; 1 = maximum friction.
- .position teleports the sprite to a specific location on the canvas.
- .position needs to have one of its sub-properties called in order to work. You must specify either sprite.position.x or sprite.position.y, and you must call each of them separately.
There are several other properties that can be used in the P5.play library, and their details can be found here.
Methods
Methods serve as functions or actions that the sprite can be told to perform. They are called in the following manner:
sprite.method(argument(s));
These methods are formatted and function essentially the same as when we created our own methods in the lessons on objects and classes.
In the code above we can see .attractionPoint() is used. This method tells the sprite to move at a given speed (pixels per frame) toward the X,Y position indicated in its arguments. .setSpeed() however, only specifies an initial speed and single angular direction in which to move. A few commonly used angles are:
| Angle (degrees) | Direction |
|---|---|
| 0 | RIGHT |
| 90 | DOWN |
| 180 | LEFT |
| 270 | UP |
| 45 | RIGHT-DOWN DIAGONAL |
| 135 | LEFT-DOWN DIAGONAL |
| 225 | LEFT-UP DIAGONAL |
| 135 | RIGHT-UP DIAGONAL |
Any angle between 0 and 359 can be used, but those are some of the more commonly utilized ones in 2D character movement. Keep in mind that 0 degrees is horizontal to the right, and that the degrees then follow clockwise.
A few other common methods are:
.addAnimation(label, image(s))which adds animations to the sprite..displace(target)which lets a sprite push another sprite around the canvas..remove(sprite)which removes the sprite from the sketch completely.
To utilize a method, you must first talk to the sprite, then tell it which method to execute utilizing dot notation. This would look like this: spriteA.displace(spriteB);. By placing these commands within various parts of your code broken up by conditionals, for loops, and functions, you can create wonderfully dynamic sprites that will respond uniquely based on their environment, user interactions, or whatever other states may be present in your sketches.
We will utilize many more methods throughout this unit, but for now lets focus on these. You can look more into a sprite’s methods here.
Group Methods
When working with sprite groups, there is a limited number of methods that can be applied to all sprites in the group at once. Some of the more common ones we will use in the next few lessons are:
.add(): adds a sprite to a group..remove(): removes a sprite from a group. *.bounce(): makes a sprite bounce off of a given sprite or group..collide(): makes sprites collide with a given sprite or group..displace(): makes a sprite push a given sprite or group.
It is important to know that while most methods for groups are available on the sprite level, the opposite is not true. Groups have a much more limited pool of available methods than sprites do. If you would like to utilize a command from the larger pool, you will either have to find the specific sprite you wish to command, or cycle through the entire group contents and apply the commands individually.