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.

circuit

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 sends
4
5 their values serially. The Processing and Max/MSP programs at the bottom take
6
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 2
12
13 created 2 Dec 2006
14
15 by David A. Mellis
16
17 modified 30 Aug 2011
18
19 by Tom Igoe and Scott Fitzgerald
20
21 This example code is in the public domain.
22
23 http://www.arduino.cchttps://www.arduino.cc/en/Tutorial/VirtualColorMixer
24
25*/
26
27const int redPin = A0; // sensor to control red color
28
29const int greenPin = A1; // sensor to control green color
30
31const int bluePin = A2; // sensor to control blue color
32
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 example
52
53 // This example code is in the public domain.
54
55 import processing.serial.*;
56
57 float redValue = 0; // red value
58
59 float greenValue = 0; // green value
60
61 float blueValue = 0; // blue value
62
63 Serial myPort;
64
65 void setup() {
66
67 size(200, 200);
68
69 // List all the available serial ports
70
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 my
76
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 substrings
110
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 whole
116
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 example
138
139 ----------begin_max5_patcher----------
140
1411512.3oc4Z00aaaCE8YmeED9ktB35xOjrj1aAsXX4g8xZQeYoXfVh1gqRjdT
142
143TsIsn+2K+PJUovVVJ1VMdCAvxThV7bO7b48dIyWtXxzkxaYkSA+J3u.Sl7kK
144
145lLwcK6MlT2dxzB5so4zRW2lJXeRt7elNy+HM6Vs61uDDzbOYkNmo02sg4euS
146
1474BSede8S2P0o2vEq+aEKU66PPP7b3LPHDauPvyCmAvv4v6+M7L2XXF2WfCaF
148
149lURgVPKbCxzKUbZdySDUEbgABN.ia08R9mccGYGn66qGutNir27qWbg8iY+7
150
151HDRx.Hjf+OPHCQgPdpQHoxhBlwB+QF4cbkthlCRk4REnfeKScs3ZwaugWBbj
152
153.PS+.qDPAkZkgPlY5oPS4By2A5aTLFv9pounjsgpnZVF3x27pqtBrRpJnZaa
154
155C3WxTkfUJYA.BzR.BhIy.ehquw7dSoJCsrlATLckR.nhLPNWvVwL+Vp1LHL.
156
157SjMG.tRaG7OxT5R2c8Hx9B8.wLCxVaGI6qnpj45Ug84kL+6YIM8CqUxJyycF
158
1597bqsBRULGvwfWyRMyovElat7NvqoejaLm4f+fkmyKuVTHy3q3ldhB.WtQY6Z
160
161x0BSOeSpTqA+FW+Yy3SyybH3sFy8p0RVCmaMpTyX6HdDZ2JsPbfSogbBMueH
162
163JLd6RMBdfRMzPjZvimuWIK2XgFA.ZmtfKoh0Sm88qc6OF4bDQ3P6kEtF6xej
164
165.OkjD4H5OllyS+.3FlhY0so4xRlWqyrXErQpt+2rsnXgQNZHZgmMVzEofW7T
166
167S4zORQtgIdDbRHrObRzSMNofUVZVcbKbhQZrSOo934TqRHIN2ncr7BF8TKR1
168
169tHDqL.PejLRRPKMR.pKFAkbtDa+UOvsYsIFH0DYsTCjqZ66T1CmGeDILLpSm
170
171myk0SdkOKh5LUr4GbWwRYdW7fm.BvDmzHnSdH3biGpSbxxDNJoGDAD1ChH7L
172
173I0DaloOTBLvkO7zPs5HJnKNoGAXbol5eytUhfyiSfnjE1uAq+Fp0a+wygGwR
174
175q3ZI8.psJpkpJnyPzwmXBj7Sh.+bNvVZxlcKAm0OYHIxcIjzEKdRChgO5UMf
176
177LkMPNN0MfiS7Ev6TYQct.F5IWcCZ4504rGsiVswGWWSYyma01QcZgmL+f+sf
178
179oU18Hn6o6dXkMkFF14TL9rIAWE+6wvGV.p.TPqz3HK5L+VxYxl4UmBKEjr.B
180
1816zinuKI3C+D2Y7azIM6N7QL6t+jQyZxymK1ToAKqVsxjlGyjz2c1kTK3180h
182
183kJEYkacWpv6lyp2VJTjWK47wHA6fyBOWxH9pUf6jUtZkLpNKW.9EeUBH3ymY
184
185XSQlaqGrkQMGzp20adYSmIOGjIABo1xZyAWJtCX9tg6+HMuhMCPyx76ao+Us
186
187UxmzUE79H8d2ZB1m1ztbnOa1mGeAq0awyK8a9UqBUc6pZolpzurTK232e5gp
188
189aInVw8QIIcpaiNSJfY4Z+92Cs+Mc+mgg2cEsvGlLY6V+1kMuioxnB5VM+fsY
190
1919vSu4WI1PMBGXye6KXvNuzmZTh7U9h5j6vvASdngPdgOFxycNL6ia1axUMmT
192
193JIzebXcQCn3SKMf+4QCMmOZung+6xBCPLfwO8ngcEI52YJ1y7mx3CN9xKUYU
194
195bg7Y1yXjlKW6SrZnguQdsSfOSSDItqv2jwJFjavc1vO7OigyBr2+gDYorRk1
196
197HXZpVFfu2FxXkZtfp4RQqNkX5y2sya3YYL2iavWAOaizH+pw.Ibg8f1I9h3Z
198
1992B79sNeOHvBOtfEalWsvyu0KMf015.AaROvZ7vv5AhnndfHLbTgjcCK1KlHv
200
201gOk5B26OqrXjcJ005.QqCHn8fVTxnxfj93SfQiJlv8YV0VT9fVUwOOhSV3uD
202
203eeqCUClbBPa.j3vWDoMZssNTzRNEnE6gYPXazZaMF921syaLWyAeBXvCESA8
204
205ASi6Zyw8.RQi65J8ZsNx3ho93OhGWENtWpowepae4YhCFeLErOLENtXJrOSc
206
207iadi39rf4hwc8xdhHz3gn3dBI7iDRlFe8huAfIZhq
208
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:

virtualColorMixer output

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.

max virtualColorMixer

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

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.