Changing floating point numbers to text in JavaScript

Question

Changing floating point numbers to text in JavaScript

I'm looking for an efficient way to store an array of THREE.Vector3 objects in local storage using JavaScript. Since JavaScript operates with strings, I need to convert a 32-bit float to a string using the best bit ratio possible, ideally equating 32-bit float to 4 * 8 bits, similar to how it's done in C++.

However, there are two main issues I'm facing. Firstly, JavaScript strings are encoded in UTF-8 which includes some padding.

http://en.wikipedia.org/wiki/UTF-8

Secondly, the code I'm currently using converts 0 to '' which then gets omitted, leading to unreliable byte length conversion.


var float2str = function(num) {
    var bytestream = new Array();
    var view = new DataView(new ArrayBuffer(4));
    view.setFloat32(0, num);

    bytestream.push(view.getUint8(0));
    bytestream.push(view.getUint8(1));
    bytestream.push(view.getUint8(2));
    bytestream.push(view.getUint8(3));
    return String.fromCharCode(view.getUint8(0), view.getUint8(1), view.getUint8(2), view.getUint8(3));
}

var str2float = function(str) {
    var bytestream = unpack(str);
    var view = new DataView(new ArrayBuffer(4));
    view.setUint8(0, bytestream[0]);
    view.setUint8(1, bytestream[1]);
    view.setUint8(2, bytestream[2]);
    view.setUint8(3, bytestream[3]);
    return view.getFloat32(0);
}

Thank you!

javascript byte three.js chars

Answer 1

Answer №1

To ensure the string value of unsigned 8-bit integers is printable, it's crucial to consider the range of ASCII values. If the numbers are too small or too large, they may result in unprintable characters. One approach to address this issue is to use 4-bit values from the float and adjust them into the printable range by adding an offset of +32. Here is a method that implements this:

var offset = 33;

var floatToStr = function(num){
    var view = new DataView(new ArrayBuffer(4));
    view.setFloat32(0,num);

    var fourbits = [];
    for ( var i = 0; i < 4; i++ ){
        // split each byte into two 4-bit values
        fourbits.push(view.getUint8(0) >> 4);
        fourbits.push(view.getUint8(0) & 15);
    }

    for ( var i = 0; i < 8; i++ ){
        // construct a string with adjusted four-bit values
        fourbits[i] = String.fromCharCode(offset+fourbits[i]);
    }
    return fourbits.join('');

};

var strToFloat = function(str){
    var bytestream = str;
    var view = new DataView(new ArrayBuffer(4));

    for(var i = 0; i < 4; i++){
        // convert the characters back into bytes.
        view.setUint8(i, ((bytestream[i*2].charCodeAt() - offset) << 4) + bytestream[i*2+1].charCodeAt() - offset);
    }

    return view.getFloat32(0);
};

console.log(floatToStr('2.251')); // "%!\"!\"!'#"
console.log(strToFloat(floatToStr('2.251'))); // 2.250999927520752

This solution aims to provide a helpful way to handle the conversion process.

Answer 2

To ensure the string value of unsigned 8-bit integers is printable, it's crucial to consider the range of ASCII values. If the numbers are too small or too large, they may result in unprintable characters. One approach to address this issue is to use 4-bit values from the float and adjust them into the printable range by adding an offset of +32. Here is a method that implements this:

var offset = 33;

var floatToStr = function(num){
    var view = new DataView(new ArrayBuffer(4));
    view.setFloat32(0,num);

    var fourbits = [];
    for ( var i = 0; i < 4; i++ ){
        // split each byte into two 4-bit values
        fourbits.push(view.getUint8(0) >> 4);
        fourbits.push(view.getUint8(0) & 15);
    }

    for ( var i = 0; i < 8; i++ ){
        // construct a string with adjusted four-bit values
        fourbits[i] = String.fromCharCode(offset+fourbits[i]);
    }
    return fourbits.join('');

};

var strToFloat = function(str){
    var bytestream = str;
    var view = new DataView(new ArrayBuffer(4));

    for(var i = 0; i < 4; i++){
        // convert the characters back into bytes.
        view.setUint8(i, ((bytestream[i*2].charCodeAt() - offset) << 4) + bytestream[i*2+1].charCodeAt() - offset);
    }

    return view.getFloat32(0);
};

console.log(floatToStr('2.251')); // "%!\"!\"!'#"
console.log(strToFloat(floatToStr('2.251'))); // 2.250999927520752

This solution aims to provide a helpful way to handle the conversion process.

Answer 3

Answer №2

To achieve compression, utilize base64 encoding method. This technique transforms 6 bits into a printable ASCII character at a time (which remains the same in UTF-8). Consequently, only 5.33 bytes are actually required for one float when using this approach (note that it is not equivalent to 6 bytes as long as you encode the array collectively rather than individual floats), resulting in some space efficiency.

For direct conversion from ArrayBuffer to base64 string, refer to this ready-made function (credit to original author): https://gist.github.com/958841

Answer 4

To achieve compression, utilize base64 encoding method. This technique transforms 6 bits into a printable ASCII character at a time (which remains the same in UTF-8). Consequently, only 5.33 bytes are actually required for one float when using this approach (note that it is not equivalent to 6 bytes as long as you encode the array collectively rather than individual floats), resulting in some space efficiency.

For direct conversion from ArrayBuffer to base64 string, refer to this ready-made function (credit to original author): https://gist.github.com/958841

Changing floating point numbers to text in JavaScript

Answer №1

Answer №2

Similar questions

Which is the better option for setting a title: using .prop or .attr?

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Remove any list items that do not possess a particular class

Finding unique data stored in separate JSON files and loading them individually may require using different methods for

What could be causing my button to not display within the li element?

Creating subpages using IDs can be accomplished by following these simple steps

Using arrow brackets in Flux Dispatcher code written in JavaScript

The background image fails to load in ReactJS application

Can I add the object to the DOM and hold off on executing any events until the next

Unlimited scrolling with React and Meteor

Setting radio button values according to dropdown selection - a beginner's guide

Using Javascript to extract and organize JSON arrays from various sets of checkboxes

Utilize ModifyDOM to erase text triggered by selecting a radio button

Is there a way to bring this specific function into a separate file?

Create a dynamic form using JSON data and the Material UI library

CalendarExtender displaying an incorrect date selection, potentially linked to time zone issues

The object's property is currently displaying as unidentifiable

Transmit variables to ajax callback function

Using Javascript to swap background images, ensuring that the initial image is shown only once

Interacting with local data using Express server