# Draw black and white diamonds

**URL:** <https://discourse.processing.org/t/draw-black-and-white-diamonds/4528>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 16, 2018, 6:52am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528 "2018-10-16T06:52:56Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 16, 2018, 6:52am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/1 "2018-10-16T06:52:56Z")

</div>

“In this section you should write a Processing program that creates a display window of 500 by 500 pixels,  
then uses a proper control structure to create a collection of many small black and white diamonds with  
the indicated dimensions in pixels.”

someone please help, Im not even close. I know I have to use nested loops but I just cant get it.  
I need to make this in a window.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a0552b7f52a105bb76184d11093cad1b110ed0aa.jpeg)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 7:02am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/2 "2018-10-16T07:02:48Z")

</div>

Nevermind, that thread has gone…

---

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 16, 2018, 3:58pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/3 "2018-10-16T15:58:32Z")

</div>

that page does not exist when i click the link

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 4:29pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/4 "2018-10-16T16:29:02Z")

</div>

As I was saying…

The code needed to do this is not hard. It’s only 10 lines line.

The first line is a call to `size()`.  
The second line calculates a value.  
The third line is an appropriate call to `translate()`.  
The fourth line is an appropriate call to `rotate()`.  
Lines 5 and 6 setup two `for` loops, with appropriate bounds.  
Line 7 sets the `fill()` color appropriately.  
Line 8 draws a rectangle with a call to `rect()`.  
Lines 9 and 10 close the two `for` loops.

So basically the code will take this shape:

```auto
size( ???, ??? );
??? d = ??? * sqrt( ??? );
translate( ??? / ???, 0 );
rotate( ??? / ??? );
for( ??? i = ???; i < ???; ??? ){
  for( ??? j = ???; j < ???; ??? ){
    fill( ( ??? + ??? % ??? == ??? ) ? ( ??? ) : ( ??? ) );
    rect( ???, ???, ???, d );
  }
}

```

---

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 16, 2018, 5:24pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/5 "2018-10-16T17:24:35Z")

</div>

So what would be in place of the question marks if I wanted to make it in a 500x500 window with the size of the rects to be 10x10?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 5:36pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/6 "2018-10-16T17:36:21Z")

</div>

Well, that’s for you to work out, isn’t it?

If you want the window size to be 500 by 500, then it’s immediately obvious what the first two sets of question marks should be… because they are the parameters to `size()`, which sets the window size. And you want a size of 500 by 500.

… Are you sure the rectangles you want to draw are 10 by 10 pixels? Try drawing a diagram of one of them on paper. How long is one side of a rectangle? How might you actually calculate that value?

What you have is way more than enough help. Please at least try to do your own homework now. So far you have shown us NO effort.

---

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 16, 2018, 8:23pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/7 "2018-10-16T20:23:02Z")

</div>

First of all, your code was incorrect as i have found the answer. Secondly, you were no help whatsoever and i spent hours trying to solve this problem. You arent even qualified to answer this simple question.

```auto
void setup ()
{
  size(500,500);
}

void draw() {
  
  
  int centerY =0;
  int centerX =250;
  for(int i = 0; i <=25; i++){
    for(int j = 0; j< i; j ++){
      int startX = centerX;
      if((i%2) ==0){
        startX +=10;
        fill(255);
        
      }else{
        fill(0);
      }
      
      drawQuad(startX - ((i/2) *20) + ( j* 20), centerY+(i*10));
    }
  }
}
void drawQuad(int x, int y){
  quad(x-10,y,x,y-10,x+10,y,x,y+10);
}

```

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [October 16, 2018, 9:44pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/8 "2018-10-16T21:44:31Z")

</div>

TfGuy44 is more than capable of doing your homework. But that is not in his interest. This forum is not for doing peoples homework. You are not going to learn to code if you you just copy and paste TfGuy44s work. So in order to make sure that people actually learn to code and get _help_ with their homework is to require some effort from the person who ask the question

You had not shown any code. So no one could know that you had done any work. I am not saying you are not putting in any effort, but you have to show what you have tried.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 16, 2018, 10:04pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/9 "2018-10-16T22:04:09Z")

</div>

Indeed, my interest is in finding interesting problems and then solving them. Your problem was easily solved, and I didn’t feel like posting the code because it was clearly a homework assignment and the forums frown on that sort of thing. The hints I tried to provide were an effort to get you to do it yourself while still leading you in a direction towards a solution.

That said, now that you have posted your own code that demonstrates how to do it, I am free to post my own version that also does it:

```auto
size( 500, 500 );
float d = 10 * sqrt( 2 );
translate( width / 2.0, 0 );
rotate( HALF_PI / 2.0 );
for( int i = 0; i < 25; i++ ){
  for( int j = 0; j < 25-i; j++ ){
    fill( ( (j + i) % 2 == 0 ) ? ( 0 ) : ( 255 ) );
    rect( i*d, j*d, d, d );
  }
}

```

As you see, it is 10 lines long and follows the general shape described above. Even though it is short, it is packed-full of useful tricks. In addition to demonstrating the use of `translate()` and `rotate()`, it also makes use of the `?:` operator, which is handy shorthand to know. I also highly suggest you reconsider your attitude.

---

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 17, 2018, 12:51am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/10 "2018-10-17T00:51:14Z")

</div>

I think you have to understand that I am in first year general engineering which makes me extremely busy. Our prof barely teaches us anything and then expects us to be able to do these assignments with little knowledge on the topic. For example, we haven’t learned the rotate() and translate() functions yet and I simply do not have time to watch videos or read up on them. As much as I enjoy the satisfaction of programming, I will never take a computing course again because I do not want to go into software/electrical engineering. Hence, I don’t need people to get mad at me when I ask for direct answers, I simply do not have the time to complete partial answers.

---

<div class="post-metadata">

**Author:** ![engg23369](https://avatars.discourse-cdn.com/v4/letter/e/e495f1/32.png) [@engg23369](https://discourse.processing.org/u/engg23369)\
**Post date:** [October 17, 2018, 12:52am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/11 "2018-10-17T00:52:22Z")

</div>

If i had time i would love to spend hours on it

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [October 17, 2018, 4:13am UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/12 "2018-10-17T04:13:52Z")

</div>

> [@engg23369](#):
>
> I think you have to understand that I am in first year general engineering which makes me extremely busy. Our prof barely teaches us anything and then expects us to be able to do these assignments with little knowledge on the topic. For example, we haven’t learned the rotate() and translate() functions yet and I simply do not have time to watch videos or read up on them.

@engg23369 We all understand the struggles of being a student, so you could have told us more about what you have or have not learned yet in your original post. There is no need to be rude when someone is trying to help you in the learning process to help you get to the solution, which is what the forum is all about. But you have to show us your effort.

---

<div class="post-metadata">

**Author:** ![Mmahtab10](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Mmahtab10](https://discourse.processing.org/u/Mmahtab10)\
**Post date:** [October 15, 2019, 4:21pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/13 "2019-10-15T16:21:21Z")

</div>

Hi Alex. I am also a first-year engg student at U of C. I was stuck in a similar problem as you, and I was hoping if you could help me solve the problem. I am facing similar challenges as you; prof never teaches this stuff, TA’s are useless and no help online. Id highly appreciate it if you could help with this problem.

 ![17%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c496ee75c694c790558cc84c67b6f1b5bb5ea25d.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 15, 2019, 8:07pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/14 "2019-10-15T20:07:42Z")

</div>

Hello,

This is very achievable and an excellent exercise:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ab823b4b845149ae53755b6282c6596b82775750.png)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1e7c5c4d6c6a53f045afce07cb72c07f345c378e.png)

The diagonal took a bit of thinking!

🙂

References to get you started:

> **[Tutorials](https://processing.org/tutorials/)**
>
> Links to videos that cover the Processing basics.

[https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)

> **[rect() / Reference](https://processing.org/reference/rect_.html)**
>
> Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets th…

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

[![](https://img.youtube.com/vi/h4ApLHe8tbk/maxresdefault.jpg "6.3: For Loop - Processing Tutorial") ](https://www.youtube.com/watch?v=h4ApLHe8tbk)

[![](https://img.youtube.com/vi/H7frvcAHXps/hqdefault.jpg "6.6: Nested Loops - Processing Tutorial") ](https://www.youtube.com/watch?v=H7frvcAHXps)

Note:  
I did not use rotate() or translate() in my code.  
You know the size of the cube and can increment x and y in nested loops appropriately to place them at the x and y coordinates on the screen.  
The modulo operator is also useful if you understand how to use it; I used counters inside my loop instead.

🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 16, 2019, 3:30pm UTC](https://discourse.processing.org/t/draw-black-and-white-diamonds/4528/15 "2019-10-16T15:30:25Z")

</div>

> [@Mmahtab10](#):
>
> I am also a first-year engg student at U of C. I was stuck in a similar problem as you, and I was hoping if you could help me solve the problem. I am facing similar challenges as you; prof never teaches this stuff, TA’s are useless and no help online. Id highly appreciate it if you could help with this problem.

We all face challenges in life and we must overcome them with dignity.  
Your comments about the instructors and TA’s were personal and not necessary.

You have the challenge of learning to program and if you persevere and work at it you will be successful.

🙂