Difference between revisions of "Flags with Repeats"

From ProgZoo
Jump to navigation Jump to search
Line 14: Line 14:
Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).
Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).


[[Image:flagbahrain.png]]
[[Image:flagbahrain.png|left|frame|Flag of Bahrain]]
<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
Line 62: Line 62:


The need for a loop becomes even more obvious for this flag.
The need for a loop becomes even more obvious for this flag.
[[Image:flagqatar.png]]
[[Image:flagqatar.png|left|frame|Flag of Qatar]]
<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)

Revision as of 09:01, 10 August 2021

<div style='background:silver;padding:5px'>
<canvas id='usr' width=--snippet-w-- height=--snippet-h--></canvas>
<canvas id='ans' width=--snippet-w-- height=--snippet-h-- style='display:none'></canvas>
</div>
--snippet-usr--
drawFlag(document.getElementById('usr').getContext('2d'));
(()=>{
  --snippet-ans--
  drawFlag(document.getElementById('ans').getContext('2d'));
})();
let [a,b] = ['usr','ans']
    .map(id=>document.getElementById(id))
    .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height))
let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length;
let fb = document.createElement('div');
fb.innerText = `Score: ${diff.toFixed(1)}`;
document.body.appendChild(fb);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);

We can repeat a statement or block of statements with a for loop. The classic for loop takes the following form:

for(let i = 0; i< 10; i++){
   console.log(i);
}

The body of the loop runs 10 times, control variable i takes every value 0,1,2..9 in turn. We can use the value of i inside the loop if required.

Bahrain

The flag of Bahrain has a five irregular pentagons on a red background.

Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).

Flag of Bahrain
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,250,155);
  for(let i=0;i<3;i++){
    ctx.fillStyle='white';
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(64,0);
    ctx.lineTo(100,15);
    ctx.lineTo(64,31);
    ctx.lineTo(0,31);
    ctx.fill();
    ctx.translate(0,31);
  }
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,250,155);
  for(let i=0;i<5;i++){
    ctx.fillStyle='white';
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(64,0);
    ctx.lineTo(100,15);
    ctx.lineTo(64,31);
    ctx.lineTo(0,31);
    ctx.fill();
    ctx.translate(0,31);
  }
}

Qatar

Consider the neighbouring state Qatar.

9 pillars, each pillar is 17 pixels below the previous. The five coordinates of the top pillar are (0,0) (84,0) (125,9) (84,17), (0,17) rgb(128,0,0) is a less jaunty red.

The need for a loop becomes even more obvious for this flag.

Flag of Qatar
function drawFlag(ctx)
{
}
function drawFlag(ctx)
{
}