Jakub Steiner Designer. Camera Pilot. http://jimmac.musichall.cz/blog 2017-01-25T11:14:00+01:00 Jakub Steiner 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> SVG animation http://jimmac.musichall.cz/blog/2015-10-13-svg-animation/ 2015-10-13T13:27:00+02:00 2016-06-17T21:07:53+02:00 Article Author <p>I haven&rsquo;t written a post in quite a while, so I decided to document my failure to come up with a viable alternative to the translatable animations we use in <a href="https://help.gnome.org/users/gnome-help/3.18/getting-started.html.en">Getting Started</a> documentation. So let&rsquo;s start with what&rsquo;s wrong with it. Despite being far more maintainable than a screencast, it&rsquo;s still a major hassle to keep the videos in sync with the developing designs. Every translation requires a re-render of all the frames and it quickly grows into gigabytes per language.</p> <p class="image full"> <video controls class="image full"> <source src="/blog/2015-10-13-svg-animation/index/gnome-windows-and-workspaces.webm" type="video/webm"> <a href="/blog/2015-10-13-svg-animation/index/gnome-windows-and-workspaces.webm">Czech version of one of the Getting Started videos</a> </video> <small>Czech version of one of the Getting Started videos</small> </p> <p>If you&rsquo;re interested in seeing how these were produced, see the <a href="https://help.gnome.org/users/gnome-help/3.18/getting-started.html.en">Behind the Scenes of getting Started</a> video.</p> <p>The animations themselves aren&rsquo;t super complex. Basic transforms (translation, scale and rotation) and opacity is all that&rsquo;s needed. And because we are using translatable SVGs in Mallard, it was time to look into SVG animation. There are numerous options available to animate in SVG, which already gave me a hint that none of them will work properly for my use case. I hate being right. </p> <h1>SMIL</h1> <p>I&rsquo;ll starts with the one I like least. The inline garbage approach. SMIL. Each attribute of an SVG element is animateable. Creating a global sequence using this by hand is close to impossible. Its capabilities do include a few extras like animating an object <em>along a path</em>, but in general I cannot imagine editing this by hand. Incorporating Inkscape into the workflow seemed feasible first. Inkscape will not touch the XML it doesn&rsquo;t know about. It will not clean out any of the animation stuff when you save. The xlink namespace definition to animate along path seems to have worked, but I can&rsquo;t figure out some weird offsets. Groups usually get some matrix transforms as soon as you reposition them. It all may boil down to Inkscape using its own coordinate system, I don&rsquo;t know. I haven&rsquo;t succeeded to bolt some animation on the Inkscape generated SVG.</p> <p class="image full"> <img src="/blog/2015-10-13-svg-animation/index/smil.svg"> <small>About as complex of a SMIL animation as I can produce :)</small> </p> <h1>CSS</h1> <p>A much more appealing was the concept of using CSS animation. We do a lot of transitions and some animation in gtk+, so it would have been great to reuse the same technology here. While CSS transitions are spot on, animation with a sense of a global timeline is not really the use case for the web. Usually animation in the intended context is an individual transform happening after an event triggered. Creating a sequence of various objects animating in a global timeline is pretty awkward. Especially if you want to loop the whole animation infinitely. The only tools for your disposal is either a time offset or relative time keyframes, keeping all objects&rsquo; animation the same length.</p> <p class="image full"> <img src="/blog/2015-10-13-svg-animation/index/inline-css.svg"> <small>CSS Based animation of a #cursor1 with a JS playback reset button that doesn&rsquo;t work. ;)</small> </p> <p>I also ran into Firefox and Webkit interpreting <code>transform-origin</code> differently.</p> <pre><code>.run-animation { transform-origin: top left; animation: cursor-move 2s ease 1s forwards, fade-in 1s linear 0s, cursor-click .25s ease 3s alternate 2; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cursor-move { from { opacity: 1; } to { opacity: 1; transform: translate(100px,-100px);} } @keyframes cursor-click { from { transform: translate(100px,-100px) scale(1); } to { transform: translate(100px,-100px) scale(.5); } } </code></pre> <p>The above CSS uses <code>animation-delay</code>. It might be possible to have all keyframes last the same time and use the keyframes relative keyframing for timing (duplicate same keyframe to &ldquo;hold&rdquo;). I can&rsquo;t imagine retiming or generally modify an existing animation hand constructed using CSS&rsquo; keyframes though. A visual tool with a timeline would be necessary. </p> <h1>Javascript</h1> <p>There are many js based frameworks to aid creating and animating SVG documents in realtime, but none of them seem to aid me in creating a global complex animation using assets created in Inkscape. I looked at Google Webdesigner next.</p> <ul> <li><a href="http://julian.com/research/velocity/">http://julian.com/research/velocity/</a></li> <li><a href="http://snapsvg.io/">http://snapsvg.io/</a></li> <li><a href="http://raphaeljs.com/">http://raphaeljs.com/</a></li> </ul> <h1>Google Webdesigner</h1> <p><a href="https://www.google.com/webdesigner/">Google Webdesigner</a> has all the necessary visual tools like property keyframing and a global timeline. Sadly it produces a rather less self contained set of html, js and css files. I didn&rsquo;t figure out a way how that could be brought into Mallard.</p> <iframe class="image full" height=600 src="/blog/2015-10-13-svg-animation/index/index.html"></iframe> <p>In the end, even though the animations don&rsquo;t seem to be that complex, maintaining them by hand doesn&rsquo;t seem very doable. A visual editor is required. If Google Webdesigner can be taught to produce a standalone SVG or Mallard taught to use iframes, I&rsquo;m all ear. Any pointers to a similar tool is also welcome.</p>