主要内容
在可汗学院以外使用 ProcessingJS
我们在这里有一个非常棒的编辑环境 —— 它实时更新,它为您提供有用的错误,数字擦洗器和颜色选择器。我们环境设计考虑到了新程序员 —— 每天都有成千上万的新开发者,我们希望让他们更容易地学习JavaScript。
一旦熟悉了JavaScript并开始开发更长,更复杂的程序,您可能会发现自己想要在编码环境中使用不同的功能。也许您不想要实时更新,或者您希望将代码放在多个文件中,或者您希望与版本控制系统集成。或许您只是希望能够将ProcessingJS程序集成到您的网站中。
在这种情况下,您可能希望开始在可汗学院之外编写ProcessingJS程序。您不能只是将程序代码复制并粘贴到桌面编辑器中的文件中,并查看工作程序。为什么不能?
ProcessingJS 是一个基于Web技术构建的库。当你在可汗学院上用它编程时,我们实际上在幕后创建一个网页(HTML 文件),在其中贴上一个
<canvas>
标签,加载 ProcessingJS JavaScript库,然后运行你的程序代码。这意味着如果你想在可汗学院之外的程序上工作,需要创建一个HTML文件来完成我们的工作。
您可以从以下开始的示例开始学习:
该示例使用我们的 网页环境 构建。但是,您可以将其粘贴到任何其他代码编辑环境中的HTML文件中。
如果您将程序代码粘贴到该模板中,可能会发现一切都很完美,还可以高兴地跳起来!。
如果事情没有按照预期的运作,那可能是因为模板 不是 使用我们在 可汗学院 使用的完全相同版本的ProcessingJS。我们的版本专门设计并用于KA内部,因此我们建议您在KA之外进行开发时使用 官方ProcessingJS库。
ProcessingJS官方版本与可汗学院的ProcessingJS版本之间存在一些显着差异:
- 可汗学院(KA)使用
mouseIsPressed
而不是mousePressed
作为全局布尔值。类似地,KA使用keyIsPressed
而不是keyPressed
。这意味着在模板中粘贴代码时需要更改mouseIsPressed
和keyIsPressed
。 - KA默认使用度数来表示所有角度参数,而不是弧度。如果你在程序中使用角度度数,可以使用
radians()
转换它们。 - KA使用
getImage()
和getSound()
用于图像和声音,官方版本中不存在。您可以将PImage
用于图像,并且您需要创建一个<audio>
标签来播放声音。
官方版本还具有更广泛的功能,如图像处理和更多3D功能。您可以在 文档 中探索所有内容。
当然,我们仍然希望看到您在可汗学院之外创建程序,所以我希望您在完成后分享它们,或将它们转换回 ProcessingJS 版本或者在我们的网页环境中共享它们。
接下来,我将更多地讨论桌面编辑器和调试工具。