geometrizejs
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.19 • Public • Published

    geometrizejs

    See the playground to understand what's this is all about.

    Contents

    Summary

    Usage

    Note that this library is just types for official geometrize-haxe so it doesn't support any image read/write and the API could seems low level.

    Checkout geometrizejs-extra which provides an easy to use API and supports several image formats both in node and browser.

    npm install --save geometrizejs

    This example uses jimp to load images which supports formats both in node.js and browsers. Nevertheless any library can be used, such as pngjs.

    Examples

    Render SVG

    import Jimp from 'jimp'
    import { Bitmap, ImageRunner, ShapeTypes, SvgExporter } from 'geometrizejs'
    
    (async () => {
      // load png/jpeg/gif,bmp/tiff image from url, file path or Buffer using jimp:
      const image = await Jimp.read('test/assets/logo.png')
      const bitmap = Bitmap.createFromByteArray(image.bitmap.width, 
        image.bitmap.height, image.bitmap.data)
      const runner = new ImageRunner(bitmap)
      const options = {
        shapeTypes: [ShapeTypes.CIRCLE, ShapeTypes.TRIANGLE],
        candidateShapesPerStep: 50,
        shapeMutationsPerStep: 100,
        alpha: 128
      }
      const iterations = 500
      const svgData = []
      for (let i = 0; i < iterations; i++) {
        svgData.push(SvgExporter.exportShapes(runner.step(options)))
      }
      const svg = SvgExporter.getSvgPrelude() + 
        SvgExporter.getSvgNodeOpen(bitmap.width, bitmap.height) + 
        svgData.join('\n') + 
        SvgExporter.getSvgNodeClose()
    
      // in node.js:
      writeFileSync('output.svg', svg)
    
      // in the browser:
      document.getElementById('svg-container').innerHTML = svg
    })()

    Render bitmap

    import Jimp from 'jimp'
    import { Bitmap, ImageRunner, ShapeTypes } from 'geometrizejs'
    
    (async () => {
      // load png/jpeg/gif,bmp/tiff image from url, file path or Buffer using jimp:
       const image = await Jimp.read('test/assets/logo.png')
      const bitmap = Bitmap.createFromByteArray(image.bitmap.width, 
        image.bitmap.height, image.bitmap.data)
      const runner = new ImageRunner(bitmap)
      const options = {
        shapeTypes: [ShapeTypes.TRIANGLE],
        candidateShapesPerStep: 50,
        shapeMutationsPerStep: 100,
        alpha: 128
      }
      const iterations = 2000
      for (let i = 0; i < iterations; i++) {
        const r = runner.step(options)
      }
      const bytes = runner.getImageData().getBytes().b
      const out = new Jimp({ 
        width: image.bitmap.width, 
        height: image.bitmap.height,
        data: bytes
      })
      // in node.js we could write it to file
      await out.writeAync('tmp/bitmap/logo.png')
    
      // in the browser we could write it to a <img> element as data url
      document.getElementById('target-image').src = await out.getBase64Async()
    })()

    Render JSON

    Getting the shapes as JSON can be used to render them using other technology or processing / analyse them:

    import Jimp from 'jimp'
    import { Bitmap, ImageRunner, ShapeTypes } from 'geometrizejs'
    
    (async () => {
      const image = await Jimp.read('test/assets/logo.png')
      const bitmap = Bitmap.createFromByteArray(image.bitmap.width, 
        image.bitmap.height, image.bitmap.data)
      const runner = new ImageRunner(bitmap)
      const options = {
        shapeTypes: [ShapeTypes.CIRCLE],
        candidateShapesPerStep: 50,
        shapeMutationsPerStep: 100,
        alpha: 128
      }
      const iterations = 200
      const shapes = []
      for (let i = 0;i < iterations;i++) {
        shapes.push(...JSON.parse(ShapeJsonExporter.exportShapes(runner.step(options))))
      }
      // shapes is an array of objects serializable with JSON.stringify() 
    })()

    API docs

    TODO

    Build geometrize.js

    git clone --recurse-submodules https://github.com/cancerberoSgx/geometrizejs.git
    cd geometrizejs
    sh generate-geometrize-js.sh

    That should re-generate geometrizejs/src/geometrize.js.

    ImageRunnerOptions

    • shapeTypes: Array<ShapeTypes>: The types of shapes to use when generating the image.
    • alpha: number: The opacity of the shapes (0-255).
    • candidateShapesPerStep: number: The number of candidate shapes to try per model step.
    • shapeMutationsPerStep: number: The number of times to mutate each candidate shape.

    TODO / Roadmap

    Extras / ideas

    The following are features not supported by haxe implementation. If implemented it will be in a separate project so this project keeps being zero-implementation:

    Install

    npm i geometrizejs

    DownloadsWeekly Downloads

    2

    Version

    0.0.19

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    36

    Last publish

    Collaborators

    • cancerberosgx