We Keep Coding

How would I go about making a variable that allows me to toggle an object's visibility in Javascript

I am using the p5.js library to create Tetris. When someone gets a line clear (that is, a full line has been filled with Tetris blocks) then the tiles that made that line fill up should be removed/turned off.
What would be the best way to do this? For all visibility aspects of a tile, I use a show() function that draws a rectangle to show the tile. Should I add a variable to the object and check if that is true because executing the show function? Or is there a built-in method or function that makes removing an object easy? I can't seem to find anything like this online

It is hard to answer if we do not know how your tiles are represented in your program.
The method I recommend is to remove the tile from it's container structure altogether.
For example, if the state of your game is stored in a matrix, simply empty the cells that constitute a line. This way, your show() function should not be called at all.

Removing the tile from the container will work, but if its difficult then there is another way.
Have a variable to track whether the tile is being used and have its default be true e.g this.inPlay = true
Only update and show a tile if its inplay is true:
if (tile.inPlay == true) {
tile.update()
tile.show()
}
'''
If you want to remove it, just set its inplay to false
PS. a great tutorial for p5.js is on youtube (made by the coding train)
PPS. just search 'coding train p5.js tutorial' on youtube

Object pooling (isometric tiling) on phaser and camera positioning

I am new to Phaser and I am currently having a hard time in generating a tilemap with the aid of the phaser isometric plugin. I am also having trouble with understanding some of the concepts related with the Phaser world, game, and the camera which make the part of generating the tilemap correctly even harder. I have actually noticed that this problem seems to be an obstacle to Phaser newbies, like myself, and having it correctly explained would certainly help to fight this.
Getting to the matter:
I have generated a tilemap using a for loop using single grass sprites. The for loop is working correctly and I also implemented a function where I can specify the number of tiles I want to generate.
{
spawnBasicTiles: function(half_tile_width, half_tile_height, size_x, size_y) {
var tile;
for(var xx = 0; xx < size_x; xx += half_tile_width) {
for(var yy = 0; yy < size_y; yy += half_tile_height) {
tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tiles_group);
tile.checkWorldBounds = true;
tile.outOfBoundsKill = true;
tile.anchor.set(0.5, 0);
}
}
}
}
So the process of generating the static grass tiles is not a problem. The problem, and one of the reasons I am trying to getting the object pooling to work correctly is when the tiles number is superior to 80 which has a dramatic impact on the game performance. Since I aim for making HUGE, auto-generating maps that are rendered according to the player character position the object pooling is essential. I have created a group for these tiles and added the properties I thought that would be required for having the tiles that are out of bounds to not be rendered(physics, world bounds...). However, after many attempts I concluded that even the tiles that are out of bounds are still being generated. I also used another property rather than add.isoSprite to generate the tiles, which was .create but made no difference. I guess no tiles are being "killed".
Is this process correct? What do I need to do in order to ONLY generate the tiles that appear on camera (I assume the camera is the visible game rectangle) and generate the rest of them when the character moves to another area assuming the camera is already tracking the character movement?
Besides that, I am looking to generate my character in the middle of the world which is the middle of the generated grass tilemap. However, I am having a hard time doing that too. I think the following concepts are the ones I should play with in order to achieve that, despite not being able to:
.anchor.set()
game.world.setBounds(especially this one... it doesn't seem to set where I order to);
Phaser.game ( I set its size to my window.width and window.height, not having much trouble with this...)
Summing up:
Using the following for loop method of generating tiles, how can I make infinite/almost infinite maps that are generated when the camera that follows my character moves to another region? And besides that, what is the proper way of always generating my character in the middle of my generated grass map and also for the camera to start where the character is?
I will appreciate the help a lot and hope this might be valuable for people in similar situations to mine. For any extra information just ask and if you want the function for generating the tiles by a specific number I will gladly post it. Sorry for any language mistakes.
Thank you very much.
EDIT:
I was able to spawn my character always in the middle of the grass by setting its X and Y to (size/width) and (size/height). Size is the measure of X and Y in px.

How leaflet js load tiles from file system

suppose tiles are store in file system like below image
roughly seen this url http://build-failed.blogspot.in/2012/11/zoomable-image-with-leaflet.html
see the code
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('http://localhost/tiles/eso/0/0/0.png', {
minZoom: 1,
maxZoom: 6,
attribution: 'Testing',
tms: true
}).addTo(map);
from the above code it seems that loading tile 0/0/0.png means refer one tile. so my question is how leaflet will load so many tiles because this url http://localhost/tiles/eso/0/0/0.png refer one tile.
the above code is right?
the above code can load bunch of tiles ?
what setView([0, 0], 2); doing ? what is the meaning of 0,0 and 2 what does it mean ?
also tell me what the below code is trying to say
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('eso/{z}/{x}/{y}.jpg', {
minZoom: 1,
maxZoom: 6,
attribution: 'ESO/INAF-VST/OmegaCAM',
tms: true
}).addTo(map);
in the above code we do not mention any value for z or for y or x ?
what approach i need to follow in real life ?
do i need to specify value or leaf will provider value for z,y, and x at run time ?
please let me know. thanks

1) Above code is wrong. Test it and you will see always the same repeated 0/0/0 tile.
2) Above code cannot load bunch of tiles, or actually it creates bunch of tiles all having the same image.
3) setView([0, 0], 2) centers the map view on coordinates point latitude 0 degree, longitude 0 degree, and with zoom level 2 (zoom level 0 being the entire planet in 1 tile).
4) Refer to Leaflet documentation about raster Tile Layer:
{z} — zoom level, {x} and {y} — tile coordinates.
The first argument of L.tileLayeris the urlTemplate. The {z}, {x} and {y} texts are replaced by Leaflet by the target tile coordinates. For example, you can go to OpenStreetMap and right click on any tile (anywhere on the base map), select "Open image" (or "View image") and the browser will show only the particular tile with its exact URL, where z, x and y have been adjusted by Leaflet to point to that particular tile.
The background system is that tiles are arranged in a Quadtree structure, assuming zoom level 0 corresponds to the entire map fitting in a single tile (i.e. 0/0/0). Then for the next higher zoom level, each tile is subdivided into 4 child tiles. And so on.
So in the example folder structure you exhibit in your question, tiles 1/0/0 and 1/0/1 are the left half of tile 0/0/0. Tile 1/0/0 is the top left corner, tile 1/0/1 is the bottom left corner.
Again, all this is automatically managed by Leaflet, provided that your tiles follow this Quadtree arrangement (whether in folders or within their file name, like for Zoomify).

ghyb's answer for 1,2, and 3 are completely correct, you might want to vote that answer up.
...also tell me what the below code is trying to say
On your second question, ghybs is also completely correct - I will add to it from the perspective of someone who needed a simpler introduction. In addition to diving into the TileLayer code, you might start by googling 'slippy map' to get many intro-level conceptual overviews. A good and popular technical intro to slippy map tilenames and how to derive them from map coordinates, along with code examples in several languages, can be found in the openstreetmap documentation here. These will definitely help you wrap your head around the TileLayer code.
what approach i need to follow in real life ? do i need to specify
value or leaf will provider value for z,y, and x at run time ?
Leaflet and other libraries plug in the value of x,y,z as described by ghybs, based on the where you move and zoom on the map. They produce the values, and the request is made to the appropriate folders. In real life, you only need the folders with the right images (produced by a program that generates tiled images into those folder structures) - either on your computer, on a server - or, what is far more common, by using a web map server that delivers the images requested at x/y/z. Examples include geoserver, mapserver, mapnik, and many online services like google maps, openstreetmap, bing, etc.

How to create merged shapes based upon blurred originals

I'm using easeljs and attempting to generate a simple water simulation based on this physics liquid demo. The issue I'm struggling with is the final step where the author states they "get hard edges". It is this step that merges the particles into an amorphous blob that gives the effect of cohesion and flow.
In case the link is no longer available, in summary, I've followed the simulation "steps" and created a prototype for particle liquid with the following :
Created a particle physics simulation
Added a blur filter
Apply a threshold to get "hard edges"
So I wrote some code that is using a threshold check to color red (0xFF0000) any shapes/particles that meet the criteria. In this case the criteria is any that have a color greater than RGB (0,0,200). If not, they are colored blue (0x0000FF).
var blurFilter = new createjs.BlurFilter(emitter.size, emitter.size*3, 1);
var thresholdFilter = new createjs.ThresholdFilter(0, 0, 200, 0xFF0000, 0x0000FF);
Note that only blue and red appear because of the previously mentioned threshold filter. For reference, the colors generated are RGB (0,0,0-255). The method r() simply generates a random number up to the passed in value.
graphics.beginFill(createjs.Graphics.getRGB(0,0,r(255)));
I'm using this idea of applying a threshold criteria so that I can later set some boundaries around the particle adhesion. My thought is that larger shapes would have greater "gravity".
You can see from the fountain of particles running below in the attached animated gif that I've completed Steps #1-2 above, but it is this Step #3 that I'm not certain how to apply. I haven't been able to identify a single filter that I could apply from easeljs that would transform the shapes or merge them in any way.
I was considering that I might be able to do a getBounds() and draw a new shape but they wouldn't truly be merged at that time. Nor would they exhibit the properties of liquid despite being larger and appearing to be combined.
bounds = blurFilter.getBounds(); // emitter.size+bounds.x, etc.
The issue really becomes how to define the shapes that are blurred in the image. Apart from squinting my eyes and using my imagination I haven't been able to come to a solution.
I also looked around for a solution to apply gravity between shapes so they could, perhaps, draw together and combine but maybe it's simply that easeljs is not the right tool for this.
Thanks for any thoughts on how I might approach this.

Image data in JS

I want to know if I've understood this correctly.
I loop my map and load sprites on the map.
So I decided to store the pixel information in an array so that when I click with my mouse I check if its in a pixel array range and get the id related to it (effectively being pixel accurate for detecting what object was clicked?)
This is my thinking process:
I draw the sprite:
ctx.drawImage(castle[id], abposx, abposy - (imgheight/2));
myImageData[sdata[i][j][1]] =
ctx.getImageData(abposx, abposy, castle[id].width, castle[id].height);
Then some how with left click, check if mouse x and mouse y is inbetween the range of the arrays and return the value of myImageData?
Or have I misunderstood what getImageData is about?

getImageData gives you all of the pixel data for an image. Basically you only need to use getImageData if you are doing any sort of pixel manipulation with the image, like changing its hue/color, or applying a filter, or need specific data, such as the r/g/b, or alpha values. In order to check for pixel perfect collisions you an do something like the following:
var imageData = ctx.getImageData(x, y, 1, 1);
if(imageData.data[3] !== 0){
// you have a collision!
}
imageData.data[0-3] holds an array of data, 0-2 are the color values r/g/b, and 3 is the alpha value. So we assume if the alpha is 0, it must be a transparent portion. Also note, in the example and fiddle I am grabbing the data from the canvas itself, so if there was an image behind it that wasnt transparent it would count as not being transparent. The best way to do it if you have many images that overlap is to keep a copy of the image by itself offscreen somewhere and do a translation of the coordinates to get the position on the image. Heres a good MDN Article explaining getImageData as well.
Live Demo