The Physical Coding Chamber

Making learning how to code more didatic

Comment 2

Inspiration

We built this web app having in mind that children often have a hard time coding. This way, we can make a social impact to the young people, by "implementing coding" as a fun activity.

What it does

You define the different colors by coding in the editor by assigning them different actions. Then you draw, on a piece of paper squares in the order that you want the actions to be executed. Then, you take a photo of that piece of paper and see the red square move left or right depending on what you drew!

How I built it

PCC was built using OpenCV which is backed by a GoLang Gin server, and HTML, CSS, Javascript for the frontend UI. To detect colors, I used OpenCV's "inRange" function which allows me to build masks for certain HSV color ranges. I was able to then find contours from the masks and create rectangle coordinates based on the location in the image. The server handles all image processing, while the frontend consumes the API and displays result in a neat manner.

Challenges I ran into

The biggest challenge we ran into was perfecting the image processing engine. OpenCV is very strict with its algorithms. This is why you often have to fine-tune the values to match your application.

Accomplishments that I'm proud of

That we are able to amaze and make kids excited about coding overall! We achieved to make a platform to be able to learn in a really fun way, not just by staring at your screen but also using your creativity in a fun way! the perfect combination of work and play!

What I learned

The biggest thing we learned was being able to use OpenCV to fit our needs. At first, it was difficult for us to properly get the library working. However, with practice and reading documentation, we were able to complete the project while matching our needs!

What's next for The Physical Coding Chamber

To be able to implement different types of games for this type of input like a snake game or a maze, make it so it recognises different shapes! And make the algorithm work locally.

Share this project:

Updates