Skills & Time

Time: 45 minutes            Skills: Electronics, Coding        Skill Level: Moderate

Objective:

Create more controlled drawings, as if physically with a pencil.

Project Overview:

In this project, you will remap buttons for improved drawing control with the Processing Sketch.

Materials Needed:

• Piper Command Center
• Piper Computer Kit
• TBD
• TBD
• TBD

Accessing Arduino

1. Open up an Arduino IDE
2. Copy or write in "Arduino Sketch: Controller Default"
3. Next, edit the copy in the following way:

• Find the section of the code below (about 58 lines down):
• const int MouseAndKeyboardModeMap[8] = {
•     MOUSE_LEFT, // LeftButton
•     MOUSE_RIGHT, // RightButton
•     'x', // UpButton
•     'y', // DownButton
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
• };
• Change the code to match this:
• const int MouseAndKeyboardModeMap[8] = {
•     'a', // LeftButton
•     's', // RightButton
•     'd', // UpButton
•     'f', // DownButton
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
•     NOT_MAPPED, // Not applicable
• };
• Make sure it matches the code as you continue through the rest of the tutorial.
• Note: You are mapping the buttons to the correct keys.
• Upload the code

Accessing the Processing IDE

4. Open the Processing IDE

5. Upload the following code:

• // Stroke width variables
• int [] strokeWeights = {2, 6, 14};
• int MaxStrokeWeightsIndex = 2;
• int currentStrokeWeightsIndex;

• This is a line drawing sketch with some extra code that we'll outline for you below.
• Note: Moving the controller around draws lines, just like the previous sketch.

Adding Features

Now, let's start fresh before we add some features.

6. Clear the screen: You can clear the screen by drawing the whole background one color. Let’s create a clear() function that will draw the background, and call it in setup() and draw():

void clear() {

  background(152);

}

void setup() {

  size(640, 480);

  currentStrokeWeightsIndex = 0;

  currentColorIndex = 0;

  clear();

}

void draw() {

  // Draw

  // Only call clear() if the 'a', aka LeftButton is pressed

  if ((keyPressed == true) && (key == 'a')) {

    clear();

  }

  line(mouseX, mouseY, pmouseX, pmouseY);

}

• As you run that function, it erases as quickly as you draw. Why is this? It’s because draw() is called in a loop, so we erase everything after we try to draw it again. To fix this, let’s only erase when we press a button.

7. Execute the clear() function inside an “if” statement, and it will only erase if the left button is pressed (Remember that we set the ‘a’ key to be mapped to the left button in the Controller’s Sketch?):

void draw() {

  // Draw

  // Only call clear() if the 'a', aka LeftButton is pressed

  if ((keyPressed == true) && (key == 'a')) {

    clear();

  }

  line(mouseX, mouseY, pmouseX, pmouseY);

}

8. Have you noticed that now the controller cursor we’re always drawing. You may want to draw only when the right button is being pressed. Follow the instructions from the previous step, but check the ‘s’ key instead, since this is mapped to the right button in the Controller’s Sketch:

 if ((keyPressed == true) && (key == 's')) {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

9. Now, we can change the width and color of the line. Let’s experiment by adding some numbers to set the color with stroke() and the line width with strokeWeight():

 

  if ((keyPressed == true) && (key == 's')) {

    stroke(255, 0, 0);

    strokeWeight(4);

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

10. You’ll notice that the line is a little thicker and has become red. So, we’ll combine two actions now: Using the top button (‘d’) to cycle through different widths, and the bottom button (‘f’) to cycle through some colors. To keep it simple, we’ll use the code that we already have that’s defined at the top of our Processing sketch. In the “if” statements, we increment (the ‘++’) to increase our index each time the button is pressed, and resetting when we get to the maximum, which is only 2 in this case. Then we’ll use those values when we call stroke() and strokeWeight().

if ((keyPressed == true) && (key == 'd')) {

    currentStrokeWeightsIndex++;

    if (currentStrokeWeightsIndex > MaxStrokeWeightsIndex) {

      currentStrokeWeightsIndex = 0;

    }

  }

 

  if ((keyPressed == true) && (key == 'f')) {

    currentColorIndex++;

    if (currentColorIndex > MaxColorsIndex) {

      currentColorIndex = 0;

    }

  }

  

  if ((keyPressed == true) && (key == 's')) {

    stroke(colors[currentColorIndex]);

    strokeWeight(strokeWeights[currentStrokeWeightsIndex]);

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

11. Try it out! Pressing the top button will change the line thickness next time you draw, and pressing the bottom button will change the color. Here’s the final code with everything:

// Stroke width variables

int [] strokeWeights = {2, 6, 14};

int MaxStrokeWeightsIndex = 2;

int currentStrokeWeightsIndex;

 

// Color variables

color [] colors = { color(240, 25, 25),

                    color(25, 240, 25),

                    color(25, 25, 240),

};

 

int MaxColorsIndex = 2;

int currentColorIndex;

 

void clear() {

  background(152);

}

 

void setup() {

  size(640, 480);

  currentStrokeWeightsIndex = 0;

  currentColorIndex = 0;

  clear();

}

 

void draw() {

  // Draw

  // Only call clear() if the 'a', aka LeftButton is pressed

  if ((keyPressed == true) && (key == 'a')) {

    clear();

  }

 

  if ((keyPressed == true) && (key == 'd')) {

    println("weight:",currentStrokeWeightsIndex);

    currentStrokeWeightsIndex++;

    if (currentStrokeWeightsIndex > MaxStrokeWeightsIndex) {

      currentStrokeWeightsIndex = 0;

    }

  }

 

  if ((keyPressed == true) && (key == 'f')) {

    currentColorIndex++;

    if (currentColorIndex > MaxColorsIndex) {

      currentColorIndex = 0;

    }

  }

 

  if ((keyPressed == true) && (key == 's')) {

    stroke(colors[currentColorIndex]);

    strokeWeight(strokeWeights[currentStrokeWeightsIndex]);

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

Can't get enough of the coding fun?

How else can you experiment with this code? Click here to experiment: https://processing.org/tutorials/interactivity/

---

Not official Minecraft product. Not approved by or associated with Mojang. The Raspberry Pi Edition of Minecraft by the Raspberry Pi Foundation is licensed under the Creative Commons Attribution 4.0 International License.