Откуда начинается картинка рисоваться?

Question

помогите разобраться откуда начинается картинка

Answer 1

Вам ещё не надоело задалбывать всех форумчан этой черепашкой? :)

Картинка (представляющая из себя сплошную ломанную линию) начинает рисоваться из центра. Алгоритм её рисования такой:

Циклическая мена цвета пера из диапазона цветов (три значения).
Вперёд на заданную длину;
Увеличение длины на некоторое фиксированное значение;
Поворот на угол чуть больше 120 градусов;

Вот вам наглядная анимация того, как это происходит:

const colors = [
  [60, 150, 90],
  [180, 60, 30],
  [180, 150, 210]
];

// параметры ломанной
const start = 50;
const step = 2;
const angle = 121;
const iterations = 200;

// анимация
const startDelay = 1000;
const lastDelay = 10;
const logDelay = Math.log(iterations);
function delay(i) {
  const progress = Math.log(i) / logDelay;
  const delay =  startDelay - progress * (startDelay - lastDelay);
  return Math.floor(delay);
}

function segment() {
  // Следующие три строки - собственно реализация алгоритма для JS turtle
  // Переменная i содержит номер очередной итерации
  color(colors[i % 3]);
  forward(size+=step);
  left(angle);

  i++;
  if (i < iterations) {    
    setTimeout(segment, delay(i));
  }
}

let i = 0;
let size = start;
width(2);
segment();

.as-console-wrapper { display: none !important; }

<link rel="stylesheet" href="https://rawgit.com/hanumanum/js-turtle/master/lib/turtle.css">
<canvas id="turtlecanvas" width="500" height="500"></canvas>
<canvas id="imagecanvas" width="500" height="500" style="display:none"></canvas>
<script type="text/javascript" src="https://rawgit.com/hanumanum/js-turtle/master/lib/library.js"></script>

Поэкспериментировав с параметрами start, step и angle, может быть сможете добиться соответствия 1:1 с вашим исходным примером.

БЛОГ НА HUSL

Откуда начинается картинка рисоваться?

Ответы (1 шт):