Skip to content

Commit 8a425b3

Browse files
committed
first commit
0 parents  commit 8a425b3

File tree

5 files changed

+590
-0
lines changed

5 files changed

+590
-0
lines changed

README.md

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# p5.joystick.js
2+
3+
![p5.joystick Thumbnail](thumbnail.jpg)
4+
5+
## Overview
6+
7+
The **p5.joystick** library aims to facilitate integration with physical Joysticks.
8+
9+
It also has an easy calibration system, allowing you to configure different types of joysticks with the standard button format.
10+
11+
This library uses the [gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API).
12+
13+
Through them it is possible to read directly the status of each joystick. This library also make possible an event based approach.
14+
15+
16+
## Installation
17+
18+
It is necessary to insert p5.joystick.js in your html:
19+
```js
20+
<script src="js/p5.js"></script>
21+
<script src="p5.joystick.js"></script>
22+
<script src="sketch.js"></script>
23+
```
24+
25+
### Usage
26+
27+
```js
28+
var joystick;
29+
30+
function setup() {
31+
createCanvas(window.innerWidth, window.innerHeight);
32+
33+
joystick = createJoystick();
34+
if(!joystick.calibrated())
35+
joystick.calibrate(true);
36+
joystick.onButtonPressed(onJoystick);
37+
joystick.onButtonReleased(onJoystick);
38+
joystick.onAxesPressed(onJoystick);
39+
joystick.onAxesReleased(onJoystick);
40+
}
41+
42+
function draw(){
43+
background(100);
44+
joystick.draw(width/2, height/2);
45+
}
46+
47+
function onJoystick(e) {
48+
console.log("onJoystick", e);
49+
}
50+
```
51+
52+
## Calibrating
53+
54+
Calibration associates each button on the virtual joystick with the physical joystick.
55+
You can make different combinations as you wish.
56+
57+
The calibration is automatically saved and loaded into a cookie.
58+
59+
![p5.joystick calibration process](calibration.gif)
60+
61+
62+
63+
## Methods
64+
65+
### createJoystick([debug])
66+
67+
Initializes built-in listeners to integrate with gamepad API.
68+
69+
| Parameter | Type | Required | Description |
70+
| -------- | -------- | -------- | -------- |
71+
| debug | Boolean | No | If `true`, adds html elements to monitor all connected joysticks and the state of each button. |
72+
73+
### draw(x, y, [width], [height])
74+
75+
Draws a joystick on the screen in the desired position and size.
76+
77+
| Parameter | Type | Required | Description |
78+
| -------- | -------- | -------- | -------- |
79+
| x | Number | Yes | horizontal position on screen. |
80+
| y | Number | Yes | vertical position on the screen. |
81+
| width | Number | No | Width of the joystick. Standard value: 440. |
82+
| height | Number | No | Height of the joystick. Standard value: 200. |
83+
84+
**Notice:** The drawing axis is centered, so the joystick is drawn around the x and y coordinates.
85+
86+
### calibrate(enable)
87+
88+
Enable/Disable calibration mode.
89+
90+
| Parameter | Type | Required | Description |
91+
| -------- | -------- | -------- | -------- |
92+
| enable | Boolean | Yes | Enable/Disable calibration mode. |
93+
94+
### getButtonPressedByName(name)
95+
96+
Returns a boolean button state: `true` or `false`.
97+
98+
99+
| Parameter | Type | Required | Description |
100+
| -------- | -------- | -------- | -------- |
101+
| gamepadIndex | Integer | Yes | Joystick index. |
102+
| name | String | Yes | Button name: sholderLeft, sholderRight, axesUp, axesDown, axesLeft, axesRight, buttonBlue, buttonYellow, buttonRed, buttonGreen, start or select. |
103+
104+
**Notice:** Only works when calibrated.
105+
106+
### getButtonPressedByIndex(gamepadIndex, buttonIndex)
107+
108+
Returns a boolean button state: `true` or `false`.
109+
110+
| Parameter | Type | Required | Description |
111+
| -------- | -------- | -------- | -------- |
112+
| gamepadIndex | Integer | Yes | Joystick index. |
113+
| buttonIndex | Integer | Yes | Button index. |
114+
115+
### getAxesValueByIndex(gamepadIndex, axesIndex)
116+
117+
Returns a integer axis state: `-1`, `0`, `1`.
118+
119+
| Parameter | Type | Required | Description |
120+
| -------- | -------- | -------- | -------- |
121+
| gamepadIndex | Integer | Yes | Joystick index. |
122+
| axesIndex | Integer | Yes | Axes index. |
123+
124+
## Events
125+
126+
Events return an object with the following properties:
127+
128+
| Property | Type | Description |
129+
| -------- | -------- | -------- |
130+
| gamepadName | String | Joystick name. |
131+
| gamepadIndex | Integer | Joystick index. |
132+
| index | Integer | Button index. |
133+
| name | String | Button name: sholderLeft, sholderRight, axesUp, axesDown, axesLeft, axesRight, buttonBlue, buttonYellow, buttonRed, buttonGreen, start or select. Return empty "" if the joystick is not calibrated. |
134+
| pressed | Boolean | Button is pressed or not. |
135+
| type | String | Button type: axes or button. |
136+
| value | Integer | "axes" can return directions -1, 0 or 1, and buttons can return 0 or 1. |
137+
138+
There are 4 types of events:
139+
140+
### onButtonPressed
141+
142+
Triggered when a button is pressed.
143+
```js
144+
joystick.onButtonPressed(function(eventObj){});
145+
```
146+
147+
### onButtonReleased
148+
149+
Triggered when a button is released.
150+
```js
151+
joystick.onButtonReleased(function(eventObj){});
152+
```
153+
154+
### onAxesPressed
155+
156+
Triggered when an axes is pressed.
157+
```js
158+
joystick.onAxesPressed(function(eventObj){});
159+
```
160+
161+
### onAxesReleased
162+
163+
Triggered when an axes is released.
164+
```js
165+
joystick.onAxesReleased(function(eventObj){});
166+
```

calibration.gif

15.9 KB
Loading

0 commit comments

Comments
 (0)