Develop Reference

Return coordinates (x,y) from an array of numbers in Javascript

I am trying to make a collision map in a 2d top down view game in Javascript. I am using Tiled to build the maps. Tiled generates a json / javascript file with an array of each element in my map. I can set a boolean for each tile, so those with the true setting will come out in the array as 1 and those with the false value will return 0.
Now I want output those data as x,y coordenates. I mean if i have the array [0,0,0,0] I want that those output like (x,y) (0,0), (1,0), (2,0), (3,0) based in the width and height of the tilemap array. Something like this:
"data":[0,0,0,0,
1,1,1,1,
0,0,0,0,
0,0,0,0]
"height":4,
"width":4,
"x":0,
"y":0
My problem is I don't know how to say it to my loop that there will be four columns and four rows and the index should change from (0,0), (0,1), (0,2), (0,3) to (1,0), (1,1),(1,2),(1,3) after end the first row continue until the last column.
Any idea?

You could use two for-loops for the current row and col respectively:
const tiledOutputJson = {
"data": [
0, 0, 0, 0,
1, 1, 1, 1,
0, 0, 0, 0,
0, 0, 0, 0
],
"height": 4,
"width": 4,
"x": 0,
"y": 0
};
const { data, height, width, x, y } = tiledOutputJson;
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
console.log(`(${row}, ${col}) = ${data[row * height + col]}`);
}
console.log();
}

In general I would recommend to make it an array for x which contains the arrays for y
[
[0,0,0,0],
[1,1,1,1],
[0,0,0,0],
]
You can do the mapping like so
const data = {
"data": [0, 0, 0, 0,
1, 1, 1, 1,
0, 0, 0, 0,
0, 0, 0, 0
],
"height": 4,
"width": 4,
"x": 0,
"y": 0
}
for (let x = 0; x < data.height * data.width; x = x + data.width) {
for (let y = x; y < data.width + x; y++) {
console.log({
x: x / data.height,
y: y % data.width,
v: data.data[y]
})
}
}

2D array replacing values according conditions

I got a 10 x 10 array with the following values:
[[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
In this 2D array, I have to randomly choose six values of 0, either horizontally or vertically (also random) and replace them with the value 6.
I've done this with the following code:
function tekenGrootstSchip(bord) {
rand = Math.floor((Math.random() * 10));
rand2 = Math.floor((Math.random() * 10));
directie = Math.floor((Math.random() * 2));
counter = 0;
if (directie == 0) {
for(y = rand2; y < 10; y++) {
if(counter < 6) {
bord[rand][y] = 6;
counter++;
}
}
for(y = rand2; y > 0; y--) {
if(counter < 6) {
bord[rand][y] = 6;
counter++;
}
}
} else {
for(x = rand; x < 10; x++) {
if(counter < 6) {
bord[x][rand2] = 6;
counter++;
}
}
for(x = rand; x > 0; x--) {
if(counter < 6) {
bord[x][rand2] = 6;
counter++;
}
}
}
}
After doing this for the value 6, I also have to do this for the value 4. The rules for value 4 are a bit different however. You can't place a 4 on a 6, neither can you place a 4 next to a 6. And the value 4 only takes four places (so 4x1, while a 6 is 6x1)
So if my randomly generated direction is horizontal, my bord[x-1][y], bord[x][y] and bord[x+1][y], with x and y initialized at the random value, with y going up to y+1, y+2, y+3, y+4 (4x1). All these values have to be checked against == 0, if true, replacing the zeroes with fours can be initialized otherwise not. If so, I have to generate a new [x][y] and check these conditions again until I can change four zeroes in my 2D array succesfully.
Although I have a general idea of implementing this, I would have a bug that, if for instance one null-value would be replaced with a four, but the one next to it can't be replaced since it's next to a != 0 value, I would be stuck with a "illegal" four.
If anyone could help me out in the right direction I would appreciate it.

feasibility
We can (trivially) show that whatever the 6 configuration chosen, we can always put the 4s.
Indeed, the maximal cover area of a 6 is 9 (a 3x3 square)
000
060
000
(we can't put a 4 in the border surrounding the 6).
So a bound for the maximal 6 configuration covered area is 6*9=54
000000xxxx
060060xxxx
000000xxxx
000000xxxx
060060xxxx
000000xxxx
000000xxxx
060060xxxx
000000xxxx
xxxxxxxxxx
and we can put as many 4 in the squares containing 'x' (which is way more than 4)
6-generation
Let's assume the board is indiced as follow:
0 1 2 3 ... 9
10 11 12 ... 19
...
90... 99
let x towards the bottom and y to the right
A square holding value id can be found at (x,y)=((id - id%10)/10, id%10) and reciprocally
id:(x,y)->x*10+y
So we will only consider numbers between 0 and 99 (since we can find back their associated position(x,y) in the grid)
I will use the copy-pasted below getRandomInt taken shamelessly from mdn
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
Finally we can draw between 0 and 99. If number already exists then discard it, otherwise take it
let indices = new Set
while(indices.size < 6){
let idx = getRandomInt(0,99)
if(!indices.has(idx)){
indices.add(idx)
}
}
return [...indices]
4-generation
We can apply the same stragy as before: draw a random number between 0 and 99 and discard it as long as it is not valid, until 4 valid positions are found
build the invalid set due to the 6 positionned
let invalids = new Set
indices.forEach(idx=>{
let [x,y] = [(idx - idx%10)/10, idx%10]
//add the adjacent squares
for(let i = -1; i<=1; ++i){
for(let j = -1; j<= 1; ++j){
if( 0<=x+i<10 && 0 <= y+j < 10){//if the cell in the board....
invalids.add( (x+i)*10 + y+j )
}
}
}
})
draw except from the invalid set
let out = []
while(out.length < 4){
let idx = getRandomInt(0,99)
if(!invalids.has(idx)){
invalids.add(idx)
out.push(idx)
}
}
return out
That approach may be not that efficient in worst case: we would have about 54% probability of drawing an invalid number!
We can thus consider an array of only the valid numbers, and draw from it
let valids = Array(100).fill(0).reduce((oks, x,i)=>{
if(invalids.has(i)) return oks
return oks.push(i),oks
},[])
//take numbers from that array
let out = []
for(let i = 0; i<4; ++i){
let idx = getRandomInt(0,valids.length)
//notice that here we take the elem from valids
//not just the idx from getRandomInt
out.push(valids[idx])
//and we takeout the element from valids
valids.splice(idx, 1);
}
return out

JS Tile Map - Replacing color tiles by images

I'm trying to do a Tilemap system, so I went through a tutorial. Here's the code :
// Possible tile types
const TILE_TYPES = {
0: { name: 'Sea', color: 'lightBlue'},
1: { name: 'Land', color: 'wheat' },
2: { name: 'House', color: 'black'}
}
// Map tile data
let mapData = <?php echo $mapData ?>
/**
Tile class
*/
class Tile {
constructor (size, type, ctx) {
this.size = size
this.type = type
this.ctx = ctx
}
draw (x, y) {
// Store positions
const xPos = x * this.size
const yPos = y * this.size
// Draw tile
this.ctx.fillStyle = this.type.color
this.ctx.fillRect(xPos, yPos, this.size, this.size)
}
}
/**
Map class
*/
class Map {
constructor (selector, data, opts) {
this.canvas = document.getElementById(selector)
this.ctx = this.canvas.getContext('2d')
this.data = data
this.tileSize = opts.tileSize
}
}
/**
OrthogonalMap class
*/
class OrthogonalMap extends Map {
constructor (selector, data, opts) {
super(selector, data, opts)
this.draw()
}
draw () {
const numCols = this.data[0].length
const numRows = this.data.length
// Iterate through map data and draw each tile
for (let y = 0; y < numRows; y++) {
for (let x = 0; x < numCols; x++) {
// Get tile ID from map data
const tileId = this.data[y][x]
// Use tile ID to determine tile type from TILE_TYPES (i.e. Sea or Land)
const tileType = TILE_TYPES[tileId]
// Create tile instance and draw to our canvas
new Tile(this.tileSize, tileType, this.ctx).draw(x, y)
}
}
}
}
// Init canvas tile map on document ready
document.addEventListener('DOMContentLoaded', function () {
// Init orthogonal map
const map = new OrthogonalMap('orthogonal-map', mapData, { tileSize: 64 })
})
Here's the call :
<?php
$mapData = '[
[1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2],
[1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0],
[1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]';
include "" . $_SERVER['DOCUMENT_ROOT'] . "/includes/maptiles.php";
?>
<canvas id="orthogonal-map" class="canvas-map" width="704" height="576"> </canvas>
Here's my question : How can I replace the color by an image ?
My first bet would be to replace the 'color' attribute to the TILE_TYPES constant and to replace this.ctx.fillStyle by something like this.ctx.drawimage.
I'm a beginner in Javascript so I would love some explaination to your process if you have the time. Thanks !

Drawing the images on the canvas will be straightforward, however, there is a step you need to do before that requires explanation. You need to load the images and wait for them to be ready before starting executing the Javascript code. I'm going to show you the easiest way to achieve this, but there are other methods and this one has several problems. So, it is ok by now, but at some point you will learn the other ways to do it.
First, we will add at html image tags to load the images:
<img id="Sea" src="Sea.jpg">
<img id="Land" src="Land.jpg">
<img id="House" src="House.jpg">
<script>
...
The <script> is the start of your current code and with the ... I mean that the code continues there, you must not write the dots into your code.
If you check the result, you will see that they appear at the top of your page, on top of the canvas. We will now tell Javascript to wait for them to load and remove them from the top of the canvas:
First lets change this:
document.addEventListener('DOMContentLoaded', function () {
by this:
window.addEventListener('load', function () {
With what you had, you were waiting for the DOM content to be loaded to start the execution. With the new code, it will wait for everything to be loaded, including the DOM content and the images.
So, now lets create some references for the images:
const images = {};
window.addEventListener('load', function () {
images.Sea = document.getElementById("Sea");
images.Land = document.getElementById("Land");
images.House = document.getElementById("House");
...
And now, lets remove them from the top of the canvas:
const images = {};
window.addEventListener('load', function () {
images.Sea = document.getElementById("Sea");
images.Land = document.getElementById("Land");
images.House = document.getElementById("House");
images.Sea.parentNode.removeChild(images.Sea);
images.Land.parentNode.removeChild(images.Land);
images.House.parentNode.removeChild(images.House);
...
Now the only part missing is drawing them on the canvas. So, lets replace this:
// Draw tile
this.ctx.fillStyle = this.type.color
this.ctx.fillRect(xPos, yPos, this.size, this.size)
By this:
// Draw tile
this.ctx.drawImage(images[this.type.name], xPos, yPos);

How to draw walls in ThreeJS from path or 2d array?

I need to draw a 3d house model (walls only) from a 2d path or array (explained later) I receive from FabricJS editor I've built. The type of data sent from 2d to 3d views doesn't matter.
My first (and only quite close to what I want to get) attempt was to create the array of 1s and zeros based on the room I want to draw, and then render it in ThreeJS as one cuboid per 'grid'. I based this approach on this ThreeJS game demo. So if the array look like this:
var map = [ //1 2 3 4 5 6 7 8
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 0, 0, 0, 0, 0, 1, 1, 1,], // 1
[1, 1, 0, 0, 1, 0, 0, 0, 0, 1,], // 2
[1, 0, 0, 0, 1, 1, 0, 0, 0, 1,], // 3
[1, 0, 0, 1, 1, 1, 1, 0, 0, 1,], // 4
[1, 0, 0, 0, 1, 1, 0, 0, 1, 1,], // 5
[1, 1, 1, 0, 0, 0, 0, 1, 1, 1,], // 6
[1, 1, 1, 0, 0, 1, 0, 0, 1, 1,], // 7
[1, 1, 1, 1, 1, 1, 0, 0, 1, 1,], // 8
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
];
I iterate through the array and render one block for every 1, and calculate it's position from indexes from the 2d 'map' (my array).
var UNITSIZE = 250, units = mapW;
for (var i = 0; i < mapW; i++) {
for (var j = 0, m = map[i].length; j < m; j++) {
if (map[i][j]) {
var wall = new t.Mesh(cube, material);
wall.position.x = (i - units/2) * UNITSIZE;
wall.position.y = WALLHEIGHT/2;
wall.position.z = (j - units/2) * UNITSIZE;
scene.add(wall);
}
}
}
It worked great till I wanted to place other models (.obj, but it doesn't matter. Let's call them furniture) near the walls. Each piece of furniture has it's (x=0, y=0, z=0) point in the center of the model, and since walls are cubes (with the same coord system, with 0 point in the center), furniture are rendered in the center of the wall (when we place it in the corner, only 1/4 of the model is visible). This is more/less how it looks like:
(black - how the walls should look like, blue - each cuboid of the wall, red - piece of furniture)
Thats why I would like to render walls as planes, probably from a 2d closed patch (I can export it from Fabric without a problem). I don't need walls to be thick nor to be visible "from behind", when camera moves through the wall. Any clues on how to achieve something like this?
"Help me StackOverflow, your my only hope."

You can manually populate the vertex and face arrays of a THREE.js mesh, so if you can export the closed path you need for example as an array of coordinates, you can iterate over it, and push needed information to your wall object.
Something like this
var coordArray = [...]; //Array of corner points of a closed shape from your source. Here assumed to be THREE.Vector2() for simplicity.
var walls = new THREE.Geometry();
for(var i = 0; i < coordArray.length(); i++){ //iterate over the coordinate array, pushing vertices to the geometry
var coordinates = coordArray[i];
walls.vertices.push(new THREE.Vector3(coordinates.x, coordinates.y, 0)); //vertex at floor level
walls.vertices.push(new THREE.Vector3(coordinates.x, coordinates.y, 10)); //vertex at the top part of the wall, directly above the last
}
var previousVertexIndex = walls.vertices.length - 2; // index of the vertex at the bottom of the wall, in the segment we are creating faces for
for(var i = 0; i < walls.vertices.length; i += 2){
walls.faces.push(new THREE.Face3(i, i + 1, previousVertexIndex));
walls.faces.push(new THREE.Face3(i + 1, previousVertexIndex + 1, previousVertexIndex));
previousVertexIndex = i;
}
walls.computeVertexNormals();
walls.computeFaceNormals();
scene.add(new THREE.Mesh(walls, new THREE.MeshLambertMaterial());

CSS3D matrix generation

I am trying to achieve following effect using css3 and javascript when we move mouse to center div (MouseOver effect)
I have created small library which accepts 3 arguments element,sourcePoints,destination points and returns css3D matrix and update element. here is my javascript code.
var BLEND = BLEND || {};
BLEND.Util = BLEND.Util || {};
function print(msg) {
console.log(msg);
}
BLEND.Util.VendorPrefix = "";
BLEND.Util.DetectVendorPrefix = function() {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']))[1];
BLEND.Util.VendorPrefix = pre[0].toUpperCase() + pre.substr(1) + "Transform";
}
BLEND.Util.DetectVendorPrefix();
BLEND.TransformElement = function(elm, src, dest) {
var L = [[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0]];
var R = [0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 4; i++) {
L[i] = [];
L[i][0] = L[i + 4][3] = src[i].x;
L[i][2] = L[i + 4][4] = src[i].y;
L[i][2] = L[i + 4][5] = 1;
L[i][3] = L[i][4] = L[i][5] = L[i + 4][0] = L[i + 4][3] = L[i + 4][2] = 0;
L[i][6] = -src[i].x * dest[i].x;
L[i][7] = -src[i].y * dest[i].x;
L[i + 4][6] = -src[i].x * dest[i].y;
L[i + 4][7] = -src[i].y * dest[i].y;
R[i] = dest[i].x;
R[i + 4] = dest[i].y;
}
var RM = [];
for (i = 0; i < R.length; i++) {
RM[i] = [R[i]];
}
var Left = Matrix.create(L);
var Right = Matrix.create(R);
var res = Matrix.calculate(Left, Right);
print (res);
if (BLEND.Util.VendorPrefix == 'WebkitTransform') {
var matrix3D = new CSSMatrix();
matrix3D.m11 = res.get(0,0);
matrix3D.m12 = res.get(3,0);
matrix3D.m13 = 0;
matrix3D.m14 = res.get(6,0);
matrix3D.m21 = res.get(1,0);
matrix3D.m22 = res.get(4,0);
matrix3D.m23 = 0;
matrix3D.m24 = res.get(7,0);
matrix3D.m31 = 0;
matrix3D.m32 = 0;
matrix3D.m33 = 1;
matrix3D.m34 = 0;
matrix3D.m41 = res.get(2,0);
matrix3D.m42 = res.get(5,0);
matrix3D.m43 = 0;
matrix3D.m44 = 1;
elm.style.webkitTransform = matrix3D;
} else {
if (BLEND.Util.VendorPrefix === "")
BLEND.Util.DetectVendorPrefix();
elm.style[BLEND.Util.VendorPrefix] = "matrix3d(" + res.get(0,0) + "," + res.get(3,0) + ", 0," + res.get(6,0) + "," + res.get(1,0) + "," + res.get(4,0) + ", 0," + res.get(7,0) + ",0, 0, 1, 0," + res.get(2,0) + "," + res.get(5,0) + ", 0, 1)";
}
}
UPDATE: Here is JSFiddle
I am calling TransformElement method for each of 9 div with proper source and destination coordinates. But its not working as expected. Please suggest the possible solution.
can we do it using three.js in anyway (just asking may be its silly idea)?
UPDATE: Can we do it with CSS3D renderer and Three.js.
Idea is to create plane and slice it in 3x3 grid and on mouse over of each face of plane we can scale that div upside and respectivly we have to scale others div according to current div? Is it possible?

I didn't try to use your library but here is my solution to your problem: http://codepen.io/bali_balo/pen/87b980a2acf722b1c9feb35f3fcb1c65/ (I used Haml and SCSS, you can see compiled code by clicking the little eye on the top right corner of each panel)
I used this article to write this code.
9 matrices are computed first (corresponding to the hovered tile and every surrounding ones), using numericjs and fomulas available on the article linked before. Then on mouseover these matrices are applied to the corresponding tiles. Here is the code to get the transform matrix knowing the locations of 4 points before and after transformation:
//from and to are arrays of 4 objects containing a property x and a property y
//describing the 4 points of the quadrilateral to transform
function getTransform(from, to)
{
var A = [], i;
for(i = 0; i < 4; i++)
{
A.push([from[i].x, from[i].y, 1, 0, 0, 0, -from[i].x * to[i].x, -from[i].y * to[i].x]);
A.push([0, 0, 0, from[i].x, from[i].y, 1, -from[i].x * to[i].y, -from[i].y * to[i].y]);
}
var b = [];
for(i = 0; i < 4; i++)
{
b.push(to[i].x);
b.push(to[i].y);
}
//Uses numericjs to solve matrices equations
//returns h knowing A and b where A.h = b
var h = numeric.solve(A, b);
//Column major representation
return [[h[0], h[3], 0, h[6]],
[h[1], h[4], 0, h[7]],
[ 0 , 0 , 1, 0 ],
[h[2], h[5], 0, 1 ]];
}
Note that, as mentionned in my code, if you want to animate transitions, you can't just use CSS (as it would just transition each number of the matrix, but this would rarely give an appropriate result). You could try doing it using javascript but it might be a bit slow (I didn't test it), because you could not cache matrices and would have to compute them at every frame.