Change the Logo Color

About: Learn electronics and Arduino with Tinkercad Circuits!

The following information is a single lesson in a larger project. Find more great projects here.

Return to Previous Lesson: Writing the Processing Code

Lesson Overview:

Now we'll actually start playing with the logo!

Step 1: Connect Your Arduino

Now that all of your code is written, it's time to take control of the Arduino logo with your project!

  1. Connect your Arduino and open the serial monitor in Arduino IDE. Turn the pot on your breadboard. You should see a number of characters as you twist the knob.
  2. Again you will see two types of data come through. When you use Serial.println(), you send information formatted for the serial monitor. When you use Serial.write(), like in this application you are running now, you’re sending raw information. Programs like Processing can understand these raw bytes.
  3. Continue to the next step.

Step 2: Run the Processing Sketch

Close the serial monitor and run the Processing sketch by pressing the arrow button in the Processing IDE. Take a look at the Processing output window. You should see a list similar to the figure below.

This is a list of all the serial ports on your computer. If you’re using OSX, look for a string that says something like “/dev/ tty.usbmodem411”, it will most likely be the first element in the list. On Linux, it may appear as “/dev/ttyUSB0”, or similar. For Windows, it will appear as a COM port, the same one you would use when programming the board. The number in front of it is the Serial.list()[] array index. Change the number in your Processing sketch to match the correct port on your computer.

  1. Start running the Processing sketch by pressing the arrow icon.
  2. Look at the list of serial ports in the output window. Find the first serial port on the list with the correct name format.
  3. Change the Serial.list()[] array index in your code to match the port you just selected.
  4. Continue to the next step.

Step 3: Restart the Sketch

After you change the serial port index, restart the Processing sketch.

  1. Restart the Processing sketch.

  2. When the program starts running, a new window with the Arduino logo will pop up.

  3. Turn the potentiometer attached to the Arduino.

  4. You should see the color behind the Arduino logo change as you turn the potentiometer! The example above corresponds to a sensor value of 50. You should also see values printing out in the Processing window. Those numbers correspond to the raw bytes you are sending from the Arduino.

  5. Continue to the next step.

Step 4: Customize It!

Once you have twisted and turned to your heart’s desire, try replacing the pot with an analog sensor. Find something you find interesting to control the color. What does the interaction feel like? It’s probably different than using a mouse or keyboard. What do you think is the ideal interface for changing one attribute of the logo?

Be aware that with Processing, and other programming environments, only one application can talk to the Arduino at a time!

  1. Continue to the next step.

Step 5: Review

Congratulations on taking control of the Arduino logo with Processing! In this project, serial communication enabled the Arudino to talk with a computer application.

With Processing and other programming environments, you can control media on your computer in some remarkable and novel ways. If you’re excited about the possibilities of controlling content on your computer, take some time to experiment with Processing. There are several serial communication examples in both the Processing and Arduino IDEs that will help you explore further.

You have completed this project!

Check out other great projects here.



    • Build a Tool Contest

      Build a Tool Contest
    • Organization Contest

      Organization Contest
    • Sweet Treats Challenge

      Sweet Treats Challenge