Drawing App Throwback – Interaction and Variation in Processing

Use the arrow keys on your keyboard to draw something. Change the color of the pen to blue by tapping ‘b,’ green by tapping ‘g,’ and red by tapping ‘r.’

Just a little throwback to using keystrokes for drawing pictures.

I really wanted to have a key were you can switch from a ‘draw’ mode to a ‘move’ mode so you can move the cursor to somewhere else before drawing again, but I couldn’t figure out how to do that with out erasing everything. How do you keep some of the screen intact while erasing other parts?

int ballWidth = 10;
int ballRadius = ballWidth /2;

int ballX = ballRadius;
int ballY = ballRadius;

int[] ballColor = {
  231, 0, 51
};
String ballColorText = "RED";

int opacity = 200;

int ballCount = 0;

boolean ballDraw = false;
PFont font;

void setup() {
  frameRate(5);
  size(400, 400);
  background(0);

  smooth();
  fill(255);

  //draw the main background grid
  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      ellipse(ballWidth*i +ballRadius, (ballWidth * a+ballWidth/2), ballWidth, ballWidth);
    }
  }
}

void draw() {
  fill(0);
  rect (0, height - 50, width, 50);
  fill(0, 102, 153);
  text ("Count: " + ballCount, width -100, height - 20);
  text ("Draw color: " + ballColorText, 10, height - 20);
  //println(frameCount);
  if (keyPressed) {
    if (key == ' ') {
      //setup();

      ballDraw = !ballDraw;
      //  ballX
    }
  }
}

void keyPressed() {
  fill(ballColor[0], ballColor[1], ballColor[2], opacity);
  if (key == CODED) {
    switch (keyCode) {
    case LEFT :
      ellipse(ballX - ballWidth, ballY, ballWidth, ballWidth);
      ballX -= ballWidth;
      ballCount++;
      break;
    case RIGHT :
      ellipse(ballX + ballWidth, ballY, ballWidth, ballWidth);
      ballX += ballWidth;
      ballCount++;
      break;
    case UP :
      ellipse(ballX, ballY - ballWidth, ballWidth, ballWidth);
      ballY -= ballWidth;
      ballCount++;
      break;
    case DOWN :
      ellipse(ballX, ballY + ballWidth, ballWidth, ballWidth);
      ballY += ballWidth;
      ballCount++;
      break;
    default :
      break;
    }
  }
  switch (key) {
  case 'g' :
    //fill in green
    println("Green pressed!");
    //ballColor = {140, 235, 93};
    ballColor[0] = 140;
    ballColor[1] = 235;
    ballColor[2] = 93;
    ballColorText = "GREEN";
    break;

  case 'r' :
    //fill in green
    println("Red pressed!");
    ballColor[0] = 231;
    ballColor[1] = 0;
    ballColor[2] = 51;
    ballColorText = "RED";
    break;

  case 'b' :
    //fill in green
    println("Blue pressed!");
    ballColor[0] = 0;
    ballColor[1] = 102;
    ballColor[2] = 153;
    ballColorText = "BLUE";
    break;

  default:
    break;
  }
}

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.