Patches are the building blocks of Origami Studio. Play with your ideas and iterate with incredible speed.
模塊構(gòu)建了 Origami Studio祠丝。用Origami Studio 可以以驚人的速度實(shí)現(xiàn)你的創(chuàng)意及后續(xù)迭代竿报。
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.
模塊允許添加交互、動(dòng)畫和事件到原型愕够。每個(gè) Patch 都代表一個(gè)功能。通過在連接,在Patch間接受和傳遞信息實(shí)現(xiàn)交互枚赡。
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個(gè)谓谦。他們都有對(duì)應(yīng)快捷鍵能快速插入标锄。
Patches range from simple math patches:
簡(jiǎn)單的數(shù)學(xué)模塊:
+ Patch 用左側(cè)的兩個(gè)數(shù)值相加,得出右側(cè)的數(shù)值茁计。2+3=5
... to patches that add interactions to layers:
給圖層添加 交互 :
Interactions 交互 Patch 輸出觸摸信息到 ** Viewer 查看器 **的一個(gè) **Layer 圖層 **料皇。但手指按下矩形,從右側(cè)的 ? Down 接口輸出信息星压。
... to patches that manage states:
添加管理模塊狀態(tài) :
Switch 開關(guān) Patch 可以大開或關(guān)閉左側(cè)的輸入接口践剂,并在右側(cè)輸出口輸出當(dāng)前 States 狀態(tài)。
... to patches that control layer properties:
控制 Layer 圖層 屬性的模塊:
通過點(diǎn)擊Layer屬性窗口中的任意屬性添加圖層屬性模塊娜膘。圖中的這個(gè)模塊控制圖層的顯示和隱藏逊脯。
(板栗:還有要補(bǔ)充的????)
▲ 板栗繪制的示意圖
- 選中圖層,點(diǎn)擊什么屬性就添加對(duì)應(yīng)屬性的模塊竣贪,官方說明中控制的屬性是Enable點(diǎn)擊屬性窗口中的Enable添加军洼;
- 模塊上的名稱是圖層名稱,不是模塊的名稱演怎;
- 添加一個(gè)屬性模塊匕争,圖層下也會(huì)顯示一個(gè)對(duì)應(yīng)的屬性。
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).
借口允許模塊接收信息并傳遞信息給其他模塊爷耀。左側(cè)的接口是輸入口甘桑,右側(cè)的是輸出口。通過點(diǎn)擊輸入口的值編輯輸入信息歹叮,除非已經(jīng)接收了其他模塊的值(這個(gè)端口已經(jīng)被連上線了)跑杭。
Each port has a different type of information it can receive — the important types of values used in Origami are:
每個(gè)接口都有固定類型的信息可以被接收,以下為不同的信息類型和使用的值:
- 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 數(shù)字: 整數(shù)或小數(shù)咆耿。
-
Boolean 布爾值: 布爾值有兩個(gè)可能值
例: True / False 真/假, Yes / No 是/否, On / Off 開/關(guān), 0 / 1
德谅。布爾值接口通常被標(biāo)記為 On / Off,On 的值代表一個(gè)復(fù)選標(biāo)記萨螺,和編程一樣窄做,當(dāng)數(shù)值在模塊間傳遞時(shí)布爾值可以轉(zhuǎn)換為0(Off)或者1(On)宅荤。 - Text 文本: 任何文本字符。
- Image 圖片: 拖入或粘貼任意圖片浸策。
- Video 視頻: 拖入或粘貼任意視頻冯键。
- Sound 聲音: 拖入或粘貼任意音頻文件。
- Color 顏色: 任意RGB或HSL顏色庸汗。
- Index 索引: 0和正整數(shù)(例:0惫确、1、2)蚯舱。
- JSON Data JSON 數(shù)據(jù): 任意數(shù)值任意類型的 JSON 格式. JSON (JavaScript Object Notation) 是一種常用的數(shù)據(jù)儲(chǔ)存和交換格式改化。(板栗:后面有一篇講 [Custom Devices 自定義設(shè)備] 的,用的文件格式就是JSON??)
-
Point 點(diǎn): 即pt枉昏,在2D陈肛、3D、4D中的值兄裂。 點(diǎn)可以用于任何單位的X, Y, Z軸值
例:坐標(biāo)位置的 X句旱,Y,Z 值; 旋轉(zhuǎn)角度的 X晰奖,Y谈撒,Z 值
。有些 Patch 可以改變擁有的接口數(shù)或支持的值類型匾南,在 Patch 上點(diǎn)擊鼠標(biāo)右鍵查看支持選項(xiàng)啃匿。
(板栗:老實(shí)說最后一句沒明白指的啥)
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.
信息(值)通過連線在模塊和模塊的接口流轉(zhuǎn)。想象值像水蛆楞,連接的線像水管溯乒,把水從一個(gè)地方引流到另一個(gè)地方。值的流轉(zhuǎn)方向:從左向右豹爹,從一個(gè)模塊的右側(cè)輸出口到另一個(gè)模塊的左側(cè)的輸入口裆悄。
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.
從模塊右側(cè)的輸出口拖動(dòng)鼠標(biāo)到另一個(gè)模塊的輸入口創(chuàng)建連線,從被連接的 模塊左側(cè)的輸入口把連線拖到空白處斷開連線帅戒。
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.
輸出口可以創(chuàng)建多個(gè)連線灯帮,但輸入口在同一時(shí)間只能接收一個(gè)連線。像計(jì)算類(如+
逻住、-
、x
迎献、/
)瞎访,邏輯類(如Or
、And
吁恍、Not
)扒秸,過渡(如Transition
)或選項(xiàng)選擇器(如Option Picker
)播演。
點(diǎn)擊輸出口,按住 Shift 再點(diǎn)擊要連接的輸入口能快速創(chuàng)建連線伴奥。
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.
在下面的示例圖中写烤,三個(gè)不同的 Patch 通過連線連接接口將值傳遞給對(duì)方。
圖中是一個(gè) **通過按下 (Down) 的交互 (Interaction) 動(dòng)作拾徙,打開/關(guān)閉 (Switch) 圖層 (Layer) 的使用 **的模塊之間的連接方式洲炊。
Summary 總結(jié)
- 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.
- 模塊讓你快速添加交互、動(dòng)畫和事件到原型尼啡。
- 模塊有輸入口和輸出口暂衡,通過輸入和輸出相互傳遞信息。
- 有一個(gè)豐富的模塊庫可以實(shí)現(xiàn)你的想法崖瞭,但對(duì)于大多數(shù)原型之需要了解15~20個(gè)Patch狂巢。
- 學(xué)習(xí)Keyboard Shortcuts 快捷鍵 可以提升效率。