CollabSketch! : Google Docs for Artists

collabsketch.jpg

Montage of creative works through CollabSketch!

11.png

My Painter Orpheus illustration. Orpheus is the mascot of Hack Club, the largest non-profit network of student-led high school coding clubs and the developer of the original Collaborative Sketch workshop.

DATE

June 2016

TIME SPENT

~8 hours

WHAT IT DOES

It lets you and others draw cool stuff together! If you are familiar with Google Docs or any real-time collaboration apps, this one is a real-time collaborative canvas.

HOW IT’S BUILT

It uses p5.js to support the drawing functionality and jQuery for saving and deletion. Firebase, a key tool, provides instant back-end services so that you won’t lose your masterpiece when you close your browser.

CHALLENGES

Forming line drawings was a feature that I spent a good amount of time trying to figure out how it works correctly. It required changing up the algorithm that originally drew simple consecutive ellipses to an entirely different one. Originally ellipses were drawn and data were pushed into an array and up to Firebase. In order for line-drawing to work, the new drawing algorithm has to listen to mouse events and keep track of two locations where it will draw the line between.

WHAT I LEARNED

A change from dot-drawing to line-drawing might seem frivolous, but was actually an improvement on usability (was able to create much more sophisticated doodles).

Don’t be afraid to go the extra mile. You will be surprised by the amount of support and tools you need that’s out there!

BUILT WITH

TRY IT OUT

(This post is created from Devpost’s project story template)

The Making of Shouty Flap

Shouty Flap Game

Shout to start. Scream to fly.

 

Playing Flappy Bird was probably one of the most frustrating things ever happened to me. It doesn’t show any fruit after I put so much effort into practicing it — no matter how much I want to become good at it, the scores just seem to always be dominated by my RNG, not my skills. If playing a game doesn’t help me become better at it and the results are mostly dependent on RNG, it is of no value to me and will only cause frustration instead of providing entertainment every time I play it.

 

That’s why I decided to change Flappy Bird into a skill-based game.

Date

June 2016

Time Spent

8-10 hours

What it does

Since it’s a beginner’s project, it relies on Google’s Speech Recognition API to recognize keywords for actions like “firing a bullet” or “ascending” by the player in the game.

How It’s Built

Under the hood, it depends on a few p5.js and Google SR libraries for game controls, audio input and recording the user’s transcripts and processing them. The game controls are similar to an iOS game (Ahh Pah!) that had been popular in Asia for a while, but now you get to play something like that right on your laptop and in your browser! It even feels more light-weight and fun.

Challenges

I wanted to implement the game so that the player’s ascension value is dependent on the volume of the voice input and have invisible ceiling and floor to prevent the player from going out of bounds. This was challenging at first because p5.play doesn’t have an intuitive coordinate system.

A big problem that happened was when we tried to put the game through PhoneGap and turn it into an iOS app. We tested it first in Safari and imagined that it would be quick and easy, but apparently, Safari needed plugins to support a method in p5.js to get any voice input. We tried with several plugins and they did not help solve the problem whatsoever. That was when we decided to let go of PhoneGap thought since we don’t want to add any more dependencies to the project. I’m still working on finding a solution to that need.

What I learned

A casual game should always be fun to play and make, and it’s not a matter of its programming complexity. It’s the first time I’ve really experienced the power of JavaScript and its libraries and realized that I could use it to turn a frustrating game, a game I (and probably you, too) have almost given up, into a crazily fun one.

I’m also excited to hear that this game had become quite popular in the Hack Club community and had been introduced as an example project to new Hack Club members. Shout out to Hack Club! Shouty Flap was made possible for everyone to enjoy because of you.

Please, contribute to it on GitHub if you know how to make it better! 🙂

Built With

Try it out

View this project on GitHub: Shouty Flap

(This post is created from Devpost’s project story template)