How to create a grid in WebGL with Babylon.js? - webgl

I am a newbie with babylon.js and webGL. I want to create a grid example 3 x 3 grid and place objects in the cells. Also, I always want to know in which cell the object is present if there is one.
Update :
I want to end up with a cube which has 3 rows 3 columns on each face. I can create a tiled plane for each face but I won't know what are the contents in each cell. Is there any way ?
Can someone guide me doing it ?
Thanks !!

So now that it's clearer - Babylon.js is just used to render this 3x3 grid.
The simplest way would be to create a grid item and store 1x1x1 boxes in it. this way it will look like a big cube, but will still consist of smaller items.
I have created a very simple playground demo to get you started - http://www.babylonjs-playground.com/#2CFAMI
This, of course, should be optimized and adjusted to your usecase, but this would be a simple way to create a 3x3x3 grid with boxes in different colors.
I hope it helps!

Related

How to assign two different sections to a single part on abaqus

I have modelled a cube and i have a cylinder inside the cube. I want to assign two different sections for the cube and the cylinder. I am unable to select the cylinder to assign a section. The whole cube gets selected always. Could someone please help me?
The part must be partitioned into multiple regions and each one assigned the appropriate section.
If the part is 2D (for which the section would define the thickness), you will partition the face by any method that results in multiple faces
If the part is 3D, you must create cell partitions, since a region of a 3D solid is a cell. This can be done by tools-->partition, type: cell. To define more complicated regions, shape-->shell--->extrude, create a shell from sketch to extrude through the part (keep internal boundaries), then remove any face that isn’t part of a cell.

jsPDF-AutoTable layering and z-index

I've implemented a PDF export of a table that has images in the first column. I use the createdCell callback to determine the (x,y) coordinates of the cell and then use doc.addImage() to render the image at the appropriate place.
The problem I have is that the images are actually behind the rendered table if I render them to the correct coordinates. If I shift the x-coordinate left I can see the images are rendered to the doc.
Does anyone know if there is a way to specify the layer index of objects rendered to the PDF, similar to how z-index property works in CSS?
Or is it possible to change the rendering order so that images are rendered on top?
FYI I was wrong to attempt this using callback, this is possible with addPageContent option.
I did not find any information about depth configuration ("z-index").
However, I know that whenever you add something to the page it is in front of all the items already inserted. As if it were an "incremental z-index".
So answering the question: "how to position one element on top of another" we have three solutions:
Just change the order of which element will be inserted on the page.
Create a loop adding all the necessary information (in this case, the table) and in another loop just create the images.
Invert the loop, for example with [a, b, c] = [c, b, a]. So the elements started to be created from the bottom up on the page (if your problem is a conflict between the loops). This case is more boring, more confusing and more difficult, but it may be the solution.

Find available grid position

I'm building a color box connecting game with objective-C and trying to figure out how to find the correct position when a block of boxes is placed incorrectly over another block of boxes.
See the attach image. In the image, you only need to move the left box one step to the right in order to connect the boxes and win.
However, if you place the left box on top of the other box (Image 2), I want to move it to the closest available free grid position.
This would be easy if the box was a simple square (a 1x1 grid, 2x2 grid, etc), but since the boxes can be complex, It's harder. There might also be a lot of boxes on the grid.
Any suggestions would be very appreciated.
If you're new to heuristics like this, just take the KISS approach.
It couldn't be easier...
The user tries the object at x,y ok?
It does not "fit" there.
So, simply "spiral" outwards, trying it in other possible places.
Just keep trying until you find one where it fits.
234
915
876
so that's like "radius 1", you see? then try "radius 2"
and so on.
It's that easy. Just keep trying until you find one that "does work".
Work from the start position outwards, so that, you find the closest one.

Using metafizzy isotope to create a custom center alignment of items in rows, is this possible?

I have a design with a custom layout for a lot of images which looks simple but development wise isn't. What I want to do is use Isotope to align and filter all of the images, but the alignment is custom. The images should always center within their container and the maximum number of items in a row alternates, so it goes Row 1 has maximum of 3 images, Row 2 has a maximum of 2 images, repeat this order for all other rows. I included a link to a quick diagram of how this will play out with different amounts of images. I'm not sure how or if Isotope can center these images no matter what the total number of them is per row. Any thoughts on this one?
No, for something like this, you better look into algorithms related to circle packing and bin packing. You find good algorithms via MATLAB and Mathematica.

Shifting elements in match3 kind of game

I am a beginner at ActionScript3, and for my learning purpose, I am trying to build a match3 kind of game. I am making is a clone of bejeweled kind of game. but instead of swapping, I have to delete those elements and shift the upper elements down and add new elements above those shifted elements.
I am able to delete matched elements and after matching I'm removing those elements but I am stuck with the shifting code. I am not able to shift those elements down.
I believe that you should take a look at Richard Lord's Tetris source code as your game may be somehow similar in mechanics to Tetris. Tetris shifts down rows when you get lucky.
Richard Lord is one of the Flash Gurus and his way of doing things may seem pretty advanced for a starter like you. Take a look over the source code and see if it fits you. What I can tell is that this is the proper way to make a game but maybe it's not the best point to start for a novice like you that is in urgent need.
http://www.richardlord.net/blog/actionscript-3-tetris-source-code
I would approach it like this in 2 parts.
Loop through your array of board positions starting from the bottom row and check for an empty unoccupied slot, if you find one do another loop through the row above till you find a piece on the same column. If you find a piece on the row above apply a tween to move it down to the empty slot and continue your loop.
Once you have looped through all rows, and animated all the tweens you need to loop through again to find all the gaps that need gems dropped into them. Create new elements at those positions and then move them up by (element height * row), apply another tween to animate them back to their starting position.

Resources