Difference between revisions of "Flags with Stars"

From ProgZoo
Jump to navigation Jump to search
Line 22: Line 22:
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);
</pre>
</pre>
In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.
You can control the position of the star by calling the '''transform''' method of ctx.
==Vietnam==
==Vietnam==
<div class=qu data-width="200" data-height="150">
<div class=qu data-width="200" data-height="150">

Revision as of 18:26, 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}`);

In these exercises you can use a function star which draws a five pointed star on the canvas.

You can control the position of the star by calling the transform method of ctx.

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 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);
}

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();
}

Panama

Flagpanama.png These stars have a radius of 25.

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);
}

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();
}

Bosnia and Herzegovina

Flagbhz.png

The flag of Bosnia and Herzegovina includes 9 white stars. Each star is 38 right and 38 below the previous star.

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='blue';
  ctx.fillRect(0,0,600,304);
  ctx.fillStyle='yellow';
  ctx.moveTo(160,0);
  ctx.lineTo(464,0);
  ctx.lineTo(464,304);
  ctx.fill();
  ctx.fillStyle='white';
  ctx.translate(105,0);
  for(let i=0;i<9;i++){
    star(ctx);
    ctx.translate(38,38);
  }
}

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();
}

Democratic Republic of Congo (formerly Zaire)

  • The large star has a radius of 100
  • The 6 smaller stars have a radius of 10.
  • The background color is rgb: 173,216,230
  • You can use scale to draw smaller stars

The are the points of a star radius 100:

 [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]

Flagcongo.png

function drawFlag(ctx)
{
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(173,216,230)';
  ctx.fillRect(0,0,500,300);
  ctx.fillStyle = 'yellow';
  ctx.translate(250,150);
  star(ctx);
  ctx.translate(-250,-150);
  ctx.translate(50,25);
  ctx.scale(0.1,0.1);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
}

function star(ctx){
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}