# Drawing Sheet on Processing

**URL:** <https://discourse.processing.org/t/drawing-sheet-on-processing/14928>\
**Category:** Coding Questions\
**Created:** [October 24, 2019, 4:26pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928 "2019-10-24T16:26:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ImDaGr3en](https://avatars.discourse-cdn.com/v4/letter/i/f0a364/32.png) [@ImDaGr3en](https://discourse.processing.org/u/ImDaGr3en)\
**Post date:** [October 24, 2019, 4:26pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/1 "2019-10-24T16:26:20Z")

</div>

**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:_

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 24, 2019, 5:41pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/2 "2019-10-24T17:41:36Z")

</div>

Thank you!

What do you mean with bucket?

---

<div class="post-metadata">

**Author:** ![ImDaGr3en](https://avatars.discourse-cdn.com/v4/letter/i/f0a364/32.png) [@ImDaGr3en](https://discourse.processing.org/u/ImDaGr3en)\
**Post date:** [October 29, 2019, 3:56pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/3 "2019-10-29T15:56:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2019, 4:41pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/4 "2019-10-29T16:41:37Z")

</div>

> [@ImDaGr3en](#):
>
> procedure to pull out the color of a determined area

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.

> [@ImDaGr3en](#):
>
> is _checking for an area all of the same color and change its color_ .

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

---

<div class="post-metadata">

**Author:** ![ImDaGr3en](https://avatars.discourse-cdn.com/v4/letter/i/f0a364/32.png) [@ImDaGr3en](https://discourse.processing.org/u/ImDaGr3en)\
**Post date:** [October 29, 2019, 4:50pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/5 "2019-10-29T16:50:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2019, 5:31pm UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/6 "2019-10-29T17:31:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 4, 2019, 2:42am UTC](https://discourse.processing.org/t/drawing-sheet-on-processing/14928/7 "2019-11-04T02:42:32Z")

</div>

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

- [https://discourse.processing.org/search?q=flood%20fill](https://discourse.processing.org/search?q=flood%20fill)
- [https://forum.processing.org/two/discussion/comment/110211/#Comment\_110211](https://forum.processing.org/two/discussion/comment/110211/#Comment_110211)