3.3. 和代码的区别 Coming From Code - Origami Studio教程


See how Origami differs from programming. 瞅瞅和编程的区别。

Using functions and adding logic to your prototypes is straightforward in Origami, but a little different to what you might expect if you come from a programming background. If you haven't touched code before, feel free to skip forward to Adding Logic.

在 Origami 原型中使用函数和添加逻辑很简单,但如果以编程的角度出发可能会有跟您预期的有一些不一样。如果以前没有接触过代码,可以跳这篇直接学习如何添加逻辑。

Patches and functions 模块和函数

The basic building blocks in Origami are called patches. They are similar to functions as far as they take data input(s), perform an action on it, and produce a result.

Origami 中的基本构建块称为模块。
它们和函数能类似,获取数据输入,对其执行操作,并产生结果。

function name(input1, input2, input3) { 
  code to be outputted}

The format of a function in code. 代码中函数的格式。

Origami patches work in the same way; taking a single or multiple input(s), performing an action, and producing an output — albeit using a slightly different format.

Origami 模块的工作方式和这个一样,接收单个或多个输入,执行动作,并产生输出 - 尽管格式稍微不同。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第1张图片
A function in Patch format in Origami Studio. 模块的格式。

What makes Origami unique is the suite of pre-made patches that allow you to listen for various types of interaction, create natural animations, manipulate layer properties, and more. Just like functions in code, you can also create your own patches.

Origam 使用的是一套预制的模块,让您可以监听各种类型的交互,创建自然的动画,控制图层属性等等。跟函数在程序中一样,也可以封装自定义模块。

Inputs and outputs 输入和输出

We are using an example of converting Fahrenheit to Celsius. Fahrenheit being our Input value, and Celsius being our returned value, or Output.

我们以将华氏度转换为摄氏度为例,华氏度是输入值,摄氏度时返回值或输出值。

In programming languages such as JavaScript, this calculation would look something like this:

在编程语言,如JavaScript中,看着是这样的:

function fahrenheitToCelsius(fahrenheit) { 
       return (5/9) * (fahrenheit-32);
}
var text = fahrenheitToCelsius(86);

A JavaScript function converting Fahrenheit to Celsius. 将华氏转换为摄氏度的 JavaScript 函数。

Calculations done in patches are hidden from view by default. The patch simply presents the published Input(s) and Output(s).

默认情况下,模块的计算公式将被隐藏。只简单地显示输入和输出值。
板栗:模块库里没有这个模块,不知道怎么弄出来的。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第2张图片
An Origami patch converting Fahrenheit to Celsius. Origami 模块将华氏度转为摄氏度。

Entering this custom-made patch through Patch > Enter Patch Group ⌘↓ reveals the same calculations as in code.

点击 Patch > Enter Patch Group Cmd 进入这个自定义模块内部,显示与代码中相同的计算。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第3张图片
Inner workings of the Fahrenheit to Celsius patch. 模块的内部运算。

One important thing to take note of is the order of calculations. Code usually follows the traditional order of mathematical operations; prioritizing some operators (/
,*) over others (+,-). Origami simply calculates from the order in which the patches are connected.

要注意的一个重要事情是计算的顺序。代码通常遵循传统的数学运算顺序;优先计算乘、除(/*)其次计算加、减(+-` )。Origami 根据模块的连接顺序进行计算。

Multiple outputs 多重输出

Returning multiple outputs is easy in Origami. This means patches can be used beyond what functions are typically used for. As an example, here is our temperature calculating patch going beyond Fahrenheit to Celsius:

多重输出在 Origami 中也很简单。这意味着模块可以超出通常使用的功能。例如,这里是我们的温度计算模块超过华氏摄氏度:

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第4张图片
Temperature conversion patch outputting multiple outputs. 温度转换模块输出多个值。

Values calculated inside the patch simply need to be published as outputs:

补丁内计算的值只需要作为输出发布:

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第5张图片
Inner workings of the Fahrenheit to Multiple patch. 内部工作的多个模块。

Logic and conditionals 逻辑和条件

Logic in code, called conditionals, is a little different from the way Origami handles logic. Code usually runs linearly from top to bottom, and requires calculations to be done before moving to the next line.

逻辑在代码中称为条件,和 Origami 处理逻辑的方式有些不同。代码通常从上到下线性运行的,需要在移动到下一行之前进行计算。

In Origami's visually-focused Patch Editor, information flows from left to right (including logical operations), depending on what is being interacted with and/or triggered. For that reason, you won't find patches analogous to if, else, else if, or while found in code. Instead, information passed through patches (usually from an interaction) will only continue to flow unless the comparison is false.

在 Origami 的可视化模块编辑器中,信息从左到右(包括逻辑操作)依赖于与什么进行交互和/或触发。因此,您不会找到类似于代码中的if, else, else if, 或 while 之类的模块。相反,信息通过模块(一般来自交互)后会继续流动,除非值为false。

Doing math 数学

Math in Origami is largely the same as arithmetic operators in code. Origami has patches for most standard operators.

数学在 Origami 中大部分和代码里的算数运算符一样。Origami 有大多数标准运算符模块。

3+2
3-2
3*2
3/2

Simple arithmetic in code. 代码中的简单算数。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第6张图片
Simple arithmetic in Origami. Origami 中的简单算数。

Comparing items 比较

Origami is able to take values and output a true or false boolean value, similar to comparison operators in code.

Origami 能够取值并输出一个真或假的布尔值,和代码中的比较运算符一样。

3>2
3<2
3==2

Simple comparisons in code. 代码里简单的比较

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第7张图片
Simple comparisons in Origami. Origami 中简单的比较。

Comparing with logic 与逻辑比较

This is where things start to diverge. Origami has built-in patches which allow for common logic to be done quickly and easily. For example:

这是开始有差异的地方。Origami 有内置的模块,可以快速、轻松地完成通用逻辑。例如:

3>=2

Comparison in code. 代码中的比较。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第8张图片
Comparing with logic in Origami. Origami 中与逻辑比较

In code, a logical operator is usually paired with a comparison operator (as shown above). Origami makes it easy to make comparisons with dedicated patches for common logic:

在代码中,逻辑运算符通常与比较运算符配对(如上所示)。折纸可以使用通用逻辑模块进行比较:

&&
!
||

Comparison operators in code. 代码中的比较运算符。

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第9张图片
Comparison operators in Origami. Origami 中的比较运算符。

These patches are useful for checking conditionals—similar to if or else. Take an example of checking to see if a calculation is true:

这些模块可用于检查条件 - 类似于ifelse。举个例子检查计算是否成立:

if (3>2 && (2==3||2<3) && 2!=>3) {
   code to be executed if true
}

Origami takes the information flowing left to right (analogous to 3>2 && (2==3||2<3) && 2!=>3 above) and outputs either true or false, represented by the output on the And patch:

Origami 的信息从左向右流动 (类似于上面的 to 3>2 && (2==3||2<3) && 2!=>3),并输出 true 或 false,由 And 模块输出口表示:

3.3. 和代码的区别 Coming From Code - Origami Studio教程_第10张图片

Chaining multiple calculations can become complex and difficult to manage in code. This task becomes intuitive and flexible when built in Origami.

链接多个计算在代码中可能变得复杂,难以管理。这个任务在内置 Origami 时变得直观灵活。


Related Learn Content 相关教程

4. Adding Logic 添加逻辑
给过渡和流程添加逻辑。

Related Examples 案例

16. Fahrenheit to Celsius
通过温度转换了解 Origami 中的逻辑和模块。

Related Patches 相关模块

Greater Than 大于, Less Than 小于,Equals Exactly 完全等于,Greater Than or Equal 大于或等于,And 和,Not 翻转,Or 至少一个,+ 加,− 减,× 乘,/(÷) 除


NEXT UP
4. Adding Logic 添加逻辑
给过渡和流程添加逻辑。


你可能感兴趣的:(3.3. 和代码的区别 Coming From Code - Origami Studio教程)