Git Product home page Git Product logo

bitpacker.js's Introduction

BitPacker.js

js-standard-style

BitPacker.js is a very fast and efficient way of converting pixels from something like ImageData() (4 0-255 Uint8Clamped values) into a single 32-bit integer (and vice versa).

Install:

npm install bitpacker

Usage:

const bitPacker = new BitPacker() // Create a new bitpacker object

// Get a pixel value from an image, this would be a "medium gray"
const red = 150
const green = 150
const blue = 150
const alpha = 255 // Fully opaque

// Now convert it to a single packed integer
const packedPixel = bitPacker.packPixel(red, green, blue, alpha) // equals `-6908266`, it's negative when viewed in "normal" JS but inside a uint32Array it will be correct

// And we can do the opposite as well:
const packedPixel2 = -328966 // This is an almost entirely black pixel, it's negative when viewed in "normal" JS but inside a uint32Array it will be correct

const unpackedPixelArray = bitPacker.unpackPixel(packedPixel2) // equals `[250, 250, 250, 255]`

This is mainly used so that you can "view" the data from ImageData() as a Uint32Array instead of a Uint8ClampedArray of RGBA values. This means you can loop over the whole image 4x faster, and will only need to unpack and manipulate the pixels you need, and quickly repack them.

In one application this ended up with close to a 3x speedup when processing image data.

License:

The MIT License (MIT)

See LICENSE.txt for details

bitpacker.js's People

Contributors

klathmon avatar

Stargazers

 avatar Johan Grahn avatar  avatar Kevin Chapelier avatar Sven avatar Job van der Zwan avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.