Processing 1.0 - Processing Discourse

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

‹ Previous Topic | Next Topic ›

Pages: 1 2

help image (Read 2106 times)

maber

help image
Nov 19^th, 2009, 7:39am

This is my code:
void setup() {
size (360,443);
PImage gino = loadImage("gino.jpg");
background(gino);
strokeWeight(2);
}
ArrayList lines = new ArrayList();
PVector node;

void draw() {

if(mousePressed) {
PVector node = new PVector(mouseX, mouseY);
lines.add(node);
}

stroke(0);
for (int i = 0; i < lines.size(); i++) {
if (i > 0) {
PVector prevNode = (PVector)lines.get(i - 1);
PVector node = (PVector)lines.get(i);
line(prevNode.x, prevNode.y, node.x, node.y);
}
}
}

In this case I have only one background image ... I should put at the top of the window three preview of three different images and when I click with the mouse, in one of these, I should look it great as background ... How can I do this??
Help me thanks

PhiLho

Re: help image
Reply #1 - Nov 19^th, 2009, 9:00am

Declare an array of PImage outside of setup() and a currentImage PImage too, load them in setup(), set currentImage to the first one.
In draw(), use background(currentImage) and shows them in small size. Detect mouse click, check if they are inside the bounds of the images (lot of examples available). If so, set currentImage to the chosen one.

maber YaBB Newbies Offline Posts: 18	Re: help image Reply #2 - Nov 19^th, 2009, 9:11am ok! even if I do not know very well the program ... Anyway thanks

maber

Re: help image
Reply #3 - Nov 19^th, 2009, 11:04am

I write this part of code to insert the image but how can I scale these about 50%??

size(1000,800);
PImage[]currentImage = new PImage[2];
currentImage[0]=loadImage("rana.jpg");
currentImage[1]=loadImage("gino.jpg");
image(currentImage[0],0,0);
image(currentImage[1],360,0);

Another Thing is that when I click with the mouse in the second image the line that I drew must disappear so I can draw again on the second image....
Someone can hep me more in detail please Cry

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: help image Reply #4 - Nov 19^th, 2009, 1:21pm Quote: how can I scale these about 50% Read again the image() reference page? (Hint: width and height are those of the displayed image...) Quote: the line that I drew must disappear Usually, in draw(), we call background() to erase everything, then we redraw the whole sketch. So if you do that, the line will just disappear.

maber

Re: help image
Reply #5 - Nov 20^th, 2009, 1:12am

I write the code but I have every time a problem, I show it:

void setup() {
size (360,443);
PImage = loadImage("rana.jpg");
PImage = loadImage("gino.jpg");
strokeWeight(2);
}

PImage[]currentImage = new PImage[2];
currentImage[0]=loadImage("rana.jpg"); //syntax error, maybe a missing character?
currentImage[1]=loadImage("gino.jpg");
image(currentImage[0],0,0,width/9,height/6);
image(currentImage[1],width/9,0,width/9,height/6);

ArrayList lines = new ArrayList();
PVector node;

void draw() {

if(mousePressed) {
PVector node = new PVector(mouseX, mouseY);
lines.add(node);
}

stroke(0);
for (int i = 0; i < lines.size(); i++) {
if (i > 0) {
PVector prevNode = (PVector)lines.get(i - 1);
PVector node = (PVector)lines.get(i);
line(prevNode.x, prevNode.y, node.x, node.y);
}
}
}

Up to this point is fine as I wrote the code?
I tried to follow the instructions but I said I do not know very well the program.... :-[

PhiLho

Re: help image
Reply #6 - Nov 20^th, 2009, 2:46am

When you have a function definition, particularly setup(), you cannot put code (beside declarations) outside of a function.
Beside, you do loadImage twice. Remove the extra loadImage and move the image() calls to draw(). Which you should start with a background() call.

Quote:

I do not know very well the program

Experimenting (and making errors) is the best way to learn! Wink

Well, reading the manual can help too! Grin

maber YaBB Newbies Offline Posts: 18	Re: help image Reply #7 - Nov 20^th, 2009, 3:26am The problem is that I have an exam about this and it is thursday. I have not much time....

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: help image Reply #8 - Nov 20^th, 2009, 4:16am Just follow the advices...

maber

Re: help image
Reply #9 - Nov 20^th, 2009, 4:31am

PImage a;
PImage b;

void setup() {
size(360, 443);
a = loadImage("rana.jpg");
b = loadImage("gino.jpg");

}

void draw() {
image(a, 0, 0);
image(a, 0, 0, a.width/6, a.height/6);
image(b, a.width/6, 0, b.width/6, b.height/6);
}

In this way I have obtained two small image in the top left and one of these is also as background. But at this point I have saw the example about mouseClicked():

int value = 0;

void draw() {
fill(value);
rect(25, 25, 50, 50);
}

void mouseClicked() {
if(value == 0) {
value = 255;
} else {
value = 0;
}
}

I made several attempts but I can not do that by clicking on the smaller image then I get it as big as the entire window in the background .... and I do not found similar examples Cry

PhiLho

Re: help image
Reply #10 - Nov 20^th, 2009, 4:54am

OK, since you made efforts and some base code, I will show what I meant.
Note: I made also some beginner's errors, like initializing dx where I declare it, outside of setup(), which is wrong because the size is known only after setup() has run, while global inits are done before everything. Or using currentImage before it was set!
I just have enough experience to quickly find what is going wrong and to fix it...

Code:

void setup() {
  size(360,443);
  images[0]=loadImage("D:/_PhiLhoSoft/images/earth.gif");
  images[1]=loadImage("D:/_PhiLhoSoft/images/Engine.png");
  strokeWeight(2);
  dx = width/9; dy = height/6;
}

PImage currentImage;
PImage[] images = new PImage[2];
int dx, dy;

ArrayList lines = new ArrayList();

void draw() {
  background(255);
  if (currentImage != null) {
    image(currentImage, 0, 0, width, height);
  }
  image(images[0],0,0,dx,dy);
  image(images[1],dx,0,dx,dy);
 
 if(mousePressed) {
   if (mouseX < dx && mouseY < dy) {
     currentImage = images[0];
   } else if (mouseX >= dx && mouseX < 2*dx && mouseY < dy) {
     currentImage = images[1];
   } else {
     PVector node = new PVector(mouseX, mouseY);
     lines.add(node);
   }
 }
 
 stroke(0);
 for (int i = 0; i < lines.size(); i++) {
   if (i > 0) {
     PVector prevNode = (PVector)lines.get(i - 1);
     PVector node = (PVector)lines.get(i);
     line(prevNode.x, prevNode.y, node.x, node.y);
   }
 }
}

Note I defined dx and dy to avoid using "magic numbers" sprinkled all over the code: thus if I want bigger images, I just have to change a limited amount of code.

« Last Edit: Nov 20^th, 2009, 11:41am by PhiLho »

maber

Re: help image
Reply #11 - Nov 20^th, 2009, 6:38am

thanks for the availability and patience. I studied a bit the code you sent me and I tried to understand what you explained me above. I finally understood ...
There's only one problem (another

) when I click on an image that appears in the background and I draw on it a line, then when I click on the other image, in theory, as you told me, the line should disappear but this remain drawn on the second image. Why? Embarrassed

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: help image Reply #12 - Nov 20^th, 2009, 8:07am Not too sure if I fully understood your question, but you can move the drawing of the "icons" (images[]) to the bottom of draw(), thus they will be always on top of user's drawing.

maber

Re: help image
Reply #13 - Nov 20^th, 2009, 9:15am

No! I try to be more clear

This one of the image I had load in the code:
http://digilander.libero.it/laraelandi/puntini/puntinidalmata1.gif

The other are similar...
I click in the preview of this pictur and so I can draw the line to get the rest of the image(in practice, join the points)...
When I click in another preview and so in the background appear the second image the line that I drew before do not disappear and so I have an image with a line draw above...
On the contrary when I click in the second image, the line that I drew before must disappear so I can join the points of the second image...
Do you understand??
I hope to be clear Embarrassed

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: help image Reply #14 - Nov 20^th, 2009, 11:42am Note: I removed the global 'node' variable, not used apparently. Just add `lines = new ArrayList();` when changing currentImage, it should reset the previously drawn lines.

Pages: 1 2

‹ Previous Topic | Next Topic ›