Jul 2, 2018
Combining Design & Development with Target Archery
A Creative Mashup of Skill and Interest
I’m a big fan of side projects; they are a great way to cultivate creativity and learn new things. However, successfully completing a side project requires more than passing interest. I’ve found that the best way to learn a new skill is to couple it with a preexisting talent. This cross-pollination leads to both retained knowledge and newfound perspective.
I am a web designer/developer by trade, spending my days pushing pixels and typing code. In my free time I’ve recently taken up target archery. So, when the urge to embark upon a side project struck I decided to find a way to merge my skill in design with my interest in archery. I landed on data visualization.
The Concept
The software company Oracle defines data visualization as, “the presentation of abstract information in graphical form […] to spot patterns, trends, and correlations that otherwise might go unnoticed.”
Archery is rife with measurable data, so it seemed an excellent candidate for a visualization project. I also hoped to improve as an archer by analyzing my shots more closely. Normally I would simply tally my score after each end and make rough estimations of my form by judging the tattered remains of the paper target face, but by intentionally logging and charting my shots I could glean much more precise and useful information.
I decided to design a web app that would log arrows and plot them on a digital target, calculating various statistics like accuracy and precision. By combining my knowledge of design/development with my interest in archery I hoped to gain insight into one while strengthening my skill in the other.
The Metrics
To visualize data one first needs to know what data to visualize. Of the many potential data points to track I narrowed my focus to three key metrics.
1. Average Score
In competitive archery the goal is simple: score the most points. While a contest ultimately boils down to total score, average score is a useful indication of overall accuracy.
2. Average Variation
I define variation as the difference between one shot and the next, or the distance between consecutive shots from each other on the target. Therefore, average variation is a measurement of precision. A tight group of arrows has low variation, indicating high precision, whereas a loose grouping has high variation, or low precision.
3. Group Center
Group center refers to the center point of a group of arrows, or the point equally between all arrows. A high average score coupled with a low average variation points toward a well placed group center, but I wanted to calculate it specifically so I could make informed sight adjustments on my bow.
A Note on Scoring
An archery target is comprised of ten concentric rings of incremental values. The center is worth ten points, the next nine, then eight, etc. If an arrow strikes or just touches the line between rings it is awarded the higher score.
While the metrics of average variation and group center are calculated solely from the center point of each arrow on the target, average score takes into account the thickness of the arrow shaft. This is something I would have to keep in mind when developing the web app.
The Design
Equipped with a well defined concept and key metrics to track it was time to dive into design, starting with sketches.
In a world of touch screens, drawing tablets, and innumerable design applications I still find paper and pencil the fastest, most intuitive way to transfer ideas from my head into reality. Find me a device with fewer distractions, a longer battery life, and more accurate pressure sensitivity and I might be persuaded to switch.
The concept for the web app was simple and I wanted the interface to reflect that. The digital target needed to be the focal point as the defining feature of the design with tables of related statistical information stacked conveniently to the side. I also included a timeline and playback controls below the target to scrub through data once it was logged.
Satisfied with my sketches, I progressed to the computer to produce a mockup the design. I chose a dark color scheme of deep blue hues for the interface to reduce eye strain and selected a monospace font to ensure values in the tables always lined up perfectly. Hours of tweaking and aligning elements later, things were pixel perfect.
The Math
In order to calculate the statistics I was interested in I needed a way to consistently measure the placement of arrows on the target and their relation to each other. In other words: math. Though I was hesitant at first, the sage words of Albert Einstein lent humbling perspective:
Do not worry about your difficulties in mathematics. I can assure you mine are still greater.
Thanks, Al.
Cartesian Coordinates
To record the position of arrows I decided to adopt a coordinate system where the bullseye is the center of the target and each ring is one unit. Imagining x and y axes overlaid on the target, (0, 0) would be dead center, (1, 0) would be one unit right of center, and so on.
Formulas
Before I could start typing a single line of code I needed mathematical formulas that could compute statistics from coordinate pairs. It took some research and a bit of number crunching, but the beauty of code is that I only had to solve the problems once on my own; after that, I could write an algorithm of the formula that would solve it for me perfectly every time.
Score
The first formula I needed was one that could determine the score of an arrow from its coordinate values. Conveniently, score is inversely related to the distance of an arrow from the center of the target; the farther an arrow is from the center the lower its score. To score an arrow I just had to calculate the distance of it from the center of the target. Thankfully, Pythagoras had solved that problem years ago.
The Pythagorean theorem is often expressed as a²+ b² = c² where c is the side opposite the angle of a right triangle and a and b are the other two sides. Imagining a right triangle formed by an arrow and the center of the target as two points, the expression can be used to find the distance between them.
After some slight modifications to accommodate a cartesian plane, this is the formula I used for finding the distance between two sets of coordinates, where d is the distance, x1 and x2 are the x axis coordinates and y1 and y2 are the y axis coordinates.
d = sqrt((x1 - x2)² + (y1 - y2)²)Using this formula, the distance of an arrow at (2, 3) from the center, (0, 0), is 3.6 units.
Again, since the score of an arrow is inversely related to its distance from the center, the score can be determined by subtracting the distance from 10 and rounding the difference up to the next integer. The score for the arrow at (2, 3) would be 10 - 3.6, which, once rounded up to the nearest integer, equals 7, the appropriate score*.
*The calculations in this example ignore the thickness of the arrow shaft in determining score.
Variation
Since variation is the distance between two consecutive arrows on the target, I was able to use the same formula for calculating the distance of an arrow from the center of the target by simply replacing the center coordinates, (0, 0), with the ones of the previously shot arrow.
As demonstrated the in example above, the distance of an arrow at (2, 3) from the center of the target, (0, 0), is 3.6. Using the same formula, a subsequent arrow at (-1, 2) and the prior shot at (2, 3) would have a distance between them, or variation, of 3.2 units.
Group Center
Group center can be thought of as an average of the positions of arrows on the target. Therefore, group center can be determined by finding the average of all x coordinates and the average of all y coordinates and plotting those values together as one coordinate pair.
This is the formula I used for calculating the center point of a collection of coordinate pairs, where c is the center, x1, x2, and so on are the x axis coordinates, y1, y2, and so on are the y axis coordinates and n is the total number of coordinate pairs.
c = (((x1 + x2 + ... + xn) / n), (y1 + y2 + ... + yn) / n)Using the arrows at (2, 3) and (-1, 2) from the previous examples, the group center formula reveals that the location of their midpoint is at (0.5, 2.5).
The Development
With the mockup ready and the formulas written it was finally time to start coding the actual web app. I opened my favorite IDE (Sublime Text) and got to work.
If a web page was a body then HTML would be the skeleton, CSS the skin, and JavaScript the muscles, or maybe the brain. I always start with the skeleton, piecing together the bare-bones structure of the page so I have something to arrange the rest of the anatomy around.
The HTML for this project was simple: a collection of elements to render the target and a stack of tables for displaying information. Once the skeleton was assembled I switched gears to start working on the outward appearance. Thanks to my high-fidelity mockup it was a breeze to write a handful of modular SCSS documents and compile them in the terminal as one, well-organized CSS file.
The JavaScript, however, proved to be more challenging.
Vanilla JS
JavaScript is widely used, even in environments outside web design. Much of its popularity stems from the many libraries built to extend the language and tailor it to specific uses. One of the most commonly used libraries is jQuery, intended to make writing JavaScript for the web easier and have it run consistently across browsers. However, jQuery is massive and modern browsers already do a pretty good job of interpreting JavaScript. For smaller projects that don’t require all of jQuery’s capabilities the library adds unnecessary bulk to a page’s resources. In these cases it is important to be able to write plain JavaScript, or vanilla JS.
My project didn’t need all that the jQuery library offered, so I decided to only use vanilla JS. I also wanted a deeper understanding of JavaScript on its own which would help me know when to use libraries in the future.
One of the first things I noticed when writing plain JavaScript was that it took longer. Much longer. What took a single line in jQuery could easily span several in vanilla JS. For instance, here’s what assigning a class to specific elements looks like in jQuery versus plain JavaScript.
// jQuery
$('div').addClass('active');// JavaScript
var divs = document.getElementsByTagName('DIV');
for (i = 0; i < divs.length; i++) {
divs[i].classList.add('active');
}
jQuery is obviously more concise. Its syntax is simple and easy to read. The plain JavaScript version is longer, but accomplishes the same task without the need to load a library; it takes four lines of code and that’s it. The jQuery version takes one… plus the entire library, which is thousands of lines of code when uncompressed.
For this one page data visualization project jQuery would have been overkill, so I forged ahead with vanilla JS. It took a bit of effort, but after some Googling, lots of debugging, and a little key mashing I had all the variables, functions, and event listeners that I needed.
It was finally time to collect some data.
The Data
All the pieces of my project had come together; I had a working web app that ran in a browser. I was eager to try it with some real data, but before I could grab my bow and loose some arrows I had to iron out the data collection process.
Since all the calculations rely on coordinates I needed an easy way to determine the placement of arrows on the physical target. I didn’t want to hold a ruler up to the target after each end, so I drew a grid right on top of one of my paper target faces.
I also needed to ensure my shots were logged in the correct order for an accurate variation value. I planned to shoot three arrows per end and then log all of them when I retrieved them. To make sure I remembered what order they struck the target I marked each arrow with a certain color near the nock: red, green, and blue. As long as I shot in that sequence I would know what order to log them and my variation calculation would be accurate.
The Results
I shot 30 arrows at an indoor target 18 meters away. These were my results:
Total Score: 243/300
Average Score: 8.2
Average Variation: 3.3
Group Center: (-0.1, -1.3)
Analysis
I had a few stray arrows that hurt my average, but an 8.2 is still a solid B on a ten point grade scale. I’d like to work my way up to an A, but my variation will need to improve. A 3.3 average variation means a possible score deviation of three whole points from shot to shot. My group center was almost perfect along the x axis, but needed to be just a little higher along the y axis.
Overall, I was pleased with the results. My accuracy is pretty good, but I need to tighten up my grouping. I also may need to slightly adjust my sight to raise the group center.
The Wrap-up
From start to finish this project was both challenging and fun. I had the opportunity to be my own client, designer, and end user. The data visualization allowed me to analyze my shots in more detail than ever before with concrete stats and now I have a benchmark to compare against and hopefully track improvement as time passes.
I have made this web app available to use online at targetlog.cfdesigner.com. If you are a fellow target archer test it out and let me know if you find it useful or have ideas to make it better.
My mind is already buzzing with ideas and improvements for version 2.0. I would like to develop a method to track arrows and log their placement on the target automatically in real time. It could be the beginning of a whole new side project…
But for now, thanks for reading.
