I'm working on a simple tutorial, and I'd like to randomly generate the positions of the red and green boxes in the accompanying images anywhere inside the dark gray area, but not in the white area. Are there any particularly elegant algorithms to do this? There are some hackish ideas I have that are really simple (continue to generate while the coordinates are not outside the inside rectangle, etc.), but I was wondering if anyone had come up with some neat solutions.
Thanks for any help!
Simplicity is a sort of elegance in its own right, so I agree with Jon: take a Monte Carlo approach and continue sampling until you get a valid value.
If you wanted to guarantee that you'd never place the red or green squares inside the white box, you could use the following simple algorithm:
Determine the height hS and width wS of the square you're placing.
Divide the gray area into 8 rectangular regions R = {R1, R2, ... R8}, defined by the white box. (Imagine a tic-tac-toe grid with the white box at the center; this defines the surrounding eight regions.)
Let P(S is placed in Ri) = A(Ri) / A(R), where A(Ri) is the area in which the center of S can be placed: that is, a region which is of area (hRi - hS) ยท (wRi - wS).
Select a region according to the above probabilities. Then select a point in that region from a uniform distribution of the available x- and y-coordinates.
Done!
I would personally go with the simple "keep sampling until you get a valid value" approach unless there's a chance that you'll have a very large white rectangle against a grey rectangle which isn't much bigger. To me, simpler is almost always better.
An alternative would be to work out how many possible pixels there will be, and generate a random number in that range. Then effectively number the pixels from top left to bottom right. Work out whether the given random sample is in the top section, the bottom section or the middle (which you can do by just seeing if it's less than the first pixel on the top line of the white rectangle, or less than the first pixel on the line below the white rectangle). Once you've worked that out, it's a simple matter of working out the row, then the pixel within the row. This isn't hugely hard, but it is pretty fiddly and easy to get wrong. Note that this is determining a single random pixel: as you're generating large squares, you should consider the range of valid pixels for the top left corner of the square, and find a sample in that range.
Related
I have a number of square regions in my game screen which, when actors move across these regions, I want the background image to show through from behind.
So, is it possible to draw to a SpriteBatch such that a region is subtracted/deleted from the texture (effectively "punching a hole" in it)?
I can't think how else to achieve this... Scissors seem incredibly impractical for my purpose, as I want to clip the areas INSIDE a number of squares. This is the inverse of Scissors - which clip areas OUTSIDE the scissors' bounds. The thought of calculating dozens of Scissor regions to fill the inverse areas between an assortment of square regions seems too impractical to be the solution... especially if the regions are moving.
Any help or suggestions appreciated!
UPDATE: Image attached.
I want the background to always be visible in the areas marked with the dotted lines. The dotted areas will move, so I'd rather not create more sprites from the background to lay on top, but rather have parts of the actors intersecting the dotted squares not be drawn. (Or any method that will achieve the same effect.)
I think the best hack is to not try and be so precise about clipping your actors, but to just re-draw the background on top the actors (and to clip that).
Specifically:
draw the whole background
draw your actors/sprites
draw the background with one cliprect for one part that "shows through"
draw the background with another cliprect for the other part that "shows through"
draw the dotted boxes around your cliprect areas
Great image, by the way. Easily worth 1000 words. :)
Say I have a MovieClip of a non-rectangular shape. For an example I've attached a file called Symbol1.png. In this attached file, I've rotated the symbol instance. Of course, this causes the bounding box to rotate as well.
Now say I place that rotated symbol instance inside another symbol. I've illustrated this in the attached file called Symbol2.png. Note that the bounding box now includes the overhanging corners of the rotated symbol that is inside.
Is there any practical way to determine the apparent bounding box of Symbol2 without including the corners of Symbol1's bounding box? I'm trying to zoom and rotate to an automatically calculated size and angle, but this overhang problem is causing a lot of extra space to be included in my final zoomed perspective.
Thanks.
Every container's bounding region is defined by the space that its children occupy. What you're looking for isn't the "bounding box" per-say (as Flash is accurately representing this), but rather the visible space the children occupy (which is much harder to quantify).
Thankfully, you're not the first to ask this, and (technically) this is a duplicate of Calculate Bounding box coordinates from a rotated rectangle
I have this background that I'm using for a section, and it starts with a small arrow engraving at the top:
However I'm trying to get it when it repeats to clip out the top arrow part, just leaving the texture in the middle part. I was wondering if it was possible to do it with something like webkit? Thanks
You can't. You need to come up with another method of doing so. There are a number of ways to do this. Personally, I would use only the arrow, but use inner box-shadow for the shadows on everything else. This way you have smaller image being used, and it will always fit the size of the container.
Break up the background image from the pointer and make the two separate sprites. You can get tricky with the pointer and have it point in all 4 directions in the same image. This will allow you to pop up the bubble in all directions from the source.
You can't repeat both x and y on a usable sprite.
I have a maximum of three sprites in my projects.
One for non-repeating elements, another for repeat-x, another for repeat-y.
I find the clip property pretty much useless.
We have a requirement to display short / bigger size images. (e.g. I could have the front portion of the bus, back portion of the bus and middle portion of the bus as separate images).
So to demonstrate the above, I could try
front,middle,middle,back (to construct shorter image)
front,middle,middle,middle,middle,back (to construct bigger image)
Are there any sites which let you download such images (i.e. they are already split) OR what would be an easier way to achieve this from an already available image.
You can use ImageMagick. Check the following example.
In your case if you want to split image only horizontally in (let's assume) 200px slices:
convert -crop 200 +repage verybig.jpg slice%02d.jpg
You could slice and dice an existing image with HTML/CSS, by setting up several adjacent elements with the same image as a background, then manipulating the widths and background position to get the desired effect.
Here's an example: http://jsfiddle.net/gjJcM/
You'd need to know something about the image content you're working with to make this seamless - I'd need more context to think in further detail.
HTH
The slicing and dicing can also be done with the Gimp.
Check out the Gimp's Filters->Map->Make-Seamless. It's used to make tiles join up seamlessly both horizontally and vertically. You can use it to make a horizontally repeatable tile by adding extra background above and below, and then after use cropping away the excess.
A more sophisticated tool for making the seamless join is panotools.
Combining the pieces at the end is easiest if you include half of the middle of the bus with the back and half of the middle with the front. You won't get a bus with no middle, but from the question, that's not something you needed.
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.