Command Center - Drawing Control – Piper

Command Center - Drawing Control

With Processing, you’ll be able to create more controlled drawings, as if physically drawing with a pencil. To do so, you must edit the existing code.

 

STEP 1

Open your Arduino IDE.
Goal: remap buttons for improved drawing control with the Processing sketch.

  1. Open up a new sketch.
  2. Copy or write in “Arduino Sketch: ControllerDefault”.
  3. Next, edit the code in the following way:
    1. 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
      };
    2. 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
      };
    3. Make sure it matches the code as you continue through the rest of the tutorial.
    4. Note: You are mapping the buttons to the correct keys.
  4. Upload code.

 

STEP 2

  1. Open editor.p5.js.
  2. Upload the following code:
    // Stroke width variables
    let strokeWeights = [2, 6, 14];
    let MaxStrokeWeightsIndex = 2;
    let currentStrokeWeightsIndex;
    
    // Color Variables
    let colors;
    let MaxColorsIndex = 2;
    let currentColorIndex;
    
    function setup() {
      colors = [ 
        color(240, 25, 25),
        color(25, 240, 25),
        color(25, 25, 240),
      ];
      
      createCanvas(640, 480);
      currentStrokeWeightsIndex = 0;
      currentColorIndex = 0;
    }
    
    function draw() {
      // Draw
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
    1. This is a line drawing sketch with some extra code that we’ll outline for you below.
    2. Moving the controller around draws lines, just like the previous sketch.

 

STEP 3

Now, let’s start fresh before we add some features.
  1. 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():
    function clearCanvas() {
      background(152);
    }
    
    function setup() {
      colors = [ 
        color(240, 25, 25),
        color(25, 240, 25),
        color(25, 25, 240),
      ];
    
      createCanvas(640, 480);
      currentStrokeWeightsIndex = 0;
      currentColorIndex = 0;
      clearCanvas();
    }
    
    function draw() {
      // Clear the canvas
      clearCanvas();
      // Draw
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
    1. 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.
  2. 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?):
    function clearCanvas() {
      background(152);
    }
    
    function setup() {
      colors = [ 
        color(240, 25, 25),
        color(25, 240, 25),
        color(25, 25, 240),
      ];
    
      createCanvas(640, 480);
      currentStrokeWeightsIndex = 0;
      currentColorIndex = 0;
      clearCanvas();
    }
    
    function draw() {
      // Draw
      // Only call clear() if the 'a', aka LeftButton is pressed
      if ((isKeyPressed == true) && (key == 'a')) {
        clearCanvas();
      }
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
    NOTE: if it doesn't seem to work, try clicking the drawing area with your mouse first.
  3. 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 ((isKeyPressed == true) && (key == 's')) {
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
  4. 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 ((isKeyPressed == true) && (key == 's')) {
      stroke(255, 0, 0);
      strokeWeight(4);
      line(mouseX, mouseY, pmouseX, pmouseY);
    }
  5. 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 ((isKeyPressed == true) && (key == 'd')) {
        currentStrokeWeightsIndex++;
        if (currentStrokeWeightsIndex > MaxStrokeWeightsIndex) {
          currentStrokeWeightsIndex = 0;
        }
      }
    
      if ((isKeyPressed == true) && (key == 'f')) {
        currentColorIndex++;
        if (currentColorIndex > MaxColorsIndex) {
          currentColorIndex = 0;
        }
      }
      
      if ((isKeyPressed == true) && (key == 's')) {
        stroke(colors[currentColorIndex]);
        strokeWeight(strokeWeights[currentStrokeWeightsIndex]);
        line(mouseX, mouseY, pmouseX, pmouseY);
      }
  6. 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 (Click the play button to try it out!):

STEP 4

How else can you experiment with this code? Click here to experiment: https://p5js.org/learn/interactivity.html