Recreate this image using Loops (red squares)

Chrissy101

How would I recreate this image using loops? How would I start it?

Thanks.

TfGuy44

Attempt it yourself first, please. You can at least write the code for a dark square, right? Well it looks like there are smaller, lighter, rotated squares drawn on top of it.

Maybe you could use a looping variable to control the size, rotation, and color of the rectangles?

Chrissy101

how can i rotate things so it will be in the center of each square?

size (500,500);
translate (200, 200);
noStroke();

rectMode(RADIUS); 
fill (#621C1C);
rect(40, 50, 200, 200);  

rectMode(CENTER);
fill (#812323);
 rect(40, 50, 190, 190); 
 
 rectMode(CENTER); 
 fill (#903434);
 rect(40, 50, 180, 180); 
 
  rectMode(CENTER); 
   fill (#A03A3A);
 rect(40, 50, 170, 170); 

TfGuy44

A few things: rectmode(CENTER); is a persistent drawing settiing - that is, you only need to call it once and it'll keep happening for all your rects.

You have a call to translate() in there that almost puts the origin of the coordinate system in the middle of your sketch already! Any calls to rotate() would rotate about the origin.

Here's a working example:

size (500, 500);
background(128);
translate (250, 250);
noStroke();

rectMode(CENTER); 

fill (#621C1C);
rect(0, 0, 200, 200);  
rotate(1);

fill (#812323);
rect(0, 0, 190, 190); 
rotate(1);

fill (#903434);
rect(0, 0, 180, 180); 
rotate(1);

fill (#A03A3A);
rect(0, 0, 170, 170); 
rotate(1);

Do you see a pattern in there that could be better expressed as a loop?

Chrissy101

@TfGuy44 Thanks, I can see that pattern but how do I translate it to a loop, like which section of the code do I look at? Can you explain it as easy as possible.

TfGuy44

There's this crazy concept in programming about DRY code. DRY stands for Don't Repeat Yourself. The idea is that sections of code that do the same thing might all need to be changed in the same way, and it would be a pain to have to change the code in all the places where the same thing happens.

So Don't Repeat Yourself. Write DRY code. DRY stands for Don't Repeat Yourself. DRY means Don't Repeat Yourself. Don't Repeat Yourself. Basically, Don't Repeat Yourself. DRY. DRY. DRY DRY DRY DRY DRY.

DRY!

So if you see this:

int my_fun_variable0;
int my_fun_variable1;
int my_fun_variable2;
int my_fun_variable3;
int my_fun_variable4;
int my_fun_variable5;
int my_fun_variable6;
int my_fun_variable7;
int my_fun_variable8;
int my_fun_variable9;
int my_fun_variable10;
int my_fun_variable11;
int my_fun_variable12;
int my_fun_variable13;
int my_fun_variable14;

You should weep. And then DRY your tears and instead write this:

int[] my_fun_variables = new int[14];

And if you see this:

rect( 10, 10, 10, 10 );
rect( 20, 30, 10, 10 );
rect( 30, 50, 10, 10 );
rect( 40, 70, 10, 10 );
rect( 50, 90, 10, 10 );
rect( 60, 110, 10, 10 );
rect( 70, 130, 10, 10 );

You should weep some more. Then DRY your tears and write this instead:

for( int i = 0; i < 7; i++ ){
  rect( 10 + 10 * i, 10 + 20 * i, 10, 10 );
}

Why DRY? Because later if you actually wanted this:

rect( 10, 10, 20, 20 );
rect( 20, 30, 20, 20 );
rect( 30, 50, 20, 20 );
rect( 40, 70, 20, 20 );
rect( 50, 90, 20, 20 );
rect( 60, 110, 20, 20 );
rect( 70, 130, 20, 20 );

It's much easier to just change this:

for( int i = 0; i < 7; i++ ){
  rect( 10 + 10 * i, 10 + 20 * i, 20, 20 );
}

DRY! Don't Repeat Yourself!

...
int my_not_any_fun_variable1629;
int my_not_any_fun_variable1630;
int my_not_any_fun_variable1631;
...

DRY!

TfGuy44

DRY? DRY!

If you see this:

fill (#621C1C);
rect(0, 0, 200, 200);  
rotate(1);

fill (#812323);
rect(0, 0, 190, 190); 
rotate(1);

fill (#903434);
rect(0, 0, 180, 180); 
rotate(1);

fill (#A03A3A);
rect(0, 0, 170, 170); 
rotate(1);

Weep! DRY! Realize that you are doing these lines of code four time:

fill (<SOME_VALUE>);
rect(<SOME_VALUES>);  
rotate(1);

So right away you can stick it in a loop. A do it four times loop:

for( int i = 0; i < 4; i++ ){ // for four times
  // Do something... Wait, what were we doing?
}

Oh right:

for( int i = 0; i < 4; i++ ){ // for four times
    fill (<SOME_VALUE>);
    rect(<SOME_VALUES>);  
    rotate(1);
}

Of course you don't want SOME_VALUE! The first time the loop happens, you want the value of... UH.. #621C1C... color(92,28,28)... And for SOME_VALUES you want... well, start with the first size.

So start with that:

for( int i = 0; i < 4; i++ ){ // for four times
    fill(color(92,28,28));
    rect(0,0,200,200);  
    rotate(1);
}

Next, how much does it change by? Well the color goes up to color(129,35,35), so you want 37 more red, and 7 each more blue and green?

for( int i = 0; i < 4; i++ ){ // for four times
    fill(color(92+37*i,28+7*i,28+7*i));
    rect(0,0,200,200);  
    rotate(1);
}

And you want the size to go down by... 10? Okay:

for( int i = 0; i < 4; i++ ){ // for four times
    fill(color(92+37*i,28+7*i,28+7*i));
    rect(0,0,200-10*i,200-10*i);  
    rotate(1);
}

And... Now it's in a loop. A very DRY loop.

DRY stands for DON'T REPEAT YOURSELF.

Chrissy101

Thanks so much! I understand looping much more better! Hopefully, the next exercises I get from my prof. wont be hard!

The image is not exactly like the image but I'm happy with it!

TfGuy44

"Match the image" isn't really a fair game anyway. Sometimes you can get lucky with the right values and approach. Sometimes not. Maybe the original image is triangles, or the rotation amount varies, or the transparency of the color changes, or... any number of things. Maybe you can get a closer match it the square shrink more. Maybe with more squares?

Play around with the values/code yourself!

Chrissy101

My prof wants us to match the image, he marks by how close the sketch is to the image. But, I am happy with just understanding how to do it. Since i have a better understanding of loops now.

Chrisir

I think the initial image is a spiral

jeremydouglass

Each step, the square...

1. rotates A degrees/radians
2. gets B% smaller in size/scale
3. gets C lighter in color

This happens over and over. So, can you guess what A, B, and C are by examining the image?

For example, is A 45 degrees, or less, or more? How much? Is B 1, or less than 1, or more? How much?

koogs

the angle and the size are measurable. the colour too, with a graphics package and an eye-dropper tool (and a better image - jpeg compression is lossy and can change colours of individual pixels)

(i think the angle's slightly less than 30 degrees given that the 4th largest square doesn't sit quite parallel to the outer square.)