Jeffrey Cross
Jeffrey Cross

Codebox:使用Google自动填充功能自行处理

自动填充是Google众多有趣的功能之一。例如,如果您开始在搜索框中键入“我如何制作”,Google会提供您认为可能正在搜索的前10个列表。通过分析数以百万计的类似搜索,这种集体的“人群智慧”可以是热闹,悲剧或深刻地指示人类状况。通常,这一切都是同时发生的。

通过此草图,您可以浏览所选短语的Google时代精神。它的工作原理如下。当您输入“如何制作”这样的短语时,草图通过在末尾添加字母表中的每个字母来创建26种变体:“我如何制作”,“我如何制作b”,“我如何制作c,“等等。然后,它会向Google查询每个变体,并将十个结果添加到正在运行的列表中。为了满足看到数百万人的希望,梦想和愿望的固有戏剧性,260个结果被呈现为标志性的“星球大战”卷轴:

自动填充API

自动填充功能由一个相对简单的URL提供支持,如下所示。

http://google.com/complete/search?output=toolbar&q=编码搜索词

与您访问的大多数页面不同,这些页面呈现非常漂亮的HTML,这个页面返回用于计算机读取的XML数据。这种非常强大的技术称为应用程序编程接口(API),它允许程序轻松地通过网络进行通信。如果没有API,我们必须去Google,输入我们的短语26次,然后手动收集所有结果。 API允许我们自动执行此操作。

要获取“如何制作”建议的基础XML数据,您只需访问以下URL:

http://google.com/complete/search?output=toolbar&q=how+do+i+make

如果您在Web浏览器上“查看源代码”,您将看到一些类似于此的XML(尽管我已将此示例格式化为更具可读性):

...

我们将使用Processing's 的XMLElement() 库读取此XML数据以创建滚动文本。

设置草图

首先,让我们让草图运行起来。由于我们使用controlP5库来获取查询短语,因此您需要安装和配置该库。 (如果不这样,Codebox的controlP5部分:创建分形动画片将告诉您如何设置它。)您可以从下面的框中或从zetigeist.pde文件中获取草图的源代码。

将源代码导入Processing后,启动草图并输入短语。几秒钟后,您应该看到结果开始在屏幕上滚动星球大战。 (如果您不输入任何文本,草图将仅显示所有常规查询的最常用结果。)

讨论

那么,这件事怎么样?有几个关键要素:

  1. 它从Autocomplete API中获取一批数据
  2. 它解析XML 的XMLElement() 并保存结果
  3. 它将结果显示为滚动列表

那么,我们来谈谈如何从API中获取数据。处理的 loadStrings() 函数允许您获取任何URL的文本,因此我们所要做的就是使用格式正确的查询显示自动完成API。为此,我们将使用Java URLEncoder的 库(请记住,你可以在Java中使用的所有东西都是处理的公平游戏)来编写 编码() 函数,对输入的文本进行编码 userQuery 框。

getSuggestions() 功能使用我们的 编码() 函数来获取页面并解析XML结果。该功能使用 的XMLElement() 对象使用结果。像大多数XML库一样,这个库使用类似语法的“族树”来允许您访问各种数据元素。如下图所示,建议数据是第一个子元素()根元素的孩子().

由于实际文本是属性中的帮助,我们使用 getStringAttribute() 用于提取我们想要的数据。

[注意:这个语法与官方文档不同,但这篇文章在Processing的社区论坛上,XMLElement问题:函数getInt / getString'不存在'提供了详细信息。]一旦我们抓住了建议的文本,我们将它附加到 suggestionList 数组列表。

最后,值得解释一下我们实际上如何调用它 getSuggestions() 功能。正如你所看到的,它实际上是在 画() 方法,这有点不寻常。最初,我试图通过对Autocomplete进行一系列快速点击来一次性推出所有26个查询变体。我很快就碰到了API 限速,这是您在任何给定时间可以使用它的最大每秒次数。另外,素描开始时有一段很长的停顿,我不喜欢。

所以,相反,我添加了一个名为的计时器 timeBetweenFetches 所以API只是每5秒调用一次。由于文本滚动速度相当慢,因此可以使结果随着时间的推移缓慢增加,从而在不违反Google要求的情况下实现更平滑的整体外观。每次我们点击API时,我们都会推进一个计数器,告诉我们要将哪个字母添加到基本查询中。一旦我们得到结果,我们重置计时器。还有一些逻辑来测试用户是否键入了新的查询词并按下了 findButton.

另一块 画() 方法处理滚动文本。为此,我们使用一个名为的变量 ÿ 保持第一个字符串的y坐标 suggestionList。然后我们循环遍历列表中的每个元素,并在屏幕上写入参考变量的文本 ÿ,每次通过时递减 画()。这给了我们漂亮的滚动效果。 (我们也将文本放在x轴上,这是用一个简单的公式完成的。)

最后,通过使用Processing的内置3D图形库将X轴平面旋转几度,可轻松实现星球大战效果。这是我在Luis Gonzalez的openprocesing.org上的“星球大战”草图上看到的一个巧妙的黑客。我强烈推荐这个网站作为灵感和想法的来源。

更多:在这里查看所有Andrew的Codebox列。

在Maker Shed中:


处理入门使用Processing学习计算机编程的简单方法,这是一种简单的语言,可让您使用代码创建绘图,动画和交互式图形。编程课程通常从理论开始,但本书可以让您直接进入创造性和有趣的项目。它是任何想要学习基本编程的人的理想选择,并且可以为具有一些编程技能的人提供简单的图形介绍。

分享

发表评论