v0.301

package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.300.0",
+    "version": "0.301.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

samples/bench/bench.js

@@ -3,6 +3,8 @@ let url = new URL(location),
         count: +url.searchParams.get('amount') || 1000,
         width: 1024,
         height: 480,
+        size: 12,
+        // animate: true,
     }
 
 litecanvas({
@@ -16,25 +18,25 @@ use(pluginFrameRateMeter)
 
 function init() {
     state.sprite = paint(
-        10,
-        12,
+        state.size,
+        state.size,
         () =>
             spr(
                 0,
                 0,
                 `
-                .00....00.
-                0220..0220
-                0230..0230
-                0230..0230
-                0230..0230
-                0230000230
-                0222222220
-                0220220220
-                0220220220
-                0222232220
-                0222222220
-                .00000000.
+                ..00....00..
+                .0220..0220.
+                .0230..0230.
+                .0230..0230.
+                .0230..0230.
+                .0230000230.
+                .0222222220.
+                .0220220220.
+                .0220220220.
+                .0222232220.
+                .0222222220.
+                ..00000000..
             `
             ),
         {
@@ -44,51 +46,59 @@ function init() {
     state.size = state.sprite.width
 
     // Particle creation
-    const particles = new Array(state.count)
+    state.entites = new Array(state.count)
     const dir = [1, -1]
     for (let i = 0; i < state.count; i++) {
         const x = rand() * state.width - state.size
         const y = rand() * state.height - state.size
         const [dx, dy] = [rand(1, 5) * dir[randi(0, 1)], rand(1, 5) * dir[randi(0, 1)]]
-        particles[i] = { x, y, dx, dy }
+        state.entites[i] = { x, y, dx, dy, s: rand(0.75, 1.5), r: rand(0, TAU) }
     }
 
-    state.particles = particles
-
     const link = document.querySelector(`[href="?amount=${state.count}"]`)
     if (link) {
         link.style.fontWeight = 'bold'
     }
 }
 
-function draw() {
-    // Clear the canvas
-    cls(3)
-
-    // Particle animation
-    const particles = state.particles
+function update() {
     for (let i = 0; i < state.count; i++) {
-        const r = particles[i]
+        const e = state.entites[i]
 
-        r.x -= r.dx
-        r.y -= r.dy
+        e.x -= e.dx
+        e.y -= e.dy
 
-        if (r.x < 0) {
-            r.x = 0
-            r.dx *= -1
-        } else if (r.y < 0) {
-            r.y = 0
-            r.dy *= -1
+        if (e.x < 0) {
+            e.x = 0
+            e.dx *= -1
+        } else if (e.y < 0) {
+            e.y = 0
+            e.dy *= -1
         }
 
-        if (r.x + state.size > state.width) {
-            r.x = state.width - state.size
-            r.dx *= -1
-        } else if (r.y + state.size > state.height) {
-            r.y = state.height - state.size
-            r.dy *= -1
+        if (e.x + state.size > state.width) {
+            e.x = state.width - state.size
+            e.dx *= -1
+        } else if (e.y + state.size > state.height) {
+            e.y = state.height - state.size
+            e.dy *= -1
         }
 
-        image(r.x, r.y, state.sprite)
+        e.r = state.animate ? e.r + 0.2 : 0
+    }
+}
+
+function draw() {
+    cls(3)
+
+    let half = state.size / 2
+
+    for (let i = 0; i < state.count; i++) {
+        const e = state.entites[i]
+        const rotation = state.animate ? e.r : 0
+        const scale = state.animate ? e.s + sin(T * 5) * 0.5 : 1
+        push(e.x, e.y, rotation, scale)
+        image(-half, -half, state.sprite)
+        pop()
     }
 }

samples/plugin-basics/plugin-basics.js

@@ -1,5 +1,4 @@
 litecanvas({
-    width: 600,
     autoscale: false,
 })
 
@@ -13,10 +12,11 @@ function init() {
 }
 
 function draw() {
+    cls(0)
     textalign('center', 'middle')
-    text(W / 2, H / 2 - 50, 'Open your browser console', 3)
-    text(W / 2, H / 2, 'FOO = ' + FOO, 3)
-    text(W / 2, H / 2 + 50, sayhello('Everyone'), 3)
+    text(W / 2, H / 2 - 50, 'Open your browser console')
+    text(W / 2, H / 2, 'FOO = ' + FOO)
+    text(W / 2, H / 2 + 50, sayhello('Everyone'))
 }
 
 function pluginTest(engine, config) {
@@ -27,18 +27,7 @@ function pluginTest(engine, config) {
     console.log('plugin config:', config)
 
     // the `listen()` function registers game event listeners
-    // function listen(type: string, callback: Function): Function
-    engine.listen(
-        // the event name
-        'before:draw',
-        // the event callback
-        function () {
-            engine.cls(1)
-            engine.rectfill(0, 0, 100, 100, 3)
-        }
-    )
-
-    // another `listen()` example
+    // function listen(eventName: string, callback: Function): void
     engine.listen('tapped', function (x, y) {
         engine.sfx()
         console.log(`Tap detected in X=${x} Y=${y}`)
@@ -49,13 +38,23 @@ function pluginTest(engine, config) {
         console.log('JUST ONE TIME!')
 
         // the `unlisten()` removes a event listener
+        // you should pass the same event name and callback
         engine.unlisten('update', updateOnce)
     }
 
     // use `def()` to create or update that instance properties
-    // example: create a variable named FOO
+    // example: create the property engine.FOO and window.FOO (if litecanvas#global = true)
     engine.def('FOO', 42)
 
+    // you can access internal variables with stat()
+    // examples
+    const settings = stat(0)
+    const initialized = stat(1)
+    const colorPalette = stat(5)
+
+    // use resize() to change the canvas size
+    resize(800, 600)
+
     // and finally...
     return {
         // you can return new litecanvas functions
@@ -64,8 +63,9 @@ function pluginTest(engine, config) {
         },
 
         // or override existing functions
-        clamp() {
-            console.error('`clamp` was overwritten')
+        clamp(val, min, max) {
+            // example: disable a built-in function
+            console.error('`clamp` was disabled')
         },
     }
 }