TruerWords Logo

Search TruerWords

Sign Up  Log On

“Swift Spirals”

From: Seth Dillingham In Response To: Top of Thread.  
Date Posted: Saturday, April 11, 2015 9:55:27 AM Replies: 2
Enclosures: OSX (12K)

Yesterday on Quora a particular Math question caught my attention and fired up my imagination. I've already linked to it, but here's how the question was worded:

Four persons K, L, M, and N are initially at the four corners of a square of side 'd'. Each person now moves with a uniform speed of 'v' in such a way that K always moves directly towards L, L directly towards M, M directly towards N and N directly towards K. At what time will the four persons meet?

(Why say they are people and then not give them real names? I thought that was funny.)

Let me rephrase the question. Four people (or uh... dots) are at the corners of a very large square. They're all going to move at the same time, and keep moving until they touch. Each person moves toward the person at the next corner of the square in the clockwise direction. (So the person at the top left moves toward the person at the top right.)

I didn't care about the actual question there at the end, "at what time will the four person's meet?" I was just interested in the path they would each travel, the shape it would form.

Now keep in mind that each person is always moving towards the next person, not towards the corner where that person started.

It was obviously going to be a spiral in toward the center. Could I write a program that would simulate this travel?

Yes, I could! Here's an Xcode Playground file (written in Swift) that demonstrates the whole thing. It's not fancy, but it does show the spiral being drawn and I've kept the math self-contained in a couple of functions.


Here's the same thing in some javascript, running in the browser.

  var graphSide = 500.0
  function sqrx ) {
      return ( x * x );
  var Point = functionxy ) {
      this.x = x;
      this.y = y;
  // thanks to my buddy Pythagoras
  Point.prototype.distFromPoint = functionpointB ) {
      return Math.sqrt(sqr(pointB.x - this.x) + sqr(pointB.y - this.y));
  var actorA = new Point00 );
  var actorB = new PointgraphSide0 );
  var actorC = new PointgraphSidegraphSide );
  var actorD = new Point0graphSide );
  var distToMove = 2;
  var lineWidth = 2.0;
  var canvasctx;
  function initSpirals() {
      canvas = document.getElementById"spiralCanvas" );
      canvas.width = graphSide;
      canvas.height = graphSide;
      ctx = canvas.getContext("2d");
  function reset() {
      actorA = new Point00 );
      actorB = new PointgraphSide0 );
      actorC = new PointgraphSidegraphSide );
      actorD = new Point0graphSide );
      var canvas = document.getElementById"spiralCanvas" );
      var context = canvas.getContext("2d");
  function runButtonClickede ) {
      window.setTimeoutincrementWalkers0 );
  function resetButtonClickede ) {
  // find a new point on the line between a and b
  function moveFromAToBpointApointBdist ) {
      var dist_total = pointA.distFromPointpointB );
      var newX = pointA.x + ( ( dist * (pointB.x - pointA.x) ) / dist_total )
      var newY = pointA.y + ( ( dist * (pointB.y - pointA.y) ) / dist_total )
      return new PointnewXnewY );
  function moveAndDrawFromAToBpointApointBdist ) {
      var dest = moveFromAToBpointApointBdist );
      ctx.moveTopointA.xpointA.y );
      ctx.lineWidth = lineWidth;
      ctx.lineTodest.xdest.y );
      return dest;
  // incrementWalkers is its own function so that we can see the 
  // image updating in an animated fashion. If it was just done in 
  // a loop, then all we'd see is the finished product.
  function incrementWalkers() {
      if ( actorA.distFromPointactorB ) < distToMove * 1.001 )
      // draw lines from old to new locations
      var destA = moveAndDrawFromAToB(actorAactorBdistToMove);
      var destB = moveAndDrawFromAToB(actorBactorCdistToMove);
      var destC = moveAndDrawFromAToB(actorCactorDdistToMove);
      var destD = moveAndDrawFromAToB(actorDactorAdistToMove);
      // update actors with new locations
      actorA = destA;
      actorB = destB;
      actorC = destC;
      actorD = destD;
      lineWidth = lineWidth * 0.99;
      window.setTimeoutincrementWalkers0 );

Discussion Thread:
  • RE: Swift Spirals (by Seth Dillingham at 4/11/2015)

    For anyone still reading in email (so many years since this was an active site...), I've updated that

  • Re: Swift Spirals (by Mike at 4/11/2015)

    Obviously, they meet at 3:31 PM. Oh, wait, they didn't give any speeds or a start time or dimensions


There are no trackbacks.

is Seth Dillingham's
personal web site.
Truer words were never spoken.