New Mouse Glyph for Music Blocks!

Hello, I am Emily Ong, a 2016-17 Google Code-In Participant with Sugar Labs!

Over a week of experimentation with the SVG software, Music Blocks codes and Iconify-Web, I have managed to draft up a little mouse glyph for Music Blocks albeit after much effort. It now replaces the Turtle glyph and the character in the palette.

This is the GCI Task Description:

Create a mouse-glyph – instead of a turtle

Right now, music blocks has a wonderful turtle glyph, but what if it were a mouse? your task is to design a simple, yet iconic mouse as a glyph for Music Blocks and put it into the code.

1. Design an acceptable mouse glyph
2. Put into your own copy of the code (clone from https://github.com/walterbender/musicblocks) You’ll need to modify the inline SVG in js/artwork.js
3. Send a PR to walter of your completed code

Categories: #fun #art #code #design

Estimated Time: 3 days

Task Type: Code; User Interface

Mentors: Hemant Kasat; Devin Ulibarrri; Walter Bender

Music and Mouse

You may be wondering, what is the relation between music and mouse? Well, I investigated and found out that the reason Music Blocks has a mouse is due to a sweet association of classic guitarist, Devin Ulibarri (who is part of the Music Blocks team), with a mouse! Aside from this association and inspiration by Chie Yasuda (Chie thinks Devin is “like a mouse” in his characteristics), the mouse serves to visually distinguish Music Blocks from Turtle Blocks (Music Blocks is a fork of Turtle Blocks software).

As I did this task, I asked myself a personal question: how often have we seen mice scurrying around, going through the sewer and into small holes that have we forgotten that they are bounded in a world surrounded by humans? Do we stop to consider that they may feel pain when falling into a mousetrap?

These thoughts led me to also think, in a similar sense, that perhaps the pace of our modern society is  so fast that we have forgotten music as well. I asked myself: have we forgotten the melodies around us; the beats in our life; the music in our dreams? Music is akin to the mice, trying hard to be free from their imposed captivity, just trying to express itself in a boundless, creative way.

Music and mouse, what are your thoughts?

A little background information…

• SVG: Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.
• Music Blocks: Music Blocks is a collection of manipulative tools for exploring fundamental musical concepts in an integrative and fun way.
• Iconify-Web: A Python version for icons and glyphs to be Sugarized, which means to fill Sugar colors for Sugar icons according to the color palette.

Creating the Mouse

To be honest, it was a pretty exciting journey for me, even despite the amount of effort involved and numerous momentary failures. As a result of the process, I have managed to understand the importance of geometry and simplicity that is the cornerstone of certain types of art.

This was my first draft for the submission, but it seems as if I have used too many geometric shapes and paths for my SVG drawing. In creating this mouse, I have really used too many geometric circles, which makes the mouse really unnatural. Frank Lloyd Wright once said, “Simplicity and repose are the qualities that measure the true value of any work of art.” It made me rethink: how can I achieve an even better result with simpler designs? After all, it was really not about adding so much complexity by using so many shapes, but rather how I could edit the nodes and paths of perhaps, just one or two shapes, in order to create a beautiful mouse.

To be honest, however, this task was really challenging for me, having to adhere the different dimensions and symmetries of art, and it took a long period as well. “Why do I not just give up?”, I thought to myself at certain times. As much as art has brought me to various dimensions of frustration and confusion, it really gave me joy in knowing that the mouse will actually be used as an glyph for Music Blocks. Personally, it was not just the scale of this project, which weighed on my heart, but also the desire of delighting kids around the world with this little mouse.

Challenges

Stroke width

In my initial drafts when I started using the pen tool to draw, the stroke width of my mouse was too thin, which was about 1.0000px, a huge difference with the original stroke width of 3.5000px! Devin recommended a thicker stroke width for this mouse so that the mouse would be able to look simple. I couldn’t agree more. A thicker stroke width indeed allowed the mouse to appear cute and innocent, and add an emphasis on the mouse. As I think about it now, a thicker stroke width is able to display the stroke_colors more effectively, showing a nice and subtle outline of the mouse.

Design

In fact, I actually thought that my mouse would look fine after I simplified the design, but my mentors advised me that the ears of the mouse are not visible enough. So, it was suggested that I add something to make the ears appear to give definition to the ears. For this, I tried adding lines behind the ears!

Alignment

Here, it seems that another problem has appeared – the mouse appears unnatural again, not with the uneven lines, but the alignment of nodes! Notice the slight bulge in between the ears and nose? I started looking up on the Internet, searching for help with regard to aligning nodes (since I am separated by an almost 24 hour time-zone difference with my mentors, it was often difficult to find mutually-agreeable times to chat). In Inkscape, I found the Align and Distribute tool, and also set the paths to nodes, so that I was able to adjust the nodes. Ignacio has also suggested viewing the SVG in grids and guides, so that I was able to get the right dimensions of the mouse. This will give a nice effect of “simplicity” and help point the eye forward – in the direction of the glyph’s movement.

Mouse Evolution

After fixing the problems, the mouse underwent different designs, taking on new looks, especially for her ears. Take a look!

And the final design!

Going Forward

Despite many temporary failed attempts, I remained driven to continue my efforts to design the mouse. I knew that I would definitely be able to do it, and much more so with the guidance of all my mentors, Walter and Devin, who gave me much advice, which eventually brought my initial mouse through a wonderful transformation!

In my final work, I used the draw freehand lines tool to draw out the outline of the mouse and the draw calligraphy or brush strokes tool to draw out the tail. Initially, I found that it was quite hard as I was drawing with the mouse-pad on my laptop, so the lines were pretty crooked and unnatural. But I realized that we were able to set the smoothness of the line using the smooth tool, where I have set the smoothness of the pen to about 70, so this really resolved the problem of shape complexities by avoiding the use of so many shapes!

Iconify-Web

After the SVG was complete, I then had to Sugarize my mouse design, which means to fill the fill and stroke colors of the mouse with Sugar colors. This was done through a Python app, called Iconify-Web, coded by Ignacio, who is one of the mentors of GCI for SugarLabs, and who also guided me through the usage of the app. I thought that it was really cool! Sugarizing the mouse allows it to take on different Sugar colors when we drag out the Start block to create a new mouse. This gave the mouse a Sugar branding and allows users around the world to be delighted with different creative colors! Initially, I was quite perplexed with this, and I thought that the Sugar colors would look really strange on the mouse, I mean – a pink mouse or a green mouse? But it turned out great! To be honest, I think that it is really time to challenge the dimensions of our thinking, and be creative and bold, to try, to experiment and to discover. Who decides that a virtual mouse has to be grey? Or yellow and brown, like in Tom & Jerry?

This really gave me a chance to experiment with SVG codes and also stumble upon great free/libre and open-source software, such as the svgcleaner by RazrFalcon, as introduced by Ignacio, where I was able to quickly clean up my SVG into a line of code, that can be inserted as an inline element in artwork.js in Music Blocks.

Coding in Art

In addition to my main experience with creating the mouse glyph, I was able to return to an even better understanding of the relationship between art and code. In my first personal GCI blog post, I have said “Music = Art = Code”, and that was when I tried on Music Blocks for my very first time, seeing how the different blocks complement each other. But that day, I realized that SVG could instead be manipulated into code. Art can be visualized and created with codes! How amazing is that? It points out a new technological era that we are progressing towards and this is really uplifting to me! I was also taught how I can manipulate the SVG colors after Sugarizing it with Sugar colors, using the Munsell Color System. In colorimetry, the Munsell color system is a color space that specifies colors based on three color dimensions: hue, value (lightness), and chroma (color purity). For the mouse glyph, I have replaced the fill and stroke colors with fill_color and stroke­_color respectively, and that is how we can get different mouse colors every time we drag out a different Start block.

For example, here are the Sugar colors, which would be used to fill up the fill and stroke colors of the mouse. After replacing fill_color and stroke_color, the mouse would take on these different colors whenever it is created!

const FILLCOLORS = ['#ed001d', '#a34600', '#fb5f00', '#6cc600', '#00843c', '#008283', '#007ac9', '#005dff', '#b500e3', '#ec008a'];

const STROKECOLORS = ['#ffada6', '#ffa300', '#ffc000', '#037700', '#00fa8c', '#00f3db', '#00e3ff', '#8dceff', '#f3aeff', '#ff97d5'];

Conclusion

The long journey made me appreciate even more that the mouse is finally completed! It was really great to see the task approved, the Pull Request merged, and the mouse glyphs displayed on the screen in Music Blocks. It gave me a nice sense of achievement and a touch of familiarity whenever I use Music Blocks, and I do hope it brings delight to both kids and adults around the world. I am sincerely thankful for my mentors who helped and guided me along the way.

Right now, I do not have any regrets for taking up this task, despite it being time-consuming, for I have really seen for myself the vast capabilities of technology and art. Frankly, because this task took such a long time, it gave me a greater sense of satisfaction upon completion. It made me reflect on the effort that I have put in, and know that I would be motivated to persevere each time I face an obstacle. Moreover, I believe that in being more acquainted with free/libre and open-source software, art, and coding, this GCI task has stretched me even further in terms of basic coding and art. In its essence, art is simple in its complexity and free in its boundaries – something that I will pay even greater attention to from now on!