1.2 Patches 模块 - Basics 基础


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/ ),逻辑类(如OrAndNot),过渡(如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 快捷键 可以提升效率。

◀︎ Introduction 简介Layers 图层 ▶︎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 其实我也一直是渴望自己能写一些东西的 但是无奈这种不急不躁的性格和懒惰的坏习惯 已经错过了太多太多次 突然发现了简...
    帅三爷阅读 119评论 0 0
  • 描述:列表解析式是将一个列表(实际上适用于任何 可迭代对象(iterable) )转换成另一个列表的工具。在转换过...
    随风化作雨阅读 318评论 0 0
  • 早上好! 新的一天请微笑!
    翡Smile阅读 177评论 0 0