SHUFFLR

A minimalist music player hand coded in vanilla HTML, CSS and JS. I wanted to play around with designing a neumorphic style UI and also to challenge myself with coding something from scratch. This simple music player is a result.

Note: doesn’t work on mobile

RECREATING THE SQUIRCLE

I couldn’t find a vector template for Apple’s icons and after some time I also failed to recreate it with my design software. You see, Apple’s iOS icons are not simply rounded rectangles. They have these beautiful mathematical curves that slowly transition into a rounded edge. As opposed to the abrupt transition seen in rounded rectangles. Mark Stanton at HackerNews has a great article on what that shape is and why it’s so important.

Apple’s icons are more closely associated with a Squircle. A curved shape between a square and a circle. And more generally a squircle is a superellipse. Discovering this, I decided to see if I could recreate the Apple icon in code.

I was able to find a formula that I understood enough to recreate in code that gave me an x & y coordinate. The heart of the code is made up of these two lines. Where t is the step, a and b are the radius and n is the curve.

x = Math.pow( Math.abs( Math.cos( t ) ), 2 / n ) * a * Math.sign( Math.cos( t ) );

y = Math.pow( Math.abs( Math.sin( t ) ), 2 / n ) * b * Math.sign( Math.sin( t ) );

This was placed in a <canvas> element, wrapped in a for loop to draw a line to each point and filled in. But there was some debate on whether a curve of 4.5 or 5 was a closer match to Apple’s icon. I created a simple input slider to quickly compare different curvature.

I was proud of the results (a softer rounded rectangle), but you can see in the zoomed image of the curve that the superellipse formula I used still isn’t quite right. The search continues.

DIGITAL HAND PAINTING

Wanted to teach myself how to digitally illustrate natural materials in the low-poly game art style. This is a progression of my work during my first session of experiments. The style is characterized by rough painterly brush strokes, strong edge highlights, subtle shadows, and and emphasis on chips or cracks to break up the perfect polygonal edges.

RAMBO VECTOR ILLUSTRATION

Wanted to attempt a heavily-geometric styled illustration. Why Rambo you ask? I say Why not?

I was surprised at how easy illustrating with basic shapes was. It’s kind of like kit-bashing, throwing a bunch of random shapes together to create a different larger whole. The difficulty was trying to make it reminiscent of The Italian Stallion. Stallone has some unique features that I had to incorporate using only solid geometric shapes. Long curly hair, long square jawline, small down-angled eyes, and a lip curvature that angles up towards his eyes. This was a fun project.