Difference between revisions of "Flags with Repeats"

From ProgZoo
Jump to navigation Jump to search
Line 1: Line 1:
{{flags-snippet}}
{{flags-snippet}}
In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.
We can repeat a statement or block of statements with a for loop. The classic '''for''' loop takes the following form:


You can control the position of the star by calling the '''transform''' method of ctx.
for(let i = 0; i< 10; i++){
    console.log(i);
}


==Vietnam==
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.
<div class=qu data-width="200" data-height="150">
The flag of Vietnam has a yellow five pointed star on a red
background. This star is a popular device on many flags, we define
the star once and use it many times in later flags.


The given star has a radius of 50, it is centred on 0,0
==Bahrain==
which is the wrong place. We must translate to put it in the
<div class=qu data-width="250" data-height="155">
right place.
The flag of Bahrain has a five irregular pentagons on a red background.
We can use the [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate] method to move the star to the right location.


The translate call is to the wrong location (50,50) - it should be at
Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).
(100,75).


[[Image:flagvietnam.png]]
[[Image:flagbahrain.png]]
<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
   ctx.fillStyle = 'red';
   ctx.fillStyle = 'red';
   ctx.translate(50,50);
   ctx.fillRect(0,0,250,155);
   star(ctx);
   for(let i=0;i<5;i++){
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(64,0);
    ctx.lineTo(100,15);
    ctx.lineTo(64,31);
    ctx.lineTo(0,31);
    ctx.fill();
  }
}
}



Revision as of 08:51, 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).

Flagbahrain.png

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

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  star(ctx);
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}