如何将Processing添加到Android应用程序

Processing是当今最强大的库之一，可用于创建 2D 和 3D 视觉算法艺术品。它是基于 java 的开源软件，并带有多种功能，旨在使使用代码进行绘图和绘画既有趣又简单。

通过在您的 android 应用程序中使用 Processing 的核心库，您可以创建高性能的图形和动画，而无需处理 Android 的 OpenGL 或canvas api。通常，您甚至不必为管理线程、创建渲染循环或维护帧速率等低级任务而烦恼。

在本教程中，我将向您展示如何将处理添加到 Android 应用程序，并向您介绍它的一些最有用的功能。

1.项目设置

Processing 自带集成开发环境，可用于创建 Android 应用程序。但是，如果您已经是 Android 应用程序开发人员，我相信您更愿意使用 Android Studio。因此，继续下载 Processing 的Android 模式的最新版本。

在您下载的 ZIP 文件中，您会找到一个名为processing-core.zip的文件。 使用命令行或操作系统的文件资源管理器将其解压缩并重命名为 processing-core.jar 。

最后，将 JAR 文件添加为 Android Studio 项目的依赖项之一，方法是将其放在app 模块的libs 文件夹中。

您现在拥有开始使用 Processing 所需的一切。

2.创建画布

几乎所有 Processing 的核心功能都可以通过PApplet 该类获得，它本质上是一个可以绘制的画布。通过扩展它，您可以轻松访问它提供的所有方法。

val myCanvas = object: PApplet() {
    // More code here
}

要配置画布，您必须覆盖其settings() 方法。在该方法中，您可以指定两个重要的配置细节：画布的所需尺寸以及是否应该使用 2D 或 3D 渲染引擎。现在，让画布与设备的屏幕一样大，并使用默认的 2D 渲染引擎。为此，您可以调用fullScreen() 快捷方式。

override fun settings() {
    fullScreen()
}

该settings() 方法是一种特殊方法，仅在您不使用 Processing 自己的 IDE 时才需要。我建议您不要再添加任何代码。

如果要初始化任何变量或更改任何与绘图相关的参数（例如画布的背景颜色或每秒应显示的帧数），则应改用该setup() 方法。例如，以下代码向您展示了如何使用该background() 方法将画布的背景颜色更改为红色：

override fun setup() {
    background(Color.parseColor("#FF8A80")) // Material Red A100
}

3.显示画布

因为画布仍然不是任何活动的一部分，所以当你运行你的应用程序时你将看不到它。要显示画布，您必须首先在活动的布局 XML 文件中为其创建一个容器。小LinearLayout 部件或FrameLayout 小部件可以是容器。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/canvas_container">
    
</FrameLayout>

PApplet 实例不能直接添加到您创建的容器中。您必须先将其放入PFragment 实例中，然后调用实例的setView() 方法将 PFragment 其与容器关联。以下代码向您展示了如何执行此操作：

// Place canvas inside fragment
val myFragment = PFragment(myCanvas)

// Display fragment
myFragment.setView(canvas_container, this)

此时，如果您运行应用程序，您应该能够看到覆盖设备整个屏幕的空白画布。

4.绘制简单的形状

现在您可以看到画布，让我们开始绘图。要在画布内绘图，您必须覆盖 之前创建draw() 的子类的方法。PApplet

override fun draw() {
    // More code here
}

它可能看起来并不明显，但 draw() 只要画布正在显示，Processing 默认情况下会尝试每秒调用该方法 60 次。这意味着您可以使用它轻松创建静态图形和动画。

Processing 有多种直观命名的方法，可让您绘制几何图元，例如点、线、椭圆和矩形。例如，rect() 方法绘制一个矩形，该ellipse() 方法绘制一个椭圆。rect() 和 ellipse() 方法都需要 类似的参数：形状的 X 和 Y 坐标、宽度和高度。

下面的代码展示了如何绘制一个矩形和一个椭圆：

rect(100f, 100f, 500f, 300f) // Top-left corner is at (100,100)
ellipse(350f, 650f, 500f, 400f) // Center is at (350,650)

许多方法也被重载，允许您稍微修改基本形状。例如，通过将第五个参数传递给该rect() 方法，即圆角半径，您可以绘制圆角矩形。

rect(100f, 900f, 500f, 300f, 100f) // Corner radius of 100 pixels

如果您现在运行您的应用程序，您应该会看到如下内容：

如果要更改形状的边框颜色，可以调用该stroke() 方法并将所需颜色作为参数传递给它。同样，如果您想用特定颜色填充形状，可以调用该fill() 方法。这两种方法都应该在您实际绘制形状之前调用。

以下代码绘制了一个带有绿色轮廓的蓝色三角形：

stroke(Color.GREEN)
fill(Color.BLUE)
triangle(100f, 1600f, 300f, 1300f, 500f, 1600f)

如果您现在运行您的应用程序，您将能够看到蓝色三角形，但您也会注意到其他所有形状也都变成了蓝色。

如果原因对您来说不是很明显，请记住该draw() 方法被重复调用。这意味着您在绘制周期期间更改的任何配置参数都会对后续绘制周期产生影响。因此，为了确保使用正确的颜色绘制所有形状，最好在绘制之前始终明确指定绘制的每个形状的颜色。

例如，通过在方法的开头添加以下代码，您draw() 可以使其他形状再次变白。

// Set the fill and stroke to white and black
// before drawing the rectangles and ellipses
stroke(Color.BLACK)
fill(Color.WHITE)

此时，画布将如下所示：

5.处理Touch事件

使用处理，处理触摸事件非常容易。您不需要任何事件处理程序。您需要做的就是检查名为的布尔变量 mousePressed 是否为真，以了解用户何时触摸屏幕。一旦您确认用户正在触摸屏幕，您就可以使用mouseX 和 mouseY 变量来确定触摸的 X 和 Y 坐标。

例如，以下代码在用户触摸画布的任何位置绘制一个新矩形。

// Check if user is touching the canvas
if(mousePressed) {
    // Specify fill and stroke colors
    stroke(Color.RED)
    fill(Color.YELLOW)
    
    // Draw rectangle
    rect(mouseX.toFloat(), mouseY.toFloat(), 100f, 100f)
}

如果您现在运行您的应用程序并在屏幕上拖动手指，您应该会看到许多黄色矩形正在绘制。

在我们继续之前，这里有一个快速提示：如果您希望在任何时候清除画布，您可以简单地background() 再次调用该方法。

background(Color.parseColor("#FF8A80")) // Material Red A100

6.使用像素

到目前为止，您只能使用简单的原语。如果您对创建错综复杂的艺术品感兴趣，您可能需要访问画布的各个像素。

通过调用该loadPixels() 方法，可以将画布所有像素的颜色加载到一个名为pixels. 通过修改数组的内容，可以非常高效地修改画布的内容。最后，一旦你完成了对数组的修改，你应该记得调用该 方法来渲染新的像素集。updatePixels()

请注意，该pixels 数组是一维整数数组，其大小等于画布的宽度和高度的乘积。因为画布是二维的，所以将像素的 X 和 Y 坐标转换为数组的有效索引需要使用以下公式：

// index = xCoordinate + yCoordinate * widthOfCanvas

以下示例代码根据画布的 X 和 Y 坐标设置画布的每个像素的颜色，应该可以帮助您更好地理解如何使用pixels 数组：

override fun draw() {
    loadPixels() // Load array

    // loop through all valid coordinates
    for(y in 0..height - 1) {
        for(x in 0..width - 1) {

           // Calculate index
           val index = x + y * width

           // Update pixel at index with a new color
           pixels[index] = Color.rgb(x % 255, y % 255, (x*y) % 255)
        }
    }

    // Render pixels with new colors
    updatePixels()
}

您在上面看到的Color.rgb() 方法将单个红色、绿色和蓝色值转换为一个整数，该整数表示处理框架可以理解的单一颜色值。随意修改传递给它的参数，但请确保它们始终在 0 到 255 的范围内。

如果您选择在不进行任何修改的情况下运行代码，您应该会看到如下所示的模式：

结论

您现在知道如何使用处理语言创建 2D 图形。凭借今天学到的技能，您不仅可以让您的 Android 应用程序更具吸引力，还可以从头开始创建成熟的游戏。你只受你的创造力的限制！