Alternated boxes with for loop

Programming Questions

g87_4proc..

Alternated boxes with for loop

in Programming Questions • 2 years ago

Hello everyone,

i have this code which doesn't work. I want a checkerboard effect. This is my exercise:

1) In the "invertColors" I need to take a picture, cut it, and invert the colors with filter (INVERT).
2) In the "checkerboard" I need to take the cutted picture of the output of "invertColors" and I want to achieve the checkerboard effect with 9 boxes using "invertColors" in alternated boxes (like a checkerboard).

How to do this changing this code?

PImage img1, img2;

    void setup() {
      size (145,125);

    }

    void draw() {
     invertColors();
     chessboard();
    }

    void invertColors(){
      size(145, 125);
      img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
      img2 = img1.get(90, 10, 145, 125);
      image(img2, 0, 0);
      filter(INVERT);

    }

    void chessboard(){
     for (int i=0; i<9; i++) {
      image(img2.get((width/3)*(i%3), (height/3)*(i/3), width/3, height/3), (width/3)*(i%3), (height/3)*(i/3));
      if (i%2==0){
        invertColors();
      }


      }


}

Replies(18)

quarks

Re: Alternated boxes with for loop

2 years ago

You have asked this question a couple of times creating a new topic, got responses from forum members then deleted the whole topic and the responses. I certainly responded this morning and the whole topic has been deleted. Although the answer was aimed at your problem others can learn programming from the problem and possible solutions. It is also extremely rude to forum members who take the time and effort to respond to questions - please do not delete this topic.

This code does what you want provided the sketch size specified in size() method call is the same as the image size it is not guarenteed to work properly otherwise.

The explanation and solution to that problem was explained in the topic you deleted.

PImage img1;
void setup() {
size (145,125);
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
}
void draw() {
chessboard();
}
void chessboard() {
for (int i=0; i<9; i++) {
image(img1.get((width/3)*(i%3), (height/3)*(i/3), width/3, height/3), (width/3)*(i%3), (height/3)*(i/3));
filter(INVERT);
}
}

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

I deleted the topic because I formulated the question wrong. Now in this new topic the question is clear. I need to create the exercise with the functions defined above:
"1) In the "invertColors" I need to take a picture, cut it, and invert the colors with filter (INVERT).
2) In the "checkerboard" I need to take the cutted picture of the output of "invertColors" and I want to achieve the checkerboard effect with 9 boxes using "invertColors" in alternated boxes (like a checkerboard)."

I need the exercise as I described in step 1 and 2. I need to create 2 functions : invertColors(), which " take a picture, cut it, and invert the colors with filter (INVERT)."; checkerboard(), which "take the cutted picture of the output of "invertColors" and I want to achieve the checkerboard effect with 9 boxes using "invertColors" in alternated boxes (like a checkerboard)."

I thank you for your help and your answer and that of others helped me to try to figure out how to find the solution. In fact I copied the code of your answers but I could not get a solution. Now I have rephrased the question well and I hope someone can help me.

fiveagon

Re: Re: Alternated boxes with for loop

2 years ago

Quarks, thank you. I was about to say the same thing. I too responded with a crucial piece of information, and for what? To have everybody's help deleted? Rude, indeed.

It's obvious that you didn't even see my post, otherwise you would realize that calling filter() by itself only affects the sketch window.

PImage has its own filter() method. Use it on the specific PImage that you want to invert.

Hopefully this isn't deleted.

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

fiveagon, sorry, but you're wrong!!! I saw your code but for me it is too complicated because I'm a new processing user.

I saved your code and I appreciated your help.

quarks

Re: Alternated boxes with for loop

2 years ago

I now understand why you deleted the original topic but I suggest in future you either edit the topic or simply add to it since now you only have part of the answer and it does not resolve the issues of when the sketch window and image sizes are different because that was in the deleted topic.

To fix that problem the code I posted above should be modified by changing line 11 to

image(img1.get((img1.width/3)*(i%3), (img1.height/3)*(i/3), img1.width/3, img1.height/3), (img1.width/3)*(i%3), (img1.height/3)*(i/3));

quarks

Re: Re: Alternated boxes with for loop

2 years ago

PImage has its own filter() method. Use it on the specific PImage that you want to invert.

I have never used filter() before so I didn't know that - thanks.

Just shows what can be learnt from this forum if things arn't deleted.

fiveagon

Re: Re: Alternated boxes with for loop

2 years ago

Quarks, just to be clear, most of my reply was directed at the original poster. I wasn't bashing you for not reading my post.

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

Quarks, thank you for your help. Unfortunately your code doesn't work. Why? And I need to have "invertColor()" in my exercise because it is to define "invertColor()" function which cut an image according to my coordinates (90,10,145,125 like in my incomplete sketch) and invert the colors of cutted image. Then i need to define the 2nd function (checkerboard) which take the cutted image and invert the colors in alternate boxes (9 boxes). I hope that I have explained it better.

quarks

Re: Alternated boxes with for loop

2 years ago

@fiveagon - no offense taken I never saw your original post because it had been deleted by g87_4processing. I am an experienced programmer of many years and my last post was to show that no matter how good a programmer you are, you never know it all and there are always things to learn. If I had read your original post I would have realised that the filter() method could be applied to PImage objects and I would have been able to get the code g98_4processing wanted done earlier.

@g87_4processing - we all make mistakes and yours was to delete the topic and the responses (you might want to look at this topic), I have made mistakes too and if you search this forum (and the previous Processing forum) you will find others quite willing to point out the errors in my code or advice.

I think I have the code to solve your problem. Effectively you have 2 images img1 is the original image and img2 is the inverted image (lines 5-7) then in the chessboard method rectangles from each image are taken in turn(i%2) and copied to the screen.

I have increased the sketch size so the image is visiblke without shrinking.

PImage img1, img2;
void setup() {
size (360, 270);
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2.filter(INVERT);
}
void draw() {
chessboard();
}
void chessboard() {
for (int i=0; i<9; i++) {
if(i%2 == 0)
image(img1.get((img1.width/3)*(i%3), (img1.height/3)*(i/3), img1.width/3, img1.height/3), (img1.width/3)*(i%3), (img1.height/3)*(i/3));
else
image(img2.get((img2.width/3)*(i%3), (img2.height/3)*(i/3), img2.width/3, img2.height/3), (img2.width/3)*(i%3), (img2.height/3)*(i/3));
}
}

This is the result I got

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

Thank you Quarks, but the output is correct only for this image. I need a solution whithout delete invertColors() because this must be the function which cut a portion of image (90, 10, 145, 125) and invert the colors of this image. After defined this function, i must to recall it in the loop of the function 2 to invert the colors of alternated rectangles. The checkerboard function take the output of the invertColors function (the cutted and inverted image) and recall invertColors() into the loop to invert the alternated rectangles. The differences between your solution and my exercise are these.

PhiLho

Re: Alternated boxes with for loop

2 years ago

Indeed, I can see 5 threads deleted by g87_4processing, including some I answered myself.
I can restore them, but it would add noise to the forum.
g87_4processing, I will attribute this rude attitude to ignorance of good forum behavior, so I won't take action, but please, in the future, don't delete threads where people answered, it isn't a way to thank them for their work.
And as long as you have the same problem, stick to the same thread, multiplying threads dilute efforts as one can spend time answering one thread where the response can have been given already in another thread.

Work and code given in this forum is public, and intended to be shared by everybody: one can have a similar problem in the future and search the forum and find valuable experience here.

quarks

Re: Re: Alternated boxes with for loop

2 years ago

After carefully reading the whole thread I believe the effect you want to achieve with the doggy picture is this.

The code required to produce this image is shiown below. It does NOT have the method invertColor() because it is not needed, at least not to get this picture.

If it is needed for your 'exercise' (It seems to me that this is a school exercise) or if the output is not quite what you wanted there is enough informatiuon in this thread for you to work out the solution.

PImage img1, img2;
void setup() {
size (360, 270);
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2 = img1.get(90, 10, 145, 125);
img2.filter(INVERT);
println(img1.width + " x " + img1.height);
}
void draw() {
chessboard();
}
void chessboard() {
for (int i=0; i<9; i++) {
image(img2.get((img2.width/3)*(i%3), (img2.height/3)*(i/3), img2.width/3, img2.height/3), (img2.width/3)*(i%3), (img2.height/3)*(i/3));
img2.filter(INVERT);
}
img2.filter(INVERT);
}

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

Thank you Quarks. It is a school exercise. I changed your code but i have a difficulty calling invertColors:

PImage img1, img2;
void setup() {
size (360, 270);
}
void draw() {
chessboard();
invertColors();
}
void invertColors(){
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2 = img1.get(90, 10, 145, 125);
img2.filter(INVERT);
println(img1.width + " x " + img1.height);
}
void chessboard() {
for (int i=0; i<9; i++) {
image(img2.get((img2.width/3)*(i%3), (img2.height/3)*(i/3), img2.width/3, img2.height/3), (img2.width/3)*(i%3), (img2.height/3)*(i/3));
img2.invertColors();
}
img2.invertColors();
}

quarks

Re: Alternated boxes with for loop

2 years ago

You only need to load the image once so move lines 12 and 13 to line 4 inside setup().

The only line you need inside inverColors() is line 14 so line 15 can be removed

Here you have a choice either remove line 9 from draw() since the chessboard() method inverts the colours for you OR if line 9 must stay then remove line 23 from the chessboard method. DO NOT REMOVE BOTH

That should do it.

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

The exercise say that the image must be cutted INSIDE invertColors(). Other than that, I changed the code according to your advice, but it doesn't work. The error say that the function invertColors() does not exist. Why??

PImage img1, img2;
void setup() {
size (360, 270);
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2 = img1.get(90, 10, 145, 125);
}
void draw() {
chessboard();
invertColors();
}
void invertColors(){
img2.filter(INVERT);
}
void chessboard() {
for (int i=0; i<9; i++) {
image(img2.get((img2.width/3)*(i%3), (img2.height/3)*(i/3), img2.width/3, img2.height/3), (img2.width/3)*(i%3), (img2.height/3)*(i/3));
img2.invertColors();
}
}

quarks

Re: Alternated boxes with for loop

2 years ago

Change line 20 to invertColor() instead of img2.invertColors()

The exercise say that the image must be cutted INSIDE invertColors().

When you get a program to write there are many ways of writing program code to perform the same action. When it is a school exercise sometimes the teacher wants you to do a particular way.

I think the point here is that you don't fully understand what the code is doing otherwise you would not have made the last mistake. Try and work out what is happening this is likely to help when you get further exercises, also your teacher might ask you to explain how your code works!!!!

g87_4proc..

Re: Re: Alternated boxes with for loop

2 years ago

I try to understand how the code works but I haven't experience with processing. For example, now i have this code which is correct except for one thing: I need to cut the image inside invertColor(). This is the only problem remained.

PImage img1, img2;
void setup() {
size (360, 270);
img1 = loadImage("http://www.fidomicio.provincia.ancona.it/Immagini/foto_cane1_imagelarge.jpg");
img2 = img1.get(90, 10, 145, 125);
}
void draw() {
chessboard();
invertColors();
}
void invertColors(){
img2.filter(INVERT);
}
void chessboard() {
for (int i=0; i<9; i++) {
image(img2.get((img2.width/3)*(i%3), (img2.height/3)*(i/3), img2.width/3, img2.height/3), (img2.width/3)*(i%3), (img2.height/3)*(i/3));
invertColors();
}
}

quarks

Re: Alternated boxes with for loop

2 years ago

I will briefly explain how Processing works. As you can see Processing has 2 main functions setup and draw -

setup()
the code in this method is executed once when the sketch is started and as the name suggests it is used to initialise the sketch display window and iniitialise any variables needed. The first line in this method should be a call to the size() method this determines the width and height of the display window. The size() method should only be called once and NOT be called from any other method. Loading of image files should be done in this method.
draw()
the code in this method is executed approximately 60 times a second so allows for animation.since your sketch has no animation you could actually draw the chessboard image from the setup method, but we will stick with the drawing.

If we look at your latest program code then in

line 4: the original dog image is loaded and called img1
line 5: img1 has part of it (the dog's head) cut and called img2

So setup is complete and the draw() method is called repeatably until the sketch is closed.

In draw() the method calls chessboard which loops 9 times each time through the loop it

draws part of img2
inverts the colours in img2 by calling invertColors

The important thing here is that there is no need to cut img1 again since we did it in setup. We certainly don't want to do this 60 times a second!!!

In my opinion a function name should be descriptive of what it is supposed to do. So a function called invertColors() should do just that - invert the colours of an image. it should NOT cut part of an image and store it in a second image. To attempt to do both inside a function that is going to be called many times is ridiculous and distorts the program logic.

now i have this code which is correct except for one thing: I need to cut the image inside invertColor(). This is the only problem remained.

This maybe a requirement of your exercise but it is not a sensible or realistic thing to do so I will not do it.

If the teacher gives you the answer then post the code in this thread I would be very, very interested in lokking at his/her solution.

Top Reply