Drawing Sheet on Processing

Processing Coding Questions
1

My project is done!
As you can see from the title, I managed to create a working drawing sheet in which you can draw with different colors by pressing the mouse in different positions. You can also trigger the eraser mode or change the brush dimension using the mouse wheel. Finally, if you’re not satisfied of your work, instead of throwing your PC out of the window you can reset everything with a simple pressure of a key… It’s just the beginning, I want to add some new features like a bucket or a color-picker tool (that should work like Photoshop ones), but I don’t actually know how to code them.
So, if you were so kind to help me in finding a way to code these ideas up without stealing my code, I would be very thankful to you, and I would grant all the “copyrights” you deserve; otherwise I will declare it as a theft.

Here’s the code:

static int tHeight=160, space=20;
int dim=1, e=0;
color c;
tool t=tool.Pencil;

enum tool {
  Pencil, Eraser
}

void mouseWheel (MouseEvent event) {

  int q=event.getCount();
  if (q>0) {
    if (mousePressed==false) e++;
    else if (mouseButton==RIGHT) dim++;
  } else {
    if (mousePressed==false) e--;
    else if (mouseButton==RIGHT) dim--;
  }
  if (e>1) e=1;
  else if (e<0) e=0;
  if (dim>7) dim=7;
  else if (dim<1) dim=1;
}

void tools() {

  switch(e) {

  case 0:
    t=tool.Pencil;
    break;
  case 1:
    t=tool.Eraser;
    break;
  }
}

color colChoose (color col) {

  if (t==tool.Eraser) col=color(0);
  switch(key) {
  case 'G': //grey
    col=color(128);
    break;
  case 'W': //white
    col=color(255);
    break;
  case 'r': //red
    col=color(255, 0, 0);
    break;
  case 'g': //green
    col=color(0, 128, 0);
    break;
  case 'b': //blue
    col=color(0, 0, 255);
    break;
  case 'c': //cyan
    col=color(0, 255, 255);
    break;
  case 'm': //magenta
    col=color(255, 0, 255);
    break;
  case 'y': //yellow
    col=color(255, 255, 0);
    break;
  case 'l': //lime green
    col=color(128, 255, 0);
    break;
  case 'o': //orange
    col=color(255, 128, 0);
    break;
  case 'v': //violet
    col=color(128, 0, 255);
    break;
  case 'f': //flesh pink
    col=color(255, 128, 128);
    break;
  }
  return col;
}

void keyReleased() {
  fill(colChoose(c));
  if (keyCode==ENTER) {
    background(0);
  }
}

void drawRect() {

  tools();
  for (int a=0; a<width; a+=space)
    for (int b=0; b<height; b+=space)
      if ((mouseX>=a && mouseX<a+space) && (mouseY>=b && mouseY<b+space) && b>tHeight && mouseButton==LEFT) rect(a, b, dim*space, dim*space);
}

void setup() {

  frameRate(300);
  size(1080, 720);
  background(0);
  stroke(255);
}

void draw() {

  textAlign(CENTER);
  textSize(40);
  text("Scroll the mouse wheel to change the tool.", width/2, 40);
  textSize(25);
  text("Scroll the mouse wheel whilst pressing the right button to change", width/2, 85);
  text("the brush dimension.", width/2, 110);
  for (int a=0; a<width; a+=space) line(a, tHeight, a, height);
  for (int b=tHeight; b<height; b+=space) line(0, b, width, b);
  if (mousePressed) drawRect();
}
2 Likes
2

Thank you!

What do you mean with bucket?

3

OK, I’m gonna explain what I want it to do.
Imagine you want to draw a beautiful landscape with a light blue sky… and you don’t want to use the brush to paint it. You can use the bucket instead and paint everything of that color!

So, what I want the tool.Bucket to do is checking for an area all of the same color and change its color.
For example, you have a rectangular area of 4X4 boxes all of the same color (let’s say red), and if you click on it with the bucket, and another color selected, all the red pixels will become, for example, light blue.

PS: I’m asking if it is possible to do something like that in Processing, but I’m asking only if you know some procedure to pull out the color of a determined area (the function I don’t know about) because I want to do the program and not asking for a pre-built one. So, can anyone help?

1 Like
4

you can use get(x,y) to get the color of a pixel

you can use get with 4 parameters to get a rectangular image. This you can go through pixel by pixel.

So, we replace color A by color B in that area

1 Like
5

Thank you very much! It worked!!
Expect a new version of the program, in which I will sign your help haha :stuck_out_tongue:

1 Like
6

I once made a flood fill that filled a section of any uneven shape with a certain color

A color picker: look into the gui library controlP5 for example

7

Glad this worked for you! To see related previous discussions, search for flood fill / floodfill / scanline: