Border for a picture

Processing Coding Questions
1

I would like to have a border for the picture
Can anybody help me with this?

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){
    }
  }
}
2

Hey @Dominik_rgn! You could start by drawing a rect on top of the image.

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);
}
1 Like
3

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

4

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?

5

Yes, that is exactly what I mean

6

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


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;
  }
}
//
1 Like
7

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
1 Like
8

For me that is left and above but not right and not below why?

and can i take a picture instead of the rectangle?

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;
  }
}
9

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

10

Oh haha okey I’ll try it :slight_smile:

11

I have to add 2 float then right?

12

okay I honestly do not understand that: /

13

I think these lines you have to do for right and bottom borders

14

I did a downlaod link, could you have a look?

https://workupload.com/file/9ZwnkrAy

15

because it does not work

16

Sorry I didn’t have time

Please read what jeremy wrote and debug this