来源$ C $下的Javascript树,具有在"发明的原理及QUOT;视频 [英] Source code for Javascript tree that features in "Inventing on Principle" video
问题描述
我是相当受布雷维克多对原理的视频发明灵感(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.
不过,我真的很渴望得到一些源$ C $ C,做类似图中的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行code的解决方案。
Drawing a tree with the canvas is simple enough. See below for a solution in about 80 lines of code.
有几个人已经开始尝试重新建立从视频的互动环境。 其中一个是由 GitHub的用户tnlogy尝试。他的环境,让您选择一个号码在code和使用滑块改变运行演示上即时。我分叉了code,包括树演示。
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);
这篇关于来源$ C $下的Javascript树,具有在&QUOT;发明的原理及QUOT;视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!