Nodes官方版

Nodes简介

Nodes可以通过编程帮助用户设计图形，在软件中添加各种节点代码编辑图像，在软件中创建3D图像。该软件可用于分析功能或执行其他绘图工作。软件主要通过JavaScpt设计图形。可以直接在主界面新建一个代码方案，从头开始一个新的空项目，也支持在新窗口从模板开始项目。您可以通过结合软件提供的教程案例来学习如何编辑代码。如果你设计图形，设计的动画2D HTML画布可以打印和导出。Nodes有很多功能。它提供了three.js的基本插件，通过这个插件可以设计3D场景，可以用pex渲染器处理高级材质制作的3D场景和3D图像！

Nodes软件功能

创建实时三维图形

3D艺术家/创意开发者

使用任何WebGL框架并从3D场景导出。

创建交互式网络应用程序

和网络前端开发者。

使用DOM和HTML、CSS和JavaScpt来创建桌面或移动应用程序。

生成程序几何

计算设计师

从头开始创建模型，并将其导出以在其他工具(如Blender)中重用。

创建自定义工具

设计师/客户

为客户或其他精通技术的设计师导出一些参数。

分析、分析、探索和可视化数据

数据科学家/可视化专家

使用你最喜欢的工具链(Ramda，D3…)，连接点并以任何格式(csv，json)保存转换后的数据文件。

构建简单的原型或复杂的多阶段应用程序。

/代理商/品牌

从一系列小规模实验到大规模装置。

Nodes软件特色

用户界面概述

以下是Nodes项目的典型开发环境:

1.图形编辑器:包含图形的可视化表示，其中所有节点都在工作。

2.场景:一个可用于可视化的容器，无论是使用DOM、2D画布、网络GL还是任何网络应用编程接口。

3.设备:显示节点参数和连接并可更新的面板。

4.记录:记录节点数据的空间。

5.菜单栏:所有编辑、查看和格式化功能的访问权限。

它将在项目打开后出现，并且它的依赖项已经安装并捆绑在一起。如果仪表板窗口关闭，可以使用文件>:打开仪表板(Cmd/Ctrl+T)再次打开或再次聚焦。

以及布局和尺寸。

通过访问视图>:选择布局(Cmd/Ctrl+Shift+L)，节点可以从菜单栏访问一些布局选项。

用户界面布局和调整大小

还可以拖动图形编辑器、画布和池的边缘来调整大小和更改屏幕上每个部分的比例。

全屏幕

通过按窗口左上角的图标或按F键进入和退出全屏模式。

打开/保存/克隆/删除图形

用户界面图形

您可以从“图形”下拉菜单下的菜单栏中访问打开(Cmd/Ctrl+Shift+O)、保存(Cmd/Ctrl+S)、克隆(Cmd/Ctrl+Shift+C)和删除图形。

用户界面绘制模式

图形编辑器

导航图编辑器

若要移动绘图的无限画布，请按住Space并点按以拖移。使用鼠标放大和缩小。图形导航也可以使用键盘箭头来完成。

创建节点

通过双击图形编辑器并从模式选择中选择模板名称来创建新节点。默认模板(自定义)将创建一个空节点，准备开始添加自定义代码。

有4种节点状态:

活动(浅灰色):此节点中的代码正在运行，没有任何错误。

无效(深灰色):此节点包含最近未触发的触发器。

警告(边框):此节点上的参数接收的值与其声明的类型不匹配(类型不匹配)。

错误(红色边框):节点有错误并且运行不稳定(缺少依赖项、语法或编译错误)。

选择此节点将在服务器中显示警告和错误详细信息。

创建评论

使用Alt+LMB(鼠标左键)创建图形注释。它们可以用作通用标题块、区域块、注释、分隔符等。他们的颜色，字体大小和大小可以定制。

Nodes教程

建立

让我们从建立一个新项目开始:

Nodes如果您正在浏览器中阅读本教程，请打开应用程序。

转到仪表板窗口。如果是关闭的，可以随时点击菜单文件>:打开仪表盘(Cmd/Ctrl+T)重新打开。

单击新建空项目按钮。

选择一个文件夹来保存和命名项目，例如，my-first-p项目。

单击创建按钮。

一个新的项目窗口应该会打开，您应该会看到一个空画布:

创建图形画布。

让我们将第一个节点添加到图表中。节点是组合起来创建应用程序的代码片段。Graff是这些节点及其连接的可视化表示。

双击图形编辑器(窗口左侧的空白区域)并选择自定义节点模板:

将出现一个表示新创建的节点的块:

双击该节点打开代码编辑器。

复制并粘贴以下代码。

按Shift+回车编译。

按Esc键(菜单中的代码>:关闭编辑器)关闭代码编辑器并返回图形编辑器。

场景中应该出现一个白色矩形。这是我们的画布:我们将使用它来绘制和生成海报。

恭喜你！您已经创建了第一个节点:)

现在可能是通过按Cmd/Ctrl+S(图形>:保存)保存项目的好时机。您应该会看到一个弹出窗口，询问图形名称:输入我的第一个图形或输入所需的名称。

注意:每个Nodes项目由一个或多个图形组成，这些图形共享一些代码、资产和第三方包。

我们的画布节点仍然被命名为自定义。让我们改变它。单击图形编辑器中的节点，在右侧浏览器中更改其名称，然后按“确定”进入。

注意:这似乎是很多代码，但你只需要做一次！现在您已经创建了一个独立的Canvas节点，您可以简单地使用它通过Cmd/Ctrl+C+Cmd/Ctrl+V Cmd/Ctrl+V将其复制并粘贴到图形编辑器中的其他图形和项目中。

添加网格

接下来，我们将通过创建两个嵌套循环来绘制一个矩形网格。一个用于X轴，一个用于Y轴。每一步都按给定的方向逐像素移动。

创建另一个自定义节点，并将其重命名为绘制Gd。

它将以下代码添加到:

按Shift+回车键编译节点。

屏幕上没有变化。

回到图形编辑器(Esc)，单击画布节点的第一个正方形(代表节点的输出端口)，按住鼠标左键，将连接拖到画布的输入端口Draw Gd。

连接后，将出现一个蓝色网格。

让我们通过使用HTML Canvas剪辑蒙版功能来添加边距，使其看起来有点气喘。

您可以通过解释看到哪些行是新的，但是您可以随时在Draw Gd节点中复制和替换整个代码:

这就是效果。好多了！

添加网格项目

现在，我们准备在网格上绘制形状。

在调用ctx.restore()之前，在我们已经有的嵌套循环之后添加另一组嵌套循环。每个子节点将使用与从父canvas节点接收到的相同的属来呈现，例如Canvas和ctx，但是添加了额外的索引和大小(要绘制的形状的大小)。

暂时什么都不会发生。我们仍然需要画出实际的形状。让我们从一个圆开始:

创建新的自定义节点。

将其重命名为圆形。

复制以下代码并重新编译。

新节点连接到Draw Gd节点输出端口后，将显示一个圆圈。