---
title: "Spirála Fibonacciho slova"
slug: "spirala-fibonacciho-slova"
section: "volna-tvorba"
date: 2019-08-01
thumbnail: "/images/spirala-fibonacciho-slova-nahled.jpg"
thumbnailAlt: "Spirála Fibonacciho slova"
excerpt: ""
draft: false
---

import ImageFigure from "../../components/ImageFigure.astro";


<ImageFigure
  src="/images/spirala-fibonacciho-slova-obr-1.jpg"
  alt="Spirála Fibonacciho slova: výstup programu Pavla Burdy"
  caption=""
  width="full"
  align="center"
/>

Pro vykreslení tohoto obrazce jsem dosadil [Fibonacciho slovo](https://cs.wikipedia.org/wiki/Fibonacciho_slovo) do spirály stejným způsobem, jako jsou dosazena přirozená čísla do Ulamovi spirály. Jednotlivá čísla v této spirále jsem označil dle pravidla: 0 = černý čtverec, 1 = bílý čtverec (tento postup je znázorněn v animaci níže). Pro zefektivnění tohoto postupu byl využit skriptovací jazyk JavaScript.

<ImageFigure
  src="/images/spirala-fibonacciho-slova-obr-2.gif"
  alt="animovaná ukázka postupu"
  caption=""
  width="one-third"
  align="center"
/>

**Co je Fibonacciho slovo?**  
Fibonacciho slovo je specifická posloupnost binárních číslic (nebo obecněji jakýchkoliv dvou symbolů). Získáme ho podobně jako [Fibonacciho posloupnost](https://cs.wikipedia.org/wiki/Fibonacciho_posloupnost), pouze namísto sčítání použijeme zřetězení slov. Počáteční dva členy jsou definované: S0 = 0, S1 = 01. Další člen vzniklý zřetězením (tedy přidáním předposledního členu za poslední člen) bude  S2 = 010.  Posloupnost několika prvních číslic z Fibonacciho slov by tedy vypadala takto: 0100101001001010010100100101001001…

**Co je Ulamova spirála?**  
[Ulamova spirála](https://cs.wikipedia.org/wiki/Ulamova_spir%C3%A1la), nebo také prvočíselná spirála, je obrázek, který vznikne seřazením přirozených čísel do spirály a zvýrazněním prvočísel. Byla objevena matematikem Stanisławem Ulamem v roce 1963. Ulam si napsal přirozená čísla do obdélníkové sítě, jedničku doprostřed a další čísla spirálovitě směrem ven.  

**Zdrojový kód projektu**  
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Spirála Fibonacciho slova</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    #container {
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      padding: 20px;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background-color: white;
    }

    #point {
      color: black;
      background-color: white;
      border:none;
      position: absolute;
      font-size:11px;
      text-align:center;
      margin: 0;
      padding: 10px;
      width:20px;
      height:20px;
    }

    #point2 {
      color: white;
      background-color: black;
      position: absolute;
      font-size:11px;
      text-align:center;
      border:none;
      margin: 0;
      padding: 10px;
      width:20px;
      height:20px;
    }
  </style>
</head>
<body>
  <main id='container'>
  </main>

  <script>
    /* FUNKCE SPIRALY */
    function spiral(n) {
      if (n === 0) return [0, 0, r];
      --n;

      var r = Math.floor((Math.sqrt(n + 1) - 1) / 2) + 1;
      var p = (8 * r * (r - 1)) / 2;
      var en = r * 2;
      var a = (1 + n - p) % (r * 8);
      var pos = [0, 0, r];

      switch (Math.floor(a / (r * 2))) {
        case 0:
          {
            pos[0] = a - r;
            pos[1] = -r;
          }
          break;
        case 1:
          {
            pos[0] = r;
            pos[1] = (a % en) - r;
          }
          break;
        case 2:
          {
            pos[0] = r - (a % en);
            pos[1] = r;
          }
          break;
        case 3:
          {
            pos[0] = -r;
            pos[1] = r - (a % en);
          }
          break;
      }

      return pos;
    }

    /* FIBONACCIHO SLOVA */
    container = document.getElementById("container");
    var var0 = "<div id='point'></div>";
    var var1 = "<div id='point2'></div>";
    var var3;
    var text = "";
    var i;

    /* ITERACE NEFUNGUJE PO JEDNOM CTVERECKU ALE PO KAZDEM SOUCTU JEDNICEK A NUL */
    for (var i = 0; i < 22; i++) {
      var3 = var0 + var1;
      var1 = var0;
      var0 = var3;

      text += var3;
      container.innerHTML = text;
    }

    /* VOLANI FUNKCE SPIRALY */
    var cislo = document.getElementById('container').getElementsByTagName("div");

    for(var i=0; i<cislo.length; i++) {
      cislo[i].setAttribute("class", "jedno");

      var pos = spiral(i);

      cislo[i].style.right = 300 + 40 * pos[0] + "px";
      cislo[i].style.top = 300 + 40 * pos[1] + "px";
    }
  </script>
</body>
</html>

```

*Autor myšlenky: Vojta Maur*  
*Autor kódu: Pavel Burda*