# How to take input in the canvas drawn by the user

**URL:** <https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829>\
**Category:** Coding Questions\
**Created:** [May 2, 2019, 6:34am UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829 "2019-05-02T06:34:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Procoder](https://avatars.discourse-cdn.com/v4/letter/p/9de0a6/32.png) [@Procoder](https://discourse.processing.org/u/Procoder)\
**Post date:** [May 2, 2019, 6:34am UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/1 "2019-05-02T06:34:18Z")

</div>

How can i use an input like a drawing as an object drawn by the user

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 2, 2019, 6:56am UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/2 "2019-05-02T06:56:00Z")

</div>

hi, your question is not easy to answer,  
you need to do user input?

- keyboard
- mouse

but a drawing would be a file  
do you want to make a drawing

or want load a file ( drawing ) and show it?  
and the user should be able to select the file from PC drive?

please more details

---

<div class="post-metadata">

**Author:** ![Procoder](https://avatars.discourse-cdn.com/v4/letter/p/9de0a6/32.png) [@Procoder](https://discourse.processing.org/u/Procoder)\
**Post date:** [May 2, 2019, 6:08pm UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/3 "2019-05-02T18:08:33Z")

</div>

Let suppose an ellipse is moving on the canvas. And when the user draws an rectangle( same as how a rectangle is drawn in MS paint😅) the rectangle object will start working as an obstacle to the moving ellipse…now how to introduce that draw feature and accept the drawn rectangle and use that as an object?

---

<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:** [May 2, 2019, 7:04pm UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/4 "2019-05-02T19:04:52Z")

</div>

you need to do collision between ball and rectangles

```auto

ArrayList<RectangleMy> list = new ArrayList(); 

// Other
int x, y;
int xC, yC;
int xi, yi, xf, yf;
// int rx, ry, r;

color c=color(190, 21, 25);
int lastFigure=1;
boolean paintFigureNow=false;

// ball-------------------------------
// Position des Balles 
int xPosition = int(random(41, 33)); // x-Wert (von der linken oberen Ecke nach rechts)
int yPosition = int(random(22, 112)); // y-Wert (von der linken oberen Ecke nach unten)

// Der Ball bewegt sich, in dem wir etwas zur Position hinzu addieren
int xPositionDazuAddieren = int(random(1, 15));
int yPositionDazuAddieren = int(random(1, 13)); 

// Wurde das Spiel verloren? 
boolean lost=false; 

void setup() {
  size(900, 600);
  background(255);
}

void draw() {

  background(255);

  stroke(231, 214, 190);
  fill(255);

  // DISEGNA FIGURE
  noStroke();
  if (paintFigureNow) {
    if (xi!=xf && yi!=yf) {
      if (0<xi && xi<width && 0<yi && yi<height) {
        if (lastFigure==1) {
          stroke(c);
          fill(c);
          rect (xi, yi, xf-xi, yf-yi);
        } else if (lastFigure==2) {
          //stroke(c);
          //fill(c);
          //line(xi, yi, xf, yf);
        } else if (lastFigure==3) {
          //stroke(c);
          //fill(c);
          //ellipseMode(CORNER);
          //ellipse (xi, yi, xf-xi, yf-yi);
        }
      }
    }
  }

  for (RectangleMy currentRect : list) {
    currentRect.display();
  }

  // -----------------------------------------------------------------------------
  // ball-------------------------------

  // Hier wird der Ball gezeichnet
  fill(111); 
  ellipse(xPosition, yPosition, // !!!!!! 
    30, 30); 

  // *************************************************
  // Bewegung: 
  xPosition = xPosition + xPositionDazuAddieren; 
  yPosition = yPosition + yPositionDazuAddieren;
  // *************************************************

  // Abprallen:

  // Abprallen unten
  if (yPosition > height-15)  
    yPositionDazuAddieren = abs(yPositionDazuAddieren) * -1; 

  // Abprallen am oberen Spielfeldrand
  if (yPosition < 15)  
    yPositionDazuAddieren = abs(yPositionDazuAddieren) ; 

  // -------------

  // Abprallen am rechten Spielfeldrand
  if (xPosition > width-15)  
    xPositionDazuAddieren = abs(xPositionDazuAddieren) * -1; 

  // Abprallen am linken Spielfeldrand
  if (xPosition < 15)  
    xPositionDazuAddieren = abs(xPositionDazuAddieren);
}

void mousePressed () {

  xi=mouseX;
  yi=mouseY;

  xC=mouseX;
  yC=mouseY;

  xf=xC;
  yf=yC;

  paintFigureNow=true;
}

void mouseDragged() {
  xf=mouseX;
  yf=mouseY;
  redraw();
}

void mouseReleased() {
  RectangleMy newRect = new RectangleMy();

  newRect.x=xi;
  newRect.y=yi;
  newRect.w=xf-xi;
  newRect.h=yf-yi;

  list.add(newRect);
  redraw();
}

void keyTyped() {
  if (key=='r')
    c=color(190, 21, 25);
  else if (key=='o')
    c=color(233, 119, 19);
  else if (key=='y')
    c=color(240, 232, 64);
  else if (key=='v')
    c=color(124, 99, 153);
  else if (key=='g')
    c=color(77, 180, 73);
  else if (key=='b')
    c=color(100, 158, 200);
}

// ==========================================================

class RectangleMy {
  float x, y;
  float w, h;

  // no constructor yet 

  void display() {
    stroke(c);
    fill(111);
    rect (x, y, 
      w, h);
  }
  //
}//class ==========================================================
//

```

---

<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:** [May 3, 2019, 9:07pm UTC](https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/5 "2019-05-03T21:07:50Z")

</div>

Here is a simpler example of just the selection bit, done without classes for beginners. Before adding a bouncing ball to this (and working out how they collide), first understand the input events that define a rectangle and draw it.

```auto
/**
 * simple rectangular selection
 * Processing 3.4 2019-05
 * click to being selecting a rectangle, click again to complete
 * https://discourse.processing.org/t/how-to-take-input-in-the-canvas-drawn-by-the-user/10829/4
 * ...for integration with bouncing ball: https://processing.org/examples/bounce.html
 **/

boolean selecting;
float[] selection;

void setup(){
  rectMode(CORNERS);
  selection = new float[]{0, 0, 0, 0};
}

void draw(){
  background(192);
  drawSelection();
}

void drawSelection(){
  if(selecting){
    fill(255,192,192,128);
    rect(selection[0], selection[1], mouseX, mouseY);
  } else {
    fill(255);
    rect(selection[0], selection[1], selection[2], selection[3]);
  }
}

void mouseReleased(){
  if(!selecting){
    selection[0] = mouseX;
    selection[1] = mouseY;
    selecting = true;
  } else if(selecting){
    selection[2] = mouseX;
    selection[3] = mouseY;
    selecting = false;
  }
}

```

You could extend this to multiple rectangles by making an ArrayList. Add a bouncing ball first – even though it doesn’t yet interact with the rectangle(s) drawn.

Then, to check for bounces, check the walls, then any rectangles in the list.