Difference between revisions of "Flags with Stars"

From ProgZoo
Jump to navigation Jump to search
Line 24: Line 24:
==Vietnam==
==Vietnam==
<div class=qu data-width="200" data-height="150">
<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
which is the wrong place. We must translate to put it in the
right place.
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
(100,75).
[[Image:flagvietnam.png]]
[[Image:flagvietnam.png]]
<pre class=usr>
<pre class=usr>

Revision as of 14:03, 9 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}`);

Vietnam

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 which is the wrong place. We must translate to put it in the right place. We can use the translate method to move the star to the right location.

The translate call is to the wrong location (50,50) - it should be at (100,75).

Flagvietnam.png

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.translate(50,50);
  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();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  star(ctx);
}

Panama

Flagpanama.png

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
}
function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,160);
  ctx.fillStyle = 'red';
  ctx.fillRect(120,0,120,80);
  ctx.translate(180,120);
  star(ctx);
  ctx.translate(-180,-120);
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,80,120,80);
  ctx.translate(60,40);
  star(ctx);
}

Bosnia and Herzegovina

Flagbhz.png

function drawFlag(ctx)
{
}
function drawFlag(ctx)
{
}

Democratic Republic of Congo (formerly Zaire)

Flagcongo.png

function drawFlag(ctx)
{
}
function drawFlag(ctx)
{
}