Dev Circles 2020 Hackathon: Written Tutorials for Spark AR
This year’s Dev Circles hackathon came with a new angle — it’s not about making something cool and innovative that nobody can understand. It’s about making something cool and innovative that everyone can understand!
It’s often said that the best way to learn is to become the teacher. For this year’s Community Challenge, we invite you to put your own innovative spin on developer education by creating written tutorials that showcase the capabilities of Facebook technologies.
I am a strong proponent of simultaneous teaching and learning. It’s how I got my start in the AR world! The process of making tutorials and helping other creators has really deepened my understanding of how things work in Spark, and I made a lot of great friends along the way.
Prizes
First of all, the prize pool is a whopping $133,000 USD! WHAT?! Of course, it’s broken down into smaller prizes, ranging from $1,500–$10,000 with some Oculus 2s sprinkled on top for the first place winners.
Rules
The written tutorials are capped at 4000 words, and the projects must be posted as open source on GitHub. There’s also a 2 minute video demo requirement, but those are generally only shown in the submissions on the devpost site.
Judging Criteria
As a participant in hackathons, I find myself obsessing over a specific concept and sometimes lose sight of what the thing is actually trying to accomplish. It’s always good to go back and look at the judging criteria, and thankfully the hosts made it very clear for this hackathon.
- Quality of the Tutorial (30%)
Includes creativity and originality of the idea (the tutorial has not have been written before). How helpful is this tutorial to developers and does it provide best practices for Open Source development. - Implementation of Facebook products (30%)
Includes how many Facebook product(s) and feature(s) are used and how well are they implemented in the sample software solution and showcased in the tutorial. - Clarity (20%)
Includes how easy the tutorial is to follow along for the intended audience (beginner or advanced developer). - Relevance (20%)
Includes what’s the usability/impact the tutorial has in helping the intended audience learn the skills to build other projects and address real world problems.
Regional Winners
If any of this sounds exciting to you, then I’m sorry to say you missed the boat! On the up-side, below is a curated collection of submissions from the regional winners. Learn something new, why don’t you?
Note: This hackathon extends to more than just AR, but the focus of this article is purely on the AR submissions.
Intermediate/Advanced
It’s Now Winter — AR Pop-up Card Tutorial Series by Hsing Huang
Hsing wins so many hackathons, so it’s no surprise that his submission won the regional round. His tutorial shows you how to make a digitally augmented popup card. I love that this project incorporates physical crafts!
How to make Smoke in Spark AR by Boris Josz
With this smoke technique, you can turn Dolapo into an incense man! In the process you will learn about delay frames, and create a Super Texture Distortion Shader™ — a faster, better, stronger version of the Spark AR library’s distortion patch. Also available in French!
Creating colliders with Scripting — Spark AR by Ihor Zelinko and Victor Diachenko
Hit-testing is a common technique in a lot of games. If you need to know when one thing intersects another (and you aren’t afraid of scripts), then you’re in the right place!
Shockwave by NithinNS
The Shockwave tutorial shows you how to use the audio analyzer to make a beatboxing game from scratch! You might need a pot of coffee and a day off for this one, but man… what a cool concept!
Manipulating Multiple Scene Objects with Scripts in Spark AR by Tomás Pietravallo
This tutorial gives you a hilarious effect in the end, and teaches quite a few scripting concepts! The findByPath method is my favorite takeaway from this one.
Your Claw Machine by Yue Hu
Make your own head-controlled claw machine! This one has some really nice visual explanations that detail how the game will work.
Rabbit Coder (Spark AR Tutorial) by Harry Banda
Learn how to make a command palette to control a rabbit! This one is script-heavy, but it covers some useful concepts that will help get you into a procedural mindset.
Beginner
Spark AR Promo Card Filter Tutorial by Frida Dwi Iswantoro and Estu Galih Nur Pratiwi
This one is really great for beginners! It shows you how to create a promo card effect, and guides you through the whole process, including publishing. It even has some cute bespoke illustrations!
Spark AR — Audio Visualizer Tutorial by Robbie Carvalho
Robbie shows you how to make a visualizer using the audio analyzer patch. You can do this one over lunch, and it’s also available in French!
Spark AR — Art Series by Martin M. Leon and Joshua P. Cruz
Some cultural centers and museums closed permanently due to the lack of visitors due to the pandemic, so we came up with this tutorial series for educators, museums or cultural centers can take their activities to people’s homes with the creation of filters.
Learn the basics of Spark AR by creating your FanMask filter by Gilchrist Destin Kouam Talla
This tutorial is great if you are just picking up Spark for the first time. It goes through installation, Spark UI concepts, fan mask filter creation, and publishing!
Global Winners
Congrats to Huang Hsing for winning first place for his AR popup card tutorial! Out of the 4 global awards, his was the only Spark AR project.
The tutorial shows you how to make a winter-themed AR popup card — a great project to do together with someone who enjoys crafting more than computers. I love it for the potential for bringing people together in a time when we’re so separated, but also the tutorial site is really nicely laid out, and the contents are very clear and well organized.
It’s Now Winter — AR Pop-up Card Tutorial Series
Watch the announcement video here.
Browse Other Submissions
Of course, not everyone could win a prize, but there are so many other submissions to learn from. Check them out here! There were 44 total entries for Spark AR, which fit very conveniently in this image :)
