# Chessboard with array pixels

**URL:** <https://discourse.processing.org/t/chessboard-with-array-pixels/28477>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 12, 2021, 7:43pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477 "2021-03-12T19:43:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![S1993](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@S1993](https://discourse.processing.org/u/S1993)\
**Post date:** [March 12, 2021, 7:43pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/1 "2021-03-12T19:43:57Z")

</div>

I need to code a chessboard making use of array pixels. I can’t use the function rect. I don’t know how to do it.  
I would appreciate it if you can help me. Thanks.

---

<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:** [March 12, 2021, 8:06pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/2 "2021-03-12T20:06:47Z")

</div>

Hello,

and welcome to the forum!

Great to have you here!

Please look at [pixels[] \ Language (API) \ Processing 3+](https://www.processing.org/reference/pixels.html)

We can’t do homework for you and don’t provide code solutions due to forum policy.

It would be great when you come up with a Sketch that shows your attempt. Then we can help you with concrete code questions.

The main idea is (pseudo code):

```auto
for loop over 8 columns xcol
        for loop over 8 rows yrow ( **inside** the first for-loop) 
              
             Now you know where your field (one of 64) starts (e.g. at 30*xcol, 30*yrow) 
             determine the color col: dark or light!! 
             
             for loop over pixels for the field x1 ( **inside** the first for-loop)   
                   for loop over pixels for the field y1 ( **inside** the first for-loop)   
                       determine the color col: dark or light!! Tricky.
                       calc x,y from the 4 for-loops 
                       pixels[y*width+x] = col; 
}
}
}
}

```

Chrisir

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 12, 2021, 11:27pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/3 "2021-03-12T23:27:00Z")

</div>

Hi @S1993 , welcome to the forum! 😉

As @Chrisir said, we can’t give you the full solution for homework related questions, however when you are in front of a problem that you need to solve, ask you the right questions :

- If I can’t use the `rect()` function, how am I going to change the color the pixels? → [Images and Pixels \ Processing.org](https://processing.org/tutorials/pixels/)

- What is the characteristic of a chess board? That a black cell doesn’t directly touch another black cell and it’s the same for white. So it’s alternating between black and white. Try to think of something that alternate every two iteration…

- For the drawing part, a chess board is 8 x 8 cells so what will be the size of a cell in pixels? How can you compute that?

- You are not going to color every pixel by hand, writing repeating code is not the role of programming so how can you do multiple things by specifying it once in the code?

Hope it helps 😉

---

<div class="post-metadata">

**Author:** ![S1993](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@S1993](https://discourse.processing.org/u/S1993)\
**Post date:** [March 14, 2021, 7:28pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/4 "2021-03-14T19:28:22Z")

</div>

Hi, Chrisir and joseph. Thanks for your help.

I have been working on it considering your support.

This is the code I could reach, however, I don’t get the mistake.

void setup(){  
size(240,240);  
loadPixels();

color col;  
for(int x=0;x\<8;x++){

for(int y=0;y\<8;y++){

if((x+y)%2==0){  
col=color(0);  
}else{  
col=color(255);  
}

```
for (int x1=0; x1<x*30;x1++){
 for (int y1=0; y1<y*30;y1++){
 pixels[x+y*width]=col;

}

}

                  }
                  }

```

updatePixels();

}  
void draw(){

}

Once again I would appreciate it if you let me know about the failure. Thanks

---

<div class="post-metadata">

**Author:** ![S1993](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@S1993](https://discourse.processing.org/u/S1993)\
**Post date:** [March 14, 2021, 7:31pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/5 "2021-03-14T19:31:01Z")

</div>

Hi, Chrisir and joseph. Thanks for your help.

I have been working on it considering your support.

This is the code I could reach, however, I don’t get the mistake.

void setup(){  
size(240,240);  
loadPixels();

color col;  
for(int x=0;x\<8;x++){

for(int y=0;y\<8;y++){

if((x+y)%2==0){  
col=color(0);  
}else{  
col=color(255);  
}

```auto
for (int x1=0; x1<x*30;x1++){
 for (int y1=0; y1<y*30;y1++){
 pixels[x+y*width]=col;

}

}

                  }
                  }

```

updatePixels();

}  
void draw(){

}

Once again I would appreciate it if you let me know about the failure. Thanks

---

<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:** [March 15, 2021, 6:57am UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/6 "2021-03-15T06:57:14Z")

</div>

You haven’t stated what the mistake is

What I see. You forgot to calculate x,y

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 15, 2021, 12:34pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/7 "2021-03-15T12:34:06Z")

</div>

[![](https://img.youtube.com/vi/KbyPfLHch2g/maxresdefault.jpg "Processing Chess Board with Pixels Array") ](https://www.youtube.com/watch?v=KbyPfLHch2g)

---

<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:** [March 15, 2021, 1:40pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/8 "2021-03-15T13:40:35Z")

</div>

change the two inner for loops to this:

```auto
for (int x1=0; x1<30;x1++){
 for (int y1=0; y1<30;y1++){
   float x2= x*30 + x1; 
   float y2= y*30 + y1; 
   pixels[x2+y2*width]=col;

```

---

<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:** [March 15, 2021, 2:00pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/9 "2021-03-15T14:00:19Z")

</div>

by the way:

these are the classical colors for the chess field

```auto
 = color( 209.0 , 139.0 , 70.0 );
 = color( 254.0 , 206.0 , 158.0 );

```

from [Chess - Wikipedia](https://en.wikipedia.org/wiki/Chess)

(ah, my apologies, I just saw that you have the colors defined in the video)

---

<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:** [March 15, 2021, 2:03pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/10 "2021-03-15T14:03:25Z")

</div>

How do you record this video?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 15, 2021, 2:12pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/11 "2021-03-15T14:12:28Z")

</div>

its not mine its posted on youtube i post the link just

but if you need to record or take screen shots from your pc

i am using this software

video capture software

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 15, 2021, 2:19pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/12 "2021-03-15T14:19:50Z")

</div>

> [@Chrisir](#):
>
> How do you record this video?

i do not know why the link not appears and shows just the video

```auto
https://www.youtube.com/watch?v=KbyPfLHch2g

```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 15, 2021, 2:40pm UTC](https://discourse.processing.org/t/chessboard-with-array-pixels/28477/13 "2021-03-15T14:40:05Z")

</div>

> [@Chrisir](#):
>
> How do you record this video?

i am just following the way you are giving the solution to improve my learning ❤ ❤ ❤ ❤ ❤