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

Question

Меня очень вдохновило видео «Изобретения на принципах» Брета Виктора (http://vimeo.com/36579366).

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

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

Answer 1

Рисовать дерево с помощью холста достаточно просто.Ниже приведено решение, содержащее около 80 строк кода.

Несколько человек начали попытки воссоздать интерактивную среду из видео. Одна из этих попыток была сделана пользователем github 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);

Answer 2

Благодарим Иана Джонсона (@enjalot) за то, что он поделился этим со мной, но здесь есть ссылка на версию дерева d3js.http://tributary.io/inlet/4b0a56692447fa75d8a1, который адаптирован из этой версии Питером Куком 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;
}

Опять ХТ Йену. Демонстрация здесь.

Answer 3

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

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

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