Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2017-03-20T11:00:00+01:00 Jakub Steiner Blender Constraints http://jimmac.musichall.cz/blog/2017-03-20-blender-constraints/ 2017-03-20T11:00:00+01:00 2017-03-20T22:16:17+01:00 Article Author <p>Last time I wrote about <a href="/blog/2017-01-25-artistic-constraints/">artistic constraints</a> being useful to remain focus and be able to push yourself to the max. In the near future I plan to dive into the new contstraint based layout of gtk4, <a href="https://www.bassi.io/tag/gtk/">Emeus</a>. Today I&rsquo;ll briefly touch on another type of constraint, the <a href="http://blender.org">Blender</a> object constraint!</p> <p>So what are they and how are they useful in the context of a GNOME designer? We make quite a few prototypes and one of the things to decide whether a behavior is clear and comprehensible is motion design, particularly transitions. And while we do not use tools directly linked to out stack, it helps to build simple rigs to lower the manual labor required to make sometimes similar motion designs and limit the number of mistakes that can be done. Even simple animations usually consist of many keyframes (defined, non-computed states in time). Defining relationships between objects and createing setups, &ldquo;rigs&rdquo;, is a way to create of a sort of working model of the object we are trying to mock up.</p> <p class='image full'> <img alt='Blender Constraints' src='/blog/2017-03-20-blender-constraints/index/blender-constraints.png'> <small>Blender Constraints</small> </p> <p>Constraints in Blender allow to define certain behaviors of objects in relation to others. Constraints allow you to limit movement of an object to specific ranges (a scrollbar not being able to be dragged outside of its gutter), or to convert certain motion of an object to a different transformation of another (a slider adjusting a horizon of an image, ie. rotating it). </p> <p>The simplest method of defining relation is through a hierarchy. An object can become a parent of another, and thus all children will inherit movements/transforms of a parent. However there are cases — like interactions of a cursor with other objects — where this relationship is only temporary. Again, constraints help here, in particular the <em>copy location</em> constraint. This is because you can define the influence strength of a constraint. Like everything in Blender, this can also be keyframed, so at some point you can follow the cursor and later disengage this tight relationship. Btw if you ever though you can manualy keyframe two animations manually so they do not <em>slide</em>, think again.</p> <p class='image full'> <img alt='Inverse transform in Blender' src='/blog/2017-03-20-blender-constraints/index/blender-constraints.gif'> <small>Inverse transform in Blender</small> </p> <p>The GIF screencasts have been created using Peek, which is <a href="http://flatpak.uploadedlobster.com/peek-stable.flatpakref">available to download</a> as a <a href="http://flatpak.org/apps.html">flatpak</a>.</p> <p class='image full'> <img alt='Peek, a GIF screencasting app.' src='/blog/2017-03-20-blender-constraints/index/peek.png'> <small>Peek, a GIF screencasting app.</small> </p> Artistic Constraints http://jimmac.musichall.cz/blog/2017-01-25-artistic-constraints/ 2017-01-25T11:14:00+01:00 2017-01-25T12:03:58+01:00 Article Author <p>I have moved most of the sharing with the world to the walled gardens of Facebook, Google+ and others because of their convenience, but for an old fart like me it&rsquo;s way more appropriate to do it the old way. So the thing to share today is quite topical. Mark Ferrari (of Lucasarts fame) shares his experience with 8bit art and the creative constraint. There isn&rsquo;t as much gold in what he says as much as the art he shares that he made over the years that flourished in those constraints.</p> <p> <iframe width='100%' height='500' src='https://www.youtube.com/embed/aMcJ1Jvtef0' frameborder='0' allowfullscreen> <a href='https://www.youtube.com/watch?v=aMcJ1Jvtef0'></a>8 Bit Constraints</iframe> </p> <p>Mark is clearly a master in lighting and none of this trickery would have any appeal if he wasn&rsquo;t so great in mixing the secondary lights so well, but check out these <a href="http://effectgames.com/demos/canvascycle/">amazing color cycling demos</a>.</p> <div class="row"> <p class="image 6u"> <img alt="" src="/blog/2017-01-25-artistic-constraints/index/brushes.png"> <small>Actual image I found explaining how I anti-aliased in GIMP. Cca 2002.</small> </p> <p class="image 6u"> <img alt="" src="/blog/2017-01-25-artistic-constraints/index/shuttle.gif"> <small>As far as I ever got with 8bit animation.</small> </p> </div> Year of the Linux Desktop http://jimmac.musichall.cz/blog/2016-05-23-year-of-the-linux-desktop/ 2016-05-23T12:32:00+02:00 2016-06-17T21:07:53+02:00 Article Author <p>As some of you already know, <em>xdg-app</em> project is dead. The Swedish conspiracy members tell me it&rsquo;s a good thing and should turn your attention to project <a href="http://flatpak.org">Flatpak</a>.</p> <p class="row"><a class="12u" href="http://flatpak.org"><img alt="" class="full image" src="/blog/2016-05-23-year-of-the-linux-desktop/index/flatpak.svg"></a></p> <p><a href="http://flatpak.org">Flatpak</a> aims to solve the painful problem of the Linux distribution — the fact that the OS is intertwined with the applications. It is a pain to decouple the two to be able to </p> <ul> <li>Keep a particular version of an app around, regardless of OS updates. Or vice versa, be able to run an uptodate application on an older OS.</li> <li>Allow application authors distribute binaries they built themselves. Binaries they can support and accept useful bug reports for. Binaries they can keep updated.</li> </ul> <p>But enough of the useful info, you can read all about the project on the <a href="http://flatpak.org">new website</a>. Instead, here comes the irrelevant tidbits that I find interesting to share myself. The new website has been built with <a href="https://middlemanapp.com/">Middleman</a>, because that&rsquo;s what I&rsquo;ve been familiar with and worked for me in other projects.</p> <p>It&rsquo;s nice to have a static site that is maintainable and easy to update over time. Using something like <em>Middleman</em> allows to do things like embedding an SVG inside a simple <em>markdown</em> page and animate it with <em>CSS</em>.</p> <pre><code>=partial &quot;graph.svg&quot; :css @keyframes spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(359deg); } } #cog { animation: spin 6s infinite normal linear forwards; } </code></pre> <p>See it <a href="http://flatpak.org/developer.html">in action</a>.</p> <p>The resulting page has the SVG embedded to allow text copy &amp; pasting and page linking, while keeping the SVG as a separate asset allows easy edits in <a href="inkscape.org">Inkscape</a>.</p> <p>What I found really refreshing is seeing so much outside involvement on the website despite ever publicising it. Even during developing the site as my personal project I would get kind pull requests and bug reports on <a href="https://github.com/flatpak/flatpak.github.io">github</a>. Thanks to all the kind souls out there. While not forgetting about future proofing our infrastructure, we should probably not forget the barrier to entry and making use of well established infrastructures like github.</p> <p>Also, there is <a href="http://ftp.acc.umu.se/conspiracy/">no Swedish conspiracy</a>. Oh and Flatpak packages are almost <a href="source/blog/2016-05-24-painful-pathbar-prototype.html.markdown">ready to go for Fedora</a>.</p> Rio http://jimmac.musichall.cz/blog/2016-01-29-rio/ 2016-01-29T12:15:00+01:00 2016-06-17T21:07:53+02:00 Article Author <iframe src="//player.vimeo.com/video/153437205" class="image full" width="500" height="500" frameborder="0"> <a href="http://vimeo.com/153437205">Rio UX Design Hackfest</a> from <a href="http://vimeo.com/jimmacfx">jimmac</a> on <a href="https://vimeo.com">Vimeo</a>. </iframe> <p>I was really pleased to see <a href="https://endlessm.com/">Endless</a>, the little company with big plans, initiate a <a href="https://wiki.gnome.org/Hackfests/UxDesign2016">GNOME Design hackfest in Rio</a>. </p> <p>The ground team in Rio arranged a visit to two locations where we met with the users that Endless is targeting. While not strictly a user testing session, it helped to better understand the context of their product and get a glimpse of the lives in Rocinha, one of the Rio famous <a href="https://en.wikipedia.org/wiki/Favela">favelas</a> or a more remote rural Magé. Probably wouldn&rsquo;t have a chance to visit Brazil that way.</p> <p class="image full"> <img alt="" src="/blog/2016-01-29-rio/index/notes.jpg"> <small>Points of diversion</small> </p> <div class="row"> <div class="9u"> During the workshop at the Endless offices we went through many areas we identified as being problematic in both the stock GNOME and Endless OS and tried to identify if we could converge on and cooperate on a common solution. Currently Endless isn&rsquo;t using the stock GNOME 3 for their devices. We aren&rsquo;t focusing as much on the shell now, as there is a ton of work to be done in the app space, but there are a few areas in the shell we could revisit. </div><img class="image 3u" alt="" src="/images/blog/sponsored-gnome-badge-shadow.png"> </div> <p>GNOME could do a little better in terms of discoverability. We investigated the role of the app picker versus the window switcher in the overview and being able to enter the overview on boot. Some design choices have been explained and our solution was reconsidered to be a good way forward for Endless. Unified system menu, window controls, notifications, lock screen/screen shield have been analyzed.</p> <p>Endless demoed how the GNOME app-provided system search has been used to great effect on their mostly offline devices. Think &ldquo;offline google&rdquo;.</p> <p class="row"> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24353027270/in/album-72157663311410929/" title="DSC02567"><img src="https://farm2.staticflickr.com/1608/24353027270_a04b07b1aa.jpg" alt="DSC02567"></a> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24280844809/in/album-72157663311410929/" title="DSC02589"><img src="https://farm2.staticflickr.com/1586/24280844809_0726a9f34a.jpg" alt="DSC02589"></a> <a data-flickr-embed="true" class="image 4u" href="https://www.flickr.com/photos/jakubsteiner/24622392616/in/album-72157663311410929/" title="DSC02616"><img src="https://farm2.staticflickr.com/1678/24622392616_1e0b77e8ab.jpg" alt="DSC02616"></a> </p> <p>Another noteworthy detail was the use of CRT screens. The new mini devices sport a cinch connection to old PAL/NTSC CRT TVs. Such small resolutions and poor quality brings more constraints on the design to keep things legible. This also has had a nice effect in that Endless has investigated some responsive layout solutions for gtk+ they demoed.</p> <p>I also presented GNOME design team&rsquo;s workflow, and the free software toolchain we use. Did a little demo of Inkscape for icon design and wireframing and Blender motion design. </p> <p>Last but not least, I&rsquo;d like to thank the GNOME Foundation for making it possible for me to fly to Rio.</p> <p><a href="https://www.flickr.com/photos/jakubsteiner/albums/72157663311410929/with/24622419076/" class="button big">Rio Hackfest Photos</a></p> New Cantarell Maintainer http://jimmac.musichall.cz/blog/2015-12-10-new-cantarell-maintainer/ 2015-12-10T23:33:00+01:00 2016-06-17T21:07:53+02:00 Article Author <p>GNOME&rsquo;s default UI typeface Cantarell gained a new maintainer, Nikolaus Waxweiler. Nikolaus was on a holy crusade to improve the state of text rendering on Linux by improving <a href="http://freetype.org/">FreeType</a> and lobbying for changes in different projects. While he continues on those efforts, bug reports hinted (pun intended) that GNOME&rsquo;s font rendered worse as FreeType improved so he went on to investigate why. It turns out that Cantarell had many metric related issues and its development was quite stagnant.</p> <p class="image full"> <img alt="" src="/blog/2015-12-10-new-cantarell-maintainer/index/bluezones.jpg"> <small>Cantarell with properly defined Blue Zones</small> </p> <p>The process of making fonts look good even on our crappy LoDPI screens is commonly called <a href="https://github.com/fontforge/fontforge/wiki/How-TT-Hinting-Works"><code>hinting</code></a> and it requires precision. Cantarell ships as an .otf font or OpenType font with Postscript-flavor. Hinting .otf fonts works differently from hinting common TrueType or .ttf fonts. You define several horizontal snapping zones, also called blue zones, like descender, x-height, capital height, ascender height, etc. so that they match your design. That means that the outlines you are designing must as a general rule be placed precisely within these blue zones or the hinting algorithm will ignore them. Blue zones must be constructed to contain everything they should contain. The idea is that a well designed typeface is consistent and regular enough that coarse blue zones describe the design well. The hinting algorithm of the font design application will then place stem information according to those blue zones, among other considerations. For a final rendering, glyphs are snapped to those horizontal blue zones, meaning they are <em>only</em> snapped on the Y-axis. Think ClearType.</p> <p>Cantarell was full of off-by-ones-or-twos and technical don&rsquo;t-do-thats, diacritics were inconsistent and Cyrillics still need a look-over. The bold face was in an even poorer state. Back in June 2013 Adobe&rsquo;s contributed a new high-quality OpenType/Postscript-flavor hinting engine. The problems were only magnified because the new engine actually takes hinting information seriously and will spit out garbage when the font designer isn&rsquo;t careful.</p> <p>Nikolaus has cleaned up the fonts considerably by fixing the blue zones, outline precision to fall within them and numerous other problems. You might also notice that letters like bdfklh are a bit taller for a more harmonious look. It should display consistently at all sizes now.</p> <p>Oh, by the way: FreeType 2.6.2 brings more user-visible changes. If you are on a rolling-release distribution, you might have noticed them already. If you wish to read up more on those changes, Nikolaus wrote a lengthy article about the changes and future plans on <a href="http://freetype.org">freetype.org</a>.</p> <p>For a Cantarell 0.1.0 release we plan to have all accented glyphs fixed. Nikolaus has finished a first pass at diacritics and is now looking for testers. Anyone who deals with diacritics in his/her language, especially central European people, please get the .otf fonts from the <a href="https://git.gnome.org/browse/cantarell-fonts/tree/otf">git repo</a> and report bugs to the <a href="https://bugzilla.gnome.org/page.cgi?id=browse.html&amp;product=cantarell-fonts">GNOME bug tracker</a>.</p> <p>Do note that Nikolaus didn&rsquo;t just dive into maintainership, but wrote most of this post. My incentives to get him set up a blog and post on Planet GNOME have been fruitless so far.</p> Wallpapers http://jimmac.musichall.cz/blog/2015-10-21-wallpapers/ 2015-10-21T18:27:00+02:00 2016-06-17T21:07:53+02:00 Article Author <p>Part of <a href="http://gnome.org">GNOME</a>&rsquo;s visual identity are the default wallpapers. Ever since GNOME3 was released, regardless of the release version, you can tell a stock GNOME desktop from afar. Unlike what most Linux distributions do, we don&rsquo;t change the wallpaper thematically from release to release and there is a strong focus on <em>continuity</em>.</p> <p class="image full"> <img alt="" src="/blog/2015-10-21-wallpapers/index/adwaita-318.jpg"> <small>Adwaita 3.18 Day</small> </p> <p>While both <a href="https://design.google.com/articles/the-art-behind-android-marshmallows-new-wallpapers/">Android</a> and <a href="https://www.youtube.com/watch?v=hL8BBOwupcI">Windows</a> are going analog, we&rsquo;re not that hipster. If you follow my journal, you probably wouldn&rsquo;t be shocked to hear I mainly use <a href="http://blender.org">Blender</a> to create the wallpapers. In the past <a href="http://inkscape.org">Inkscape</a> took a major part in the execution, but its <a href="https://bugs.launchpad.net/inkscape/+bug/180693">lacking implementation of gradients</a> leads to dramatic <a href="https://en.wikipedia.org/wiki/Colour_banding">color banding</a> in the subtle gradients we need for the wallpapers. I used to tediously compensate for this in <a href="http://gimp.org">GIMP</a>, using noisify filters while working in high bit depth and then reducing color using <a href="https://en.wikipedia.org/wiki/GEGL">GEGL</a>&rsquo;s magical color reduction operation that Hans Peter Jensen wrote a while a back. It allows to chose various dithering algorithms when lowering the bit depth.</p> <p>However thanks to <a href="http://wiki.blender.org/index.php/Dev:2.6/Source/Render/Cycles">Cycles</a>, we get the noise for free :) Actually it&rsquo;s one of the things I spend hours and hours waiting for getting cleaned up with iterations. But it does help with color banding.</p> <p class="image full"> <img type="image/svg+xml" alt="" src="/blog/2015-10-21-wallpapers/index/blender-rendering.jpg"> <small>Blender rendering the night variant of the 3.20 Adwaita wallpaper (work in progress).</small> </p> <p>In my work I have always focused on execution. Many artists spend a great deal of time constructing a solid concept and have everything thought out. But unless the result is well executed, the whole thing falls apart. GNOME Wallpapers are really <em>just stripes and triangles</em>. But it&rsquo;s the detail, the light play, the sharpness, not too much high density information that make it all work.</p> <p>First iterations of the GNOME 3.20 variants are beginning to land in the <a href="https://git.gnome.org/browse/gnome-backgrounds" class="button small">gnome-backgrounds</a> module. Check it out.</p> <p><p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/morning.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/morning-thumb.jpg"></a> <small>Morning</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/day.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/day-thumb.jpg"></a> <small>Day</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/night.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/night-thumb.jpg"></a> <small>Night</small> </p> <p class="image 3u"> <a href="/blog/2015-10-21-wallpapers/index/lock.jpg" data-lightbox="wall"><img alt="" src="/blog/2015-10-21-wallpapers/index/lock-thumb.jpg"></a> <small>Lock Screen</small> </p></p>