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

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).

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

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 进入这个自定义模块内部,显示与代码中相同的计算。

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 中也很简单。这意味着模块可以超出通常使用的功能。例如,这里是我们的温度计算模块超过华氏摄氏度:

Temperature conversion patch outputting multiple outputs. 温度转换模块输出多个值。

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

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

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. 代码中的简单算数。

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. 代码里简单的比较

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. 代码中的比较。

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. 代码中的比较运算符。

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 模块输出口表示:

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 添加逻辑
给过渡和流程添加逻辑。


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

推荐阅读更多精彩内容

  • 书籍:《狼图腾》 背景: 初中时候在一家盗版书店看到过《狼图腾》的封面,当时就只有一个模糊的影像,后来高中在书店里...
    姓钱的一家人阅读 365评论 0 0
  • 任何年纪,你都必须做些让你投入精力的事情。
    kanbuting阅读 149评论 1 0
  • 本文导读:有过痛经的女性都知道那种痛苦,有时候痛到脸色发白冒冷汗,有的甚至会痛晕。痛经怎么办才好?痛经的女性要注意...
    养生绿然本阅读 215评论 0 0