Writing the Processing Code

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 Arduino Code

Lesson Overview:

Now we'll write the code for our computer!

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Introduction

In this section you will use the Processing programming environment to write code that will interact with a picture file that we'll download from arduino.cc/logo

The Processing language is similar to Arduino, but there are enough differences that you might want to look at some of their tutorials and the “Getting Started” guide to familiarize yourself with the language. Let's get started by opening up a new Processing sketch!

  1. Open up a new Processing sketch on your computer.

  2. Continue to the next step.

Step 2: Import a Serial Object

Processing, unlike the Arduino, doesn’t know about serial ports without including an external library. Start by importing the serial library.

You also need to create an instance of the serial object. You’ll use this uniquely named object whenever you want to use the serial connection.

  1. Copy the code below into Processing.

    import processing.serial.*; 
    Serial myPort;

  2. Notice that the Processing code is also color coded, but in a different way than Arduino sketches.

  3. Continue to the next step.

Step 3: Create an Image Object

To use images in Processing, you need to create an object that will hold the image and give it the name "logo."

  1. Copy the code below into Processing.

    PImage logo;

  2. Continue to the next step.

Step 4: Set a Color Variable

Create a variable that will hold the background hue of the Arduino logo. The logo is a .png file, and it has built-in transparency, so it’s possible to see the background color change. A preview of the logo is shown below.

  1. Copy the code below into Processing.
    int bgcolor = 0;
  2. Continue to the next step.

Step 5: Set the Color Mode

You can decide how Processing works with color information. Typically, it works with colors in a Red Green Blue (RGB) fashion where values between 0 and 255 are assigned to each color.

In this program, you’re going to use a color mode called HSB, which stands for Hue, Saturation, and Brightness. You’ll change the hue when you turn the potentiometer.

  1. Copy the code below into Processing.
    void setup(){ 
    	colorMode(HSB, 255);
  2. colorMode takes two arguments: the mode and the maximum value it can expect.
  3. Continue to the next step.

Step 6: Load the Image

To load the Arduino image into the sketch, read it into the logo object you created earlier. Processing will download it from the URL when you run the program.

With the size() function, you tell Processing how large the display window will be. When you use logo.width and logo.height as the arguments, the sketch will automatically scale to the size of the image you’re using.

  1. Copy the code below into Processing.

    	logo = loadImage("http://arduino.cc/logo.png"); 
    	size(logo.width, logo.height);

  2. Continue to the next step.

Step 7: Print Available Serial Ports

Processing can print out status messages using the println() command. If you use this with theSerial.list() function, you’ll get a list of all of your computer's serial ports when the program first starts.

You’ll use this when you run the code to see what port your Arduino is on.

  1. Copy the code below into Processing.

    	println("Available sreial ports:"); 

  2. Continue to the next step.

Step 8: Create the Serial Object

Next you need to give Processing some information about the serial connection.

To complete your named serial object myPort, the program needs to know it is a new instance of the serial object. The parameters it expects are which application it will be speaking to, which serial port it will communicate over, and at what speed.

The attribute this tells Processing you’re going to use the serial connection in this specific application.

It will grab the first available serial port from the list you generated in the last step.

The argument 9600 should look familiar, it defines the speed at which the program will communicate.

  1. Copy the code below into Processing.

    	myPort = new Serial(this, Serial.list()[0], 9600); 
    } //end setup()

  2. Continue to the next step.

Step 9: Start the Draw() Function

The draw() function is analogous to Arduino’s loop() in that it happens over and over again forever. This is where things are drawn to the program’s window.

  1. Copy the code into your Processing sketch.

    void draw(){

  2. Continue to the next step.

Step 10: Read the Arduino Data

Check if there is information from the Arduino by seeing if the available port list is populated.

The myPort.available() command will tell you if there is something in the serial buffer. If there are bytes there, read the value into the bgcolor variable and print it to the debug window.

  1. Copy the code below into Processing.

    	if (myPort.available() > 0){ 
    		bgcolor = myPort.read(); 

  2. Continue to the next step.

Step 11: Display the Colored Image

The function background() sets the color of the window. It takes three arguments: hue, brightness, and saturation.

Use the variable bgcolor as the hue value, and set the brightness and saturation to the maximum value, 255.

You’ll draw the logo with the command image(). You need to tell image() what to draw, and what coordinates to start drawing it in the window. 0,0 is the top left, so start there!

  1. Copy the code below into Processing.
    	background(bgcolor, 255, 255); 
    	image(logo, 0, 0); 
    } //end of draw()
  2. Continue to the next lesson to learn how to use your project!

Next Lesson:Change the Logo Color

Be the First to Share


    • CNC Contest

      CNC Contest
    • Make it Move

      Make it Move
    • Teacher Contest

      Teacher Contest