-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
136 lines (106 loc) · 9 KB
/
Copy pathindex.html
File metadata and controls
136 lines (106 loc) · 9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Merriweather:300">
<link rel="icon" type="image/png" href="https://android.processing.org/favicon.png">
<link rel="stylesheet" href="../../css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Processing for Android</title>
</head>
<body>
<nav class="topnav">
<ul class="left">
<li><a href="https://processing.org/">Processing</a></li>
<li><a href="https://p5js.org/">p5.js</a></li>
<li><a href="https://py.processing.org/">Processing.py</a></li>
<li><a href="https://pi.processing.org/">Processing for Pi</a></li>
</ul>
<ul class="foundation">
<li><a href="https://processingfoundation.org/">Processing Foundation</a></li>
</ul>
</nav>
<header>
<h1 class="title">Processing for Android</h1>
</header>
<div class="group">
<nav class="site">
<img class="logo" src="../../imgs/logo_processing_android.svg" alt="Processing for Android logo">
<ul class="leftnav">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../install.html">Install</a></li>
<li><a href="../../reference/index.html">Reference</a></li>
<li><a id="selected" href="../../tutorials/index.html">Tutorials</a></li>
<li><a href="../../books/index.html">Books</a></li>
<li><a href="../../gallery/index.html">Gallery</a></li>
<li><a href="https://discourse.processing.org/c/processing-android" target="_black">Forum</a></li>
<li><a href="https://github.com/processing/processing-android" target="_black">GitHub</a></li>
</ul>
</nav>
<section class="container main-text">
<div class="lang">
<a id="selected" href="index.html">EN</a>
<a href="../../es/tutorials/getting_started/index.html">ES</a>
</div>
<hr style="clear:both;">
<h2>Getting started</h2>
<p>
Welcome to Processing for Android! In this tutorial you will learn how to use the Android Mode in Processing to run your sketches on an Android device or in the emulator.
</p>
<h3>Installing the SDK</h3>
<p>
The first time you open the Android mode after <a href="../../install.html" target="_black">installing it</a> through the CM or manually, you will see this window, asking to either locate a pre-installed Android SDK, or download the Android SDK automatically:
</p>
<p><img class="body-image" src="../../imgs/tutorials/getting_started/sdk_install.png" alt="SDK install"></p>
<p>If you still want to use an SDK already downloaded to your computer, choose the "Locate SDK path manually" option and select the folder containing the SDK. However, this SDK should include Android 8.0 (API level 26) or higher. In order to manually download and install the SDK, go to <a href="https://developer.android.com/studio/index.html#downloads" target="_black">this page</a>, scroll down to the command line tools section and select the one for your Operating System. Doing this could be convenient if you plan to use the same SDK from different development tools (command line, Android Studio, etc.) in addition to Processing. However, keep in mind that the SDK that Processing downloads and installs automatically gets stored inside the mode folder, and does not interfere with any other SDK installed in your computer.
</p>
<p>
If the SDK was located or installed succesfully, you should see your Android device in the "Select device" list after connecting it to the computer:
</p>
<p><img class="body-image" src="../../imgs/tutorials/getting_started/select_device.png" alt="Device selection"></p>
<h3>Writing a simple sketch</h3>
<p>
Let's write a short Processing sketch to run on your Android phone or tablet and make sure everything works as expected. In the following code, we paint the half of the screen receiving a touchpress with the color black. Note that nothing in this sketch is really specific to Android, so you could run it in the Java mode as well. This portability of Processing sketches (as long as they don't rely on any platform-specific features) is useful for testing, as the Java mode includes an integrated debugger that can help to spot errors in the code more easily.
</p>
<pre><code>
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
<span style="color: #006699;">fullScreen</span>();
<span style="color: #006699;">noStroke</span>();
<span style="color: #006699;">fill</span>(0);
}
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
<span style="color: #006699;">background</span>(204);
<span style="color: #669900;">if</span> (<span style="color: #D94A7A;">mousePressed</span>) {
<span style="color: #669900;">if</span> (<span style="color: #D94A7A;">mouseX</span> < <span style="color: #D94A7A;">width</span>/2) {
<span style="color: #006699;">rect</span>(0, 0, <span style="color: #D94A7A;">width</span>/2, <span style="color: #D94A7A;">height</span>); <span style="color: #666666;">// Left</span>
} <span style="color: #669900;">else</span> {
<span style="color: #006699;">rect</span>(<span style="color: #D94A7A;">width</span>/2, 0, <span style="color: #D94A7A;">width</span>/2, <span style="color: #D94A7A;">height</span>); <span style="color: #666666;">// Right</span>
}
}
}
</code></pre>
<h3>Running the sketch on your device</h3>
<p>
Before hitting the run button or selecting "Run on Device" under the Sketch menu, make sure to:
<ul>
<li>Turn on "USB Debugging" on the device - this process varies by device and which version of the OS you have installed. In most of the cases, this setting is located in the <em>Developer Options</em>, under system Setting. On Android 4.2 and higher the Developer Options are hidden by default, but you can enable them by following <a href="https://developer.android.com/studio/run/device.html#developer-device-options" target="_black">these instructions</a>.</li>
<li>If you are running Windows, you need to follow <a href="https://developer.android.com/studio/run/oem-usb.html" target="_black">Google's documentation</a> to install a special USB driver and take care of additional settings. If you downloaded the Android SDK automatically in Processing, then the latest USB drivers will be inside the mode folder, under the temp subfolder.</li>
</ul>
</p>
<p>If everything goes well, then your sketch should do something like this on your phone:</p>
<p><img class="body-image" src="../../imgs/tutorials/getting_started/getting_started.gif" alt="Getting Started Sketch"></p>
<h3>Running the sketch on the emulator</h3>
<p>
If you don't have a device to run your sketch on, you can still use the software emulator. The first time you run a sketch in the emulator, Processing will ask you to download the system image needed by the emulator to work:
<p><img class="body-image" src="../../imgs/tutorials/getting_started/download_emulator.png" alt="Emulator download"></p>
<p>After finishing the download, which can take several minutes depending on your internet connection (the system images are around 1GB in size), Processing will boot up the emulator, and then will launch the sketch in it.</p>
<p>Another important tip is not to close the emulator after testing one sketch, just leave it open so you don't need to wait for the emulator to boot up again the next time!</p>
<p>Depending on what sketch you are testing, the emulator appear in a separate window, looking more or less like this:</p>
<p><img class="body-image" src="../../imgs/tutorials/getting_started/emulator.png" alt="Emulator running"></p>
</section>
</div>
<footer class="footinfo">
<small>© The Processing Foundation. Processing for Android is a <a href="../../team.html">collaborative project</a>.</small>
</footer>
</body>
</html>