Post
Ask Question

Fibonacci Spiral App For Windows Phone

I occasionally get together with my cousin, who is a physics and technology buff. He has been after me for a long time to create software to generate a “Fibonacci Spiral”. I kept putting him off because of all the other business things I need to take care of. Finally, after I found some daylight with my crazy work schedule, I decided to make the programming for his “Fibonacci Spiral”. However, I wanted to make it into a Windows Phone app since I needed fresh app ideas for movies to position on my application development website.

Next, the C# code for scaling and drawing the adjacent Fibonacci boxes is shown below. Actually, this was slightly modified from some code I found online:

  1. void drawthespiralaroundtheorigin()    
  2. {    
  3. int a;    
  4. int[] convert_to_number = new int[2];    
  5. // the current fibonacci numbers    
  6. int current = 1;    
  7. int previous = 0;    
  8. // the current bounding box    
  9. int left = 0;    
  10. int right = 1;    
  11. int top = 0;    
  12. int bottom = 0;    
  13.     
  14. // the number of boxes you want to draw    
  15. App appx = Application.Current as App;    
  16. string numberofboxes = appx.numberofboxes_public;    
  17.     
  18. for (a = 0; a < 2; a++)    
  19. {    
  20. convert_to_number[a] = 0;    
  21. if (numberofboxes.Substring(a, 1) == "0") convert_to_number[a] = 0;    
  22. if (numberofboxes.Substring(a, 1) == "1") convert_to_number[a] = 1;    
  23. if (numberofboxes.Substring(a, 1) == "2") convert_to_number[a] = 2;    
  24. if (numberofboxes.Substring(a, 1) == "3") convert_to_number[a] = 3;    
  25. if (numberofboxes.Substring(a, 1) == "4") convert_to_number[a] = 4;    
  26. if (numberofboxes.Substring(a, 1) == "5") convert_to_number[a] = 5;    
  27. if (numberofboxes.Substring(a, 1) == "6") convert_to_number[a] = 6;    
  28. if (numberofboxes.Substring(a, 1) == "7") convert_to_number[a] = 7;    
  29. if (numberofboxes.Substring(a, 1) == "8") convert_to_number[a] = 8;    
  30. if (numberofboxes.Substring(a, 1) == "9") convert_to_number[a] = 9;    
  31. }    
  32. inputted_numer_of_fibonacci_boxes_to_draw = (convert_to_number[0] * 10) + (convert_to_number[1] * 1);    
  33.     
  34.     
  35. if (inputted_numer_of_fibonacci_boxes_to_draw >= 3 && inputted_numer_of_fibonacci_boxes_to_draw <= 7)    
  36. {    
  37.     
  38.     
  39. for (fibonacci_counter = 0; fibonacci_counter < inputted_numer_of_fibonacci_boxes_to_draw; fibonacci_counter++)    
  40. {    
  41.     
  42. switch (fibonacci_counter % 4)    
  43. {    
  44. case 0: // attach to bottom of current rectangle    
  45. drawRectangle(left, right, bottom, bottom + current);    
  46. bottom += current;    
  47. break;    
  48. case 1: // attach to right of current rectangle    
  49. drawRectangle(right, right + current, top, bottom);    
  50. right += current;    
  51. break;    
  52. case 2: // attach to top of current rectangle    
  53. drawRectangle(left, right, top - current, top);    
  54. top -= current;    
  55. break;    
  56. case 3: // attach to left of current rectangle    
  57. drawRectangle(left - current, left, top, bottom);    
  58. left -= current;    
  59. break;    
  60. }    
  61.     
  62. // update fibonacci number    
  63. int temp = current;    
  64. current += previous;    
  65. previous = temp;    
  66.     
  67. }    
  68.     
  69.     
  70. }    
  71.     
  72.     
  73. }   
You will notice from above that I’m calling a function, “drawRectangle”, to make the “Fibonacci boxes”. The code I found online to do this used a directive within this function to create the rectangles or “Fibonacci boxes”. This code was used for a desktop application. I could not find a rectangle drawing function to work the way I wanted it to for Windows Phone, so I improvised and made my own code to create the “Fibonacci boxes” with a series of connected lines as detailed below. After I create the “Fibonacci boxes”, I then set the parameters for drawing the arcs within each one of the “Fibonacci boxes” that will eventually create the smooth "Fibonacci spiral".
  1. private void drawRectangle(int left, int right, int top, int bottom)    
  2. {    
  3. // set the scale as well as horizontal and vertical offsets.    
  4. int scalevar = 23;    
  5. int offsetx = 152;    
  6. int offsety = 180;    
  7. if (inputted_numer_of_fibonacci_boxes_to_draw == 7)    
  8. {    
  9. offsety = 362;    
  10. }    
  11.     
  12. // draw top line of the fibonacci box.    
  13. Line myLine_north = new Line();    
  14. myLine_north.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));    
  15. myLine_north.X1 = (scalevar * left) + offsetx;    
  16. myLine_north.Y1 = (scalevar * top) + offsety;    
  17. myLine_north.X2 = (scalevar * right) + offsetx;    
  18. myLine_north.Y2 = (scalevar * top) + offsety;    
  19. myLine_north.StrokeThickness = 1;    
  20. ContentPanel.Children.Add(myLine_north);    
  21.     
  22. // draw bottom line of the fibonacci box.    
  23. Line myLine_south = new Line();    
  24. myLine_south.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));    
  25. myLine_south.X1 = (scalevar * left) + offsetx;    
  26. myLine_south.Y1 = (scalevar * bottom) + offsety;    
  27. myLine_south.X2 = (scalevar * right) + offsetx;    
  28. myLine_south.Y2 = (scalevar * bottom) + offsety;    
  29. myLine_south.StrokeThickness = 1;    
  30. ContentPanel.Children.Add(myLine_south);    
  31.     
  32. // draw right line of the fibonacci box.    
  33. Line myLine_east = new Line();    
  34. myLine_east.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));    
  35. myLine_east.X1 = (scalevar * right) + offsetx;    
  36. myLine_east.Y1 = (scalevar * top) + offsety;    
  37. myLine_east.X2 = (scalevar * right) + offsetx;    
  38. myLine_east.Y2 = (scalevar * bottom) + offsety;    
  39. myLine_east.StrokeThickness = 1;    
  40. ContentPanel.Children.Add(myLine_east);    
  41.     
  42. // draw left line of the fibonacci box.    
  43. Line myLine_west = new Line();    
  44. myLine_west.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));    
  45. myLine_west.X1 = (scalevar * left) + offsetx;    
  46. myLine_west.Y1 = (scalevar * top) + offsety;    
  47. myLine_west.X2 = (scalevar * left) + offsetx;    
  48. myLine_west.Y2 = (scalevar * bottom) + offsety;    
  49. myLine_west.StrokeThickness = 1;    
  50. ContentPanel.Children.Add(myLine_west);    
  51.     
  52. // set arc parameters for the first fibonacci box.    
  53. if (fibonacci_counter == 0)    
  54. {    
  55. x_start = (scalevar * left) + offsetx;    
  56. y_start = (scalevar * top) + offsety;    
  57. x_end = (scalevar * right) + offsetx;    
  58. y_end = (scalevar * bottom) + offsety;    
  59. curve_size_x = 50;    
  60. curve_size_y = 25;    
  61. }    
  62. // set arc parameters for the second fibonacci box.    
  63. if (fibonacci_counter == 1)    
  64. {    
  65. x_start = (scalevar * left) + offsetx;    
  66. y_start = (scalevar * bottom) + offsety;    
  67. x_end = (scalevar * right) + offsetx;    
  68. y_end = (scalevar * top) + offsety;    
  69. curve_size_x = 50;    
  70. curve_size_y = 25;    
  71. }    
  72. // set arc parameters for the third fibonacci box.    
  73. if (fibonacci_counter == 2)    
  74. {    
  75. x_start = (scalevar * right) + offsetx;    
  76. y_start = (scalevar * bottom) + offsety;    
  77. x_end = (scalevar * left) + offsetx;    
  78. y_end = (scalevar * top) + offsety;    
  79. curve_size_x = 45;    
  80. curve_size_y = 45;    
  81. }    
  82. // set arc parameters for the fourth fibonacci box.    
  83. if (fibonacci_counter == 3)    
  84. {    
  85. x_start = (scalevar * right) + offsetx;    
  86. y_start = (scalevar * top) + offsety;    
  87. x_end = (scalevar * left) + offsetx;    
  88. y_end = (scalevar * bottom) + offsety;    
  89. curve_size_x = 85;    
  90. curve_size_y = 85;    
  91. }    
  92. // set arc parameters for the fifth fibonacci box.    
  93. if (fibonacci_counter == 4)    
  94. {    
  95. x_start = (scalevar * left) + offsetx;    
  96. y_start = (scalevar * top) + offsety;    
  97. x_end = (scalevar * right) + offsetx;    
  98. y_end = (scalevar * bottom) + offsety;    
  99. curve_size_x = 110;    
  100. curve_size_y = 110;    
  101. }    
  102. // set arc parameters for the sixth fibonacci box.    
  103. if (fibonacci_counter == 5)    
  104. {    
  105. x_start = (scalevar * left) + offsetx;    
  106. y_start = (scalevar * bottom) + offsety;    
  107. x_end = (scalevar * right) + offsetx;    
  108. y_end = (scalevar * top) + offsety;    
  109. curve_size_x = 220;    
  110. curve_size_y = 220;    
  111. }    
  112. // set arc parameters for the seventh fibonacci box.    
  113. if (fibonacci_counter == 6)    
  114. {    
  115. x_start = (scalevar * right) + offsetx;    
  116. y_start = (scalevar * bottom) + offsety;    
  117. x_end = (scalevar * left) + offsetx;    
  118. y_end = (scalevar * top) + offsety;    
  119. curve_size_x = 300;    
  120. curve_size_y = 300;    
  121. }    
  122.     
  123. // draw the above specified arc for each value of loop counter    
  124. // variable, "fibonacci_counter".    
  125. drawArc(x_start, y_start, x_end, y_end, curve_size_x, curve_size_y);    
  126.     
  127. }   
Next, I submit the code used to make the “Fibonacci Spiral” within the confines of each “Fibonacci box”. The spiral is actually a series of carefully connected arcs drawn within each “Fibonacci box”. If done meticulously, it will create the appearance of one smooth, continuous spiral.
  1. private void drawArc(int x_start, int y_start, int x_end, int y_end, int curve_size_x, int curve_size_y)    
  2. {    
  3.     
  4. PathFigure pthFigure1 = new PathFigure();    
  5. // starting cordinates of arcs    
  6. pthFigure1.StartPoint = new Point(x_start, y_start);    
  7. ArcSegment arcSeg1 = new ArcSegment();    
  8. // ending cordinates of arcs    
  9. arcSeg1.Point = new Point(x_end, y_end);    
  10. arcSeg1.Size = new Size(curve_size_x, curve_size_y);    
  11. arcSeg1.IsLargeArc = false;    
  12. arcSeg1.SweepDirection = SweepDirection.Counterclockwise;    
  13. arcSeg1.RotationAngle = 0;    
  14. PathSegmentCollection myPathSegmentCollection1 = new PathSegmentCollection();    
  15. myPathSegmentCollection1.Add(arcSeg1);    
  16. pthFigure1.Segments = myPathSegmentCollection1;    
  17. PathFigureCollection pthFigureCollection1 = new PathFigureCollection();    
  18. pthFigureCollection1.Add(pthFigure1);    
  19. PathGeometry pthGeometry1 = new PathGeometry();    
  20. pthGeometry1.Figures = pthFigureCollection1;    
  21. System.Windows.Shapes.Path arcPath1 = new System.Windows.Shapes.Path();    
  22. arcPath1.Data = pthGeometry1;    
  23. arcPath1.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 255, 0));    
  24. ContentPanel.Children.Add(arcPath1);    
  25.     
  26. } 
Finally, here is an image of the input screen for the number of “Fibonacci boxes” for the app to create. In this case, they can range from 3 to as many as 7. I declined to go beyond 7, not because of any programming limitation, but rather for the spatial considerations of the Windows Phone emulator display. There are also spirals for 5, 6 and 7 “Fibonacci boxes”.

This is the best way I could think of for creating a “Fibonacci Spiral”. If you have a better way, then I'd like to hear about it.



Input screen for number of Fibonacci boxes.



Spiral for 5 Fibonacci boxes.



Spiral for 6 Fibonacci boxes.



Spiral for 7 Fibonacci boxes.


Similar Articles