Делаем мини-фрактал на p5.js

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

Ниже показана вся основная часть кода (без обрамляющих тегов HTML-файла), её можно вставить в любую страницу (кодировка UTF-8) и выполнить просто кликом мыши. Библиотека p5.js подключается с рекомендуемого на её странице внешнего сайта.

Обратите внимание на блок "основные настройки", "прикрутив" к коду панель для выбора параметров как в этом скрипте (или же средствами самой библиотеки), можно получить очередной плеер на тему, весьма простой и компактный, потому что нужные нам тригонометрические преобразования уже заложены в библиотеку. Следует иметь в виду, что не все комбинации параметров допустимы.

Также приводится несколько скриншотов с образцами вывода.

<style>
 #fractalDiv {
  margin: 0 auto;
  width: 500px;
  font-family: monospace;
 }
 canvas {
  border: 0.5px dotted orange;
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.7.0/lib/p5.js"></script>
<script>
//основные настройки:
//numberOfVertices - количество вершин (больше 2)
//stepRatio - коэффициент (доля общего расстояния до перемещаемой вершины) (0.0..1.0)
//twist - закручивание (0.0..1.0)
//allowSameVert - можно ли выбирать ту же вершину в следующей итерации (true/false)
//allowNeightbourVert - можно ли выбирать соседнюю вершину в следующей итерации (true/false)
let numberOfVertices = 5, stepRatio = 0.5, twist = 0.0, allowSameVert = true, allowNeightbourVert = true;

//другие данные:
let vertices = []; //массив вершин
let color1, color2; //цвета 1 и 2, определены в setup
let loc;
let prev_vert = 0;
let width = 500, height = 500; //ширина и высота канвы в px, см. также в стиле

function setup() {
 let myCanvas = createCanvas(width, height);
 myCanvas.parent("fractalDiv");
 loc = createVector(0, 0);
 color1 = color("#0066ff");
 color2 = color("#ffcc99");
 for (let i = 0; i < numberOfVertices; i++) {
  let v = p5.Vector.fromAngle(i / numberOfVertices * TWO_PI);
  v.mult(width * 0.45);
  vertices.push(v);
 }
}

function draw() {
 let steps = 5000;
 translate(width / 2, height / 2);
 for (let i = 0; i < steps; i++) {
  let target = 0;
  while(true) {
   target = floor(random(numberOfVertices));
   if (!allowSameVert && target == prev_vert) continue;
   if (!allowNeightbourVert && 
      ((target + 1) % numberOfVertices == prev_vert ||
      (prev_vert + 1) % numberOfVertices == target))
    continue;
   break;
  }
  prev_vert = target;
  let diff = p5.Vector.sub(vertices[target], loc);
  stroke(lerpColor(color1, color2, diff.mag() / (width * 0.9)));
  diff.mult(stepRatio);
  diff.rotate(twist);
  loc.add(diff);
  point(loc.x, loc.y);
 }
}

setup();
draw();
</script>
<noscript><p>Включите Javascript для работы приложения</p></noscript>
<div id = "fractalDiv"></div>

numberOfVertices = 5, stepRatio = 0.5, twist = 0.0, allowSameVert = true, allowNeightbourVert = true - пентагон по умолчанию

numberOfVertices = 3, stepRatio = 0.5, twist = 0.0, allowSameVert = true, allowNeightbourVert = true - треугольник Серпинского

numberOfVertices = 6, stepRatio = 0.6, twist = 0.4, allowSameVert = true, allowNeightbourVert = false - такие вот снежинки

numberOfVertices = 6, stepRatio = 0.6, twist = 0.0, allowSameVert = false, allowNeightbourVert = true - теперь она ровная

numberOfVertices = 4, stepRatio = 0.55, twist = 0.0, allowSameVert = true, allowNeightbourVert = true - и вот так можно

14.01.2024, 14:33 [160 просмотров]