StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I can't help you with the distortion part, but filling polygons is pretty simple, especially if they are convex.</p> <p>For each Y scan line have a table indexed by Y, containing a minX and maxX.</p> <p>For each edge, run a DDA line-drawing algorithm, and use it to fill in the table entries.</p> <p>For each Y line, now you have a minX and maxX, so you can just fill that segment of the scan line.</p> <p>The hard part is a mental trick - do not think of coordinates as specifying pixels. Think of coordinates as lying <em>between</em> the pixels. In other words, if you have a rectangle going from point 0,0 to point 2,2, it should light up 4 pixels, not 9. Most problems with polygon-filling revolve around this issue.</p> <p>ADDED: OK, it sounds like what you're really asking is how to stretch the image to a non-rectangular shape (but trapezoidal). I would do it in terms of parameters <code>s</code> and <code>t</code>, going from <code>0</code> to <code>1</code>. In other words, a location in the original rectangle is <code>(x + w0*s, y + h0*t)</code>. Then define a function such that <code>s</code> and <code>t</code> also map to positions in the trapezoid, such as <code>((x+t*a) + w0*s*(t-1) + w1*s*t, y + h1*t)</code>. This defines a coordinate mapping between the two shapes. Then just scan <code>x</code> and <code>y</code>, converting to <code>s</code> and <code>t</code>, and mapping points from one to the other. You probably want to have a little smoothing filter rather than a direct copy.</p> <p>ADDED to try to give a better explanation: I'm supposing both your rectangle and trapezoid have top and bottom edges parallel with the X axis. The lower-left corner of the rectangle is <code><x0,y0></code>, and the lower-left corner of the trapezoid is <code><x1,y1></code>. I assume the rectangle's width and height are <code><w,h></code>. For the trapezoid, I assume it has height <code>h1</code>, and that it's lower width is <code>w0</code>, while it's upper width is <code>w1</code>. I assume it's left edge "slants" by a distance <code>a</code>, so that the position of its upper-left corner is <code><x1+a, y1+h1></code>. Now suppose you iterate <code><x,y></code> over the rectangle. At each point, compute <code>s = (x-x0)/w</code>, and <code>t = (y-y0)/h</code>, which are both in the range <code>0</code> to <code>1</code>. (I'll let you figure out how to do that without using floating point.) Then convert that to a coordinate in the trapezoid, as <code>xt = ((x1 + t*a) + s*(w0*(1-t) + w1*t))</code>, and <code>yt = y1 + h1*t</code>. Then <code><xt,yt></code> is the point in the trapezoid corresponding to <code><x,y></code> in the rectangle. Now I'll let you figure out how to do the copying :-) Good luck.</p> <p>P.S. And please don't forget - coordinates fall between pixels, not on them.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload