Virtual Color Mixer
This example demonstrates how to send multiple values from the Arduino board to the computer.
This example demonstrates how to send multiple values from the Arduino board to the computer. The readings from three potentiometers are used to set the red, green, and blue components of the background color of a Processing sketch or Max/MSP patch.
Hardware Required
Arduino Board
3 Analog Sensors (potentiometer, photocell, FSR, etc.)
3 10K ohm resistors
hook-up wires
breadboard
Software Required
Circuit
Connect analog sensors to analog input pins 0, 1, and 2.
This circuit uses three voltage divider sub-circuits to generate analog voltages from the force-sensing resistors. a voltage divider has two resistors in series, dividing the voltage proportionally to their values.
Schematic
Code
The sensor values are sent from the Arduino to the computer as ASCII-encoded decimal numbers. This means that each number is sent using the ASCII characters "0" through "9". For the value "234" for example, three bytes are sent: ASCII "2" (binary value 50), ASCII "3" (binary value 51), and ASCII "4" (binary value 52).
1/*2
3 This example reads three analog sensors (potentiometers are easiest) and sends4
5 their values serially. The Processing and Max/MSP programs at the bottom take6
7 those three values and use them to change the background color of the screen.8
9 The circuit:10
11 - potentiometers attached to analog inputs 0, 1, and 212
13 created 2 Dec 200614
15 by David A. Mellis16
17 modified 30 Aug 201118
19 by Tom Igoe and Scott Fitzgerald20
21 This example code is in the public domain.22
23 https://www.arduino.cc/en/Tutorial/VirtualColorMixer24
25*/26
27const int redPin = A0; // sensor to control red color28
29const int greenPin = A1; // sensor to control green color30
31const int bluePin = A2; // sensor to control blue color32
33void setup() {34
35 Serial.begin(9600);36}37
38void loop() {39
40 Serial.print(analogRead(redPin));41
42 Serial.print(",");43
44 Serial.print(analogRead(greenPin));45
46 Serial.print(",");47
48 Serial.println(analogRead(bluePin));49}50
51/* Processing code for this example52
53 // This example code is in the public domain.54
55 import processing.serial.*;56
57 float redValue = 0; // red value58
59 float greenValue = 0; // green value60
61 float blueValue = 0; // blue value62
63 Serial myPort;64
65 void setup() {66
67 size(200, 200);68
69 // List all the available serial ports70
71 // if using Processing 2.1 or later, use Serial.printArray()72
73 println(Serial.list());74
75 // I know that the first port in the serial list on my Mac is always my76
77 // Arduino, so I open Serial.list()[0].78
79 // Open whatever port is the one you're using.80
81 myPort = new Serial(this, Serial.list()[0], 9600);82
83 // don't generate a serialEvent() unless you get a newline character:84
85 myPort.bufferUntil('\n');86
87 }88
89 void draw() {90
91 // set the background color with the color values:92
93 background(redValue, greenValue, blueValue);94
95 }96
97 void serialEvent(Serial myPort) {98
99 // get the ASCII string:100
101 String inString = myPort.readStringUntil('\n');102
103 if (inString != null) {104
105 // trim off any whitespace:106
107 inString = trim(inString);108
109 // split the string on the commas and convert the resulting substrings110
111 // into an integer array:112
113 float[] colors = float(split(inString, ","));114
115 // if the array has at least three elements, you know you got the whole116
117 // thing. Put the numbers in the color variables:118
119 if (colors.length >= 3) {120
121 // map them to the range 0-255:122
123 redValue = map(colors[0], 0, 1023, 0, 255);124
125 greenValue = map(colors[1], 0, 1023, 0, 255);126
127 blueValue = map(colors[2], 0, 1023, 0, 255);128
129 }130
131 }132
133 }134
135*/136
137/* Max/MSP patch for this example138
139 ----------begin_max5_patcher----------140
1411512.3oc4Z00aaaCE8YmeED9ktB35xOjrj1aAsXX4g8xZQeYoXfVh1gqRjdT142
143TsIsn+2K+PJUovVVJ1VMdCAvxThV7bO7b48dIyWtXxzkxaYkSA+J3u.Sl7kK144
145lLwcK6MlT2dxzB5so4zRW2lJXeRt7elNy+HM6Vs61uDDzbOYkNmo02sg4euS146
1474BSede8S2P0o2vEq+aEKU66PPP7b3LPHDauPvyCmAvv4v6+M7L2XXF2WfCaF148
149lURgVPKbCxzKUbZdySDUEbgABN.ia08R9mccGYGn66qGutNir27qWbg8iY+7150
151HDRx.Hjf+OPHCQgPdpQHoxhBlwB+QF4cbkthlCRk4REnfeKScs3ZwaugWBbj152
153.PS+.qDPAkZkgPlY5oPS4By2A5aTLFv9pounjsgpnZVF3x27pqtBrRpJnZaa154
155C3WxTkfUJYA.BzR.BhIy.ehquw7dSoJCsrlATLckR.nhLPNWvVwL+Vp1LHL.156
157SjMG.tRaG7OxT5R2c8Hx9B8.wLCxVaGI6qnpj45Ug84kL+6YIM8CqUxJyycF158
1597bqsBRULGvwfWyRMyovElat7NvqoejaLm4f+fkmyKuVTHy3q3ldhB.WtQY6Z160
161x0BSOeSpTqA+FW+Yy3SyybH3sFy8p0RVCmaMpTyX6HdDZ2JsPbfSogbBMueH162
163JLd6RMBdfRMzPjZvimuWIK2XgFA.ZmtfKoh0Sm88qc6OF4bDQ3P6kEtF6xej164
165.OkjD4H5OllyS+.3FlhY0so4xRlWqyrXErQpt+2rsnXgQNZHZgmMVzEofW7T166
167S4zORQtgIdDbRHrObRzSMNofUVZVcbKbhQZrSOo934TqRHIN2ncr7BF8TKR1168
169tHDqL.PejLRRPKMR.pKFAkbtDa+UOvsYsIFH0DYsTCjqZ66T1CmGeDILLpSm170
171myk0SdkOKh5LUr4GbWwRYdW7fm.BvDmzHnSdH3biGpSbxxDNJoGDAD1ChH7L172
173I0DaloOTBLvkO7zPs5HJnKNoGAXbol5eytUhfyiSfnjE1uAq+Fp0a+wygGwR174
175q3ZI8.psJpkpJnyPzwmXBj7Sh.+bNvVZxlcKAm0OYHIxcIjzEKdRChgO5UMf176
177LkMPNN0MfiS7Ev6TYQct.F5IWcCZ4504rGsiVswGWWSYyma01QcZgmL+f+sf178
179oU18Hn6o6dXkMkFF14TL9rIAWE+6wvGV.p.TPqz3HK5L+VxYxl4UmBKEjr.B180
1816zinuKI3C+D2Y7azIM6N7QL6t+jQyZxymK1ToAKqVsxjlGyjz2c1kTK3180h182
183kJEYkacWpv6lyp2VJTjWK47wHA6fyBOWxH9pUf6jUtZkLpNKW.9EeUBH3ymY184
185XSQlaqGrkQMGzp20adYSmIOGjIABo1xZyAWJtCX9tg6+HMuhMCPyx76ao+Us186
187UxmzUE79H8d2ZB1m1ztbnOa1mGeAq0awyK8a9UqBUc6pZolpzurTK232e5gp188
189aInVw8QIIcpaiNSJfY4Z+92Cs+Mc+mgg2cEsvGlLY6V+1kMuioxnB5VM+fsY190
1919vSu4WI1PMBGXye6KXvNuzmZTh7U9h5j6vvASdngPdgOFxycNL6ia1axUMmT192
193JIzebXcQCn3SKMf+4QCMmOZung+6xBCPLfwO8ngcEI52YJ1y7mx3CN9xKUYU194
195bg7Y1yXjlKW6SrZnguQdsSfOSSDItqv2jwJFjavc1vO7OigyBr2+gDYorRk1196
197HXZpVFfu2FxXkZtfp4RQqNkX5y2sya3YYL2iavWAOaizH+pw.Ibg8f1I9h3Z198
1992B79sNeOHvBOtfEalWsvyu0KMf015.AaROvZ7vv5AhnndfHLbTgjcCK1KlHv200
201gOk5B26OqrXjcJ005.QqCHn8fVTxnxfj93SfQiJlv8YV0VT9fVUwOOhSV3uD202
203eeqCUClbBPa.j3vWDoMZssNTzRNEnE6gYPXazZaMF921syaLWyAeBXvCESA8204
205ASi6Zyw8.RQi65J8ZsNx3ho93OhGWENtWpowepae4YhCFeLErOLENtXJrOSc206
207iadi39rf4hwc8xdhHz3gn3dBI7iDRlFe8huAfIZhq208
209-----------end_max5_patcher-----------210
211*/
Processing Code
Copy the Processing sketch from the code sample above. As you change the value of the analog sensors, the background color will change:
Max Code
The max patch looks like this. Copy the text of it from the code sample above and paste into a new Max window.
Learn more
You can find more basic tutorials in the built-in examples section.
You can also explore the language reference, a detailed collection of the Arduino programming language.
Last revision 2015/08/11 by SM
Suggest changes
The content on docs.arduino.cc is facilitated through a public GitHub repository. If you see anything wrong, you can edit this page here.
License
The Arduino documentation is licensed under the Creative Commons Attribution-Share Alike 4.0 license.