Flags with Rectangles

1) Movement in Squares

For each of the first 16 columns the width is 90% of the previous. This pattern is reversed for the remainder. There are 31 columns.

Input

function drawFlag(ctx) { ctx.fillStyle = 'white'; ctx.fillRect(0,0,240,240); ctx.fillStyle = 'black'; for(let y=0;y<12;y++){ for(let x=0;x<31;x++){ if ((x+y)%2==1){ ctx.fillRect(240*x/24,240*y/12,240/24,240/12); } } } }

​x

 

1

function drawFlag(ctx)

2

{

3

  ctx.fillStyle = 'white';

4

  ctx.fillRect(0,0,240,240);

5

  ctx.fillStyle = 'black';

6

  for(let y=0;y<12;y++){

7

    for(let x=0;x<31;x++){

8

       if ((x+y)%2==1){

9

         ctx.fillRect(240*x/24,240*y/12,240/24,240/12);

10

       }

11

    }

12

  }

13

}  

14

​

Go reset

Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,240);
  ctx.fillStyle = 'black';
  for(let y=0;y<12;y++){
    for(let x=0;x<31;x++){
       if ((x+y)%2==1){
         ctx.fillRect(240*x/24,240*y/12,240/24,240/12);
       }
    }
  }
}  

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,240);
  ctx.fillStyle = 'black';
  let a = 0;
  let w = 240/12;
  for(let x=0;x<31;x++){
    for(let y=0;y<12;y++){
       if ((x+y)%2==1){
         ctx.fillRect(a,240*y/12,w,240/12);
       }
    }
    a += w;
    if (x<16){
      w *= 0.9;
    }else{
      w *= 1/0.9;
    }
  }
}