@footgun/cobalt 0.1.1 → 0.2.0

package/src/primitives/public-api.js

@@ -1,99 +1,104 @@
-import { vec2 } from '../deps.js'
+import cdt2d          from 'cdt2d'
+import { mat3, vec2 } from 'wgpu-matrix'
 
 
-function line (cobalt, node, start, end, color, lineWidth=1) {
-    
-    const delta = vec2.sub(end, start)
+// works similarly to the HTML Canvas transforms:
+// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations
+export default {
+    line,
 
-    const unitBasis = vec2.normalize(delta)
-    const perp = perpendicularComponent(unitBasis)
+    save: function (cobalt, node) {
+        node.data.transforms.push(mat3.clone(node.data.transforms.at(-1)))
+    },
 
-    const halfLineWidth = lineWidth / 2
-    
-    let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
+    restore: function (cobalt, node) {
+        if (node.data.transforms.length > 1) // don't remove the identity matrix
+            node.data.transforms.pop()
+    },
 
-    // triangle 1
-    // pt 1
-    node.data.vertices[i + 0] = start[0] + perp[0] * halfLineWidth
-    node.data.vertices[i + 1] = start[1] + perp[1] * halfLineWidth
+    translate: function (cobalt, node, translation) {
+        const m = node.data.transforms.at(-1)
+        mat3.translate(m, translation, m)
+    },
 
-    // pt1 color
-    node.data.vertices[i + 2] = color[0]
-    node.data.vertices[i + 3] = color[1]
-    node.data.vertices[i + 4] = color[2]
-    node.data.vertices[i + 5] = color[3]
+    rotate: function (cobalt, node, radians) {
+        const m = node.data.transforms.at(-1)
+        mat3.rotate(m, radians, m)
+    },
 
-    // pt 2
-    node.data.vertices[i + 6] = start[0] - perp[0] * halfLineWidth
-    node.data.vertices[i + 7] = start[1] - perp[1] * halfLineWidth
+    scale: function (cobalt, node, scale) {
+        const m = node.data.transforms.at(-1)
+        mat3.scale(m, scale, m)
+    },
 
-    // pt2 color
-    node.data.vertices[i + 8] = color[0]
-    node.data.vertices[i + 9] = color[1]
-    node.data.vertices[i + 10] = color[2]
-    node.data.vertices[i + 11] = color[3]
+    strokePath: function (cobalt, node, segments, color, lineWidth=1) {
+        for (const s of segments)
+            line(cobalt, node, s[0], s[1], color, lineWidth)
+    },
 
-    // pt 3
-    node.data.vertices[i + 12] = end[0] + perp[0] * halfLineWidth
-    node.data.vertices[i + 13] = end[1] + perp[1] * halfLineWidth
+    filledPath: function (cobalt, node, points, color) {
 
-    // pt3 color
-    node.data.vertices[i + 14] = color[0]
-    node.data.vertices[i + 15] = color[1]
-    node.data.vertices[i + 16] = color[2]
-    node.data.vertices[i + 17] = color[3]
-    
+        const edges = [ ]
 
-    // triangle 2
-    // pt 2
-    node.data.vertices[i + 18] = start[0] - perp[0] * halfLineWidth
-    node.data.vertices[i + 19] = start[1] - perp[1] * halfLineWidth
+        for (let i=1; i < points.length; i++)
+            edges.push([ i-1, i ])
 
-    // pt2 color
-    node.data.vertices[i + 20] = color[0]
-    node.data.vertices[i + 21] = color[1]
-    node.data.vertices[i + 22] = color[2]
-    node.data.vertices[i + 23] = color[3]
-    
-    // pt 3
-    node.data.vertices[i + 24] = end[0] + perp[0] * halfLineWidth
-    node.data.vertices[i + 25] = end[1] + perp[1] * halfLineWidth
 
-    // pt3 color
-    node.data.vertices[i + 26] = color[0]
-    node.data.vertices[i + 27] = color[1]
-    node.data.vertices[i + 28] = color[2]
-    node.data.vertices[i + 29] = color[3]
+        // The flag {exterior: false} tells  it to remove exterior faces
+        const triangles = cdt2d(points, edges, { exterior: true })
 
-    // pt 4
-    node.data.vertices[i + 30] = end[0] - perp[0] * halfLineWidth
-    node.data.vertices[i + 31] = end[1] - perp[1] * halfLineWidth
+        const m = node.data.transforms.at(-1)
 
-    // pt4 color
-    node.data.vertices[i + 32] = color[0]
-    node.data.vertices[i + 33] = color[1]
-    node.data.vertices[i + 34] = color[2]
-    node.data.vertices[i + 35] = color[3]
+        let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
+        const pos = vec2.create()
 
-    node.data.vertexCount += 6
+        for (const tri of triangles) {
 
-    node.data.dirty = true
-}
+            // pt 1
+            vec2.transformMat3(points[tri[0]], m, pos)
+            node.data.vertices[i + 0] = pos[0]
+            node.data.vertices[i + 1] = pos[1]
 
+            // pt1 color
+            node.data.vertices[i + 2] = color[0]
+            node.data.vertices[i + 3] = color[1]
+            node.data.vertices[i + 4] = color[2]
+            node.data.vertices[i + 5] = color[3]
 
-// return component of vector perpendicular to a unit basis vector
-// (IMPORTANT NOTE: assumes "basis" has unit magnitude (length==1))
-function perpendicularComponent (inp) {
-    return [ -inp[1], inp[0] ]
-}
+            // pt 2
+            vec2.transformMat3(points[tri[1]], m, pos)
+            node.data.vertices[i + 6] = pos[0]
+            node.data.vertices[i + 7] = pos[1]
 
+            // pt2 color
+            node.data.vertices[i + 8] = color[0]
+            node.data.vertices[i + 9] = color[1]
+            node.data.vertices[i + 10] = color[2]
+            node.data.vertices[i + 11] = color[3]
+
+            // pt 3
+            vec2.transformMat3(points[tri[2]], m, pos)
+            node.data.vertices[i + 12] = pos[0]
+            node.data.vertices[i + 13] = pos[1]
+
+            // pt3 color
+            node.data.vertices[i + 14] = color[0]
+            node.data.vertices[i + 15] = color[1]
+            node.data.vertices[i + 16] = color[2]
+            node.data.vertices[i + 17] = color[3]
+
+            i += 18
+        }
+
+        node.data.vertexCount += (3 * triangles.length)
+
+        node.data.dirty = true
+    },
 
-export default {
-    line,
 
     ellipse: function (cobalt, node, center, halfWidth, halfHeight, numSegments, color, lineWidth=1) {
-        
+
         const [ x, y ] = center
 
         // angle between each segment
@@ -122,6 +127,8 @@ export default {
         // angle between each segment
         const deltaAngle = 2 * Math.PI / numSegments
 
+        const m = node.data.transforms.at(-1)
+
         // Generate points for the ellipsoid
         for (let i = 0; i < numSegments; i++) {
             // Angle for this and the next segment
@@ -141,8 +148,9 @@ export default {
             const vi = (node.data.vertexCount * 6) + (i * stride)
 
             // position
-            node.data.vertices[vi + 0] = x
-            node.data.vertices[vi + 1] = y
+            const pos = vec2.transformMat3([ x, y ], m)
+            node.data.vertices[vi + 0] = pos[0]
+            node.data.vertices[vi + 1] = pos[1]
 
             // color
             node.data.vertices[vi + 2] = color[0]
@@ -154,8 +162,9 @@ export default {
             // Second triangle vertex (current point on ellipse)
         
             // position
-            node.data.vertices[vi + 6] = currX
-            node.data.vertices[vi + 7] = currY
+            vec2.transformMat3([ currX, currY ], m, pos)
+            node.data.vertices[vi + 6] = pos[0]
+            node.data.vertices[vi + 7] = pos[1]
 
             // color
             node.data.vertices[vi + 8] = color[0]
@@ -166,8 +175,9 @@ export default {
             
             // Third triangle vertex (next point on ellipse)
             // position
-            node.data.vertices[vi + 12] = nextX
-            node.data.vertices[vi + 13] = nextY
+            vec2.transformMat3([ nextX, nextY ], m, pos)
+            node.data.vertices[vi + 12] = pos[0]
+            node.data.vertices[vi + 13] = pos[1]
 
             // color
             node.data.vertices[vi + 14] = color[0]
@@ -181,8 +191,7 @@ export default {
         node.data.dirty = true
     },
 
-    // @param Number angle rotation (radians)
-    box: function (cobalt, node, center, width, height, color, angle=0, lineWidth=1) {
+    box: function (cobalt, node, center, width, height, color, lineWidth=1) {
         const [ x, y ] = center
         
         const halfWidth = width / 2
@@ -193,43 +202,25 @@ export default {
         const bottomLeft = [ x - halfWidth, y + halfHeight ]
         const bottomRight = [ x + halfWidth, y + halfHeight ]
 
-        if (angle !== 0) {
-            // rotate the point by <angle> rads around origin
-            //      point    origin   rads     out 
-            _rotate(topLeft, center, angle, topLeft)
-            _rotate(topRight, center, angle, topRight)
-            _rotate(bottomLeft, center, angle, bottomLeft)
-            _rotate(bottomRight, center, angle, bottomRight)
-        }
-
         line(cobalt, node, topLeft, topRight, color, lineWidth)
         line(cobalt, node, bottomLeft, bottomRight, color, lineWidth)
         line(cobalt, node, topLeft, bottomLeft, color, lineWidth)
         line(cobalt, node, topRight, bottomRight, color, lineWidth)
     },
 
-    
-
-    // @param Number angle rotation (radians)
-    filledBox: function (cobalt, node, center, width, height, color, angle=0) {
+    filledBox: function (cobalt, node, center, width, height, color) {
+        
         const [ x, y ] = center
         
         const halfWidth = width / 2
         const halfHeight = height / 2
 
-        const topLeft = [ x - halfWidth, y - halfHeight ];
-        const topRight = [ x + halfWidth, y - halfHeight ];
-        const bottomLeft = [ x - halfWidth, y + halfHeight ];
-        const bottomRight = [ x + halfWidth, y + halfHeight ];
-
-        if (angle !== 0) {
-            // rotate the point by <angle> rads around origin
-            //      point    origin   rads     out 
-            _rotate(topLeft, center, angle, topLeft)
-            _rotate(topRight, center, angle, topRight)
-            _rotate(bottomLeft, center, angle, bottomLeft)
-            _rotate(bottomRight, center, angle, bottomRight)
-        }
+        const m = node.data.transforms.at(-1)
+
+        const topLeft = vec2.transformMat3([ x - halfWidth, y - halfHeight ], m)
+        const topRight = vec2.transformMat3([ x + halfWidth, y - halfHeight ], m)
+        const bottomLeft = vec2.transformMat3([ x - halfWidth, y + halfHeight ], m)
+        const bottomRight = vec2.transformMat3([ x + halfWidth, y + halfHeight ], m)
 
         let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
 
@@ -305,21 +296,99 @@ export default {
 
     clear: function (cobalt, node) {
         node.data.vertexCount = 0
+        node.data.transforms.length = 1 // remove all transform matrices except the first one
+        mat3.identity(node.data.transforms[0])
         node.data.dirty = true
     },
 }
 
 
-function _rotate (a, b, rad, out) {
-    //Translate point to the origin
-    let p0 = a[0] - b[0],
-        p1 = a[1] - b[1],
-        sinC = Math.sin(rad),
-        cosC = Math.cos(rad);
+function line (cobalt, node, start, end, color, lineWidth=1) {
+    
+    const m = node.data.transforms.at(-1)
+    start = vec2.transformMat3(start, m)
+    end = vec2.transformMat3(end, m)
+
+    const delta = vec2.sub(end, start)
+
+    const unitBasis = vec2.normalize(delta)
+    const perp = perpendicularComponent(unitBasis)
+
+    const halfLineWidth = lineWidth / 2
+    
+    let i = node.data.vertexCount * 6 // 2 floats position + 4 floats color per vertex
+
+    // triangle 1
+    // pt 1
+    node.data.vertices[i + 0] = start[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 1] = start[1] + perp[1] * halfLineWidth
+
+    // pt1 color
+    node.data.vertices[i + 2] = color[0]
+    node.data.vertices[i + 3] = color[1]
+    node.data.vertices[i + 4] = color[2]
+    node.data.vertices[i + 5] = color[3]
+
+    // pt 2
+    node.data.vertices[i + 6] = start[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 7] = start[1] - perp[1] * halfLineWidth
+
+    // pt2 color
+    node.data.vertices[i + 8] = color[0]
+    node.data.vertices[i + 9] = color[1]
+    node.data.vertices[i + 10] = color[2]
+    node.data.vertices[i + 11] = color[3]
+
+    // pt 3
+    node.data.vertices[i + 12] = end[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 13] = end[1] + perp[1] * halfLineWidth
+
+    // pt3 color
+    node.data.vertices[i + 14] = color[0]
+    node.data.vertices[i + 15] = color[1]
+    node.data.vertices[i + 16] = color[2]
+    node.data.vertices[i + 17] = color[3]
+    
+
+    // triangle 2
+    // pt 2
+    node.data.vertices[i + 18] = start[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 19] = start[1] - perp[1] * halfLineWidth
 
-    //perform rotation and translate to correct position
-    out[0] = p0 * cosC - p1 * sinC + b[0];
-    out[1] = p0 * sinC + p1 * cosC + b[1];
-    return out;
+    // pt2 color
+    node.data.vertices[i + 20] = color[0]
+    node.data.vertices[i + 21] = color[1]
+    node.data.vertices[i + 22] = color[2]
+    node.data.vertices[i + 23] = color[3]
+    
+    // pt 3
+    node.data.vertices[i + 24] = end[0] + perp[0] * halfLineWidth
+    node.data.vertices[i + 25] = end[1] + perp[1] * halfLineWidth
+
+    // pt3 color
+    node.data.vertices[i + 26] = color[0]
+    node.data.vertices[i + 27] = color[1]
+    node.data.vertices[i + 28] = color[2]
+    node.data.vertices[i + 29] = color[3]
+
+    // pt 4
+    node.data.vertices[i + 30] = end[0] - perp[0] * halfLineWidth
+    node.data.vertices[i + 31] = end[1] - perp[1] * halfLineWidth
+
+    // pt4 color
+    node.data.vertices[i + 32] = color[0]
+    node.data.vertices[i + 33] = color[1]
+    node.data.vertices[i + 34] = color[2]
+    node.data.vertices[i + 35] = color[3]
+
+
+    node.data.vertexCount += 6
+    node.data.dirty = true
 }
 
+
+// return component of vector perpendicular to a unit basis vector
+// (IMPORTANT NOTE: assumes "basis" has unit magnitude (length==1))
+function perpendicularComponent (inp) {
+    return [ -inp[1], inp[0] ]
+}

package/src/sprite/spritesheet.js

@@ -3,7 +3,8 @@ import createTextureFromBuffer from '../create-texture-from-buffer.js'
 import createTextureFromUrl    from '../create-texture-from-url.js'
 import readSpriteSheet         from './read-spritesheet.js'
 import spriteWGSL              from './sprite.wgsl'
-import { round, mat4, vec3 }   from '../deps.js'
+import round                   from 'round-half-up-symmetric'
+import { mat4, vec3 }          from 'wgpu-matrix'
 
 
 // shared spritesheet resource, used by each sprite render node

package/examples/01-primitives/component-animation.js

@@ -1,8 +0,0 @@
-export default function componentAnimation (obj) {
-    return {
-        name: obj.name || '',
-        frame: obj.frame || 0,
-        accumulator: obj.accumulator || 0,
-        done: false,
-    }
-}

package/examples/01-primitives/component-transform.js

@@ -1,13 +0,0 @@
-import { vec3 } from './deps.js'
-
-
-export default function componentTransform (obj) {
-    return {
-        position: obj.position || vec3.create(0, 0, 0),
-        rotation: obj.rotation || 0,
-
-        // if set, this means the position is relative to another transform
-        // rather than being in world space
-        relativeTo: obj.relativeTo,
-    }
-}

package/examples/01-primitives/entity-sprite.js

@@ -1,47 +0,0 @@
-import * as Cobalt         from '../../bundle.js'
-import animationComponent  from './component-animation.js'
-import transformComponent  from './component-transform.js'
-import { ECS, vec3, vec4 } from './deps.js'
-
-
-export default function spriteEntity (world, opts) {
-    const ENTITY = ECS.createEntity(world)
-
-    ECS.addComponentToEntity(world, ENTITY, 'transform', transformComponent({
-        position: vec3.create(opts.position[0], opts.position[1], 0)
-    }))
-
-    ECS.addComponentToEntity(world, ENTITY, 'animation', animationComponent({
-        name: opts.name
-    }))
-
-    const tint = vec4.create(0, 0, 0, 0)
-
-    const opacity = opts.opacity ?? 255
-
-    const spriteNode = opts.spriteNode
-
-    const cobaltSpriteId = spriteNode.addSprite(opts.name, 
-                                           opts.position,
-                                           vec3.create(1, 1, 1),
-                                           tint,
-                                           opacity / 255,
-                                           opts.rotation || 0,
-                                           opts.zIndex)
-
-    ECS.addComponentToEntity(world, ENTITY, 'sprite', {
-        name: opts.name,
-
-        layer: opts.layer,
-        rotation: 0, // radians
-        scale: vec3.create(1, 1, 1),
-        opacity: 1,  // 0 is transparent, 1 is opaque
-        tint: vec4.create(0, 0, 0, 0),
-
-        // cobalt references
-        cobaltSpriteId,
-        spriteNode,
-    })
-
-    return ENTITY
-}

package/src/deps.js

@@ -1,3 +0,0 @@
-export { default as removeArrayItems } from 'https://cdn.jsdelivr.net/gh/mreinstein/remove-array-items/src/remove-array-items.js'
-export { default as round }            from 'https://cdn.skypack.dev/pin/round-half-up-symmetric@v2.0.0-pfMZ4UGGs9FcqO8UiEHO/mode=imports,min/optimized/round-half-up-symmetric.js'
-export { mat4, vec2, vec3, vec4 }      from 'https://wgpu-matrix.org/dist/3.x/wgpu-matrix.module.js'