Taormina Jazz Festival

Every summer since 2010 my family and I, together with the cultural association Taormina Jazz, have been organizing the Taormina Jazz Festival.

Of the artists presented, some play traditional jazz, while others dedicated their musical research to more experimental forms.
We’ve had David Kikoski, Ed Howard and Nasheet Waits,
Kurt Elling, Charlie Hunter and Derrek Phillips, Kenny Werner, The Bad Plus, and many others.

I curated part of PR and the brand identity of the festival and produced several posters, program booklets and promotional videos.

Procedural Circular Animations

I always found generative art mesmerizing, so I experimented with a few JavaScript rendering libraries to create something of my own.

Click on the images to launch the real-time animations

The first one is created with the impressive rendering library PIXI.js. The other three are drawn with Two.js, which defaults to a SVG output.

Etna – amsynth skin

Etna is a GUI skin I designed for amsynth, or Analog Modelling Synthesizer, a virtual instrument by Nick Dowell for Linux and MacOS.

Here’s a demo video of the two in action.

It was a fun project to work on. Its name and color palette are inspired by the ashes and lava of Mt. Etna, the biggest thing where I come from.

I wanted a flat design with no shadows or gradients, a minimal and bold color palette, and a simple geometric typeface that works well at a small resolution.

To sketch the wireframe I used Inkscape, which was also my tool of choice to create the background plate.

Layout grid
Some people play Tetris. Some people fit GUIs to grids.

Inkscape’s internal SVG to bitmap rendering functions are quite handy, but I suggest to use them only as long as your artwork doesn’t rely on pixel-perfect text. In this case, font rendering wasn’t as crisp as I knew it could be, so I had to try different workflows.
Here’s a comparison of the output of three different SVG renderers I used.

The first one is Inkscape’s internal renderer.
The second one is SVG text processed through Cairo API. Notice how a subtle font hinting produced a clearer text with less antialiasing.
The third frame is SVG rendered by Gecko (Firefox’s browser engine). That’s the result I found most satisfactory.
Actually, a fourth option was conceived, involving GIPM and its advanced control of subpixel hinting, but it would have required to re-create the text layout outside Inkscape. Since it was not going to be easy to maintain or to rescale the artwork to @2x or higher resolutions, I discarded this workflow.

I automated the drawing of the assets for the knobs and sliders thanks to a custom knob generator I wrote using Two.js and dat.gui.

Like the default interface of amsynth, the first version of Etna had only rotary knobs and no sliders, which were added since v1.1.0 for the two ADSR envelopes to allow a better visual shaping. If this were a physical interface I would have taken into consideration the increased precision of knobs versus an equally sized slider, but also how you can move a slider with one finger, while rotating a knob keeps your whole hand busy.

You can download Etna and read how to install it on github.com/TuriSc/amsynth-skin-etna.

Earboard – Web App

Earboard is an ear trainer for musicians whose purpose is to generate note intervals to play along with. Its layout is modeled on the fretboards and standard tuning of stringed instruments like guitar and bass.

See it in action here: Earboard

It’s a responsive JavaScript web app. Source codeearboard

▶ LMO – Motion Graphics

Art direction and animation of a teaser video for an upcoming survey report by the CIPD, which inspired the space observation metaphor.
Animated in After Effects with a lot of custom expressions.

▶ Valuing your Talent – Motion Graphics

Art direction, illustration and animation of the teaser video and engagement media for Valuing your Talent – a collaborative, industry-led movement helping organizations realize the full potential of their workforce through understanding and measuring the impact and contribution of people to business performance.
Motion graphics. Part of a larger series of animated creatives.

vyt-sketches-1

vyt-sketches-2

vyt-materials-1

vyt-materials-2

AXE/Lynx ads

I designed and animated a series of rich media creatives for AXE/Lynx, for digital agency AddictivePixel at BBH, London.
axe-lynx-black-2014

Capswap

This archived content does not reflect my current skills

Design test for Capswap, a color-matching puzzle game where you have to swap caps between adjacent monsters.
It’s just a concept, but I am releasing all art assets for free here under a CC BY 4.0 license, so feel free to put these critters to use.

turi-scandurra-capswap-screenshot turi-scandurra-capswap-tileset


Animation tests: MP4 WebM Vimeo PNG sequence

turi-scandurra-capswap-titleturi-scandurra-capswap-icon

▶ The Making of Oranguerrilla

This archived content does not reflect my current skills

This is the Making Of video for Oranguerrilla, my student film for the Academy of Art University, San Francisco. I really wanted to make this backstage video as it brings together the countless steps I went through to make my film.
Roughly, I spent 1600 hours of work on the project from concept art to the final edit, spread over two and a half years.


Direct link: YouTube Vimeo
Italian version here: [italiano]
Continue reading ▶ The Making of Oranguerrilla