JavaScript Question

Monkey Archive Forums/Digital Discussion/JavaScript Question

impixi

(Posted 2012) [#1]

I'm coding an opengl-free, IE9-friendly HTML5 databuffer class to overcome the limitations of monkey's inbuilt version. I've got everything working, except PeekFloat/PokeFloat.

The problem I'm having is converting floats to ints and vice-versa without losing precision. I've searched around and found a couple of supposed solutions, but they seem particularly complicated for my purposes.

So I'm wondering if anyone knows a simple JavaScript solution to convert a IEE754 Float to a 32bit Integer and then convert it back again without losing precision? Preferably using only bit shifting and masking operations? Anyone?

Here's my code so far:

htmldatabuffer.js

var STATUS_NOTREADY = 0;
var STATUS_READY = 1;
var STATUS_LOADING = 2;

var ERROR_NONE = 0;
var ERROR_FILE = 1;

// ------------------------------
// ---- HTMLDataBuffer Class ----
// ------------------------------

function HTMLDataBuffer(){}
var pRef = HTMLDataBuffer.prototype;		

// Properties
pRef.canvas = document.createElement("canvas");
pRef.context = pRef.canvas.getContext("2d");
pRef.imageData = null;
pRef.status = STATUS_NOTREADY;
pRef.error = ERROR_NONE;
pRef.size = 0; //in bytes


// Methods
pRef.Create = function(size)
{
	if (pRef.status != STATUS_LOADING)
	{
		pRef.size = size;

		var width = 512; 
		var height = Math.floor((pRef.size / 4) / width) + 1;
			
		pRef.canvas.width = width;
		pRef.canvas.height = height;
		pRef.imageData = pRef.context.createImageData(width, height);
		
		pRef.status = STATUS_READY;
		pRef.error = ERROR_NONE;
	}
}

pRef.LoadImageData = function(src)
{
	if (pRef.status != STATUS_LOADING)
	{
		pRef.status = STATUS_LOADING;
		var image = new Image();
		image.onload = function()
		{
			pRef.canvas.width = image.width;
			pRef.canvas.height = image.height;
			pRef.context.drawImage(image, 0, 0);
			pRef.imageData = pRef.context.getImageData(0, 0, pRef.canvas.width, pRef.canvas.height);
			pRef.size = (image.width * image.height * 4);
			
			pRef.status = STATUS_READY;
			pRef.error = ERROR_NONE;
		}

		image.onerror = function()
		{
			pRef.error = ERROR_FILE;
			
			alert("File error."); //DEBUG ONLY - REMOVE
		}
		
		image.src = src;
		pRef.size = 0;
	}
}

pRef.GetSize = function()
{
	return pRef.size;
}

pRef.PokeByte = function(addr, val)
{
	if ((addr >= 0) && (addr < pRef.size))
		pRef.imageData.data[addr] = val;
}

pRef.PokeShort = function(addr, val)
{
	if ((addr >= 0) && (addr < (pRef.size - 1)))
	{
		pRef.imageData.data[addr] = (val >> 8)&255;
		pRef.imageData.data[addr+1] = val&255;
	}
}

pRef.PokeInt = function(addr, val)
{
	if ((addr >= 0) && (addr < (pRef.size - 3)))
	{
		pRef.imageData.data[addr] = (val >> 24)&255;
		pRef.imageData.data[addr+1] = (val >> 16)&255;
		pRef.imageData.data[addr+2] = (val >> 8)&255;
		pRef.imageData.data[addr+3] = val&255;
	}
}

pRef.PokeFloat = function(addr, val)
{
	if ((addr >= 0) && (addr < (pRef.size - 3)))
	{
		//*** IS PRECISION LOST WHEN BIT SHIFTING A FLOAT??
		pRef.imageData.data[addr] = (val >> 24)&255;
		pRef.imageData.data[addr+1] = (val >> 16)&255;
		pRef.imageData.data[addr+2] = (val >> 8)&255;
		pRef.imageData.data[addr+3] = val&255;
		//****************************************************
	}
}

pRef.PeekByte = function(addr)
{
	if ((addr >= 0) && (addr < pRef.size))
		return pRef.imageData.data[addr];
}

pRef.PeekShort = function(addr)
{
	if ((addr >= 0) && (addr < (pRef.size - 1)))
		return ((pRef.imageData.data[addr] << 8) | pRef.imageData.data[addr+1]);	
}

pRef.PeekInt = function(addr)
{
	if ((addr >= 0) && (addr < (pRef.size - 3)))
		return ((pRef.imageData.data[addr] << 24) | (pRef.imageData.data[addr+1] << 16) | (pRef.imageData.data[addr+2] << 8) | pRef.imageData.data[addr+3]);
}

pRef.PeekFloat = function(addr)
{
	if ((addr >= 0) && (addr < (pRef.size - 3)))
	{
		//*** CONVERT 4 BYTES(32 bit Int) TO FLOAT! HOW?
		return ((pRef.imageData.data[addr] << 24) | (pRef.imageData.data[addr+1] << 16) | (pRef.imageData.data[addr+2] << 8) | pRef.imageData.data[addr+3]);
		//**********************************
	}
}

htmldatabuffer.monkey

Strict

#if TARGET<>"html5"
#error "HTMLDataBuffer is only available on the html5 target"
#end

Import "htmldatabuffer.js"

Extern

Global STATUS_NOTREADY:Int
Global STATUS_READY:Int
Global STATUS_LOADING:Int

Global ERROR_NONE:Int
Global ERROR_FILE:Int

Class HTMLDataBuffer
	
	Field status:Int
	Field error:Int

	Method Create:Void(size:Int)
	Method LoadImageData:Void(url:String)
	
	Method GetSize:Int()
	
	Method PokeByte:Void(addr:Int, val:Int)
	Method PokeShort:Void(addr:Int, val:Int)
	Method PokeInt:Void(addr:Int, val:Int)
	Method PokeFloat:Void(addr:Int, val:Float)

	Method PeekByte:Int(addr:Int)
	Method PeekShort:Int(addr:Int)
	Method PeekInt:Int(addr:Int)
	Method PeekFloat:Float(addr:Int)
	
End


Public

Function CreateHTMLDataBuffer:HTMLDataBuffer(size:Int)

	Local buffer:HTMLDataBuffer = New HTMLDataBuffer()
	buffer.Create(size)

	Return buffer

End

test.monkey

Strict

Import monkey.random

Import htmldatabuffer

Function Main:Int()
	
	Local dataBuffer:HTMLDataBuffer = CreateHTMLDataBuffer(65535)
		
	For Local n:Int = 0 Until 10
		Local addr:Int = Floor(Rnd(0, dataBuffer.GetSize()))
		Local val:Float = Rnd(0.0, 10000.0)
		dataBuffer.PokeFloat(addr, val)
		Print "Original: " + val + "~tPeeked: " + dataBuffer.PeekFloat(addr)
	Next

	Return 0
	
End

muddy_shoes

(Posted 2012) [#2]

As javascript doesn't really have integers and floats, only 64-bit doubles, and it just pretends that anything that you use a bitwise operator on is a 32-bit integer, I doubt there is a simple way to do this.

Here's some reading material: http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference

impixi

(Posted 2012) [#3]

Thanks for the link. That's a nice gathering in one place of all the bits and pieces of information I've been reading regarding Javascript numbers and bitwise manipulation.

Looks like I'll have to trawl through this guy's code to see if I can extract something usable:

http://www.merlyn.demon.co.uk/js-exact.htm#IEEE

Could take me a while though... And the resultant code will not be quick.

AdamRedwoods

(Posted 2012) [#4]

ieee four byte (int) to float converter written in monkey:
http://www.monkeycoder.co.nz/Community/posts.php?topic=2465