Patches are the building blocks of Origami Studio. Play with your ideas and iterate with incredible speed.
模块构建了 Origami Studio。用Origami Studio 可以以惊人的速度实现你的创意及后续迭代。
Patches allow you to add interaction, animation, and behavior to your prototype. Each patch performs a unique function and can pass and receive information to and from other patches.
模块允许添加交互、动画和事件到原型。每个 Patch 都代表一个功能。通过在连接,在Patch间接受和传递信息实现交互。
The patch library contains a large number of patches, but a core set of 15-20 patches will support most prototypes. They all have single key Keyboard Shortcuts to enable super fast iteration.
模块库中有大量的模块,但是常用的模块只有15~20个。他们都有对应快捷键能快速插入。
Patches range from simple math patches:
简单的数学模块:
+ Patch 用左侧的两个数值相加,得出右侧的数值。2+3=5
... to patches that add interactions to layers:
给图层添加 交互 :
Interactions 交互 Patch 输出触摸信息到 ** Viewer 查看器 **的一个 **Layer 图层 **。但手指按下矩形,从右侧的 ✓ Down 接口输出信息。
... to patches that manage states:
添加管理模块状态 :
Switch 开关 Patch 可以大开或关闭左侧的输入接口,并在右侧输出口输出当前 States 状态。
... to patches that control layer properties:
控制 Layer 图层 属性的模块:
通过点击Layer属性窗口中的任意属性添加图层属性模块。图中的这个模块控制图层的显示和隐藏。
(板栗:还有要补充的🙋🏻)
▲ 板栗绘制的示意图
- 选中图层,点击什么属性就添加对应属性的模块,官方说明中控制的属性是Enable点击属性窗口中的Enable添加;
- 模块上的名称是图层名称,不是模块的名称;
- 添加一个属性模块,图层下也会显示一个对应的属性。
Ports 接口
Ports allow patches to receive information in and pass information back out. The ports on the left side of a patch are inputs, and the ones on the right are outputs. Edit Inputs by clicking the port's value (unless a cable from another patch is connected to the Input already).
借口允许模块接收信息并传递信息给其他模块。左侧的接口是输入口,右侧的是输出口。通过点击输入口的值编辑输入信息,除非已经接收了其他模块的值(这个端口已经被连上线了)。
Each port has a different type of information it can receive — the important types of values used in Origami are:
每个接口都有固定类型的信息可以被接收,以下为不同的信息类型和使用的值:
- Number: An integer or decimal.
- Boolean: A boolean value, which can have two possible values (ex: true/false, yes/no, on/off, 0/1). Boolean ports are often labeled On/Off, and the On value is represented with a checkmark. Similar to programming, a boolean can be converted to a number 0 (off) or 1 (on) when passing values between patches.
- Text: Any text string.
- Image: Any image that you drag or paste.
- Video: Any video that you drag or paste.
- Sound: Any sound that you drag or paste.
- Color: Any RGB or HSL color.
- Index: Any non-negative, integer (ex: 0, 1, 2)
- JSON Data: Any number of values of any type in JSON format. JSON (JavaScript Object Notation) is a common format for storing and exchanging data.
-
Point: A value that represents numbers in 2D, 3D, or 4D. Points can represent any set of X, Y, Z values (ex: Position X, Y, Z; Rotation X, Y, Z).
Some patches can change the number of ports it has or the type of value it supports. Right-click any patch to see the options available.
- Number 数字: 整数或小数。
-
Boolean 布尔值: 布尔值有两个可能值
例: True / False 真/假, Yes / No 是/否, On / Off 开/关, 0 / 1
。布尔值接口通常被标记为 On / Off,On 的值代表一个复选标记,和编程一样,当数值在模块间传递时布尔值可以转换为0(Off)或者1(On)。 - Text 文本: 任何文本字符。
- Image 图片: 拖入或粘贴任意图片。
- Video 视频: 拖入或粘贴任意视频。
- Sound 声音: 拖入或粘贴任意音频文件。
- Color 颜色: 任意RGB或HSL颜色。
- Index 索引: 0和正整数(例:0、1、2)。
- JSON Data JSON 数据: 任意数值任意类型的 JSON 格式. JSON (JavaScript Object Notation) 是一种常用的数据储存和交换格式。(板栗:后面有一篇讲 [Custom Devices 自定义设备] 的,用的文件格式就是JSON🤔)
-
Point 点: 即pt,在2D、3D、4D中的值。 点可以用于任何单位的X, Y, Z轴值
例:坐标位置的 X,Y,Z 值; 旋转角度的 X,Y,Z 值
。有些 Patch 可以改变拥有的接口数或支持的值类型,在 Patch 上点击鼠标右键查看支持选项。
(板栗:老实说最后一句没明白指的啥)
Cables 连线
Cables pass information (values) from patch to patch via their ports. Think of values like water, and cables as the pipes that move it from place to place. The values flow in one direction: left-to-right from an output to an input.
信息(值)通过连线在模块和模块的接口流转。想象值像水,连接的线像水管,把水从一个地方引流到另一个地方。值的流转方向:从左向右,从一个模块的右侧输出口到另一个模块的左侧的输入口。
To create a cable, drag from an output port (on the right of a patch) to an input port (on the left of a patch). To disconnect a cable, drag the right end out of the Input port.
从模块右侧的输出口拖动鼠标到另一个模块的输入口创建连线,从被连接的 模块左侧的输入口把连线拖到空白处断开连线。
An output port may connect to multiple cables, but an input port can only accept one cable at a time. Use patches like math (+, -, x, /), logic (Or, And, Not), Transition, or Option Picker to combine or select from multiple cables. Quickly connect an output to multiple inputs by selecting the output, and shift-clicking the inputs you want to connect.
输出口可以创建多个连线,但输入口在同一时间只能接收一个连线。像计算类(如+
、-
、x
、/
),逻辑类(如Or
、And
、Not
),过渡(如Transition
)或选项选择器(如Option Picker
)。
点击输出口,按住 Shift 再点击要连接的输入口能快速创建连线。
Connecting them together 连接
In the example below, three different patches pass values to each other with cables that are connected to their ports. Together, the patches describe a touch down interaction that switches a layer on and off.
在下面的示例图中,三个不同的 Patch 通过连线连接接口将值传递给对方。
图中是一个 **通过按下 (Down) 的交互 (Interaction) 动作,打开/关闭 (Switch) 图层 (Layer) 的使用 **的模块之间的连接方式。
Summary 总结
- Patches let you quickly add interaction, animation, and behavior to your prototype.
- A patch can have inputs and outputs that let it communicate with other patches.
- There is a large library to support building any idea. For most prototypes, you only need to know about 15-20.
- Learn Keyboard Shortcuts to speed up your workflow.
- 模块让你快速添加交互、动画和事件到原型。
- 模块有输入口和输出口,通过输入和输出相互传递信息。
- 有一个丰富的模块库可以实现你的想法,但对于大多数原型之需要了解15~20个Patch。
- 学习Keyboard Shortcuts 快捷键 可以提升效率。