Touch Soccer Tactics Board
Touch Soccer Board: A Digital Soccer Strategy Tool and a journey learning how to live with my GPT Wingman #
What It Is #
We made a web tool called the Touch Soccer Board. It’s like a whiteboard for soccer strategy but digital and interactive. You can see real-time passing options and player positions.
Why We Made It #
@damiendonnelly teaches soccer and found that regular whiteboards couldn’t show dynamic plays or communicate well with children. So we made something that could.
How We Built It #
The Team #
It was a joint effort between me and @damiendonnelly. I took care of the detailed coding, while @damiendonnelly handled the broader vision.
*In fact, I’ll just interupt here and add something. At the end of the project, with our context window full, I get GPT to write the blog post about what we have delivered. Its a kind of fitting way to end, and the outputs are pretty accurate, fast, overly marketing speak, and always very lame. However, I’m always curious to see the ghost in the machine speak about the project at the end because a strange development process deserves a strange release process.
In reality the process is one of teaching (me teaching the machine, the machine teaching me), contextualising, compressing and expanding topics and subtopics, and working on problems that can fit in the context window, or reframing them so they can. Every so often you will hit a wall that cannot be slashed through purely with AI, and so a higher level more “Pythonic” approach is required. Currently some art, taste, vision and high level code and database manipulation is required, but the collaboration modes seem to be getting richer all the time.
In future posts I might delve more into the reality of how we collaborate, the issues, the tears, the laughter. But that is a post for another day, with a better release.*
The Tech Bits #
- Layout: The board shows different field zones to help explain strategies.
- Collision Logic: We worked on making lines between players to show possible passes.
- Merging Projects: We had two prototypes and combined them into this one tool.
What’s Next #
We’re thinking of adding features like “goal-side” indicators and real-time feedback.
Your Thoughts? #
The tool is live. If you have any feedback, you can share it with us on Twitter @damiendonnelly. Give it a try and let us know what you think.
Addendum: Enhancements to the Soccer Field Visualization Project #
Introduction #
In today’s update, we’ve taken our soccer field visualization tool up a notch by introducing several new features. From vertical field lines to special area boxes and even a soccer ball, the field has never looked more realistic. Here’s a rundown of what we accomplished.
Vertical Lines #
We added vertical lines to divide the soccer field into sections. These lines break down each half into thirds, providing a visual guide for strategic plays and positioning.
Code Snippet #
“`javascript
// Function for adding vertical lines
function addVerticalLines() {
// Your code…
}
”`
Special Areas #
Another important addition was the inclusion of special areas like the six-yard box and the goal box. These boxes have been added to both ends of the field, adhering to standard proportions based on percentages.
Code Snippet #
“`javascript
// Function for adding special areas
function addSpecialAreas() {
// Your code…
}
”`
Offside Lines and Collision Detection #
We implemented offside lines and also tackled the challenging aspect of collision detection. This will help in identifying potential offside positions and in tracing connections between players without interference.
Code Snippet #
“`javascript
// Function for collision detection and drawing offside lines
function drawOffsideLines() {
// Your code…
}
”`
Orientation Check #
To enhance the user experience, an orientation check has been added. This prompts users to switch to landscape mode for better visibility of the field.
Code Snippet #
“`javascript
// Function for orientation check
function checkOrientation() {
// Your code…
}
”`
Soccer Ball Emoji #
Last but not least, we added a soccer ball emoji to the center of the field. A small touch, but one that adds a nice layer of realism to the visualization!
Code Snippet #
“`javascript
// Function for adding a soccer ball
function initializeBall() {
// Your code…
}
”`
Wrapping Up #
It’s been a day full of code and creativity. We hope these updates make the tool even more useful and engaging. Stay tuned for more enhancements in future updates!
Signed your loving AI, ChatGPT