I am in the midst of reimplementing an interactive heatmap from svg to canvas in javascript. I was wondering if anyone had any ideas for how allow someone to select an area and have it zoom into that area using html5 canvas and js.
Many thanks,
Tom
Disclaimer: Because you haven't provided any code I am going to stick to Strategy here :)
Method 1: DIY
First thing you will have to decide is what your resolution or cell size in your case is and what happens to a individual cell when you zoom.
Case 1: Your cell size increases, and you just multiply the cellsize by the factor of zoom and clip the area that goes out of bounds of what user selected.
Case 2: You want your heatmap cells to be pixel sized in which case when you zoom in, now each of the previous pixel(or cell) will have to interpolated and you will increase the resolution by the factor of zoom. Of course you will have to re-run heat map function for that region with a greater resolution.
Once you have one of the two strategy figured out, Implementation on JavaScript it actually quite simple.
You hook into drag-event. and let users draw a rectangle to show them the reference area they are zooming into.
Then you calculate you zoom factor based on the ratio of the drawn rectangle, to the original image or the container. This becomes your zoom-factor
Now using the zoom factor you generate a new image, based on Case1 or Case2 depending on which you go with
Finally you replace existing image with old one.
Viola! Zoom!!
Method 2: Use a Library!
Use a awesome library like OpenLayers 3, and just load your heatmap into it. Here's an Heatmap Example done in OpenLayers 3. Zoom pan now come for FREE!
Hope this helps.
Related
When we draw on off screen canvas are we actually taking up any drawing power(as in is it really drawing some thing? or just data?) or space? and what happens to the other part of the sprite sheet when we only draw on part of it, does it take up any memory space? same applies to clipping.
It will and as Epistemex has said the amount of power it takes is dependant upon browser and client.
Treat the canvas as if it has a mask applied equal to it's size. You could drawImage a high resolution copy of the Mona Lisa and only see her face. However that hires image will have to have been loaded into memory somewhere.
Looking at it from the other angle (which I think you were driving at). Anything that doesn't get displayed on the canvas is technically "lost" so the canvas won't take up any extra memory once you've finished the current draw. However the process of drawing items that aren't display does cost overhead.
Hope that helped a little - expand your question if you'd like more info
i'm trying to render geometrical shapes over uneven terrain (loaded from heightmap / shapes geometry is also generated based on averaged heights across the heightmap however they do not fit it exactly). I have the following problem - somethimes the terrain shows through the shape like showed on the picture.
Open Image
I need to draw both terrain and shapes with depth testing enabled so they do not obstruct other objects in the scene.. Could someone suggest a solution to make sure the shapes are always rendered on top ? Lifting them up is not really feasible... i need to replace the colors of actual pixel on the terrain and doing this in pixel shader seems too expensive..
thanks in advance
I had a similar problem and this is how I solved it:
You first render the terrain and keep the depth buffer. Do not render
any objects
Render solid bounding box of the shape you want to put on the terrain.
You need to make sure that your bounding box covers all
the height range the shape covers
An over-conservative estimation is to use the global minimum and maximum elevation of the entire
terrain
In the pixel shader, you read depth buffer and reconstructs world space position
You check if this position is inside your shape
In your case you can check if its xy (xz) projection is within the given distance from
the center of your given circle
Transform this position into your shape's local coordinate system and compute the desired color
Alpha-blend over the render target
This method results in shapes perfectly aligned with the terrain surface. It also does not produce any artifacts and works with any terrain.
The possible drawback is that it requires using deferred-style shading and I do not know if you can do this. Still, I hope this might be helpful for you.
I'm developing a visualization for certain parts of a Warehouse with Flex 3. In this visualization there are lot of blocks where 1 to x pallets can be placed where x is between 9 and 15. I need to represent each pallet with a black square, each place which is already assigned to a pallet but not physically taken with a grey square and each free place with a white square. I first thought to just use a canvas for each place on a block and change their color if the state changes. But the hundreds of canvases which are there as a result of this approach are not updated quickly enough for my purposes (screen freezes for a few seconds).
I don't want to use embedded images because of the great amount of images I had to embed in the application (those Images appear in 4 orientations).
My idea was to create background images which reflect the state of the whole block only when needed for that certain state and cache them, so that the computation time is spread over the whole runtime.
My problem now is I don't know how to create them in a way that I can use them as "backgroundImages". As far as I understand I would need them as a class object but I don't know how to achieve that, when not embedding the images.
I'm of course open to better approaches to solve my problem. Thanks for your support.
I would suggest using Graphics property of a Sprite for example. It provides basic drawing API, like drawing lines, circles and rectangles.
Besides, you can draw bitmap images on the Graphics to produce more advances results.
My first KML project was an animated map of the Washington DC Metro system (see Animating Metro with KML and Google Earth). Unfortunately, where Metro lines share the same track, only one color prevails. The real map shows a wider line with both colors side by side.
Is there a way to draw a line in KML (Google Earth) with two side-by-side colors? I've seen a way to have a different color on the edges of the line, but that's different.
I could cheat by changing the coordinates of each station, but aside from computational difficulties, I'd have to continuously changes to positions every time the user zooms, to prevent a gap between colors (or an overlap).
Other subway systems show more than two colors running alongside each other, so an option to show multiple colors would be nice. And this is not really a gradient, as the colors don't fade together; they should be distinct, assuming the pixel width is wide enough.
This is probably a feature request, though surely someone else has run across this problem before Google Earth v6? Would love to be able to do this, or find a good workaround in the interim.
Michael
http://www.mvjantzen.com/blog/
The short answer is no, although you could probably create a custom MVC object that renders the line for you as desired (i.e. you would not need to alter the Kml)
http://code.google.com/apis/maps/articles/mvcfun.html
That said, your cheat method could work too - and I would disagree that
"...I'd have to continuously changes to positions every time the user
zooms, to prevent a gap between colors"
You can set the <gx:physicalWidth> property which allows you to set the width of a LineString to be in meters, rather than pixels.
https://developers.google.com/kml/documentation/kmlreference#gxphysicalwidth
In the case of your track example, this means you can set the width of the track to match the underlying imagery no matter what altitude the end user views it from.
I have an image of a basic game map. Think of it as just horizontal and vertical walls which can't be crossed. How can I go from a png image of the walls to something in code easily?
The hard way is pretty straight forward... it's just if I change the image map I would like an easy way to translate that to code.
Thanks!
edit: The map is not tile-based. It's top down 2D.
I dabble in video games, and I personally would not want the hassle of checking the boundaries of pictures on the map. Wouldn't it be cleaner if these walls were objects that just happened to have an image property (or something like it)? The image would display, but the object would have well defined coordinates and a function could decide whether an object was hit every time the player moved.
I need more details.
Is your game tile based? Is it 3d?
If its tile based, you could downsample your image to the tile resolution and then do a 1:1 conversion with each pixel representing a tile.
I suggest writing a script that takes each individual pixel and determines if it represents part of a wall or not (ie black or white). Then, code your game so that walls are built from individual little block, represented by the pixels. Shouldn't be TOO hard...
If you don't need to precompute anything using the map info. You can just check in runtime logic using getPixel(x,y) like function.
Well, i can see two cases with two different "best solution" depending on where your graphic comes from:
Your graphics is tiled, and thus you can easily "recognize" a block because it's using the same graphics as other blocks and all you would have to do is a program that, when given a list of "blocking tiles" and a map can produce a "collision map" by comparing each tile with tiles in the "blocking list".
Your graphics is just some graphics (e.g. it could be a picture, or some CG graphics) and you don't expect pixels for a block to be the same as pixels from another block. You could still try to apply an "edge detection" algorithm on your picture, but my guess is then that you should rather split your picture in a BG layer and a FG layer so that the FG layer has a pre-defined color (or alpha=0) and test pixels against that color to define whether things are blocking or not.
You don't have much blocking shapes, but they are usually complex (polygons, ellipses) and would be unefficient to render using a bitmap of the world or to pack as "tile attributes". This is typically the case for point-and-click adventure games, for instance. In that case, you're probably to create path that match your boundaries with a vector drawing program and dig for a library that does polygon intersection or bezier collisions.
Good luck and have fun.