Анимация последовательности Фибоначчи

Question

В настоящее время я пытаюсь запрограммировать анимацию Fibonacci Sequence на холсте HTML5 с использованием JavaScript.

Я вычислил числа Фибоначчи и могу добавить квадраты к макету сетки. Проблема, с которой я столкнулась, заключается в том, чтобы вычислить смещение, чтобы они автоматически соответствовали друг другу бок о бок. У кого-нибудь есть какие-либо указания на то, как это может быть достигнуто.

вот мой JavaScript код:

var canvas; 
var context; 

function init(){ 

    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 

    drawgrid(); 
    drawlines(); 

} 


function drawgrid(){ 

    context.strokeStyle="LightGrey"; 

    for(var i = 0; i < 600; i+=20){ 

     context.beginPath(); 
     context.moveTo(i, 0); 
     context.lineTo(i, 600); 
     context.stroke(); 

     context.beginPath(); 
     context.moveTo(0, i); 
     context.lineTo(600, i); 
     context.stroke(); 

    } 

} 

function drawlines(){ 

    context.strokeStyle="blue"; 
    var startLeft = (canvas.width/2) - 20; 
    var startTop = (canvas.height/2) - 20; 

    var first = 1; 
    var second = 1; 
    var next = 0; 
    var c = 0; 
    var count = 0; 

    for (var i = 0; i < 5; i++){ 

     if (c <= 1){ 

      next = 1; 

     }else{ 

      next = first + second; 
      first = second; 
      second = next; 

     } 

     c++; 
     next *= 20; 


     //This is a minor attempt at offsetting which does not work what so ever 
     switch(count) { 
      case 1: 
       startLeft += next; 
       break; 
      case 2: 
       startTop-=next; 
       break; 
      case 3: 
       startTop -= next - 20; 
       startLeft -= next; 
       break; 
      case 4: 
       startTop += next - 80; 
       startLeft += next - 160; 
       break; 
     } 

     context.beginPath(); 
     context.rect(startLeft,startTop,next,next); 
     context.stroke(); 

     count++; 

     if (count > 4){ 

      count = 1; 

     } 

     startLeft = (canvas.width/2) - 20; 
     startTop = (canvas.height/2) - 20; 

    } 

} 

JSFiddle: http://jsfiddle.net/schoolboytom/73prkp8L/

Answer 1

Один из способов будет отслеживать все координаты в любое время и приращение в зависимости от ориентации следующий квадрат на место. Я думаю, что вся ваша структура в порядке, но есть некоторая информация, которой недостает, в основном сохраняя нижние и правые координаты.

Нечто подобное, кажется, работает (я положил приращение 10, чтобы увидеть, если логика была в порядке, но он должен работать с любым):

function drawlines() { 

    context.strokeStyle = "blue"; 
    var curLeft = (canvas.width/2) - 10; 
    var curTop = (canvas.height/2) - 10; 
    //You add right and bottom position to help calculate positioning later. 
    var curRight = curLeft + 10; 
    var curBottom = curTop + 10; 

    var first = 0; 
    var second = 1; 
    var next = 10; 
    var c = 0; 
    //You draw the first square out of the loop cause it's conditions are 
    //not exactly the same, meaning its positioning is not dependent on previous square 
    context.beginPath(); 
    context.rect(curLeft, curTop, next, next); 
    context.stroke(); 

    for (var i = 1; i <= 9; i++) { 

     next = first + second; 
     first = second; 
     second = next; 

     next *= 10; 
     //changed this to fetch if square should be added right, top, left or bottom 
     count = i % 4 

     //You switch depending on where you're at. Each direction has its increment pattern. 
     //For example to add right you keep bottom, but get current right to get left positioning 
     //and you increment top depending on next value. The structure is 
     //similar to yours but since you now have right and bottom it's 
     //easier to place each square correctly 
     switch (count) { 
      case 0: 

       curRight = curLeft + next 
       curLeft = curLeft 
       curTop = curBottom 
       curBottom = curBottom + next 

       break; 
      case 1: 
       curLeft = curRight 
       curRight = curRight + next 
       curTop = curBottom - next 
       curBottom = curBottom 

       break; 

      case 2: 
       curLeft = curRight - next 
       curRight = curRight 
       curBottom = curTop 
       curTop = curBottom - next 
       break; 
      case 3: 
       curRight = curLeft 
       curLeft = curLeft - next 
       curBottom = curTop + next 
       curTop = curTop 
       break; 
     } 
     // the rest is pretty much the same 
     context.beginPath(); 
     context.rect(curLeft, curTop, next, next); 
     context.stroke(); 

     count++; 

    } 

} 

См скрипка: http://jsfiddle.net/a0aLg6Ly/3/