copy THREE.js matrix from object - javascript

i need to to same matrix mulitiply in Three.js. I had an Object3D and i get the right matrix to console.log when doing this:
console.log (scene.getObjectByName( "Pointer" ).matrix)
the result is like:
T…E.Matrix4 {elements: Float32Array[16]}
elements: Float32Array[16] 0: 11: 02: 03: 04: 05: 16: 07: 08: 09: 0 10: 11 1: 0 12: -150 13: 0 14: 0 15: 1
note here that the 12th element have the value -150 (after a obj.translationX(-150)).
var newMat = new THREE.Matrix4();
console.log(scene.getObjectByName("Pointer").matrix.elements)
// output: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
newMat = newMat.copy(scene.getObjectByName("Pointer").matrix);
console.log(newMat);
// output:elements: Float32Array[16] 1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1
giving back an identiy matrix (meaning the 12th element is: 0)
Whats is wrong here?
UPDATE: inside the renderloop... newMat.copy(...).. works fine!

three.js will update the object matrix when it render the page according the object position, scale, rotation. So when you set the object matrix, it will sooner be rewrited.
To manually set the object matrix, you have to set autoupdate to false.
object.matrixAutoUpdate = false;
then use the your code.
var newMat = new THREE.Matrix4();
console.log(scene.getObjectByName("Pointer").matrix.elements)
// output: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
newMat = newMat.copy(scene.getObjectByName("Pointer").matrix);
console.log(newMat);

Related

pixijs containsPoint and use hitArea

I want to check if there is a point in an area of the sprite
But the containsPoint method does not include the area and checks it as full.
const box = Sprite.from(box2Texture)
box.anchor.set(0.5, 0.5)
box.position.set(50, 25)
box.scale.set(0.3)
box.hitArea = new Polygon([-50, 0, 0, -25, 50, 0, 0, 25])

Python equivalent for JavaScript's DataView

I load a byte array from a base-64 encoded string and I'd like to parse it.
However values are encoded in different ways and I'd like to replicate DataView's behavior.
Example:
function parse(data){
view = new DataView(data.buffer);
return {
headerSize : view.getUint8(0),
numberOfPlanes : view.getUint16(1, true),
width: view.getUint16(3, true),
height: view.getUint16(5, true),
offset: view.getUint16(7, true)
};
}
Usage:
data = new Uint8Array([8, 96, 0, 0, 2, 0, 1, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
parse(data)
Returns {headerSize: 8, numberOfPlanes: 96, width: 512, height: 256, offset: 8}
Later on I'll need to use DataView.getFloat32.
Right now I have something like this:
def get_bin(a):
ba = bin(a)[2:]
return "0" * (8 - len(ba)) + ba
def getUInt16(arr, ind):
a = arr[ind]
b = arr[ind + 1]
return int(get_bin(b) + get_bin(a), 2)
def getFloat32(arr, ind):
return bin_to_float("".join(get(i) for i in arr[ind : ind + 4][::-1]))
def bin_to_float(binary):
return struct.unpack("!f", struct.pack("!I", int(binary, 2)))[0]
But a library could be more efficient and versatile
Float example: [111, 62, 163, 36] should yield 7.079574826789837e-17
This should cover enough of your use cases or at least get you to the point where you can make minor changes. Hopefully you can somewhat follow what I am doing but feel free to ask questions.
from functools import reduce
import struct
class DataView:
def __init__(self, array, bytes_per_element=1):
"""
bytes_per_element is the size of each element in bytes.
By default we are assume the array is one byte per element.
"""
self.array = array
self.bytes_per_element = 1
def __get_binary(self, start_index, byte_count, signed=False):
integers = [self.array[start_index + x] for x in range(byte_count)]
bytes = [integer.to_bytes(self.bytes_per_element, byteorder='little', signed=signed) for integer in integers]
return reduce(lambda a, b: a + b, bytes)
def get_uint_16(self, start_index):
bytes_to_read = 2
return int.from_bytes(self.__get_binary(start_index, bytes_to_read), byteorder='little')
def get_uint_8(self, start_index):
bytes_to_read = 1
return int.from_bytes(self.__get_binary(start_index, bytes_to_read), byteorder='little')
def get_float_32(self, start_index):
bytes_to_read = 4
binary = self.__get_binary(start_index, bytes_to_read)
return struct.unpack('<f', binary)[0] # <f for little endian
def parse(byte_array):
d = DataView(byte_array)
return {
"headerSize": d.get_uint_8(0),
"numverOfPlanes": d.get_uint_16(1),
"width": d.get_uint_16(3),
"hieght": d.get_uint_16(5),
"offset": d.get_uint_16(7),
}
result = parse([8, 96, 0, 0, 2, 0, 1, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
import json
print(json.dumps(result, indent=2))
d = DataView([111, 62, 163, 36])
d.get_float_32(0)
Output:
{
"headerSize": 8,
"numverOfPlanes": 96,
"width": 512,
"hieght": 256,
"offset": 8
}
7.079574826789837e-17

javascript board game piece placement

I'm writing a board game in java script, and what i'm trying to accomplish is: layout the board(chess/checkers format) Then add pieces to the board based on position. So for example i want to be able to write code for piece a to be moved onto tile 10.
So far in my code i have a loop to create the board but don't a method to properly name the tiles, so that the piece can correctly be placed on the tile.
for (i=0; i<64; i++){
var tile = cc.Sprite.create(res.myTile_png);
this.addChild(tile,0);
x = centerpos.x + ((i % 8) - 3.5) * tile.getBoundingBox().width;
y = centerpos.y + (Math.floor(i / 8) - 3.5) * tile.getBoundingBox().height;
tile.setPosition(x,y);
}
One way to go about doing this would be to assign a unique integer identifier to every distinct piece in the game, and then maintain a matrix of dimensions equal to the # of rows x # of columns on the board, with values of the piece identifiers in the correct address in the matrix that would correspond to their position on the board.
For instance, the starting arrangement of pieces in checkers can be represented by:
[
[ 0, -1, 0, -1, 0, -1, 0, -1 ],
[ -1, 0, -1, 0, -1, 0, -1, 0 ],
[ 0, -1, 0, -1, 0, -1, 0, -1 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 1, 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 1, 0, 1, 0, 1, 0, 1 ],
[ 1, 0, 1, 0, 1, 0, 1, 0 ]
]
with, say, -1 representing white, and 1 representing red pieces on the board.
The tile elements of the board can also be kept in a matrix, so that the two matrices can be iterated over together to place the pieces in corresponding locations.
The unique ids can also then be used as CSS class names, or image file names to be attached to the element representing the piece.

Converting an array of bytes into a float32

I have a JavaScript application which receives a voltage value as an Uint8Array. Here are 2 examples of the received data:
[3, 134, 46, 177, 46, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[3, 127, 46, 170, 46, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
I am trying to convert this Uint8Array to a float value, but I am not sure if it's a float32 or float64, if it's signed or not. What I do know is that this value is around 12.
Can anyone help with a JavaScript snippet to do the conversion?
Thank you in advance.
Each line appears to have two voltages in it. Voltages from devices usually come from ATOD converters that have between 8 and 16 bits of info and are scaled based on the circuitry.
It looks like a 3 (unused and probably some sort of mode flag) followed by two pairs of bytes each one a voltage from a ATOD. I would guess that two bytes such as 177 and 46 should be interpreted as (177+46*256)/1000.0 based on 1 mv. scaling. This produces values just over 11.9 volts. Given the range of the two samples this would fit your expectations.

Sliding values of an array inside intervals

I ve created a array with eleven values . I am trying to slide the values of my array during intervals. What i am trying, every n ms to slide a value to the next position of the array that i ve created. Every inteval i initialize the first value, so i want the slide effect.
var barArray = [0,0,0,0,0,0,0,0,0,0,0];
var interval = 0;
setInterval(function() {
temporal = getNewValue; //getting with a function new value
barArray[0] = temporal;
if(interval == barArray.length)
{
interval = 0;
}
for (var i = 0; barArray.length; i++){
// code missing
}
}, 1000);
I am tried many things without finding a solution.
Output:
1st interval: [76, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
2nd interval: [55, 76, 0, 0, 0, 0, 0, 0, 0, 0, 0]
3rd interval: [32,55, 76, 0, 0, 0, 0, 0, 0, 0, 0]
11th interval: [..., 32, 55, 76]
12th [..., 32,55] ect. `
What you have described here is a queue. You input elements at one end and silently drop them at the other end. JavaScript arrays have functions to add and extract elements at both ends of the array (push/pop and shift/unshift).
In the end, a complete solution would be:
var barArray = [0,0,0,0,0,0,0,0,0,0,0];
setInterval(function() {
barArray.unshift(getNewValue());
barArray.pop();
}, 1000);

Categories