Javascript 树的源代码，在“Inventing on Principle"中具有特色；视频 [英] Source code for Javascript tree that features in "Inventing on Principle" video

问题描述

Bret Victor 的 Inventing on Principle 视频 (http://vimeo.com/36579366) 给了我很大的启发.

I was quite inspired by Bret Victor's Inventing on Principle video (http://vimeo.com/36579366).

此外，我对使用 Javascript 绘制的那棵树非常着迷.我没有做过很多图形编程.在我的整个职业生涯中，我一直是一名中间层和数据库开发人员.但是看着那个以编程方式绘制的树，我有学习的动力.我已经开始学习 Javascript.我知道我最终(几周或几个月后，取决于我有多少时间)能够从头开始自己编写这样的程序.

Also, I was very fascinated by that tree drawn using Javascript. I have not done much of graphics programming. All my career I have been a middle-tier and database developer. But looking at that programmatically draw tree, I am motivated to learn. I have started learning Javascript. I know I will eventually (in a few weeks or months, depending on how much time I get) be able to write such program myself from scratch.

然而，我真的很想得到一些在 Javascript 中进行类似绘图的源代码并使用它.你们可以提供的任何链接/指针都会非常有用.

However, I am really really eager to get some source code that does similar drawing in Javascript and play with it. Any links/pointers you guys can provide would be very useful.

推荐答案

用画布画一棵树很简单.请参阅下文，了解大约 80 行代码的解决方案.

Drawing a tree with the canvas is simple enough. See below for a solution in about 80 lines of code.

一些人已经开始尝试从视频中重新创建交互式环境.其中一个尝试是由 github 用户 tnlogy 进行的.他的环境允许您在代码中选择一个数字并使用滑块即时更改正在运行的演示.我已经分叉了他的代码以包含一个树演示.

Several people have started attempts at re-creating the interactive environment from the video. One of those attempts was made by github user tnlogy. His environment allows you to select a number in the code and change the running demo on-the-fly using a slider. I've forked his code to include a tree demo.

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);

这篇关于Javascript 树的源代码，在“Inventing on Principle"中具有特色；视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！