# Border for a picture
**URL:** https://discourse.processing.org/t/border-for-a-picture/11812
**Category:** Coding Questions
**Created:** [June 3, 2019, 8:36pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812 "2019-06-03T20:36:56Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 3, 2019, 8:36pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/1 "2019-06-03T20:36:56Z")
I would like to have a border for the picture
Can anybody help me with this?
```auto
PImage bg;
float xo;
float yo;
float zoom = 1.7;
void setup () {
size(800, 600);
smooth();
noStroke();
bg = loadImage("bg.jpg");
}
void draw() {
background(0);
translate (xo, yo);
scale (zoom);
image(bg,-338,-200,width,height);
}
void mouseDragged(){
xo= xo + (mouseX - pmouseX);
yo = yo + (mouseY - pmouseY);
if(mouseX < 100){
if(mouseY < 100){
}
}
}
```
---
### Author:  [@mcintyre](https://discourse.processing.org/u/mcintyre)
#### Post date: [June 3, 2019, 11:51pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/2 "2019-06-03T23:51:00Z")
Hey @Dominik_rgn! You could start by drawing a `rect` on top of the image.
```java
PImage bg;
float xo;
float yo;
float zoom = 1.7;
void setup () {
size(800, 600);
smooth();
noStroke();
bg = loadImage("bg.jpg");
}
void draw() {
background(0);
translate(xo, yo);
scale(zoom);
image(bg, -338, -200, width, height);
drawBorder();
}
void mouseDragged(){
xo= xo + (mouseX - pmouseX);
yo = yo + (mouseY - pmouseY);
if(mouseX < 100){
if(mouseY < 100) {
}
}
}
void drawBorder() {
stroke(255, 0, 0);
strokeWeight(10);
noFill();
rect(-338, -200, width, height);
}
```
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 5, 2019, 1:59pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/3 "2019-06-05T13:59:09Z")
I mean that you can not drag the image over the end, for example, the image is 300x300 and you can not drag to 301
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 5, 2019, 2:02pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/4 "2019-06-05T14:02:50Z")
So the image is a small rectangle 100x100 and you can drag it around inside a bigger rectangle 300x300 – but not outside? Is that right?
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 8, 2019, 2:56pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/5 "2019-06-08T14:56:16Z")
Yes, that is exactly what I mean
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 8, 2019, 4:49pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/6 "2019-06-08T16:49:16Z")
here is one way to do it
I only checked **left** and **upper** border of the outer rect,
you need to do this also for x at the **right** border and y, **lower** border
Chrisir
```auto
float xo;
float yo;
void setup () {
size(800, 600);
smooth();
noStroke();
rectMode(CENTER);
xo=width/2-50;
yo=height/2;
}
void draw() {
background(0);
fill(255);
rect(width/2, height/2,
300, 300 );
translate (xo, yo);
fill(255, 0, 0);
rect( 0, 0, 100, 100 );
}
void mouseDragged() {
xo = xo + (mouseX - pmouseX);
yo = yo + (mouseY - pmouseY);
// you need to do the following also for x at the right border and y, lower border
if (xo < width/2-150+50) {
xo = width/2-150+50;
}
if (yo < height/2-150+50) {
yo = height/2-150+50;
}
}
//
```
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 8, 2019, 4:56pm UTC](https://discourse.processing.org/t/border-for-a-picture/11812/7 "2019-06-08T16:56:11Z")
Essentially, you have four commands that push a rectangle inside another rectangle:
- If the left picture edge is too far left, set to left border
- if right too far right, right border
- if top top
- if bottom bottom
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 8:17am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/8 "2019-06-13T08:17:20Z")
For me that is left and above but not right and not below why?
and can i take a picture instead of the rectangle?
```auto
float xo;
float yo;
void setup () {
fullScreen();
smooth();
noStroke();
rectMode(CENTER);
xo=width/2-50;
yo=height/2;
}
void draw() {
background(0);
fill(255);
rect(width/2, height/2, displayWidth, displayHeight );
translate (xo, yo);
fill(255, 0, 0);
rect( 0, 0, 100, 100 );
}
void mouseDragged() {
xo = xo + (mouseX - pmouseX);
yo = yo + (mouseY - pmouseY);
// you need to do the following also for x at the right border and y, lower border
if (xo < width/2-640+50) {
xo = width/2-640+50;
}
if (yo < height/2-400+50) {
yo = height/2-400+50;
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 13, 2019, 8:19am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/9 "2019-06-13T08:19:51Z")
As I wrote I made only 2 sides and not 4, you have to do 2 more for practice
Also you can take a image instead rect, it’s the same principle
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 8:38am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/10 "2019-06-13T08:38:45Z")
Oh haha okey I’ll try it 🙂
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 8:48am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/11 "2019-06-13T08:48:51Z")
I have to add 2 float then right?
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 8:53am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/12 "2019-06-13T08:53:50Z")
okay I honestly do not understand that: /
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 13, 2019, 9:41am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/13 "2019-06-13T09:41:19Z")
> [@Chrisir](#):
>
> pmouseY); // you need to do the following also for x at the right border and y, lower border
>
> if (xo \< width/2-150+50) { xo = width/2-150+50; }
>
> if (yo \< height/2-150+50) { yo = height/2-150+50; }
I think these lines you have to do for right and bottom borders
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 10:19am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/14 "2019-06-13T10:19:20Z")
I did a downlaod link, could you have a look?
[https://workupload.com/file/9ZwnkrAy](https://workupload.com/file/9ZwnkrAy)
---
### Author:  [@Dominik\_rgn](https://discourse.processing.org/u/Dominik_rgn)
#### Post date: [June 13, 2019, 10:19am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/15 "2019-06-13T10:19:59Z")
because it does not work
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 13, 2019, 10:27am UTC](https://discourse.processing.org/t/border-for-a-picture/11812/16 "2019-06-13T10:27:24Z")
Sorry I didn’t have time
Please read what jeremy wrote and debug this