p5.js – Create, Move and Interact with Sprites

Animation, p5js, Uncategorized

Here are some additional exercises, they prepare you for the game we will do in the following lessons, step by step.

Create a smiley

181105 Smiley oho

https://www.openprocessing.org/sketch/598332/embed/?plusEmbedHash=NjBhNzY4OGI5ZmRhYmQ1ZDA4Yzk0OTY4NGIxNzFjOWQyYzI1MjBhYmJkZmQxYzFiMTUyNWE3Zjc0YzJiZDI3MTJkY2I1ZWZiYTE4MTdiNThiNzUzNDdhZDc1YjcxZmQ2YmU5Y2YzYzEyMGQ2YjE1NWVjMjI4Yzk3Njg5ZGZlOWQwZ01XOUpsbjlHK0t0WmwrNU5BSTZNbjhBbk90OFhpaWhCK2R1ZWV6azZUVzNZTzV5RURWZ1VDWDdhYW95SVRpdWF5QUMvN3JCS1h6eUVRNGxUL1VHQT09&plusEmbedTitle=true” target=”_blank” rel=”noopener”>Smiley on Openprocessing

As a first step only create the lower lip, then you have a “classical” smiley.

Create a Packman sprite

pacman-151558_640.png

Hint: There is a shape function “arc(…)” that allows you to create the body of the Packman with one line. Have a look in the documentation and play around with the parameters inside the parenthesis.

Don’t forget that angles are entered in radians. 0 degree is 0 radian, 180 degrees are PI radians and 360 degrees are 2*PI radians. PI is a constant in p5js, its actual value is 3.14… You only need to generate the Packman, the three small circles we do not need for now.

Control the movements of your sprite with the mouse

How to interact with your program? How can you control what is happening on the canvas?

P5JS gives you access to the mouse and the keyboard.

The mouseX and mouseY variables return you the current position of the mouse cursor. You can use it to make a rectangle follow your mouse on the canvas:

181106 mouseX.jpg

Here is a video p5js mouse position that shows you more about this mouse variables and some related variables.

Your program can also recognize when the mouse is pressed and then do something. Here is a code snippet, you add your action between the curly brackets.

A shorter way for the if statement is simply “if (mousePressed) { … .”


if (mouseIsPressed == true) {
// do something
}

 

Control the movements of your sprite with the keyboard

You can also use the keyboard to control what is happening on the canvas. Here is a code snippet that uses four different keys. You find more information about the subject of keycodes in the reference documentation.

181106 p5js_KeyEvents.jpg

Make a rectangle change its colour depending on mouse or keyboard events

Now you have all the tools you need to create a small project that changes colour and or position of a rectangle. Here is a nice example

Next Step for the Packman game

With the examples given before, you can now make the Packman follow a horizontal line along the x axes.  The tricky part consists in making him turn and then also turning his face. Think about a solution before you have a look https://editor.p5js.org/mikefromd/embed/Skn51kA3m“>here and this is the code

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.