Ковёр Серпинского на Javascript/HTML

Узор для ковра - проблема целая?
Шей, как Серпинский, и дело сделано!

Кроме кривой Серпинского, есть ещё и ковёр Серпинского, и даже его салфетка. Последние, правда, я часто видел в детстве в советских столовых.

А в этой заметке построим пока что ковёр Серпинского на Javascript, вывод будем делать прямо в HTML и использовать прототипы функций для применения их к каждому элементу массива яваскриптовой функцией map.

Из-за применения юникодовского неразрывного пробела предполагается. что кодировка скрипта тоже Юникод.

Порядок коврика задаётся прямо из кода, в нашем случае он равен 4.

Исходник с минимумом нужных комментов и результат его выполнения:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<div id='SierpinskiCarpetHtml'></div>
<script type='text/javascript'>
 var blackMapChar = '#';
 var whiteMapChar = ' ';
 
 var SierpinskiCarpet = function (size) {
  this.carpet = [blackMapChar];
  for (var i = 1; i <= size; i++) {
   this.carpet = [].concat (
    this.carpet.map (this.sssFigure),
    this.carpet.map (this.sbsFigure),
    this.carpet.map (this.sssFigure)
   );
  }
 }
 
 SierpinskiCarpet.prototype.sssFigure = function(x) {
  var s = new String(x);
  return new String(s+s+s);
 }
 
 SierpinskiCarpet.prototype.sbsFigure = function (x) {
  var s = new String(x);
  var space = s.replace (new RegExp(blackMapChar, 'g'), whiteMapChar);
  return new String(s+space+s);
 }

 SierpinskiCarpet.prototype.getHtmlCode = function (target) { 
  //Просто сделать HTML-таблицу с нужными атрибутами:
  var table = document.createElement('table');
  table.setAttribute('style','border-collapse: collapse;'); //надо!
  table.setAttribute('align','center'); //лучше равнять по центру
  table.setAttribute('width','90%'); //ширина таблицы 90%, поменяйте, если желаете
  for (var i = 0; i < this.carpet.length; i++) {
   var row = document.createElement('tr');
   for (var j = 0; j < this.carpet[i].length; j++) {
    var cell = document.createElement('td');
    cell.setAttribute (
     'style', 'background-color: ' +
     (this.carpet[i][j] == blackMapChar ? 'navy' : 'yellow') + //2 цвета клеток
     ';'
    );
    cell.appendChild(document.createTextNode ("\u00A0")); 
           //юникодовский неразрывный пробел: см. http://unicode-table.com/ru/00A0/
    row.appendChild(cell);
   }
   table.appendChild(row);
  }
  target.appendChild(table);
 }

 var carpet = new SierpinskiCarpet(4); //коврик 4 порядка, 5-го уже слишком большой
 carpet.getHtmlCode ( document.getElementById ('SierpinskiCarpetHtml') );
</script>
<noscript><p>Извините, для работы приложения нужен включённый Javascript</p></noscript>

15.05.2016, 17:27 [5933 просмотра]