A lightweight vanilla JavaScript library for simplified interaction with the HTML canvas API.
Create these files in your root directory to start using Gulf.js:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="game"></div>
<script type="text/javascript" src="https://bruhatt.me/gulf/lib/gulf.js"></script>
<script src="script.js"></script>
</body>
</html>var pos;
function init() {
pos = new Vector(250, 250);
}
function update() {
color("black");
ellipse(pos.x, pos.y, 5);
}
loop();| Variable | Description |
|---|---|
mouse |
A Vector object with x and y properties for mouse position. |
frameCount |
The number of frames that have been rendered. |
looping |
A boolean indicating if the update loop is currently running. |
clear |
A boolean indicating if the canvas is being cleared every frame. |
keys |
An array to track the state of keys (pressed or released). |
key |
An object mapping key names to their corresponding key codes. |
canvas |
The canvas element with .height and .width properties. |
| Function | Args | Usage | Returns |
|---|---|---|---|
loop |
(number delta=20) |
Starts the update loop. | The current value of looping. |
noloop |
None | Stops the update loop. | The current value of looping. |
noclear |
None | Disables clearing the canvas every frame. | The current value of clear. |
sin |
(number theta) |
Calculates the sine of the given angle in radians. | The sine of the angle. |
cos |
(number theta) |
Calculates the cosine of the given angle in radians. | The cosine of the angle. |
randint |
(number min, number max) |
Generates a random integer between min and max. |
A random integer between min and max. |
rand |
None | Generates a random float between 0 and 1. | A random float between 0 and 1. |
height |
(number h, number w) |
Sets the canvas height and width. | None |
load |
(string img) |
Loads an image from the specified URL. | The loaded image object. |
translate |
(number x, number y) |
Translates the canvas context by (x, y). |
None |
rotate |
(number a, string type="radians") |
Rotates the canvas context by angle a. |
None |
save |
None | Saves the current canvas state. | None |
restore |
None | Restores the last saved canvas state. | None |
dist2d |
(Vector a, Vector b) |
Calculates the distance between two 2D vectors. | The distance between the vectors. |
dist |
(number x, number y) |
Calculates the distance from the origin (0,0). |
The distance from the origin. |
| Function | Args | Usage | Returns |
|---|---|---|---|
color |
(string c) |
Sets the fill color for shapes and text. | None |
stroke |
(string c) |
Sets the stroke color for lines and shapes. | None |
w |
(number n) |
Sets the line width. | None |
drawimg |
(Image img, number x, number y, number w, number h) |
Draws an image on the canvas. | None |
ellipse |
(number x, number y, number r) |
Draws a filled ellipse. | None |
text |
(number x, number y, string text, string size="30px", string font="Verdana") |
Draws text at the specified position. | None |
line |
(number x, number y, number x1, number y1) |
Draws a line between two points. | None |
triangle |
(number x, number y, number x1, number y1, number x2, number y2) |
Draws a filled triangle. | None |
full |
None | Fills the entire canvas with the current fill style. | None |
rect |
(number x, number y, number w=30, number h=30) |
Draws a rectangle with optional emissive effect. | None |
point |
(number x, number y, number r=5) |
Draws a filled point (circle). | None |
Represents a 2D or 3D vector with methods for vector operations.
| Method | Args | Usage | Returns |
|---|---|---|---|
constructor |
(number x=0, number y=0, number z=0) |
Initializes the vector. | A Vector object. |
rand |
(number min, number lim) |
Sets random values for x, y, and z. |
The updated Vector object. |
add |
(Vector a) |
Adds another vector to this vector. | The updated Vector object. |
set |
(Vector a) |
Sets this vector to the values of another vector. | The updated Vector object. |
sub |
(Vector a) |
Subtracts another vector from this vector. | The updated Vector object. |
mult |
(number a) |
Multiplies this vector by a scalar. | The updated Vector object. |
div |
(number a) |
Divides this vector by a scalar. | The updated Vector object. |
mag |
None | Calculates the magnitude of the vector. | The magnitude of the vector. |
