Dosen原創(chuàng)
這是我學(xué)習(xí)quartz composer,Origami,看官方文檔翻譯下來的,每天一篇,有不準(zhǔn)確的地方希望能指出,一起交流進(jìn)步。轉(zhuǎn)載請與我聯(lián)系,擅自轉(zhuǎn)載視作侵權(quán)。
Introduction ? ? ?介紹
Origami is built on Quartz Composer, a graphics visualization application by Apple. This section will give you an introduction to its interface and the building blocks: patches and cables.
Origami是基于Quartz Composer,一個蘋果的圖形可視化應(yīng)用程序。這章節(jié)將要向你介紹它的界面和組織結(jié)構(gòu):模塊與連線。
1. Interface ? ? 界面
There are four main windows:
這里有四個主要的窗口:
Editor ? ? 編輯器
Also known as the graph. The editor is where you define all the layers, interactions, and logic for your prototype, using blocks called "patches".
就像圖中所能知道的,這個編輯器是你為你的原型定義所有層,交互,和邏輯的地方,使用的“模塊”。
Viewer ? ? 查看器
The viewer is where you see and interact with your prototype. You can preview and interact with your prototypes on your device over USB with Origami Live.
這個查看器是你能看到原型并與原型互動的地方。你也可以用USB連接手機(jī),使用Origami Live預(yù)覽并與你的原型進(jìn)行交互。
Patch Inspector ?“ ? i ” ? ? ?模塊檢查器
The inspector lets you change parameters for a selected patch. You can also use the docked Parameters view (accessible from the toolbar). The inspector contains three modes you can toggle with the dropdown at the top: Input Parameters “?? 1 ”?, Settings “?? 2 ”?, and Published Inputs & Outputs “?? 3?”?.
檢查器讓你為選擇的模塊更改參數(shù),你也可以使用停靠的參數(shù)視圖(可以通過工具欄打開)。檢查器包涵三個通過拉下切換的模式:輸入?yún)?shù) “ ? 1 ” ,設(shè)置 “ ? 2 ” ,發(fā)布的輸入和輸出 “ ? 3 ” .
不是很理解發(fā)布的輸入和輸出具體是干嘛的,望懂的朋友告知
Patch Library ?“?? ? ” ? ? ?模塊庫
The Library is where you can find and add patches. You can add patches even faster using the Origami keyboard shortcuts.
庫是找模塊和添加模塊的地方。你可以使用快捷鍵,更快速的添加模塊。
A good way to organize your windows is Window > Resize to Thirds?“?? ? ? 0 ”??to dock your Editor to the left and Viewer to the right, and only bring up the Inspector/Library when you need them.
一個組織視圖的好方法是Window > Resize to Thirds “ ? ? ? 0 ”來固定你的編輯器在左邊,查看器在右邊,在你需要的時候再打開Inspector/Library。
2. Patches ? ? ?模塊
Patches are the building blocks of Origami. They are used to capture interactions, compute logic, and draw to the viewer. Patches can talk to other patches using cables attached to their ports. You can add patches from the Patch Library “?? ??”?.
模塊是Origami的組織結(jié)構(gòu)。他們常用于捕捉交互,邏輯運算,往查看器上繪制。在模塊的接口上連線可以傳遞數(shù)據(jù)。你可以從模塊庫“ ? ? ”中添加模塊。
Patch types:
模塊類型:
Black (Processor) patches take inputs and process them to create various outputs.
黑色(運算)模塊可以接收輸入并處理它們創(chuàng)建多個輸出。
Purple (Provider) patches are similar to processors, but typically provide interactions (e.g. Interaction 2, Swipe, Keyboard...) from the viewer.
紫色(素材)模塊和processors相似,不同的是,它提供查看器中典型的交互組件(例如:Interaction 2,Swipe, Keyboard...)
Blue (Consumer) patches are what's displayed in the viewer.
藍(lán)色(視覺)模塊是決定查看器上顯示什么。
Patches must be connected to a Consumer (like a Layer) to work. This helps optimize the performance of your prototype.
模塊必須連接一個Consumer(像是一個層)去工作,這會幫助你的原型性能更優(yōu)化。
3. Ports ? ? ?接口
Ports allow patches to take information in and send new information out. The ports on the left side of a patch are inputs, and the ones on the right are outputs. You can edit Inputs with the Patch Inspector? “?? i ” or double-clicking the port.
接口允許模塊將數(shù)據(jù)輸入,并輸出新的數(shù)據(jù)。在模塊的左側(cè)是輸入接口,在右側(cè)的只有一個的是輸出接口。你可以通過模塊檢查器或者雙擊接口來編輯輸入接口。
Each port has a different type of information it can take — the important types of values used in Origami are:
每個接口都有不同的數(shù)據(jù)類型——Origami中常用的重要的數(shù)據(jù)類型是:
Number: Any number, with decimals
數(shù)字:decimal類型的任何數(shù)字。
Boolean: Also known as On/Off, and represented with a checkmark. Can be turned into a Number with 0 being Off and 1 being On.
布爾:眾所周知的開/關(guān),可以轉(zhuǎn)換為數(shù)字0(Off)/1(On)。
String: Also known as text.
字符串:文本。
Image: Any image that you drag, paste, or create.
圖片:拖動,粘貼或創(chuàng)建的任何圖片。
Color: Any color.
顏色:任何顏色。
Index: Any non-negative, round numbers. i.e. 0, 1, 2,...
索引:任意非負(fù)數(shù),循環(huán)數(shù)字,例如:0, 1, 2,...
Structure: Stores any number of values within, labeled by indexes or keys (see Structure Creator). Similar to an Object/Dictionary in programming.
結(jié)構(gòu)體:包含任意個值,用index或key做標(biāo)簽,和編程中的對象/字典相似。
Interaction: Ties patches together for interactions. Mostly used in Interaction 2 and Layer patches, and displayed unlabeled in the top right/left respectively.
交互:為交互把模塊連接在一起。大多數(shù)用在Interaction 2和Layer模塊,顯示分布在在頂部左側(cè)/右側(cè)沒有標(biāo)記的。
Interaction這兩句不知道怎么翻譯,原文看得我云里霧里。
4. Cables ? ? ?連線
Cables pass information (values) from patch to patch via their ports. Think of values like water and electricity, and cables as the pipes and cables that move them from place to place. The values flow in one direction: left-to-right from an Output to an Input.
通過接口的連線在模塊和模塊之間傳遞數(shù)據(jù)(值)。把值想象成水和電,然后連線就是管道,它們通過管道從一個地方移動到另一個地方。值的流動只有一個方向:從左至右,從輸出到輸入。
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 rightmost end out of the Input port.
創(chuàng)建一個連線,從一個輸出接口(在模塊的右側(cè))拖動到一個輸入接口(在模塊的左側(cè))。斷開一個連線,拖動最右邊的尾端離開輸入接口。
An Output may have multiple cables connected, but an Input can only accept one cable at a time. Use patches like Math, Logic, Transition, or Multiplexer to combine or select from multiple cables. To quickly connect an output to multiple inputs, drag from the output and hold “???” ?while clicking on the inputs.
一個輸出接口可以有多個連線連接,但是一個輸入接口在同一時間內(nèi)只能有一個連線。像數(shù)學(xué),邏輯,轉(zhuǎn)換,或者復(fù)用器一個使用模塊去組合或選擇多種連線。快速連線多個輸出到一個輸入,按住“option”,從輸出接口拖動,然后點擊輸入接口
Note that an Input port can either have a cable connected to it, or a value that you manually enter in.
注釋:一個輸入接口可以有一個連線連接它,也可以手動的輸入一個值。
5. Connecting them together ? ? ?把它們連接在一起
An example of a typical setup of patches is shown below, where 3 different patches pass values to each other with cables through their ports in order to create an Interaction that Switches a Layer on and off.
下面展示的是模塊的一個典型例子,這三個不同的模塊通過給接口連線在互相之間傳遞數(shù)值,創(chuàng)建了一個可以通過交互來開關(guān)的層。