int w = width, h = height;
int wo = height, h0 = width; // add this

Then, for every transformation to output, use the (wo, ho) in place of (w, h). Example:

output[wo * yo + xo] = input[wo * yi + xi];

Sorry, I know it’s a little vague. Play around and see what you get. Good luck!

Thanks for the wonderful blog, very informative and helpful.
The rotateNV21toYUV420 you provided works great but the dimensions of the byte[] are kept intact, I mean byte[] obtained from onPreviewFrame() in portrait mode is 176*144 and after applying the method you provided the dimensions are still 176*144, could you please point to me what changes would be needed to make it 144*176 dimensions.

The output format is IYUV, which is supposed to be compatible with I420. However, see http://www.fourcc.org/yuv.php#IYUV for a discussion of this topic…it isn’t clear if they really are the same. Wish I could tell you more.

Chris

It was actually very difficult to find even a good static top down image of a city that wasn’t hand drawn, fantasy orientated, too elaborate or just plain cartoony. i was delighted to come across this vast pro-gen city…

anyway keep up the good work, ill let you know how it turns out.

thanks for the info!

Thanks for the kind words! I hope this will be useful to you.

For the map markers, I would add to the onDraw function in map.js. After the chunks are drawn, you can iterate through a table of marker coordinates, and test each one to see if it occurs in the chunk area. (Look at the lines at the top of onDraw:


var cx0 = nearestChunk(viewport.x);
var cy0 = nearestChunk(viewport.y);
var cx1 = nearestChunk(viewport.x + viewport.width);
var cy1 = nearestChunk(viewport.y + viewport.height);


The rectangle (cx0, cy0, cx1, cy1) is the area the chunk represents. Any marker (mx, my) for which mx > cx0 and mx < cx1 and my > cy0 and my < cy1 is within that area, and you can draw it by translating the coordinates to the viewport and using one of the Canvas draw functions. See my example:
context.fillStyle = “blue”;

if (mx > cx0 && mx < cx1 && my > cy0 && my < cy1) { x = mx - viewport.x; y = my - viewport.y; context.fillRect(x, y, x + 5, y + 5); }

Google “HTML5 Canvas” for more ideas.

For the overlay, I think your idea of moving a large image will work fine. You can put the image into an img or div element, set the element to absolute positioning in CSS (look up position: absolute), and set the top and left properties in the onMove function. You will need to center the image at the center of the map–try something like


img.top = -(img.height / 2) + mouse.x;
img.left = -(img.width / 2) + mouse.y;


You will very likely need to play around with that to get it right, though. I hope that’s enough to get you started. Enjoy!

Chris

Anyhow i was tinkering with the source code and it gave me some ideas, well more questions than ideas really… i’m only an ambitious Newb when it comes to coding so if you could steer me in the right direction id appreciate it!

The ideal end-goal would be a very big city map with marked strategic locations and expanding territories (marked by colored zones) that would reflect the progress of a faction during a wargaming campaign (or lack of!).
its intended for a group of close friends to share and update (without hosting online). with that in mind the following questions arise:

-is it possible to add markers to the map at specific locations (preferably on a separate layer but synchronized to the movement of the map or is it tricky due to the discarding of chunks beyond chunksize*16 ?

-likewise how would i go about adding a colored opaque territory overlay, also synchronized with the scrolling of the broken city map.

i figure i could use the onmove if(mousedown) function along with a large picture (mostly transparent but containing territories and markers) with a higher z value than the broken city map. again im sadly unfamilliar with html or javascript but if you point me in the right direction i can figure out the rest!

Kind regards,

Mike