DEV Community

Cover image for The making of "Simon Draws!"
Alexandru Turcanu
Alexandru Turcanu

Posted on • Updated on

The making of "Simon Draws!"

Introduction

"Simon Draws!" is one of the last projects I've worked on while being a high-school student. This project started out as my submission for this year’s WWDC. Every year Apple creates a Swift Student Challenge (also known as a Scholarship), where students are encouraged to showcase their love of coding and creativity through a 3 minutes playground app.

Idea

This project is a fun game of memory 🧠 combined with drawing ✍️ that integrates on device machine learning to create a personalized experience for each user. Here's the gist of it:

  • First of all, you will have to tell Simon which theme of symbols you prefer.
  • Draw each symbol a couple of times, so that Simon can familiarize and understand your drawing style.
  • Afterward, you will be shown a sequence of symbols and your task is to draw them in the same order as they are presented to you.
  • Play. Repeat. Play 😝

You can checkout a youtube video that showcases the game.

How I built it?

The development has been split up into 3 core parts:

  1. UI & UX
  2. Drawing Canvas
  3. Machine Learning Model

1. UI & UX

The primary UI framework is SwiftUI. Its functional programming and state paradigms made it a breeze to keep track of game states and create "liquid smooth" animations.

Furthermore, to create an immersive experience while playing, I've added sound effects to most of the user interactions using AVFoundation. An example of this is the sound of a pencil scratching a paper while drawing or the "whoosh" transition.


2. Drawing Canvas

Since this is an app that revolves around the user drawing symbols, it meant that the drawing canvas is an essential part of the user interface. Through careful and intentional design, I've made all of the interactions, like picking, playing, and restarting, available via the canvas interface.

Regarding the actual implementation, PencilKit not only enabled the user to make his own sketches, but also create a genuine and natural drawing experience.

3. Machine Learning Model

The ML Model is a drawing classifier that recognizes new drawings based on a K-Nearest Neighbors model (KNN). By using on device machine learning, the model gets updated in real time and creates a personalized experience for each user.

Try it yourself! 🕹

If you feel like trying the game yourself you can find all of the source code and steps to install on Github.

GitHub logo Pondorasti / SimonDraws

"Simon Draws!" is my Swift Student Challenge Submission for WWDC2020 [Accepted!]

SimonDraws

A Swift Playground created by Alexandru Turcanu during May 2020

About

"Simon Draws!" is a game of memory 🧠 combined with drawing ✍️.

By using on-device machine learning Simon can learn in real-time how you draw symbols and create a personalized experience for each user.

You can checkout the youtube video 📺 or download the .playgroundbook file and import it to Swift Playgrounds on iPad.

How to play

First of all, you will have to tell Simon which theme of symbols you prefer and then draw each icon a couple of times, so that Simon can familiarize with your drawing style.

Afterward you will be shown a sequence of icons and your task is to draw them in the same order as they are presented to you.

Play. Repeat. Play 😝

License

"Simon Draws!" is available under the MIT license. See the LICENSE file for more info.




Top comments (0)