Newer
Older
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
# Processing 4 and Arduino with Serial communication
## Processing 4
[download](https://processing.org/download)
!!! attention
Use **MacOS(Intel 64-bit)** even your mac is Apple Silicon.
JAVA error will happen if you use MacOS(Apple Silicon)
## Basic codes
Arduino
```
void setup(){
Serial.begin(9600);
}
void loop(){
Serial.write(100);// 1 byte = 0-255
delay(1000);
Serial.write(200);// 256 goes to 0
delay(1000);
}
```
Processing
```
import processing.serial.*;
Serial myPort;
int x;
void setup(){
size(256, 256);// canvas size
myPort = new Serial(this, "/dev/tty.usbmodem1411", 9600); //port
}
void draw(){
background(255);
ellipse(x,100,50,50); //(center_x,center_y,width,height)
}
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
```
## Example_1
Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
<hr />
=== "Distance 2D"
```
/**
* Distance 2D.
*
* Move the mouse across the image to obscure and reveal the matrix.
* Measures the distance from the mouse to each square and sets the
* size proportionally.
*/
float max_distance;
void setup() {
size(640, 360);
noStroke();
max_distance = dist(0, 0, width, height);
}
void draw() {
background(0);
for(int i = 0; i <= width; i += 20) {
for(int j = 0; j <= height; j += 20) {
float size = dist(mouseX, mouseY, i, j);
size = size/max_distance * 66;
ellipse(i, j, size, size);
}
}
}
```
=== "Distance 2D + Arduino serial"
```
////////////////////////////////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
//////////////////////////////////////////////////////added
float max_distance;
void setup() {
size(640, 360);
noStroke();
max_distance = dist(0, 0, width, height);
////////////////////////////////////////////////////////add
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
//////////////////////////////////////////////////////added
}
void draw() {
background(0);
for(int i = 0; i <= width; i += 20) {
for(int j = 0; j <= height; j += 20) {
float size = dist(x, mouseY, i, j);//////// changed mouseX to X
size = size/max_distance * 66;
ellipse(i, j, size, size);
}
}
}
////////////////////////////////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
//////////////////////////////////////////////////////added
```
## Example_2
Ref. [Storing Input](https://processing.org/examples/storinginput.html)
<hr />
=== "Storing Input"
```
/**
* Storing Input.
*
* Move the mouse across the screen to change the position
* of the circles. The positions of the mouse are recorded
* into an array and played back every frame. Between each
* frame, the newest value are added to the end of each array
* and the oldest value is deleted.
*/
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
size(640, 360);
noStroke();
fill(255, 153);
}
void draw() {
background(51);
// Cycle through the array, using a different entry on each frame.
// Using modulo (%) like this is faster than moving all the values over.
int which = frameCount % num;
mx[which] = mouseX;
my[which] = mouseY;
for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
int index = (which+1 + i) % num;
ellipse(mx[index], my[index], i, i);
}
}
```
=== "Storing Input + Arduino serial"
```
/**
* Storing Input.
*
* Move the mouse across the screen to change the position
* of the circles. The positions of the mouse are recorded
* into an array and played back every frame. Between each
* frame, the newest value are added to the end of each array
* and the oldest value is deleted.
*/
////////////////////////////////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
//////////////////////////////////////////////////////added
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
size(640, 360);
noStroke();
fill(255, 153);
////////////////////////////////////////////////////////add
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
//////////////////////////////////////////////////////added
}
void draw() {
background(51);
// Cycle through the array, using a different entry on each frame.
// Using modulo (%) like this is faster than moving all the values over.
int which = frameCount % num;
mx[which] = x;//mouseX;////// changed mouseX to X
my[which] = mouseY;
for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
int index = (which+1 + i) % num;
ellipse(mx[index], my[index], i, i);
}
}
////////////////////////////////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
//////////////////////////////////////////////////////added
```
## Export as Applications



<video width="400" controls>
<source src="../../images/processing/app.mp4" type="video/mp4">
</video>
## Processing to P5.js Converter
moved to [this tip](./processing_to_p5_js.md)