Introduction<\/h4>\n\n\n\n
This story begins with my attempt to simulate an object bouncing around inside a box of a certain shape (a polygon). I thought that maybe this would produce some cool graphics somehow, or the bouncing object would behave in unexpected and interesting ways. <\/p>\n\n\n\n The following image shows the simulation after a few steps. The bounce is the result of a gravitational force exerted on the object.<\/p>\n\n\n\n To draw this it’s necessary to find out the position of the next bounce. Also, the position where the object would hit a polygon edge. <\/p>\n\n\n\n The bouncing point describes parabolas, while the edges of the polygon are line segments. So the problem is: Find the point where a given parabola intersects a given line.<\/p>\n\n\n\n Consider a parabola with the following parametric representation<\/p>\n\n\n\n with (known) vectors p, v<\/em> and a.<\/em> Here p <\/em>stands for the position at t <\/em>= 0, v<\/em> for velocity at t<\/em> = 0, and a <\/em>for the accelaration.<\/p>\n\n\n\n Next, there’s a line, parameterized by s<\/em>,<\/p>\n\n\n\n with vectors q<\/em> and r.<\/em> If we restrict s<\/em> to 0 \u2264 s <\/em> \u2264 1, then we’re looking at the line segment between q<\/em> and q<\/em> + r<\/em>. (A nicer parametrization would be q(s-1) + rs, <\/em>for the line segment between q<\/em> and r<\/em>, but that would make the following formulas a bit longer.)<\/p>\n\n\n\n Equating the parabola and the line, and separating for x <\/em>and y <\/em>coordinates, we get<\/p>\n\n\n\n Solving (3) for s,<\/em> with rx<\/sub><\/em> \u2260 0,<\/p>\n\n\n\n Then substitute this result for s <\/em>in (4). This leads to a quadratic equation, <\/p>\n\n\n\n from which one, two or zero solutions for t<\/em> can be found. See below for an algorithm that will do that for you.<\/p>\n\n\n\n A solution for t<\/em> means we can calculate the incidence point of the parabola and the line, using (1).<\/p>\n\n\n\n If there are solutions for t, <\/em>calculate s<\/em> using (5). Checking if 0 \u2264 s <\/em> \u2264 1 it follows whether the parabola hits the line segment between r<\/em> and q<\/em> + r <\/em>or misses it. The incidence point(s) then follow either from (1) or (2). <\/p>\n\n\n\n We assumed above that rx<\/sub><\/em> \u2260 0. Otherwise (3) will lead to a quadratic equation from which t<\/em> can be found.<\/p>\n\n\n\n At this stage, we have the begin and end positions (let’s call them p<\/em> and q<\/em>) lying on the parabola with parametrization (I repeat)<\/p>\n\n\n\n We also have the speed vectors v<\/em> and w<\/em>, and we know the value of parameter t<\/em> at position p<\/em> and q<\/em> (resp. 0 and tq<\/sub><\/em>).<\/p>\n\n\n\n So the following formulas hold:<\/p>\n\n\n\n To draw the parabola from p<\/em> to q<\/em> on a canvas context as a quadratic Bezier curve we need to find the control point cp<\/em>. <\/p>\n\n\n\n The control point is the incidence point of the line l <\/em>through p<\/em> with direction v<\/em>, and the line m <\/em>through q<\/em> with direction w<\/em>, see image above. We could find the incidence point of l <\/em>and m <\/em>with a general algorithn, however in this case there is an easier method. <\/em><\/p>\n\n\n\n The point<\/p>\n\n\n\n lying on l<\/em>, and <\/p>\n\n\n\n lying on m<\/em>, can be shown to coincide by substituting (6) and (7). So that must be the control point we are after.<\/p>\n\n\n\n The JavaScript code to render the graphics would look like this:<\/p>\n\n\n![\"\"](\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/03\/spaghetti-1400bounces.png\")
![\"\"](\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/03\/spaghetti-14bounces.png\")
Parametric representations<\/h4>\n\n\n\n
\\tag{1}k(t) = p + vt + \\tfrac{1}{2}at^2<\/pre><\/div>\n\n\n\n\\tag{2}l(s) = q + rs<\/pre><\/div>\n\n\n\n\\tag{3}p_x + v_xt + \\tfrac{1}{2}a_xt^2= q_x +r_xs\n\n<\/pre><\/div>\n\n\n\n\\tag{4}\np_y + v_yt + \\tfrac{1}{2}a_yt^2 = q_y + r_ys<\/pre><\/div>\n\n\n\n\\tag{5}\ns = \\dfrac{p_x - q_x + v_xt +\\tfrac{1}{2}a_xt^2} {r_x}<\/pre><\/div>\n\n\n\n\\tfrac{1}{2}(a_y - \\frac{r_y}{r_x}a_x)t^2+ (v_y-\\frac{r_y}{r_x}v_x)t+p_y-q_y-\\frac{r_y}{r_x}(p_x-q_x) = 0<\/pre><\/div>\n\n\n\nLooking for the Bezier control point<\/h4>\n\n\n\n
k(t) = p + vt + \\tfrac{1}{2}at^2<\/pre><\/div>\n\n\n\n![\"\"](\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/03\/control_point-840x1024.jpg\")
<\/figure>\n\n\n\n\\tag{6}\nq = p + vt_q + \\tfrac{1}{2}at_q^2<\/pre><\/div>\n\n\n\n\\tag{7}\nw = v + at_q<\/pre><\/div>\n\n\n\np + \\tfrac{1}{2}t_qv<\/pre><\/div>\n\n\n\nq - \\tfrac{1}{2}t_qw<\/pre><\/div>\n\n\n\n