The story of a designer conquering mathematics.
I hated maths.
Mathematics was frustrating. When I was young it seemed to be pointless to spend too much time on solving mathematical problems whilst you have so many other things to do!
Actually, I can create beautiful concepts if I know more about maths!
When I was a university student, I took an interactive art class where they taught me how to be a creative artist by writing code with Processing. From one of the examples, I found gorgeous art created by Marius Watz (he is my idol since then).
Warning, this contains an overdose of beautiful amazingness.
As an ambitious university student, I tried my best to replicate the style — without understanding anything that looked scary. Such as sin(blah blah) or cos(blah blah).
To be honest — I was quite proud of my artwork. It looked interesting, saved so much time compared to creating the same design in Illustrator or Photoshop. However, I realised without understanding geometry, there was no chance for me to reach somewhere near to Marius Watz.
Trigonometry had been the worst of the maths in my life. But who cares! If you can create such a cool thing, I’m ready to sell my soul to learn maths.
I started learning mathematics again.
Searching for learning material was shockingly easy. It’s everywhere! If you find someone’s voice is sleepy or the content is hard to understand, there are thousands of alternative options for you to switch. I watched a YouTube channel made by a Korean maths teacher (just because I’m familiar of the scope of the textbook and Korean mathematical norms).
I can’t say it was fun, but it helped me to understand what Marius Watz did. — When he used cosine for x position, and sine for y position.
He was placing a point on a circle!
Instead of using numbers, he used trigonometric variables so he can place a point that follows a circle’s curve!
My first take on mathematics.
Even after I understood basic trigonometry, I wasn’t confident enough to apply it to my design. I decided to just try out anything, even if looks silly and funny. It was on the opposite end in terms of asthetics, as you can see.
Me: LOL. This is so lame. *post it on Framer Facebook group*
(Few minutes later)
Me: What?! People like it?!
(Few hours later)
Me: …People are thinking I’m good at maths. How weird!
This was the first time I realized that sharing something dumb or stupid in your eyes still can make people inspired, make them giggle or smile. That motivated me to create more concepts, and study more fundamental geometry.
Spinner is a great place to apply trigonometry.
If you don’t know what to make after learning trigonometry — make a loading spinner. I used Framer to prototype this.
Creating spinner animations has become my favourite thing to work on. It always feels fancier than a spinning circle, yet it is not complex to build. You just need to think of 3 things.
1. How many points this spinner will have? (i.e: 3 points)
2. On a circle, where each point should be? (i.e: every 120 degrees)
3. In an iteration, how would you like to animate each point? (i.e: In and out, stretch and shrink.)
Only that three steps + basic trigonometry knowledge was all I needed. How simple is that!
After exploring circles, I moved to triangles.
Tools matter when you move on to triangle/star/polygon land. There are some tools where you can just type two points, and it draws a line between them.
In my case, Framer wasn’t one of the tools. Alternatively, I can draw a rectangle and rotate it to a certain degree to make it looks like a line.
Conquering maths feels even better if you achieve it under constraints!
Here I am — polygons!
By this time, I started saying to other people that I love maths. I was learning polygons and making concepts during my Christmas holiday. This the most facinating subject I’ve been studying so far.
Before learning about polygons, they were like cookie cutters to me. I just open up Photoshop, Illustrator or Sketch, then select the polygon shape tool. I may change the numbers from 5 to 12, as if you choose a different cookie cutter from a utensil drawer. That was everything I knew about polygons.
After learning about polygons — I realised that polygons were beautiful structures of triangles. They are waiting for me to evolve them into something else!
Working on arcs
As I mentioned, there are some tools that allows you draw a line from A to B point. Luckily, Processing was that lucky tool! It’s also really easy to draw arcs. It boosted up the creative side of using mathematics.
Even though Processing is a slightly dated language thesedays, the best thing of using Processing is that you can export your drawing as a pdf. This lets you add more details by using other tools, such as Illustrator and Photoshop.
Bonus — Creating my own shapes
Knowing trigonometry, triangles, and polygons means you can draw anything by mixing them together.
Also, you will keep creating funny little fail shots for entertaining yourself.
Oh! There is another bonus comes after learning geometry. I found you can start understanding architecture as well.
Can I use it for work?
If you consider learning something you hated, you’d better to make sure the knowledge is practical enough to apply to your work.
The answer is yes!
In my case (I’m working on designing mobile apps), I was suprised there are many apps using geometry in their UI design! Also, you can easily share your knowledge with developers, because most (all?) programming languages in my field support mathematical expression.
I’m collecting some examples for this case, so please stay tuned for my future posts :)
—
If you’re interested in my small exploration of maths — I’m still studying about it almost every weekend! Especially when I’m little bit drunk, but not too much. You can follow my twitter (@arle13) to check out all the small silly things I’m doing.
Also, you can This story is based on my experience from visiting psychologist when I had a massive slump in design. If you are interested in, please check it out!
https://medium.com/@arle13/the-story-of-a-designer-encountering-psychology-572101827ec2
If you are interested the illustration of this article, you can purchase it in many different format on https://www.redbubble.com/people/arle13/works/30739839-geometric-star. (I’ll drink free coffee!)
