Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Handbook of Collisions and Interiors
ID	5567955982876672
Created	10 years ago, 1427853524527
Updated	3 years ago, 1661030618418
Code	/** This program demonstates the collisions between pairs of seven different geometric shapes. It also provides a Javascript library of easy to use, stateless functions that can be copied and pasted to other programs. The opening scene provides a 7×7 button matrix where you choose the desired demonstration of a collision between two shapes. Clicking a button will take you to a new scene where the two desired shapes are displayed. The shapes have little circles are called "knots" and they are draggable by the mouse. There are two ways to drag a knot. By clicking inside its circle the knot may be dragged anywhere, subject to the constrains imposed by the maintaining the knot's associated shape. By clicking outside the knot's circle but within its "halo" the knot can only be dragged in a circular orbit around its associated "origin" knot. Dragging a shape's central or origin knot will drag the entire shape with it. This is how you move the a shape to collide with the other shape. Collisons cause both shapes to change their appearences. If you wish to copy and paste the Javascript code that detects collisions between the two shapes, then click on the "Code" button and code will be provided in the Processing.js console panel via println(). This program also demonstrates interior detection, that is, whether or not a point is inside the shape. Interior detection is often associated with the mouse "hovering" over the shape. In this program, if a shape is not involved in a collision, then hovering the mouse over the shape will cause a change in its appearence. If you wish to see a shape's interior detection Javascript code, then choose the collision scene between that shape and itself. For example, to see the function that detects if a point is in a circle, then choose the scene for a circle colliding with a circle. Selecting the "Code" button will produce Javascript code for both collisions and interior detection. Rotation and rectangles: The program and the collision detection library functions support rotated rectangles and ellipses. Ellipses are assumed to be specified and drawn using the Processing.js default ellipseMode() of CENTER. The library functions support all three modes for specifying rectangles - CORNER (the default), CENTER and CORNERS. If a scene involves a rectangle, then three additional buttons are supplied whereby you can select your desired rectangleMode(). If you are contemplating collision detection using rotated rectangles, then I recommend using rectangleMode() and rectMode() of CENTER. However, the other two modes also work. Thanks to Phil Fulks @phfraf and Diogo Ribeiro @SlySherZ for identifying a critical bugs. / /* * DeKhan is a library with five static functions: * loopDetect(f) returns a function like f with no loop detection code. * * renew(f) returns a function like f with the "new" keyword reinserted. * * applyRegExp(f, rExp, replacement) returns a function like f where the * caller specifies replacmenet arguments, rExp and replacement. * * printText(source) prints source via println in a broswer sensitive fashion. * * print(f, prefix, suffix) prints the (nearly) original source * of function f along with optional prefix and suffix strings. / var DeKhan = (function() { / Regular expressions derived from Element118 delag() function. / var plusPlusExp = new RegExp("__env__\\.KAInfiniteLoopCount\\+\\+;\\n", "g"); var ifClauseExp = new RegExp("\\n\\sif \$__env__\\.KAInfiniteLoopCount > 1000\$ {[\\s]+__env__\\.KAInfiniteLoopProtect\$'[^']'\$;[^}]+}", "g"); var newExp = new RegExp("__env__\\.PJSCodeInjector\\.applyInstance\$(\\S+), '\\S+'\$", "g"); var envExp = new RegExp("__env__\\.", "g"); var noBreakSpace = "\u00a0"; / primenumbers7532@gmail.com / var lineBreak = String.fromCharCode(10); / Larry Serflaten for IE Windows / var spaceExp = new RegExp(" ", "g"); var newlineExp = new RegExp("\\n", "g"); var wasFrameCount = frameCount; frameCount = function() { frameCount = wasFrameCount; return this; }; var globals = frameCount(); var metIpseMecum = (0 \|\| arguments).callee; / Given source code, return a function in the global scope. / var conjureFunctionFrom = function (source) { / Copied from Element118 delag() function. / return Object.constructor('return (function(__env__) {return ' + source + ';});')()(globals); }; return { / Return a function like f without any loop detection. / loopDetect: function(f) { var source = f.toString(); source = source.replace(plusPlusExp, ""); source = source.replace(ifClauseExp, ""); return conjureFunctionFrom(source); }, / Return a function like f where the caller supplies the filter. / applyRegExp: function(f, rExp, replacement) { var source = f.toString(); source = source.replace(rExp, replacement); return conjureFunctionFrom(source); }, / Return a function like f that uses the keyword "new" again. / renew: function(f) { return this.applyRegExp(f, newExp, "new $1"); }, / * Print completely deKhanified function f source out via println. * All arguments are optional. / print: function(f, prefix, suffix) { f = f \|\| metIpseMecum; prefix = prefix \|\| ""; suffix = suffix \|\| ""; f = this.loopDetect(f); f = this.renew(f); var source = f.toString(); source = source.replace(envExp, ""); source = prefix + source + suffix; this.printText(source); }, / Print source line(s) out via println. / printText: function(source) { source = source \|\| " "; / blank line if nothing else... / source = source.replace(spaceExp, noBreakSpace); source = source.replace(newlineExp, lineBreak); println(source); }, }; })(); / Library / / Khan Academy silliness... / var GETSOUND = function(soundName) { var sound = null; try { sound = getSound(soundName); } catch (err) {} return sound; }; var PLAYSOUND = function(sound) { try { playSound(sound); } catch (err) {} }; / * Convert pairs of X-Y coordinate parameters to * an array of Points with x and y properties. / var coords2Points = function(x1, y1) { / Pass any number of X - Y coordinate pairs. / var i, j, points = []; for (i = j = 0; i < arguments.length; j++) { points[j] = { x: arguments[i++], y: arguments[i++] }; } return points; }; var rotatePoint = function(x, y, theta, sine) { / Rotate the point (x, y) by angle theta around the origin. NOTE that if a fourth parameter is defined, then the last two parameters ARE theta's cosine and sine. / var cosine = theta; if (sine === undefined) { cosine = cos(theta); sine = sin(theta); } return { x: cosinex + siney, y: -sinex + cosiney }; }; var rectangleMode = function(mode) { / Sets and returns the rectangle mode used in rect conversions, rotations and rendering. / if (mode !== undefined) { rectangleMode.mode = mode; } return rectangleMode.mode; }; var rect2Points = function(x, y, w, h, theta) { / Compute absolute vertices of the rotated rectangle. The first four parameters describe the rectangle. ** The rectangle.mode affects rects's origin. / var p; if (rectangleMode.mode === CORNERS) { w -= x; h -= y; } if (theta) { var cosine = cos(-theta); / Compute once... / var sine = sin(-theta); / ... use often. / if (rectangleMode.mode === CENTER) { / Rotate four corners around the center, (x, y) / w /= 2; h /= 2; p = [ rotatePoint(-w, -h, cosine, sine), rotatePoint(+w, -h, cosine, sine), rotatePoint(+w, +h, cosine, sine), rotatePoint(-w, +h, cosine, sine) ]; } else { / Default CORNER mode. Rotate around corner (x, y) / p = [ { x: 0, y: 0 } , rotatePoint(w, 0, cosine, sine), rotatePoint(w, h, cosine, sine), rotatePoint(0, h, cosine, sine) ]; } / Renormalize rotated points / for (var i = 0; i < p.length; i++) { p[i].x += x; p[i].y += y; } } else if (rectangleMode.mode === CENTER) { / No rotation. (x, y) is the center of the rect. / w /= 2; h /= 2; p = coords2Points(x-w, y-h, x+w, y-h, x+w, y+h, x-w, y+h); } else { / No rotation. Default CORNER mode. / p = coords2Points(x, y, x+w, y, x+w, y+h, x, y+h); } return p; }; var isBetween = function(c, a, b) { / Return true iff c is between a and b. Normalize all parameters wrt c, then ask if a and b are on ** opposite sides of zero. / return (a - c) (b - c) <= 0; }; var overlap = function(a, b, c, d) { /* Return true iff range [a, b] overlaps [c, d]. / return isBetween((c < d) ? c : d, a, b) \|\| isBetween((a < b) ? a : b, c, d); }; / * Return true iff the point (x, y) is in the line * segment (x1, y1) to (x2, y2). See collinear check at * https://www.youtube.com/watch?v=ZlaRewp4Z-A / var isInLine = function(x, y, x1, y1, x2, y2) { return abs(x1(y2 - y) - y1(x2 - x) + x2y - y2x) < 1e-10; }; / * Return true iff the point (x, y) is in the polygon * described by the array "poly" whose elements are * vertex objects with "x" and "y" properties. Derived * from Pamela's function in * https://www.khanacademy.org/cs/p/5211412870725632 * which implements the even-odd rule of ray tracing. / var isInPolygon = function (x, y, poly) { var isIn = false; for (var i = 0, j = poly.length - 1; i < poly.length; j = i++) { var xi = poly[i].x, yi = poly[i].y; var xj = poly[j].x, yj = poly[j].y; var intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) (y - yi) / (yj - yi) + xi); if (intersect) { isIn = ! isIn; } } return isIn; }; /* * Return true iff point (x, y) in the triangle * described by the last six parameters. / var isInTriangle = function(x, y, x1, y1, x2, y2, x3, y3) { var tri = coords2Points(x1, y1, x2, y2, x3, y3); return isInPolygon(x, y, tri); }; / * Return true iff point (x, y) in the triangle * described by rx, ry, w and h in conjunction * with rectangleMode.mode. OPTIONAL parameter * theta describes the angle of rotation of the * rectangle around its origin. / var isInRect = function(x, y, rx, ry, w, h, theta) { if (theta) { / rotate the point wrt (rx, ry) / var p = rotatePoint(x - rx, y - ry, theta); x = p.x + rx; y = p.y + ry; } if (rectangleMode.mode === CORNERS) { w -= rx; h -= ry; } else if (rectangleMode.mode === CENTER) { rx -= w/2; ry -= h/2; } return isBetween(x, rx, rx + w) && isBetween(y, ry, ry + h); }; / * Return true iff point (x, y) in the quadrilateral * described by the last eigth parameters. / var isInQuad = function(x, y, x1, y1, x2, y2, x3, y3, x4, y4) { var quad = coords2Points(x1, y1, x2, y2, x3, y3, x4, y4); return isInPolygon(x, y, quad); }; / * Return true iff point (x, y) is in the circle * centered at (cx, cy) with diameter diam. / var isInCircle = function(x, y, cx, cy, diam) { var dx = x - cx; var dy = y - cy; return dxdx + dydy <= diamdiam/4; }; /* * Return true iff point (x, y) is in the ellipse * centered at (ex, ey) with axes lengths w and h. * Optional parameter theta is the angle of rotation * of the ellipse, OR with optional parameter sine * it is the cosine of the angle. / var isInEllipse = function(x, y, ex, ey, w, h, theta, sine) { / Normalize wrt the ellipse center / x -= ex; y -= ey; if (theta \| sine) { var rp = rotatePoint(x, y, theta, sine); x = rp.x; y = rp.y; } var termX = 2 x / w; /* sqrt of first term / var termY = 2 y / h; /* sqrt of second term / return ((termX termX) + (termY * termY)) <= 1; }; /* * Return a "correction" angle that converts a * subtended angle to a parametric angle for an * ellipse with radii a and b. See * http://mathworld.wolfram.com/Ellipse-LineIntersection.html / var subtended2parametric = function(a, b, subtended) { if (a === b) { return 0; / circle needs no correction / } var rx = cos(subtended); / ray from the origin / var ry = sin(subtended); var e = (a b) / sqrt(aa ryry + bb * rxrx); var ex = e rx; /* where ray intersects ellipse / var ey = e ry; var parametric = atan2(a * ey, b * ex); subtended = atan2(ry, rx); /* Normailzed! / return parametric - subtended; }; / * Return true iff angle c is between angles * a and b, inclusive. b always follows a in * the positive rotational direction. Operations * against an entire circle cannot be defined. / var tau = (cos(PI) < 0) ? TWO_PI : 360; / KA silliness / var isAngleBetween = function(c, a, b) { / Make sure that a is in the range [0 .. tau). / for (a %= tau; a < 0; a += tau) {} / Make sure that both b and c are not less than a. / for (b %= tau; b < a; b += tau) {} for (c %= tau; c < a; c += tau) {} return c <= b; }; / * Return true iff the point (x, y) is in the * pizza slice defined by "arc" using the * last six parameters. / var isInArc = function(x, y, ex, ey, w, h, start, stop) { var heading = atan2(y - ey, x - ex); heading += subtended2parametric(w/2, h/2, heading); return isAngleBetween(heading, start, stop) && isInEllipse(x, y, ex, ey, w, h); }; / * Return true iff two line segments overlap. Uses parametric * equaltions of segment aka First Degree Beziers. See * wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line_segment / var lineLineCollide = function(x1, y1, x2, y2, x3, y3, x4, y4) { var t, u; var dx = x1 - x2; var dy = y1 - y2; var d = dx(y3 - y4) - dy(x3 - x4); if (d === 0) { / * Parallel or coincident line segments! See collinear check at * https://www.youtube.com/watch?v=ZlaRewp4Z-A / if (abs(x1(y2 - y3) - y1(x2 - x3) + x2y3 - y2x3) > 1e-10) { / Not collinear / return false; } if (abs(dy / dx) < 1) { / Flat slope - use X coordinates. / t = (x3 - x2) / dx; // derived from x3 = x2 + t(x1 - x2) u = (x4 - x2) / dx; // derived from x4 = x2 + u(x1 - x2) } else { / Steep slope - use Y coordinates. / t = (y3 - y2) / dy; // same derivation, but for Y coordinate u = (y4 - y2) / dy; } return (t >= 0 \|\| u >= 0) && (u <= 1 \|\| t <= 1); } t = ((x1 - x3)dy - (y1 - y3)dx) / d; if (t < 0 \|\| t >= 1) { return false; } u = ((x1 - x3)(y3 - y4) - (y1 - y3)(x3 - x4)) / d; return u >= 0 && u <= 1; }; / * Return true iff the line segment described by the first * four parameters intersects the polygon described by * "poly", an array of vertex objects with x and y properties. / var linePolygonCollide = function(x1, y1, x2, y2, poly) { var collide = isInPolygon(x1, y1, poly); for (var j = poly.length-1, i = 0; (! collide) && (i < poly.length); j = i, i++) { collide = lineLineCollide(x1, y1, x2, y2, poly[j].x, poly[j].y, poly[i].x, poly[i].y); } return collide; }; / * Return true iff the line segment described by the first * four parameters intersects the triangle described by * the last six parameters. / var lineTriangleCollide = function(x1, y1, x2, y2, tx1, ty1, tx2, ty2, tx3, ty3) { var tri = coords2Points(tx1, ty1, tx2, ty2, tx3, ty3); return linePolygonCollide(x1, y1, x2, y2, tri); }; / * Return true iff the line segment described by the first * four parameters intersects the rectangle described by * the next four parameters, rotated by OPTIONAL parameter, * theta. / var lineRectCollide = function(x1, y1, x2, y2, x, y, w, h, theta) { var rect = rect2Points(x, y, w, h, theta); return linePolygonCollide(x1, y1, x2, y2, rect); }; / * Return true iff the line segment described by the first * four parameters intersects the quadrilateral described * by the last eight parameters. / var lineQuadCollide = function(x1, y1, x2, y2, qx1, qy1, qx2, qy2, qx3, qy3, qx4, qy4) { var quad = coords2Points(qx1, qy1, qx2, qy2, qx3, qy3, qx4, qy4); return linePolygonCollide(x1, y1, x2, y2, quad); }; / * Return true iff the line segment described by * the first four parameters intersects the circle * described by the last three parameters. * (Simplified code from lineEllipseCollide.) / var lineCircleCollide = function(x1, y1, x2, y2, cx, cy, diam) { var m = (y2 - y1) / (x2 - x1); / slope / if (abs(m) > 1024) { / Convert vertical to horizontal and try again. / return lineCircleCollide(y1, x1, y2, x2, cy, cx, diam); } if (isInCircle(x2, y2, cx, cy, diam)) { / The segment may be entirely inside the circle / return true; } x1 -= cx; x2 -= cx; y1 -= cy; y2 -= cy; var r = diamdiam/4; /* radius squared / var k = y1 - (m x1); /* So, y = mx + k / var a = (1 + mm)/r; var b = 2mk/r; var c = kk/r - 1; var discrim = bb - 4ac; if (discrim < 0) { return false; / No intersection / } discrim = sqrt(discrim); a = 2; return (isBetween((-b - discrim)/a, x1, x2)) \|\| isBetween((-b + discrim)/a, x1, x2); }; /* * Return true iff the line segment described by Processing.js * line(x1, y1, x2, y2) intersects the ellipse(ex, ey, w, h) * rotated by angle theta. / var lineEllipseCollide = function(x1, y1, x2, y2, ex, ey, w, h, theta) { var cosine = 1, sine = 0; if (theta) { cosine = cos(theta); / compute once... / sine = sin(theta); / ...use often / } / * Normalize s.t. the ellipse is centered at * the origin and is not rotated. / var r1 = rotatePoint(x1 - ex, y1 - ey, cosine, sine); var r2 = rotatePoint(x2 - ex, y2 - ey, cosine, sine); var m = (r2.y - r1.y) / (r2.x - r1.x); / slope / if (abs(m) > 1024) { / Vertical line, so swap X & Y, and try again. / return lineEllipseCollide(r1.y, r1.x, r2.y, r2.x, 0, 0, h, w); } if (isInEllipse(r2.x, r2.y, 0, 0, w, h)) { / The segment may be entirely inside the ellipse / return true; } / Intersect: * x²/s + y²/t = 1 with y = mx + k * x²/s + (mx + k)²/t = 1 * x²/s + (m²x² + 2mkx + k²)/t - 1 = 0 * (1/s + m²/t)x² + (2mk/t)x + (k²/t - 1) = 0 * is the standard form of a quadratic that * can be solved by the quadratic formula: * x = (-b +\|- sqrt(b² - 4ac)) / 2a where * a = 1/s + m²/t, b = 2mk/t and c = k²/t - 1 / var s = ww/4; var t = hh/4; / So, x²/s + y²/t = 1 / var k = r1.y - (m r1.x); /* So, y = mx + k / var a = 1/s + mm/t; var b = 2mk/t; var c = kk/t - 1; var discrim = bb - 4ac; if (discrim < 0) { return false; / No intersection / } discrim = sqrt(discrim); a = 2; return (isBetween((-b - discrim)/a, r1.x, r2.x)) \|\| isBetween((-b + discrim)/a, r1.x, r2.x); }; /* * Return true iff the circle described by the first * three parameters collides with the circle described * by the last three parameters. / var circleCircleCollide = function(x1, y1, diam1, x2, y2, diam2) { var dx = x1 - x2; var dy = y1 - y2; var dist2 = dxdx + dydy; var sum = (diam1 + diam2)/2; / radius1 + radius2 / return dist2 <= sumsum; }; /* * Return true iff poly and the ellipse centered at (ex, ey) * with width w and height h, rotated by theta collide. "poly" * is an array of vertex objects with x and y properties. * Algorithm is described by ShreevatsaR at * http://stackoverflow.com/questions/401847/ / var polygonEllipseCollide = function(poly, ex, ey, w, h, theta) { var collide = isInPolygon(ex, ey, poly); for (var i = 0, j = poly.length-1; (! collide) && (i < poly.length); j = i, i++) { collide = lineEllipseCollide(poly[j].x, poly[j].y, poly[i].x, poly[i].y, ex, ey, w, h, theta); } return collide; }; / * Return true iff the rectangle described by the first four parameters * rotated by rTheta collides with the rotated ellipse described by the * last five parameters. / var rectEllipseCollide = function(rx, ry, rw, rh, rTheta, ex, ey, ew, eh, eTheta) { var rect = rect2Points(rx, ry, rw, rh, rTheta); return polygonEllipseCollide(rect, ex, ey, ew, eh, eTheta); }; / * Return true iff the polygon described by poly * intersects the circle described by the last * three parameters. "poly" is an array of vertex * objects with x and y properties. / var polygonCircleCollide = function(poly, cx, cy, diam) { var collide = isInPolygon(cx, cy, poly); for (var i = 0, j = poly.length-1; (! collide) && (i < poly.length); j = i, i++) { collide = lineCircleCollide(poly[j].x, poly[j].y, poly[i].x, poly[i].y, cx, cy, diam); } return collide; }; / * Return true iff the rectangle described by the first * four parameters rotated by theta collides with the circle * described by the last three parameters. / var rectCircleCollide = function(rx, ry, w, h, theta, cx, cy, diam) { if (theta) { / rotate the circle center wrt rect point (rx, ry). / var r = rotatePoint(cx - rx, cy - ry, theta); cx = r.x + rx; cy = r.y + ry; } if (rectangleMode.mode === CORNERS) { w -= rx; h -= ry; } else if (rectangleMode.mode === CENTER) { rx -= w/2; ry -= h/2; } / See Cygon at http://stackoverflow.com/questions/401847/ / var closestX = constrain(cx, rx, rx + w); var closestY = constrain(cy, ry, ry + h); return isInCircle(closestX, closestY, cx, cy, diam); }; / * Return true iff CONVEX polygons 1 and 2 collide. * Use the Separation Axis Theorem as explained by * http://www.dyn4j.org/2010/01/sat/ / var polygonPolygonCollide = function(poly1, poly2) { var polys = [ poly1, poly2 ]; / * Project poly onto axis. Simply * compute dot products between the * poly's vertices and the axis, and * keep track of the min and max values. / var project = function(poly, axis) { var mn = Infinity; var mx = -Infinity; for (var i = 0; i < poly.length; i++) { var dot = poly[i].xaxis.x + poly[i].yaxis.y; mx = max(mx, dot); mn = min(mn, dot); } return { min: mn, max: mx }; }; / Compute all projections axes of poly. / var getAxes = function(poly) { var axes = []; for (var i = 0; i < poly.length; i++) { var n = (i + 1) % poly.length; / * The edge is simply the delta between i and n. * The axis is the edge's normal. And a normal * of (x, y) is either of (y, -x) or (-y, x). / axes[i] = { y: poly[i].x - poly[n].x, x: -(poly[i].y - poly[n].y) }; } return axes; }; for (var p = 0; p < polys.length; p++) { var axes = getAxes(polys[p]); for (var i = 0; i < axes.length; i++) { var axis = axes[i]; / Project both polygons onto this axis / var p1 = project(poly1, axis); var p2 = project(poly2, axis); if (! overlap(p1.min, p1.max, p2.min, p2.max)) { / The two polygons cannot overlap / return false; } } } return true; / they do overlap / }; / * Return true iff two rectangles collide. Each is described by * traditional Processing.js arguments, rotated by angle theta. / var rectRectCollide = function(x1, y1, w1, h1, theta1, x2, y2, w2, h2, theta2) { if (theta1 === 0 && theta2 === 0) { if (rectangleMode.mode === CORNERS) { w1 -= x1; h1 -= y1; w2 -= x2; h2 -= y2; } else if (rectangleMode.mode === CENTER) { x1 -= w1/2; y1 -= h1/2; x2 -= w2/2; y2 -= h2/2; } return overlap(x1, x1+w1, x2, x2+w2) && overlap(y1, y1+h1, y2, y2+h2); } else { return polygonPolygonCollide( rect2Points(x1, y1, w1, h1, theta1), rect2Points(x2, y2, w2, h2, theta2)); } }; / * Return true iff two triangles collide. Each is described by * traditional Processing.js arguments. / var triangleTriangleCollide = function(ax1, ay1, ax2, ay2, ax3, ay3, bx1, by1, bx2, by2, bx3, by3) { var triA = coords2Points(ax1, ay1, ax2, ay2, ax3, ay3); var triB = coords2Points(bx1, by1, bx2, by2, bx3, by3); return polygonPolygonCollide(triA, triB); }; / * Return true iff two quadrilateral collide. Each is described * by traditional Processing.js arguments. / var quadQuadCollide = function(ax1, ay1, ax2, ay2, ax3, ay3, ax4, ay4, bx1, by1, bx2, by2, bx3, by3, bx4, by4) { var quadA = coords2Points(ax1, ay1, ax2, ay2, ax3, ay3, ax4, ay4); var quadB = coords2Points(bx1, by1, bx2, by2, bx3, by3, bx4, by4); return polygonPolygonCollide(quadA, quadB); }; / * Do two ellipses collide? The first ellipse is described * in its "traditional" manner by the first four parameters, * along with a rotation parameter, theta1. Similarly, the last * five parameters describe the second ellipse. / var ellipseEllipseCollide = function(x1, y1, w1, h1, theta1, x2, y2, w2, h2, theta2) { / * Does the quartic function described by * y = z4x⁴ + z3x³ + z2x² + z1x + z0 have any * real solutions? See * http://en.wikipedia.org/wiki/Quartic_function * Thanks to Dr. David Goldberg for the convertion to * a depressed quartic! / var realRoot = function(z4, z3, z2, z1, z0) { / First trivial checks for z0 or z4 being zero / if (z0 === 0) { return true; / zero is a root! / } if (z4 === 0) { if (z3 !== 0) { return true; / cubics always have roots / } if (z2 !== 0) { return (z1z1 - 4z2z0) >= 0; /* quadratic / } return z1 !== 0; / sloped lines have one root / } var a = z3/z4, b = z2/z4, c = z1/z4, d = z0/z4; var p = (8b - 3aa) / 8; var q = (aaa - 4ab + 8c) / 8; var r = (-3aaaa + 256d - 64ca + 16aab) / 256; / * x⁴ + px² + qx + r * ax⁴ + bx³ + cx² + dx + e * so a=1 b=0 c=p d=q e=r * That is, we have a depessed quartic. / var discrim = 256rrr - 128pprr + 144pqqr - 27qqqq + 16ppppr - 4pppqq; var P = 8p; var D = 64r - 16pp; return discrim < 0 \|\| (discrim > 0 && P < 0 && D < 0) \|\| (discrim === 0 && (D !== 0 \|\| P <= 0)); }; /* * Is the Y coordinate(s) of the intersection of two conic * sections real? They are in their bivariate form, * ax² + bxy + cx² + dx + ey + f = 0 * For now, a and a1 cannot be zero. / var yIntersect = function(a, b, c, d, e, f, a1, b1, c1, d1, e1, f1) { / * Normalize the conics by their first coefficient, a. * Then get the differnce of the two equations. / var deltaB = (b1 /= a1) - (b /= a); var deltaC = (c1 /= a1) - (c /= a); var deltaD = (d1 /= a1) - (d /= a); var deltaE = (e1 /= a1) - (e /= a); var deltaF = (f1 /= a1) - (f /= a); / Special case for b's and d's being equal / if (deltaB === 0 && deltaD === 0) { return realRoot(0, 0, deltaC, deltaE, deltaF); } var a3 = bc1 - b1c; var a2 = be1 + dc1 - b1e - d1c; var a1 = bf1 + de1 - b1f - d1e; var a0 = df1 - d1f; var A = deltaCdeltaC - a3deltaB; var B = 2deltaCdeltaE - deltaBa2 - deltaDa3; var C = deltaEdeltaE + 2deltaCdeltaF - deltaBa1 - deltaDa2; var D = 2deltaEdeltaF - deltaDa1 - deltaBa0; var E = deltaFdeltaF - deltaDa0; return realRoot(A, B, C, D, E); }; /* * Do two conics sections el and el1 intersect? Each are in * bivariate form, ax² + bxy + cx² + dx + ey + f = 0 * Solve by constructing a quartic that must have a real * solution if they intersect. This checks for real Y * intersects, then flips the parameters around to check * for real X intersects. / var conicsIntersect = function(el, el1) { / check for real y intersects, then real x intersects / return yIntersect(el.a, el.b, el.c, el.d, el.e, el.f, el1.a, el1.b, el1.c, el1.d, el1.e, el1.f) && yIntersect(el.c, el.b, el.a, el.e, el.d, el.f, el1.c, el1.b, el1.a, el1.e, el1.d, el1.f); }; / * Express the traditional KA ellipse, rotated by an angle * whose cosine and sine are A and B, in terms of a "bivariate" * polynomial that sums to zero. See * http://elliotnoma.wordpress.com/2013/04/10/a-closed-form-solution-for-the-intersections-of-two-ellipses / var bivariateForm = function(x, y, width, height, A, B) { / * Start by rotating the ellipse center by the OPPOSITE * of the desired angle. That way when the bivariate * computation transforms it back, it WILL be at the * correct (and original) coordinates. / var r = rotatePoint(x, y, A, B), a = r.x, c = r.y; / * Now let the bivariate computation * rotate in the opposite direction. / B = -B; / A = cos(-rot); B = sin(-rot); / var b = width width / 4, d = height * height / 4; return { a: (A * A / b) + (B * B / d), /* x² coefficient / b: (-2 A * B / b) + (2 * A * B / d), /* xy coeff / c: (B B / b) + (A * A / d), /* y² coeff / d: (-2 a * A / b) - (2 * c * B / d), /* x coeff / e: (2 a * B / b) - (2 * c * A / d), /* y coeff / f: (a a / b) + (c * c / d) - 1 /* constant / / So, ax² + bxy + cy² + dx + ey + f = 0 / }; }; if (! circleCircleCollide(x1, y1, (w1 > h1) ? w1 : h1, x2, y2, (w2 > h2) ? w2 : h2)) { / If they were circles, they're too far apart! / return false; } var cosine1 = cos(theta1), sine1 = sin(theta1), cosine2 = cos(theta2), sine2 = sin(theta2); / Is the center of one inside the other? / if (isInEllipse(x2, y2, x1, y1, w1, h1, cosine1, sine1) \|\| isInEllipse(x1, y1, x2, y2, w2, h2, cosine2, sine2)) { return true; } / Ok, do the hard work / var elps1 = bivariateForm(x1, y1, w1, h1, cosine1, sine1); var elps2 = bivariateForm(x2, y2, w2, h2, cosine2, sine2); / * Now, ask your good friend with a PhD in Mathematics how he * would do it; then translate his R code. See * https://docs.google.com/file/d/0B7wsEy6bpVePSEt2Ql9hY0hFdjA/ / return conicsIntersect(elps1, elps2); }; / * Return true iff the polygon is convex. It is * iff all z axis cross products between adjacent * sides have the same sign. / var isConvex = function(poly) { var first, prev = poly.length - 1, pprev = prev - 1; for (var i = 0; i < poly.length; pprev = prev, prev = i, i++) { var dx1 = poly[prev].x - poly[pprev].x; var dy1 = poly[prev].y - poly[pprev].y; var dx2 = poly[i].x - poly[prev].x; var dy2 = poly[i].y - poly[prev].y; var zCross = dx1dy2 - dy1dx2; if (i === 0) { first = (zCross < 0); } else if ((zCross < 0) !== first) { return false; } } return true; }; / Compute the incenter of triangle a-b-c. / var incenter = function(ax, ay, bx, by, cx, cy) { var A = dist(bx, by, cx, cy); var B = dist(ax, ay, cx, cy); var C = dist(bx, by, ax, ay); var P = A + B + C; return { x: (Aax + Bbx + Ccx) / P, y: (Aay + Bby + Ccy) / P }; }; / * Compute and return the centroid of the polygon. See * http://wikipedia.org/wiki/Centroid / var centroid = function(poly) { var a, i, j, area = 0, cx = 0, cy = 0; for (i = poly.length-1, j = 0; j < poly.length; i = j, j++) { a = (poly[i].x poly[j].y) - (poly[j].x * poly[i].y); cx += (poly[i].x + poly[j].x) * a; cy += (poly[i].y + poly[j].y) * a; area += a; } area = 3; return { x: cx/area, y: cy/area }; }; / Draw a circle. / var circle = function(x, y, diam) { ellipse(x, y, diam, diam); }; / Draw a polygon given an array of vertices. / var polygon = function(poly) { beginShape(); for (var i = 0; i < poly.length; i++) { vertex(poly[i].x, poly[i].y); } endShape(CLOSE); }; / Plumbing for producing Javascript code. / coords2Points.fname = 'coords2Points'; rotatePoint.fname = 'rotatePoint'; rectangleMode.fname = 'rectangleMode'; rect2Points.fname = 'rect2Points'; rect2Points.requires = [ rectangleMode, rotatePoint, coords2Points ]; isBetween.fname = 'isBetween'; overlap.fname = 'overlap'; overlap.requires = isBetween; isInLine.fname = 'isInLine'; isInPolygon.fname = 'isInPolygon'; isInTriangle.fname = 'isInTriangle'; isInTriangle.requires = [ isInPolygon, coords2Points ]; isInRect.fname = 'isInRect'; isInRect.requires = [ isBetween, rectangleMode, rotatePoint ]; isInQuad.fname = 'isInQuad'; isInQuad.requires = [ isInPolygon, coords2Points ]; isInCircle.fname = 'isInCircle'; isInEllipse.fname = 'isInEllipse'; isInEllipse.requires = rotatePoint; lineLineCollide.fname = 'lineLineCollide'; linePolygonCollide.fname = 'linePolygonCollide'; linePolygonCollide.requires = [ lineLineCollide, isInPolygon ]; lineTriangleCollide.fname = 'lineTriangleCollide'; lineTriangleCollide.requires = [ linePolygonCollide, coords2Points ]; lineRectCollide.fname = 'lineRectCollide'; lineRectCollide.requires = [ linePolygonCollide, rect2Points ]; lineQuadCollide.fname = 'lineQuadCollide'; lineQuadCollide.requires = [ linePolygonCollide, coords2Points ]; lineCircleCollide.fname = 'lineCircleCollide'; lineCircleCollide.requires = [ isInCircle, isBetween ]; lineEllipseCollide.fname = 'lineEllipseCollide'; lineEllipseCollide.requires = [ isInEllipse, isBetween, rotatePoint ]; circleCircleCollide.fname = 'circleCircleCollide'; polygonEllipseCollide.fname = 'polygonEllipseCollide'; polygonEllipseCollide.requires = [ lineEllipseCollide, isInPolygon ]; rectEllipseCollide.fname = 'rectEllipseCollide'; rectEllipseCollide.requires = [ polygonEllipseCollide, rect2Points ]; polygonCircleCollide.fname = 'polygonCircleCollide'; polygonCircleCollide.requires = [ lineCircleCollide, isInPolygon ]; rectCircleCollide.fname = 'rectCircleCollide'; rectCircleCollide.requires = [ isInCircle, rectangleMode, rotatePoint ]; polygonPolygonCollide.fname = 'polygonPolygonCollide'; polygonPolygonCollide.requires = overlap; rectRectCollide.fname = 'rectRectCollide'; rectRectCollide.requires = [ polygonPolygonCollide, rect2Points, overlap, rectangleMode ]; triangleTriangleCollide.fname = 'triangleTriangleCollide'; triangleTriangleCollide.requires = [ polygonPolygonCollide, coords2Points ]; quadQuadCollide.fname = 'quadQuadCollide'; quadQuadCollide.requires = [ polygonPolygonCollide, coords2Points ]; ellipseEllipseCollide.fname = 'ellipseEllipseCollide'; ellipseEllipseCollide.requires = [ isInEllipse, circleCircleCollide ]; var thumbnail; var tau = (cos(PI) < 0) ? TWO_PI : 360; / KA silliness / var textSz = 12; textFont(createFont("monospace", textSz), textSz); var main, bulletSelected, currentDemo, demoDraw; var demoBgColor = color(230, 230, 232); var proximity = color(34, 94, 34); var hover = color(100, 181, 50); var colorCollide = color(0); var typAlpha = 160; var interiorAlpha = 255; var collideAlpha = 120; var transparentAlpha = 30; var demoShapes = []; var requires; var headerX = 60; var headerY = 70; var renderButtons; var buttonsLimit = 2; var geomA = [], geomB = []; / arrays of geometric shapes / /* Constructor function for a column of bullets choices (buttons). / var Column = function(label) { this.bullets = []; this.label = label; this.width = textWidth(label); this.labelX = this.x = Column.x + this.width/2; Column.x += textWidth(label + 1); if (label === 'line') { this.x += textSz; } }; Column.x = 65; Column.prototype.render = function() { textAlign(CENTER, CENTER); text(this.label, this.labelX, headerY); if (abs(mouseX - this.x) < textSz) { Column.mouseX = this; pushStyle(); fill(proximity); text(this.label, this.labelX, headerY); text(this.label, this.labelX, headerY); popStyle(); } }; /* Constructor function for a row of bullets choices (buttons). / var Row = function(label) { this.bullets = []; this.y = Row.y; this.label = label; Row.y += 3 textSz; }; Row.y = headerY + 3textSz; Row.prototype.render = function() { textAlign(RIGHT, CENTER); text(this.label, headerX, this.y); if (abs(mouseY - this.y) < textSz) { Row.mouseY = this; pushStyle(); fill(proximity); text(this.label, headerX, this.y); text(this.label, headerX, this.y); popStyle(); } }; /* Constructor function for a bullet choice (button). / var Bullet = function(row, col) { this.row = row; this.col = col; row.bullets.push(this); col.bullets.push(this); }; / Both render and determine is the mouse has selected this bullet. / Bullet.prototype.render = function() { var row = this.row; var col = this.col; var diam = 1.1 textSz; var isSelected = false; fill(245, 255, 250, 200); stroke(0); strokeWeight(1); if (Column.mouseX === col \|\| Row.mouseY === row) { strokeWeight(1.5); stroke(proximity); isSelected = Row.mouseY === row && Column.mouseX === col && dist(mouseX, mouseY, col.x, row.y) < diam/2; } if (isSelected) { strokeWeight(2); isSelected = mouseIsPressed; if (isSelected) { fill(proximity); } else { fill(hover); } } circle(col.x, row.y, diam); if (this.orig) { circle(col.x, row.y, 3); } return isSelected; }; var labels = [ 'line', 'triangle', 'rect', 'quad', 'polygon', 'circle', 'ellipse' ]; var columns = []; for (var i = 0; i < labels.length; i++) { columns.push(new Column(labels[i])); } var rows = []; for (var i = 0; i < labels.length; i++) { rows.push(new Row(labels[i])); } var b, bullets = []; for (var i = 0; i < rows.length; i++) { for (var j = 0; j < columns.length; j++) { bullets.push(b = new Bullet(rows[i], columns[j])); } } /* Play a sound whenever the collision state changes. / var crash = function(collided) { if (collided !== crash.last) { PLAYSOUND(collided ? crash.sound : crash.not); } crash.last = collided; }; crash.last = false; crash.sound = GETSOUND("rpg/hit-thud"); crash.not = GETSOUND("retro/jump2"); / Associated a Demo object with a bullet (or two). / var addDemo = function(row, col, demo) { for (var i = 0; i < rows.length; i++) { var bullets = rows[i].bullets; for (var j = 0; (rows[i].label === row) && (j < bullets.length); j++) { var b = bullets[j]; if (b.col.label === col) { if (b.demo !== demo) { b.demo = demo; addDemo(col, row, demo); / Add symmetry / } else { b.orig = true; } return; } } } }; /* Constructor function for one collision demonstration. / var Demo = function(shapeA, shapeB, demo, requires, msg) { this.origA = geomA[shapeA]; this.origB = geomB[shapeB]; this.demo = demo; this.requires = requires; this.msg = msg; addDemo(this.origA.label, this.origB.label, this); }; / Setup a new draw function for the desired demo. / Demo.prototype.startDemo = function() { buttonsLimit = 2; requires = this.requires; currentDemo = this; var demo = this.demo; var msg = this.msg; var a = this.origA.clone(); var b = this.origB.clone(); demoShapes = [ a, b ]; draw = function() { noLoop(); / We only need "redraw". / background(demoBgColor); var collide = demo(a, b); crash(collide); if (collide) { a.fillAlpha(collideAlpha); b.fillAlpha(collideAlpha); } renderButtons(); a.render(); b.render(); if (msg) { fill(0); textAlign(LEFT, BOTTOM); text(msg, 50, 0.4height, width - 80, height); } if (thumbnail) { fill(0); textAlign(CENTER, CENTER); textSize(textSz2); text("Handbook of Collisions\nand Interiors", width/2, height-40); textSize(textSz); } }; }; /* * Constructor function usage: * new Knot(); * new Knot(pk); * new Knot(x, y); // common, expected usage * new Knot(pk, x, y); * Properties found in pk will be assigned to the * new knot's properties. / var Knot = function(pk, x, y) { this.x = 200; this.y = 200; this.rad = 6; / The knot's size. / this.stroke = 0; this.fill = color(255, 255, 255, 170); this.hoverFill = color(140, 180, 160, 200); this.selectFill = color(30, 120, 80); this.origin = this; switch (arguments.length) { case 0: break; case 3: / fall throught / case 1: / pk is legitimate / for (var prop in pk) { this[prop] = pk[prop]; } if (arguments.length > 1) { this.x = x; this.y = y; } break; case 2: / only x and y are specified / this.x = arguments[0]; this.y = arguments[1]; break; default: throw("Too many arguments for constructor Knot"); } this.radSq = this.rad this.rad; this.theta = undefined; this.reset(); }; Knot.drag = undefined; /* an instance that is currently being dragged / Knot.hover = undefined; / an instance that is currently near the mouse / Knot.haloScl = 1.67; / scaled size of a knot's hovering halo / Knot.haloSq = Knot.haloScl Knot.haloScl; /* Reset this knot's transient properties. / Knot.prototype.reset = function(x, y) { this.deltaX = this.deltaY = this.deltaTheta = this.revolve = 0; }; / * Compute the square of the distance between this knot * and the point (x, y). / Knot.prototype.distSq = function(x, y) { return (this.x-x)(this.x-x) + (this.y-y)(this.y-y); }; / If needed, recompute the angle from its origin to this. / Knot.prototype.getRotate = function() { if (this.theta === undefined) { this.theta = atan2(this.y - this.origin.y, this.x - this.origin.x); } return this.theta; }; / * Constrain how the mouse can move this knot s.t. * the current angle with this knot's origin is * preserved. Returns the constrained mouse X * and Y coordinates. (This is good for constraining * control knots on rectangles and ellipses.) / Knot.prototype.preserveTheta = function() { / * NB: This knot cannot come to rest on top of * its origin since a zero sized orbit has no * defined angle. / var epsilon = 0.3; / a partial pixel / var m = { }; / constrained mouse coordinates / var origin = this.origin; var theta = this.getRotate(); if (abs(this.y - origin.y) < abs(this.x - origin.x)) { / A moderate slope... constrain x; make y a function of x. / m.x = (this.x < origin.x) ? min(mouseX, origin.x - epsilon) : max(mouseX, origin.x + epsilon); m.y = origin.y + (m.x - origin.x) tan(theta); } else { /* A steep slope... constrain y; make x a function of y. / m.y = (this.y < origin.y) ? min(mouseY, origin.y - epsilon) : max(mouseY, origin.y + epsilon); m.x = origin.x + (m.y - origin.y) / tan(theta); } return m; }; / * If this knot is a candidate for dragging, then set * Knot.drag and its associated revolve property. / Knot.prototype.setDrag = function() { var scl = (this.origin === this) ? 1 : Knot.haloSq; var dstSq = this.distSq(mouseX, mouseY); if (dstSq < scl this.radSq) { this.revolve = (dstSq > this.radSq); Knot.drag = this; } }; /* Set Knot.hover if the mouse is hovering over this knot. / Knot.prototype.setHover = function() { if (this.distSq(mouseX, mouseY) < Knot.haloSq this.radSq) { Knot.hover = this; /* this is really close! / } }; / Move this knot reflecting the displacement described by its origin. / Knot.prototype.move = function() { var origin = this.origin; if (origin.revolve) { if (this !== origin) { var orbit = sqrt(this.distSq(origin.x, origin.y)); this.theta = origin.deltaTheta + this.getRotate(); this.x = origin.x + orbit cos(this.theta); this.y = origin.y + orbit * sin(this.theta); } } else if (this.origin !== this) { this.x += origin.deltaX; this.y += origin.deltaY; } /* else this knot was already moved by Knot.mouseUpdate / }; / Let the caller rotate this knot by angle theta / Knot.prototype.rotate = function(theta) { var origin = this.origin; if (this !== origin) { var orbit = sqrt(this.distSq(origin.x, origin.y)); this.getRotate(); / sets this.theta / this.theta += theta; this.x = origin.x + orbit cos(this.theta); this.y = origin.y + orbit * sin(this.theta); } }; /* Draw this knot. / Knot.prototype.render = function() { var f = this.fill; if (this === Knot.drag) { f = this.selectFill; } else if (this === Knot.hover) { if (this.distSq(mouseX, mouseY) > this.radSq) { / Render a halo around this knot / noStroke(); fill(this.hoverFill); ellipse(this.x, this.y, 2Knot.haloSclthis.rad, 2Knot.haloSclthis.rad); f = color(255, 255, 255, 170); } else { f = this.hoverFill; } } else if (Knot.drag && (this !== this.origin)) { return; } / Now render this knot / stroke(this.stroke); fill(f); ellipse(this.x, this.y, 2this.rad, 2this.rad); }; / Render all the knots in k. / Knot.render = function(k) { ellipseMode(CENTER); strokeWeight(1); for (var i = 0; i < k.length; i++) { k[i].render(); } }; / * Deal with or identify THE knot close enough to the mouse. * Returns the index of k that is the close enough knot. / Knot.mouseUpdate = function(k) { if (Knot.drag) { var drag = Knot.drag; var dragIdx = k.indexOf(drag); if (dragIdx < 0) { return; / Not one of us! / } / * The mouse is dragging the knot. Either update * its location to be under the mouse, or compute * a new angular position that describes how the * knot is revolving around its origin. / if (drag.revolve) { var origin = drag.origin; origin.revolve = true; origin.deltaTheta = atan2(mouseY - origin.y, mouseX - origin.x) - drag.getRotate(); } else { var mouse = (drag.constrainMouse) ? drag.constrainMouse() : { x: mouseX, y: mouseY }; drag.deltaX = mouse.x - drag.x; drag.deltaY = mouse.y - drag.y; drag.x = mouse.x; drag.y = mouse.y; drag.theta = undefined; / Invalidate! / } return dragIdx; } else { / * Nothing is being dragged. See if the mouse * hovers over any of the knots. / Knot.hover = undefined; for (var i = k.length - 1; i >= 0; i--) { k[i].setHover(); if (Knot.hover) { return i; } } } }; / * Discover if any knots in k are to be dragged * by the mouse and set and return Knot.drag. / Knot.findDrag = function(k) { for (var i = k.length - 1; i >= 0 && ! Knot.drag; i--) { k[i].setDrag(); } return Knot.drag; }; / Move the knots in k. / Knot.move = function(k) { for (var i = 0; i < k.length; i++) { k[i].move(); } }; /* Generic constructor for any "shape". / var Shape = function(colour, x1, y1, x2, y2, x3, y3, x4, y4) { this.x = this.x1 = x1; this.y = this.y1 = y1; this.x2 = this.w = x2; this.y2 = this.h = y2; this.x3 = x3; this.y3 = y3; this.x4 = x4; this.y4 = y4; this.stroke = this.fill = this.currentFill = colour; this.theta = 0; }; Shape.prototype.fillAlpha = function(a) { this.currentFill = color(red(this.fill), green(this.fill), blue(this.fill), a); }; / The mouse is hovering over this shape's knots. / Shape.prototype.hover = function(kIdx) { / And nobody cares. / }; /* Contructor function for a dynamic line with knots. / var Line = function(colour, x1, y1, x2, y2) { Shape.call(this, colour, x1, y1, x2, y2); this.label = "line"; var k = this.knots = [ new Knot((x1 + x2)/2, (y1 + y2)/2), new Knot(x1, y1), new Knot(x2, y2) ]; k[0].origin = k[1].origin = k[2].origin = k[0]; }; Line.prototype = Object.create(Shape.prototype); / Clone this. / Line.prototype.clone = function() { return new Line(this.fill, this.x1, this.y1, this.x2, this.y2); }; / Render this Line and its knots. / Line.prototype.render = function() { stroke(this.currentFill); strokeWeight(this.strokeWeight); line(this.x1, this.y1, this.x2, this.y2); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Line.prototype.reconcile = function(kIdx) { var k = this.knots; var origin = k[0]; if (origin.revolve) { / rotated! / var r = k[kIdx]; var s = k[(kIdx === 1) ? 2 : 1]; s.x = 2origin.x - r.x; s.y = 2origin.y - r.y; } this.x1 = k[1].x; this.y1 = k[1].y; this.x2 = k[2].x; this.y2 = k[2].y; if ((! origin.revolve) && kIdx > 0) { / the line segment grew or shrank / origin.x = (this.x1 + this.x2)/2; origin.y = (this.y1 + this.y2)/2; } }; /* Constructor function for a dynamic triangle with knots. / var Triangle = function(colour, x1, y1, x2, y2, x3, y3) { Shape.call(this, colour, x1, y1, x2, y2, x3, y3); this.label = "triangle"; var c = incenter( x1, y1, x2, y2, x3, y3); var k = this.knots = [ new Knot(c.x, c.y), new Knot(x1, y1), new Knot(x2, y2), new Knot(x3, y3) ]; k[0].origin = k[1].origin = k[2].origin = k[3].origin = k[0]; }; Triangle.prototype = Object.create(Shape.prototype); / Clone this. / Triangle.prototype.clone = function() { return new Triangle(this.fill, this.x1, this.y1, this.x2, this.y2,this.x3, this.y3); }; / Render this Triangle and its knots. / Triangle.prototype.render = function() { strokeWeight(1); stroke(this.stroke); fill(this.currentFill); triangle(this.x1, this.y1, this.x2, this.y2,this.x3, this.y3); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Triangle.prototype.reconcile = function(kIdx) { var k = this.knots; var origin = k[0]; this.x1 = k[1].x; this.y1 = k[1].y; this.x2 = k[2].x; this.y2 = k[2].y; this.x3 = k[3].x; this.y3 = k[3].y; if (kIdx !== 0 && !origin.revolve) { var c = incenter(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3); origin.x = c.x; origin.y = c.y; } }; /* Constructor function for a dynamic rectangle with knots. / var Rect = function(colour, x, y, w, h) { var rm = rectangleMode(); if (rm === CORNERS) { w += x; h += y; } else if (rm === CENTER) { x += w/2; y += h/2; } Shape.call(this, colour, x, y, w, h); this.label = "rect"; var k = this.knots = [ new Knot(this.x, this.y) ]; if (rm === CORNERS) { k.push(new Knot(this.w, this.h)); } else if (rm === CENTER) { k.push(new Knot(this.x + this.w/2, this.y), new Knot(this.x, this.y + this.h/2)); k[1].constrainMouse = k[2].constrainMouse = k[1].preserveTheta; } else { k.push(new Knot(this.x + this.w, this.y), new Knot(this.x, this.y + this.h)); k[1].constrainMouse = k[2].constrainMouse = k[1].preserveTheta; } for (var i = 0; i < k.length; i++) { k[i].origin = k[0]; } this.reconcile = (rm === CORNERS) ? this.reconcileCorners : this.reconcileNonCorners; }; Rect.prototype = Object.create(Shape.prototype); / Clone this. / Rect.prototype.clone = function() { buttonsLimit = 5; / XXX Expedient! / return new Rect(this.fill, this.x, this.y, this.w, this.h); }; / Render this Rect and its knots. / Rect.prototype.render = function() { var w = this.w; var h = this.h; pushStyle(); strokeWeight(1); stroke(this.stroke); fill(this.currentFill); pushMatrix(); translate(this.x, this.y); rotate(this.theta); var rm = rectangleMode(); if (rm === CORNERS) { w -= this.x; h -= this.y; } rectMode(rm); rect(0, 0, w, h); popMatrix(); popStyle(); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Rect.prototype.reconcileNonCorners = function(kIdx) { var k = this.knots; var origin = k[0]; this.x = origin.x; this.y = origin.y; if (kIdx > 0) { this.theta = k[1].getRotate(); if (! origin.revolve) { if (rectangleMode() === CENTER) { this.w = 2 dist(this.x, this.y, k[1].x, k[1].y); this.h = 2 * dist(this.x, this.y, k[2].x, k[2].y); } else { this.w = dist(this.x, this.y, k[1].x, k[1].y); this.h = dist(this.x, this.y, k[2].x, k[2].y); } } } }; /* Reconcile this's properties with knots[kIdx]. / Rect.prototype.reconcileCorners = function(kIdx) { var origin = this.knots[0]; if (kIdx === 0) { / Rectangle's position moved. Size and rotation unchanged. / this.w += (origin.x - this.x); this.h += (origin.y - this.y); this.x = origin.x; this.y = origin.y; return; } var diag = this.knots[1]; var alpha = diag.getRotate(); if (origin.revolve) { / Rectangle's position and size didn't change, but its rotation did. / var beta = atan2(this.h - this.y, this.w - this.x); this.theta = alpha - beta; } else { / Rectangle size changed... / var d = dist(origin.x, origin.y, diag.x, diag.y); alpha -= this.theta; this.w = this.x + dcos(alpha); this.h = this.y + dsin(alpha); } }; /* Constructor function for a dynamic quad with knots. / var Quad = function(colour, x1, y1, x2, y2, x3, y3, x4, y4) { Shape.call(this, colour, x1, y1, x2, y2, x3, y3, x4, y4); this.label = "quad"; var k = this.knots = [ new Knot(x1, y1), new Knot(x2, y2), new Knot(x3, y3), new Knot(x4, y4) ]; var center = centroid(k); k.unshift(new Knot(center.x, center.y)); k[0].origin = k[1].origin = k[2].origin = k[3].origin = k[4].origin = k[0]; }; Quad.prototype = Object.create(Shape.prototype); / Clone this. / Quad.prototype.clone = function() { return new Quad(this.fill, this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4); }; / Render this Quad and its knots. / Quad.prototype.render = function() { strokeWeight(1); stroke(this.stroke); fill(this.currentFill); quad(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Quad.prototype.reconcile = function(kIdx) { var k = this.knots; var poly = k.slice(1, k.length); if (kIdx > 0 && !isConvex(poly)) { / Concave, so reset the knots! / k[1].x = this.x1; k[1].y = this.y1; k[2].x = this.x2; k[2].y = this.y2; k[3].x = this.x3; k[3].y = this.y3; k[4].x = this.x4; k[4].y = this.y4; return; } var origin = k[0]; this.x1 = k[1].x; this.y1 = k[1].y; this.x2 = k[2].x; this.y2 = k[2].y; this.x3 = k[3].x; this.y3 = k[3].y; this.x4 = k[4].x; this.y4 = k[4].y; if (kIdx !== 0 && !origin.revolve) { var center = centroid(k.slice(1, k.length)); origin.x = center.x; origin.y = center.y; } }; /* Constructor function for a dynamic polygon with knots. / var Polygon = function(colour, x, y, rad, count) { Shape.call(this, colour, x, y, rad, count); this.label = "polygon"; / Use the knots directly... / var k = this.knots = [ new Knot(x, y) ]; k[0].origin = k[0]; var theta = 0; for (var i = 1; i <= count; i++) { k[i] = new Knot(x + radcos(theta), y + radsin(theta)); k[i].origin = k[0]; theta += tau/count; } this.reconcile(0); }; Polygon.prototype = Object.create(Shape.prototype); / Clone this. / Polygon.prototype.clone = function() { return new Polygon(this.fill, this.x, this.y, this.w, this.h); }; / Render this Polygon and its knots. / Polygon.prototype.render = function() { strokeWeight(1); stroke(this.stroke); fill(this.currentFill); polygon(this.poly); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Polygon.prototype.reconcile = function(kIdx) { var i, p = [], k = this.knots, origin = k[0]; for (i = 1; i < k.length; i++) { p[i-1] = { x: k[i].x, y: k[i].y }; / "deep copy" / } if (kIdx === 0 \|\| isConvex(p)) { this.poly = p; var center = centroid(p); origin.x = center.x; origin.y = center.y; } else { / Concave, so reset the knots! / for (i = 1; i < k.length; i++) { k[i].x = this.poly[i-1].x; k[i].y = this.poly[i-1].y; } } }; /* Constructor function for a dynamic circle with knots. / var Circle = function(colour, x, y, w) { Shape.call(this, colour, x, y, w); this.label = "circle"; var k = this.knots = [ new Knot(x, y), new Knot(x + w/2, y) ]; k[0].origin = k[1].origin = k[0]; }; Circle.prototype = Object.create(Shape.prototype); / Clone this. / Circle.prototype.clone = function() { return new Circle(this.fill, this.x, this.y, this.w); }; / Render this Circle and its knots. / Circle.prototype.render = function() { strokeWeight(1); stroke(this.stroke); fill(this.currentFill); circle(this.x, this.y, this.w); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Circle.prototype.reconcile = function(kIdx) { var k = this.knots; var origin = k[0]; this.x = origin.x; this.y = origin.y; if (kIdx > 0) { this.theta = k[1].getRotate(); if (! origin.revolve) { this.w = 2 dist(this.x, this.y, k[1].x, k[1].y); } } }; /** Constructor function for a dynamic ellipse with knots. / var Ellipse = function(colour, x, y, w, h) { Shape.call(this, colour, x, y, w, h); this.label = "ellipse"; var k = this.knots = [ new Knot(x, y), new Knot(x + w/2, y), new Knot(x, y + h/2) ]; k[0].origin = k[1].origin = k[2].origin = k[0]; k[1].constrainMouse = k[2].constrainMouse = k[1].preserveTheta; }; Ellipse.prototype = Object.create(Shape.prototype); / Clone this. / Ellipse.prototype.clone = function() { return new Ellipse(this.fill, this.x, this.y, this.w, this.h); }; / Render this Ellipse and its knots. / Ellipse.prototype.render = function() { strokeWeight(1); stroke(this.stroke); fill(this.currentFill); pushMatrix(); translate(this.x, this.y); rotate(this.theta); ellipse(0, 0, this.w, this.h); popMatrix(); Knot.render(this.knots); }; / Reconcile this's properties with knots[kIdx]. / Ellipse.prototype.reconcile = function(kIdx) { var k = this.knots; var origin = k[0]; this.x = origin.x; this.y = origin.y; if (kIdx > 0) { this.theta = k[1].getRotate(); if (! origin.revolve) { this.w = 2 dist(this.x, this.y, k[1].x, k[1].y); this.h = 2 * dist(this.x, this.y, k[2].x, k[2].y); } } }; /* * Identify the knot in the array of shapes * that the user is clicking on. Returns the * index of the array that contains the dragged * knot. / var findDrag = function(shapes) { for (var i = shapes.length - 1; i >= 0; i--) { if (Knot.findDrag(shapes[i].knots)) { return i; } } }; / * Assist in moving a dragging knot or * assist in hovering over a knot. Returns * the index of the array that it found. / var update = function(shapes) { for (var i = shapes.length - 1; i >= 0; i--) { var k = shapes[i].knots; var ui = Knot.mouseUpdate(k); if (ui >= 0) { if (k[ui] === Knot.drag) { Knot.move(k); shapes[i].reconcile(ui); k[0].reset(); } else { shapes[i].hover(ui); } return i; } } return -1; }; / Called by Processing.js when a mouse button is pressed. / mousePressed = function() { var e = findDrag(demoShapes); if (e >= 0) { Knot.hover = undefined; } }; / Called by Processing.js when the mouse has moved. / mouseDragged = mouseMoved = function() { var before = Knot.hover; var e = update(demoShapes); if ((e >= 0) && (e !== demoShapes.length - 1)) { demoShapes.push((demoShapes.splice(e, 1))[0]); } redraw(); }; / Called by Processing.js when mouse button is released. / mouseReleased = function() { Knot.hover = Knot.drag; Knot.drag = undefined; redraw(); }; / Called by Processing.js when the mouse exits the canvas. / mouseOut = function() { Knot.drag = Knot.hover = undefined; redraw(); }; / * Make sure that func and its requirements are in * in array depends. / var addDependencies = function(depends, func) { if (depends.indexOf(func) >= 0) { return; / already there / } depends.push(func); if (func.requires === undefined) { return; } var requires = (typeof func.requires === 'function') ? [ func.requires ] : func.requires.slice(0, func.requires.length); for (var i = 0; i < requires.length; i++) { var r = requires[i]; addDependencies(depends, r); var j = depends.indexOf(func); var k = depends.indexOf(r); if (j > k) { depends.splice(j, 1); depends.splice(k, 0, func); } } }; / Invoked when the user clicks on the "Code" button. / var code = function() { var depends = []; if (typeof requires === 'function') { requires = [requires]; } for (var i = 0; i < requires.length; i++) { addDependencies(depends, requires[i]); } for (i = depends.length-1; i >= 0; i--) { var fname = depends[i].fname; DeKhan.print(depends[i], "var " + fname + " = ", ";"); DeKhan.printText(" "); } }; / Invoked when the user clicks on the "Back" button. / var back = function() { crash.last = false; rectangleMode(CORNER); draw = main; loop(); }; / Invoked when the user clicks on the "CORNERS" button. / var modeCorners = function() { rectangleMode(CORNERS); currentDemo.startDemo(); }; / Invoked when the user clicks on the "CENTER" button. / var modeCenter = function() { rectangleMode(CENTER); currentDemo.startDemo(); }; / Invoked when the user clicks on the "CORNER" button. / var modeCorner = function() { rectangleMode(CORNER); / normal! / currentDemo.startDemo(); }; / Array of literal button objects... / var buttons = [ { x: 40, y: 30, label: "Back", action: back }, { x: 360, y: 30, label: "Code", action: code }, { x: 200-5textSz, y: 30, label: "CORNER", action: modeCorner }, { x: 200, y: 30, label: "CENTER", action: modeCenter }, { x: 200+5textSz, y: 30, label: "CORNERS", action: modeCorners } ]; / Render AND react to user's click actions. / renderButtons = function(clicked) { pushStyle(); textAlign(CENTER, CENTER); rectMode(CENTER); for (var i = 0; i < buttonsLimit; i++) { var b = buttons[i]; fill(255); stroke(0); if (isBetween(mouseY, b.y - textSz, b.y + textSz) && isBetween(mouseX, b.x - 2textSz, b.x + 2textSz)) { stroke(proximity); if (clicked) { fill(proximity); b.action(); } else { fill(hover); } } rect(b.x, b.y, 4.5textSz, 2textSz, textSz/4); fill(0); text(b.label, b.x, b.y); } popStyle(); }; / Called by Processing.js when the... / mouseClicked = function() { renderButtons(true); }; / Set up a bunch of geometric shapes for the demonstrations / var colorA = color(223, 90, 250), colorB = color(20, 240, 200); geomA[line] = new Line(colorA, 100, 90, 200, 90); geomA[triangle] = new Triangle(colorA, 100, 90, 200, 90, 110, 150); geomA[rect] = new Rect(colorA, 83, 81, 128, 62); geomA[quad] = new Quad(colorA, 100, 90, 200, 90, 125, 220, 70, 150); geomA[polygon] = new Polygon(colorA, 130, 100, 50, 5); geomA[circle] = new Circle(colorA, 130, 100, 100); geomA[ellipse] = new Ellipse(colorA, 130, 100, 160, 70); geomB[line] = new Line(colorB, 280, 300, 280, 120); geomB[triangle] = new Triangle(colorB, 280, 300, 280, 120, 200, 230); geomB[rect] = new Rect(colorB, 231, 163, 116, 164); geomB[quad] = new Quad(colorB, 280, 300, 330, 200, 270, 120, 200, 230); geomB[polygon] = new Polygon(colorB, 280, 210, 90, 6); geomB[circle] = new Circle(colorB, 280, 210, 180); geomB[ellipse] = new Ellipse(colorB, 280, 210, 120, 180); / Demonstrate lineLineCollide / new Demo(line, line, function(a, b) { var c = lineLineCollide(a.x1, a.y1, a.x2, a.y2, b.x1, b.y1, b.x2, b.y2); if (c) { a.strokeWeight = b.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.strokeWeight = isInLine(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2) ? 2 : 1; } return c; }, [ lineLineCollide, isInLine ]); / Demonstrate lineTriangleCollide / new Demo(line, triangle, function(a, b) { var c = lineTriangleCollide(a.x1, a.y1, a.x2, a.y2, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInTriangle(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3) ? interiorAlpha : typAlpha); } return c; }, lineTriangleCollide); / Demonstrate lineRectCollide / new Demo(line, rect, function(a, b) { var c = lineRectCollide(a.x1, a.y1, a.x2, a.y2, b.x, b.y, b.w, b.h, b.theta); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInRect(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, lineRectCollide); / Demonstrate lineQuadCollide / new Demo(line, quad, function(a, b) { var c = lineQuadCollide(a.x1, a.y1, a.x2, a.y2, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInQuad(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4) ? interiorAlpha : typAlpha); } return c; }, lineQuadCollide); / Demonstrate lineCircleCollide / new Demo(line, circle, function(a, b) { var c = lineCircleCollide(a.x1, a.y1, a.x2, a.y2, b.x, b.y, b.w); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w) ? interiorAlpha : typAlpha); } return c; }, lineCircleCollide); / Demonstrate lineEllipseCollide / new Demo(line, ellipse, function(a, b) { var c = lineEllipseCollide(a.x1, a.y1, a.x2, a.y2, b.x, b.y, b.w, b.h, b.theta); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, lineEllipseCollide); / Demonstrate linePolygonCollide / new Demo(line, polygon, function(a, b) { var c = linePolygonCollide(a.x1, a.y1, a.x2, a.y2, b.poly); if (c) { a.strokeWeight = 4; } else { a.strokeWeight = isInLine(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2) ? 2 : 1; b.fillAlpha(isInPolygon(mouseX, mouseY, b.poly) ? interiorAlpha : typAlpha); } return c; }, linePolygonCollide); / Demonstrate triangleTriangleCollide / new Demo(triangle, triangle, function(a, b) { var c = triangleTriangleCollide(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : typAlpha); b.fillAlpha(isInTriangle(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3) ? interiorAlpha : typAlpha); } return c; }, [ triangleTriangleCollide, isInTriangle ]); / Demonstrate triangle rect Collide / new Demo(triangle, rect, function(a, b) { var polyA = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3); var polyB = rect2Points(b.x, b.y, b.w, b.h, b.theta); var c = polygonPolygonCollide(polyA, polyB); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInRect(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, rect2Points, coords2Points ], "A function that explicitly checks for a collision between a triangle and a rectangle is not provided. You can use the function polygonPolygonCollide() after converting the six triangle() arguments into an array of three points by using the coords2Points() function, and after converting the rect() arguments into an array of four points using the rect2Points() function."); / Demonstrate triangle quad Collide / new Demo(triangle, quad, function(a, b) { var polyA = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3); var polyB = coords2Points(b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4); var c = polygonPolygonCollide(polyA, polyB); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInQuad(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, coords2Points ], "A function that explicitly checks for a collision between a triangle and a quadrilateral is not provided. You can use the function polygonPolygonCollide() after converting the six triangle() arguments into an array of three points by using the coords2Points() function, and after converting the eight quad() arguments into an array of four points by the same method."); / Demonstrate triangle polygon Collide / new Demo(triangle, polygon, function(a, b) { var polyA = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3); var c = polygonPolygonCollide(polyA, b.poly); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInPolygon(mouseX, mouseY, b.poly) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, coords2Points ], "A function that explicitly checks for a collision between a triangle and a polygon is not provided. You can use the function polygonPolygonCollide() after converting the six triangle() arguments into an array of three points by using the coords2Points() function."); / Demonstrate triangle circle Collide / new Demo(triangle, circle, function(a, b) { var poly = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3); var c = polygonCircleCollide(poly, b.x, b.y, b.w); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonCircleCollide, coords2Points ], "A function that explicitly checks for a collision between a triangle and a circle is not provided. You can use the function polygonCircleCollide() after converting the six triangle() arguments into an array of three points by using the coords2Points() function."); / * Demonstrate rectRectCollide * Rectangles are a lot of work because all * rectModes are legitimate. / new Demo(rect, rect, function(a, b) { var c = rectRectCollide(a.x, a.y, a.w, a.h, a.theta, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInRect(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : typAlpha); b.fillAlpha(isInRect(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, [ rectRectCollide, isInRect ]); / Demonstrate rect quad collide / new Demo(rect, quad, function(a, b) { var polyA = rect2Points(a.x, a.y, a.w, a.h, a.theta); var polyB = coords2Points(b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4); var c = polygonPolygonCollide(polyA, polyB); if (! c) { a.fillAlpha(isInRect(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInQuad(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, rect2Points, coords2Points ], "A function that explicitly checks for a collision between a rectangle and quadrilateral is not provided. You can use the function polygonPolygonCollide() after converting the rect() arguments into an array of four points using the rect2Points() function, and after converting the eight quad() arguments into an array of four points by using the coords2Points() function."); / Demonstrate rect polygon collide / new Demo(rect, polygon, function(a, b) { var polyA = rect2Points(a.x, a.y, a.w, a.h, a.theta); var c = polygonPolygonCollide(polyA, b.poly); if (! c) { a.fillAlpha(isInRect(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInPolygon(mouseX, mouseY, b.poly) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, rect2Points ], "A function that explicitly checks for a collision between a rectangle and polygon is not provided. You can use the function polygonPolygonCollide() after converting the rect() arguments into an array of four points using the rect2Points() function."); / Demonstrate rectCircleCollide / new Demo(rect, circle, function(a, b) { var c = rectCircleCollide(a.x, a.y, a.w, a.h, a.theta, b.x, b.y, b.w); if (! c) { a.fillAlpha(isInRect(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : typAlpha); b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w) ? interiorAlpha : typAlpha); } return c; }, rectCircleCollide); / Demonstrate rectEllipseCollide / new Demo(rect, ellipse, function(a, b) { var c = rectEllipseCollide(a.x, a.y, a.w, a.h, a.theta, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInRect(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : typAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, rectEllipseCollide); / Demonstrate quadQuadCollide / new Demo(quad, quad, function(a, b) { var c = quadQuadCollide(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4); if (! c) { a.fillAlpha(isInQuad(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4) ? interiorAlpha : typAlpha); b.fillAlpha(isInQuad(mouseX, mouseY, b.x1, b.y1, b.x2, b.y2, b.x3, b.y3, b.x4, b.y4) ? interiorAlpha : typAlpha); } return c; }, [ quadQuadCollide, isInQuad ]); / Demonstrate quad polygon collide / new Demo(quad, polygon, function(a, b) { var polyA = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4); var c = polygonPolygonCollide(polyA, b.poly); if (! c) { a.fillAlpha(isInQuad(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInPolygon(mouseX, mouseY, b.poly) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonPolygonCollide, coords2Points ], "A function that explicitly checks for a collision between a quadrilateral and polygon is not provided. You can use the function polygonPolygonCollide() after converting the eight quad() arguments into an array of four points using the coords2Points() function."); / Demonstrate quad circle Collide / new Demo(quad, circle, function(a, b) { var poly = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4); var c = polygonCircleCollide(poly, b.x, b.y, b.w); if (! c) { a.fillAlpha(isInQuad(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonCircleCollide, coords2Points ], "A function that explicitly checks for a collision between a quadrilateral and a circle is not provided. You can use the function polygonCircleCollide() after converting the eight quad() arguments into an array of four points by using the coords2Points() function."); / Demonstrate polygonPolygonCollide / new Demo(polygon, polygon, function(a, b) { var c = polygonPolygonCollide(a.poly, b.poly); if (! c) { a.fillAlpha(isInPolygon(mouseX, mouseY, a.poly) ? interiorAlpha : typAlpha); b.fillAlpha(isInPolygon(mouseX, mouseY, b.poly) ? interiorAlpha : typAlpha); } return c; }, [ polygonPolygonCollide, isInPolygon ]); / Demonstrate polygonCircleCollide / new Demo(polygon, circle, function(a, b) { var c = polygonCircleCollide(a.poly, b.x, b.y, b.w); if (! c) { a.fillAlpha(isInPolygon(mouseX, mouseY, a.poly) ? interiorAlpha : typAlpha); b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w) ? interiorAlpha : typAlpha); } return c; }, polygonCircleCollide); / Demonstrate polygonEllipseCollide / new Demo(polygon, ellipse, function(a, b) { var c = polygonEllipseCollide(a.poly, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInPolygon(mouseX, mouseY, a.poly) ? interiorAlpha : typAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, polygonEllipseCollide); / Demonstrate circleCircleCollide / new Demo(circle, circle, function(a, b) { var c = circleCircleCollide(a.x, a.y, a.w, b.x, b.y, b.w); if (! c) { a.fillAlpha(isInCircle(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : typAlpha); b.fillAlpha(isInCircle(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, [ circleCircleCollide, isInCircle ]); / Demonstrate ellipseEllipseCollide / new Demo(ellipse, ellipse, function(a, b) { var c = ellipseEllipseCollide(a.x, a.y, a.w, a.h, a.theta, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInEllipse(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : typAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : typAlpha); } return c; }, [ ellipseEllipseCollide, isInEllipse ]); / Demonstrate circle and Ellipse Collide / new Demo(circle, ellipse, function(a, b) { var c = ellipseEllipseCollide(a.x, a.y, a.w, a.w, 0, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInEllipse(mouseX, mouseY, a.x, a.y, a.w, a.h, a.theta) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : transparentAlpha); } return c; }, ellipseEllipseCollide, "A function that explicitly checks for a collision between a circle and an ellipse is not provided. You can use the function ellipseEllipseCollide() where one of the ellipses has identical width and height."); / Demonstrate triangle and Ellipse Collide / new Demo(triangle, ellipse, function(a, b) { var poly = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3); var c = polygonEllipseCollide(poly, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInTriangle(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonEllipseCollide, coords2Points ], "A function that explicitly checks for a collision between a triangle and an ellipse is not provided. You can use the function polygonEllipseCollide() after converting the six triangle() arguments into an array of three points by using the coords2Points() function."); / Demonstrate quad and Ellipse Collide / new Demo(quad, ellipse, function(a, b) { var poly = coords2Points(a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4); var c = polygonEllipseCollide(poly, b.x, b.y, b.w, b.h, b.theta); if (! c) { a.fillAlpha(isInQuad(mouseX, mouseY, a.x1, a.y1, a.x2, a.y2, a.x3, a.y3, a.x4, a.y4) ? interiorAlpha : transparentAlpha); b.fillAlpha(isInEllipse(mouseX, mouseY, b.x, b.y, b.w, b.h, b.theta) ? interiorAlpha : transparentAlpha); } return c; }, [ polygonEllipseCollide, coords2Points ], "A function that explicitly checks for a collision between a quadrilateral and an ellipse is not provided. You can use the function polygonEllipseCollide() after converting the eight quad() arguments into an array of four points by using the coords2Points() function."); / * Called by Processing.js numerous times per second. * Displays the main screen. / draw = main = function() { var selection = bulletSelected; bulletSelected = undefined; if ((! mouseIsPressed) && selection) { selection.demo.startDemo(); return; } background(217, 247, 245); fill(0); textAlign(CENTER, CENTER); textSize(textSz1.5); text("Choose a collision pair:", width/2 + 15, 39); textSize(textSz); Row.mouseY = Column.mouseX = undefined; for (var i = 0; i < rows.length; i++) { columns[i].render(headerY); rows[i].render(headerX); } for (var i = 0; i < bullets.length; i++) { if (bullets[i].render()) { bulletSelected = bullets[i]; } } }; // I am honored any time anybody uses my code for any purpose. // Copy freely! All my programs are at // https://www.khanacademy.org/profile/BobLyon/programs
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPCz7IDyCQw
Votes	390
Spin-Offs	21
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bob Lyon
Author Name	BobLyon
Author ID	kaid_1116520053705160540512971
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739393661640
Updated	4 months ago, 1744828503245
Source Deleted	unknown