» cn.Tutorial Hello World
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

cn.Tutorial Hello World

English | Spanish | Russian | Japanese | Hungarian | Italian | Korean | German | French

The original english version of this page is newer and may contain information this translation does not have! Click here to view the english version.

下面的教程假定你对vvvv一无所知。为完成本教程,你需要理解的每一步操作都会被详细解释。你可能对如何摆弄vvvv的用户界面的细节还是好奇不已,可以去 The User Interface in Detail 看看。不过别忘了回到这里。

我们开始吧,说真的。

现在你启动了vvvv,面对一个灰色窗口(如果没有,先看 Introduction ) ,你一定感到困惑,那些等着你去按的按钮、菜单和滚动条都上哪去了?在这儿呢。

主菜单

按鼠标中键(或空格+右键),你就会看到主菜单了。那些似曾相识的东西都在那儿呢。

现在,选New Patch CTRL+P 同时注意新的patch就出现在你的光标下的左上角。你现在便可以点选这个窗口并将它拖动到屏幕上合适的位置。

创建一个结点

现在在patch里任何地方双击左键。会出现一个带闪烁文本光标的空盒子,这表示你现在需要给它取个名字。不过等一下,你还不知道那些陌生的结点们的名字。你一定希望看到一个包含所有你可以创建的结点的完整列表来让你挑选。在这个空盒子里单击右键,你需要的东西就在面前。这份列表是按字母顺序排列的,如果你有滚动键,现在便可滚动该列表,否则应该可以看都滚动条以便你达到同样的目的(你也可以按空格键强制显示滚动条)。在结点名上移动时你将会看到解释它能为你做什么的一个简短说明。

将鼠标再往左移些,在现在的列表之外将出现另一个列表,包含同样的结点,但是是按分类排的。向下移直到看到Value 类,然后点选 + (Value),注意不是 + (Value) Spectral?!

注意在中文版的windows系统里以上从清单中选择结点的方法并不奏效,你还是需要看清楚名称后再手工输入(当然只要打前几个字母就会跳出选择列表了)。

请同时参看视频教程: Video Tutorial.

结点名称和类别

一个结点的名字由几部分组成:
NodeName (Category Version1 Version2 ... VersionN)
其中version是可选的,每个结点都在其名字后面跟随一对圆括号包含了其类别名。这就使得若干个叫 + 的结点同时存在,只要它们分属不同的类别,比如 + (Value), + (String), + (Color), ...).

用光标扫在结点上悬停一下可以帮你确认创建了正确的结点,会有一个提示块显示结点的实际名称。你随时可以在一个结点上面按下左键然后按住拖拉到patch中的任意位置。

现在将光标移到结点的输入引脚上检查它们的值。注意现在它们都是默认值0。右键点击它们可以改变其值,输入一个新值后按回车。改变输入后你可以在输出引脚上观察加法的结果值。

IOBoxes

为了更方便地处理输入/输出值,你可以创建IOBoxes来帮助你同时输入和视觉化数值。在patch中的任一位置双击左键然后按回车调出结点列表,找到IOBox (Value Advanced) .点击。由于你以后会经常用到这种结点,有必要知道创建它的快捷键:在patch里任何地方双击右键,然后从列表中选取需要的类型,哇。

连接结点

要想将IOBoxes连接到结点+ (Value),将光标移到IOBox的输出引脚上单击左键,注意所有接受这种连接的引脚都会变大。如果想建立一个分段式的连接,现在在pathch里的随便哪里点一下,最后将光标移到 + (Value)的输入引脚上单击,对另一个IOBox再来一遍。你总归可以从一个输入引脚开始一个连接到一个输出引脚为止。

请同时参看视频教程: Video Tutorial.

开始一个连接后点击右键可以取消它。通过单击左键选择一个连接后也可以再单击右键或DEL键或BACKSPACE键来删除它。

改变IOBoxes的值的方法和改变引脚的值的方法一样:在IOBox中按住鼠标右键拖动。 如果你想重置IOBox或一个引脚的值至默认值,可以按ALT + 鼠标右键。

现在休息一下,2分钟后回来!

渲染

你可能会问这些怎样能到达我们说hello world的结果呢。直到现在还不行,不过读下去。为了查看输出结果,我们需要一个渲染(Render)结点。在vvvv里有几种不同的渲染结点(这也意味着观察和渲染不同种类的数据的可能性)。我们在此需要创建一个Renderer (GDI)

正如之前提到的,如果你已经知道你需要创建的结点的名称,你只需在patch里双击后输入名称,会出现一个下拉式菜单会给出所有以你已经输入的字符开头的结点。单击你需要的结点名或用上下箭头键选择高亮显示需要的结点名称后回车,便可创建一个需要的结点。

有一些结点是附带有一个窗口的,Renderer (GDI)就是其中之一。你一旦创建这个结点,就会弹出一个窗口,为了把它放进patch里面去,你可以先确保它是当前的活动窗口,然后按ALT+2。现在渲染器就被塞进patch里面去了。你也可以再按ALT+1将它恢复到窗口状态。

要改变渲染器的背景色,找到叫Background Color的输入引脚,右键点击它一次可以显示一个色彩域。在这个色彩域中,你可以按住鼠标右键,然后

    • 上下移动以改变亮度 brightness
    • 左右移动以改变色相 hue,或者
    • 同时按住CTRL上下拖动以改变饱和度 saturation

在patch里随便哪儿按一下接受修改后的色彩。

要在渲染器中显示一些文本就需要创建一个Text (GDI) 结点并将它连到rendere。在它的输入引脚上悬停并找到标着 Text 的引脚,右键点击该引脚并输入hello world。照式照样地打上hello world对顺利完成本教程非常关键,你欠编程历史一个人情,所以别孩子气。

再找到'Font'(字体) 引脚并单击它,弹出一个你的系统上可用的所有字体的下拉菜单。这里你可以选择任意字体,历史不介意的。不过'Lucida Console'是个不赖的选择。

互动

最后我们搞点互动,我们想让字的大小随鼠标的垂直方向的运动而改变,但最小不低于15磅最大不超过50磅,太棒了。

要获得鼠标的位置实在是小菜一碟,因为渲染器总是会输出鼠标的坐标值的。返回的值并不是像素值,而是在左下为 (-1, -1),右上为(1, 1)的区域里的一个值。

将y轴的坐标值直接连到文本的大小是没意义的,因为文本尺寸小于1会使我们看不见字。如果我们能为字体大小设定一个更宽一些的值,便能得到更有意思的结果。因此我们要将从renderer 的Y脚 (就是 -1至1) 这段值映射到15至50。

这种映射关系很容易用一个叫做 Map (Value)的结点来实现。我们可以修改那个不再有用的 + (Value) 结点来避免新增一个结点,双击它,输入新结点的名字。注意+ (Value)的输出引脚和 Map (Value)节点同名,到IOBox的连接并没用失去。

现在将renderer的Y输出引脚连上 Map (Value)结点的第一个引脚,再把 Map (Value)结点的输出连上Text (GDI)Size引脚。

为了让 Map (Value)如我们所愿地建立映射,你还必须将它的输入引脚设成以下:

  • Source Minimum: -1
  • Source Maximum: 1
  • Destination Minimum: 15
  • Destination Maximum: 50
  • Mapping: Clamp

现在在渲染窗口里上下移动鼠标就应该能在(15-50间)交互地改变文本的大小。

进一步尝试

你的大作告成,可以歇一会了。如果你一时半会儿找不到稍息的理由,可以用GDI类中的其它结点来试试看,或者直接翻阅helppatches

别忘了看看The User Interface in Detail, 里面会教你很多额外的小技巧,以求更快速更富于直觉的patch。

在视频教程区,有 另一个 'Hello World' 视频教程, 另一个, 进阶做法

如果觉得爽,那么我们继续学习 教程3 - „属性检查器”?。

anonymous user login

Shoutbox

~2d ago

joreg: vvvvTv S0204 is out: Custom Widgets with Dear ImGui: https://youtube.com/live/nrXfpn5V9h0

~2d ago

joreg: New user registration is currently disabled as we're moving to a new login provider: https://visualprogramming.net/blog/2024/reclaiming-vvvv.org/

~9d ago

joreg: vvvvTv S02E03 is out: Logging: https://youtube.com/live/OpUrJjTXBxM

~11d ago

~13d ago

joreg: Follow TobyK on his Advent of Code: https://www.twitch.tv/tobyklight

~16d ago

joreg: vvvvTv S02E02 is out: Saving & Loading UI State: https://www.youtube.com/live/GJQGVxA1pIQ

~16d ago

joreg: We now have a presence on LinkedIn: https://www.linkedin.com/company/vvvv-group

~24d ago

joreg: vvvvTv S02E01 is out: Buttons & Sliders with Dear ImGui: https://www.youtube.com/live/PuuTilbqd9w

~1mth ago

joreg: vvvvTv S02E00 is out: Sensors & Servos with Arduino: https://visualprogramming.net/blog/2024/vvvvtv-is-back-with-season-2/

~1mth ago