Исходный код для дерева Javascript, который представлен в видео "Изобретения по принципу"

Меня вдохновил Брет Виктор, изобретающий на принципе видео (http://vimeo.com/36579366).

Кроме того, я был очень очарован этим деревом, нарисованным с использованием Javascript. Я не делал много графического программирования. Всю мою карьеру я был разработчиком среднего уровня и базы данных. Но, глядя на это программно рисовать дерево, я мотивирован, чтобы учиться. Я начал изучать Javascript. Я знаю, что в конечном итоге (через несколько недель или месяцев, в зависимости от того, сколько времени я получу), я смогу написать такую программу сам с нуля.

Однако, я действительно очень хочу получить некоторый исходный код, который делает подобный рисунок в Javascript и играть с ним. Любые ссылки/указатели, которые вы, ребята, можете предоставить, будут очень полезны.

Ответ 1

Рисование дерева с холстом достаточно просто. См. Ниже для решения примерно в 80 строках кода.

Несколько человек начали попытки воссоздать интерактивную среду из видео. Одна из этих попыток была сделана github user tnlogy. Его окружение позволяет вам выбрать номер в коде и изменить рабочую демонстрацию "на лету" с помощью слайдера. Я разветкил его код, чтобы включить древо древо.

Демо для интерактивного дерева:

http://brianpeiris.github.com/live-coding/

Демонстрация для простого дерева:

http://jsfiddle.net/brianpeiris/v9zD6/show

Источник простой демонстрации дерева

var
  drawLeaf = function (cx, xx, yy) {
    var
      leafAlpha = 8/10,
      leafSize = 7;

    cx.beginPath();
    cx.fillStyle = (
      "rgba(" + 
      Math.round(220 + (Math.random() * 50)) + ", " + 
      Math.round(180 + (Math.random() * 50)) + ", " + 
      Math.round(220 + (Math.random() * 50)) + ", " + 
      leafAlpha + 
      ")"
    );  
    cx.arc(xx, yy, leafSize, 0, Math.PI * 2);
    cx.fill();
  },
  drawBranch = function (ii, cx, xx, yy, level, levels, angle, numBranches) {
    var
      branchLength = 44,
      subBranchWidthFactor = 2,
      sweep = Math.PI * 25/30,
      branchTweakMagnitude = 52/50,
      tt;

    cx.beginPath();

    // Draw thinner branches away from the trunk
    cx.lineWidth = (levels - level) * subBranchWidthFactor;

    // Calculate the angle of the branch, with some random tweaks
    tt = (
      sweep * ii / (numBranches - 1) + angle -
      sweep / 2 + Math.PI + 
      Math.random() * 0.5 * branchTweakMagnitude
    );

    cx.moveTo(xx, yy);
    newXX = xx + Math.sin(tt) * branchLength;
    newYY = yy + Math.cos(tt) * branchLength;
    cx.lineTo(newXX, newYY);
    cx.stroke();

    // Recursively draw more branches
    drawBranchesAndLeaves(cx, newXX, newYY, level + 1, levels, Math.PI + tt);
  },
  drawBranchesAndLeaves = function (cx, xx, yy, level, levels, angle) {
    var
      numBranches = 5,
      ii, newXY;

    // This function is called recursively. The recursion terminates when we
    // have reached the specified number of recursive levels.
    if (level === levels) { 
      drawLeaf(cx, xx, yy);
      return; 
    }
    else {
      for (ii = 0; ii < numBranches; ii++) {
        drawBranch(ii, cx, xx, yy, level, levels, angle, numBranches);
      }
    }
  },

  drawTree = function(cx, ww, hh) {
    var trunkX = ww / 2, trunkY = hh - 165;

    cx.strokeStyle = "black";
    cx.lineWidth = 13;
    cx.lineCap = "round";

    cx.moveTo(trunkX, hh);
    cx.lineTo(trunkX, trunkY);
    cx.stroke();

    drawBranchesAndLeaves(cx, trunkX, trunkY, 0, 3, 0);
  },
  width = 350,
  height = 350,
  canvas = $('<canvas width="' + width + '" height="' + height + '"></canvas>'),
  ctx = canvas[0].getContext("2d");

  $('body').append(canvas);
  drawTree(ctx, width, height);

Ответ 2

Это хорошее место для начала, если вы очень новичок в 2D-графике в Javascript.

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

Что касается исходного кода дерева, мне тоже будет интересно посмотреть на него!

Ответ 3

Кредит Ян Джонсон (@enjalot) за то, что поделился этим со мной, но вот ссылка на версию дерева d3js. http://tributary.io/inlet/4b0a56692447fa75d8a1, который адаптирован из этой версии Peter Cook http://prcweb.co.uk/lab/d3-tree/

Использует комбинацию путей:

var pathGenerator = d3.svg.line()
.x(function(d) {
  return d.x;
})
.y(function(d) {
  return d.y;
})

И функции, которые выбирают родителей, точки и пути:

function getPoints(branches) {
  var points = [];
  branches.forEach(function(branch) {
    points.push( {x: x1(branch), y: y1(branch) });
    points.push( {x: x2(branch), y: y2(branch) });
  });
  return points;
}

function getParent(branch, p, branches) {
  if(!branch.parent) return;
  var b = branches[branch.parent];
  p.push({x: b.x, y: b.y})
  getParent(b, p, branches);

}


function getPaths(branches) {
  var paths = [];

  var i = 0;
  branches.forEach(function(branch) {
    if(branch.d < maxDepth) return;
    var p = [{x: branch.x, y: branch.y}];
    getParent(branch, p, branches);
    p.push(seed);
    paths.push(p);
  });
  return paths;
}

Опять же, HT к Яну. Живая демонстрация здесь.