Homework 2: Right on Target

Short Description:

Develop a javascript program that displays a dartboard.

This assignment is worth 20 points.

Goals

When you finish this homework, you should

Written a multi function javascript program contained in multiple files.
Worked with polar coordinates.
Worked with drawing primitives and attributes of the 2d HTML 5 canvas.

Formal Description

Write a program which will display a dartboard. Please note, some of the measurements have been simplified.

A dartboard consists of six concentric circles. The circles are

Circle Relative Radius Fill Color

1 1 Red

2 2 Green

3 7 Alternate Black and White

4 8 Alternate Red and Green

5 13 Alternate Black and White

6 14 Alternate Red and Green

Circle	Relative Radius	Fill Color
1	1	Red
2	2	Green
3	7	Alternate Black and White
4	8	Alternate Red and Green
5	13	Alternate Black and White
6	14	Alternate Red and Green

The circle is divided into 20 slices, each of equal size. For a dart board centered at the origin, the first slice is centered on the positive x axis. Each slice is labeled with a number. Starting at the positive x axis moving in a counter clockwise direction, the labels are 6, 13, 4, 18, 1, 20, 5, 12, 9, 14, 11, 8, 16, 7, 19, 3, 17, 2, 15, 10. Each label is centered on the slice just outside of the largest circle. When drawing your dartboard, make the labels fit in a circle radius 17.

I grabbed this picture from wikipedia.

Your task is to draw an depiction of the dartboard. Given a canvas, draw the dartboard centered in the canvas, using the smallest dimension to determine the size of the dart board. In a square canvas, the dartboard should come close to filling the entire area. Given a rectangular canvas, the dartboard should be centered, reaching to the sides of the smallest dimension.

You should write a Dartboard() function, which takes a string, the name of a canvas where the dartboard should be drawn, and draws a dartboard on that canvas.

To demonstrate that your program works, draw the dartboard on at least three canvases. One should be 500x500, another should be 400x700 and the third should be 700x400.

It might be helpful to consider the angle A, which is 1/2 of the angle for each slice of the board. The line between 6 and 13 will be at A°, the line between 13 and 4 will be at 3A°. The last line, the line between 10 and 6 will be at 39A°. Remember, we need to move these to the center of the dartboard and make sure everything works with the y axis going the wrong direction.

The following might be helpful.

<canvas id="demo" width="100" height="100" style="border:1px solid #000000;"></canvas>

<script>
"use strict"
let canvas = document.getElementById("demo");
let ctx = canvas.getContext('2d');

let a1 = -Math.PI/4;
let a2 = -3*Math.PI/4;

function Slice(a1, a2, cx, cy, r){
    let x,y;

    ctx.beginPath()

    ctx.arc(cx,cy, r, a1, a2, true);

    x = cx+r*Math.cos(a2);
    y = cy+r*Math.sin(a2);
    ctx.moveTo(x, y);

    ctx.lineTo(cx, cy);

    x = cx+r*Math.cos(a1);
    y = cy+r*Math.sin(a1);
    ctx.lineTo(x,y);

    return;
}

ctx.fillStyle = "red";
Slice(a1, a2, 50, 50, 40);
ctx.fill();

ctx.lineWidth = 2;
Slice(a1, a2, 50, 50, 40);
ctx.stroke();

a1 = -5*Math.PI/4;
a2 = -7*Math.PI/4;

ctx.fillStyle = "green";
Slice(a1, a2, 50, 50, 40);
ctx.fill();

ctx.lineWidth = 2;
Slice(a1, a2, 50, 50, 40);
ctx.stroke();
</script>

Documentation

Please use relative references to your code in the html file. This will allow me to extract the file in my local environment. Remember, you need to document everyone you collaborate with and all of your sources.

Additional Requirements/Comments

Each area should have a visible outline/boarder.
Nearly all javascript should be in a separate file from the main html code.
- You html file should include one function call per canvas.
All functions should be reasonably sized.
I expect you to build your code based on my examples.

Extras

I find that I want to continue to play with simulations/visualizations of this type. Please do so, but only if you have sufficient time, do not enhance this, or any other project at the expense of your other classes.

Submission

When you have finished your assignment, please submit a tar or zip file containing all files needed for this project. Please do not post your project on line until after grades have been assigned.

If you have created any javascript text files that are included in your program, please make sure that the file extension is not .js. Mail clients will reject tar files containing files with a .js extension. Please use the extension .prog.

Submit your tar file as an attachment to a message to dbennett@edinboro.edu. Please include your name, and the fact that this is homework 2 in the title of the message.