My First Web App

When I was studying the last section of the module ‘Introducing JavaScript Objects’ and was reading for the first time about <canvas>, ideas started to take shape in my mind and before even finishing the whole section I decided to develop the one that I consider my first web app. I am in debt with @chrisdavidmills and the whole MDN staff because it’s thanks to you and your amazing content that I was able to achieve it (I feel very proud at the moment :smile: ).

The app allows you to draw weird shapes every time you click/tap over the canvas (screen), also it comes with a menu (to show it, you need to click the ‘sliders’ button at the top right corner) to change a few shape’s properties. It’s suitable for mobile and desktop devices.

And here it’s the link, in case someone wants to play with it: Weird Shapes. As well as the github repository. Any kind of feedback is appreciated.

Thank you so much to everyone, and let’s keep learning :blush:

6 Likes

Another brilliant fun demo :wink:

This really is the way to keep learning — think of new fun things to try implementing, and then figure out how to do them.

I really love drawing demos. This one reminds me a bit of my “Violent theremin” demo :wink:

It really means a lot to me to know that the course has helped you so much. Keep rocking it!

http://mdn.github.io/violent-theremin/

1 Like

Woooah, super amazing!! It doesn’t just draw random circles, it’s more like a complete theremin plus visual fun; like theremins that are displayed/used in museums for little ones (or not so little).

I’ve had some ideas to improve my demo (term changed, thanks :sweat_smile: ), for example generating weird shapes paths (like yours but only if ‘click’ is kept instead of just hovering around). And I had a vague idea, similar to your theremin sounds generator: demo could have two stages, one to generate the random shapes, and another one to use those shapes already drawn to generate sound depending on the color the user is clicking. But those are still only ideas for a future upgrade.

Thank you so much chris for your kind words and let’s keep learning!! :grin:

That is what I was hoping for. Although originally it was a lot noisier and horrible sounding. I got told to tone down the noise a bit :wink:

I am happy to call it an app if you think it’s finished. I always refer to my stuff as demos because I never feel they are finished :slight_smile:

Your upgrades sound really interesting — you could set the color and use its value to affect the pitch, volume, etc. Or vice versa.

Curious, I found it too low :rofl:. Maybe a way to change volume settings would be helpful.

It’s alright, I like it called ‘demo’. First I thought it was close to be finished and ‘forget’ about it, but after a couple of days I realised that it was far from being complete.

Yes, exactly! and of course find a way to smooth the change of tone when there’s a transition of color (that will be a challenge). I love that feature from your demo: the natural transition of sound, not chaotic at all.

That’s delightful! Thanks for sharing your creation with us!

Sheppy

Thank you!, for taking your time to check it and for your motivating words :grin:.