0.2.0 • Published 5 years ago
draw.js v0.2.0
Draw.js
Lightweight framework to draw on canvas.
Getting started
Compile the file locally running npm run build
and refference ./dist/draw.js
file.
Another option is to reference the CDN file directly: <script src="https://cdn.jsdelivr.net/npm/draw.js/dist/draw.js"></script>
How to use it
// Setup function is optional and it will run before load event is fired
setup() {
frameRate(10) // Optional (default 60)
createCanvas(400, 400) // Optional (default 600x600)
noCanvas() // Optional
}
// Draw function will be intercepted and run in loop over the specified frame rate
draw() {
console.log('run')
}
Available methods
General
background(r, g, b, a)
fill(r, g, b, a)
rect(x, y, w, h)
circle(x, y, w, h, detailX)
point(x, y)
distance(x1, y1, z1, x2, y2, z2)
constrain(n, low, high)
Vector
let vector = createVector(x, y, z)
vector.copy()
vector.add(x, y, z)
vector.subtract(x, y, z)
vector.multiply(n)
vector.divide(n)
vector.limit(maxs)
vector.distance()
vector.magnitude()
Utils
random(min, max)
Key bindings
keySpace() { console.log('Space bar pressed') }
keyLeft() { console.log('Left key pressed') }
keyUp() { console.log('Up key pressed') }
keyRight() { console.log('Right key pressed') }
keyDown() { console.log('Down key pressed') }
onMousedown() { console.log('Mouse click') }
Example
https://github.com/DONSA/snake