Korean(mother tongue), English, and Mathematics. Once again.
It was at a sudden meeting that I heard keywords of my school days, familiar like the name of my old friend.
I don’t remember the details, but the context in which the word was mentioned is it requires a knowledge of motions for good interaction design, and in the end, the ‘Korean(mother tongue), English, and Mathematics’ is the fundamental things, which had to be learned hard in the past.
At first, it’s okay
As an interaction designer, the mathematical thinking was rarely needed. It was not product level development, it was just merely reproducing motions, and it was not that complex.
Over time, however, things have become deeper and wider, and the motions to reproduce have become increasingly complex. Most of all, I was attracted by the attraction of interaction design, and I wanted to realize more and more complex interactions.
Where do I start
At that time, what caught my eyes was the interactions of iOS Chrome Browser’s pull to something. I wanted to try it out because I liked its gooey motions.
It was able to implement simply with about 20 lines of codes made with Framer, which was slightly stretched in the pulling direction.
But when I made it, I was slightly dissatisfied, and I even thought, ‘I can do some more!’ I wanted to make a piece of glutinous rice cake more like a water drop. The water drop was stretched and split into two pieces, which seemed to require a more complicated method to implement the shape.
The ‘Google God’ help was really needed.
English, the language of love and hate
I searched in Korean. I threw a combination of keywords into the search box, such as ‘물방울 자바스크립트(water drop javascript)’ and ‘액체 효과 자바스크립트(fluid effect javascript)’. The results were not satisfied as I hoped, and I was just drowning in the sea of information.
English was the key? I changed keywords into English and threw it. ‘Blob effect javascript’ Oh my god, I found exactly what I wanted from the first item in the search results, and I was able to follow a more detailed technique by following the trackback from the document.
To smoothly blend together the two layers when they overlap, give the parent layer a strong contrast and give the child layers an appropriate blur.
However, it is best to use black and white as it has the most dramatic effect when the brightness contrast between parent and child layers is certain.
To color a child layer, create a top-level layer of the desired color, add ‘mixBlendMode: screen’ to the existing parent layer, and then subordinate to the top layer.
Here’s one more person who gave up on math
I liked the computer since I was a child. Computer games were great, but I liked everything about computers, how they work, how they work with peripheral devices, and so on.
Of course, I thought that the field of study would be computer related. But at the crossroads of liberal arts and science I chose liberal arts. The barriers of mathematics were too high to be with computers. Rather than having a special meaning in liberal arts, I cowardly flee from mathematics and hid in liberal arts.
A previous conviction continued even after graduation and most of the time. When implementing interactions, the layers were pasted as a priority without calculating the motion in advance, and the numerical values were added or subtracted a little later.
I didn’t have a problem with it, but as I suddenly smelled autumn in the middle of the summer, I had a pity I did not know.
A regrettable moment
It was when I was indulging in interaction design, not for work, as I always did. I was greedy for the touch-feedback ripple effect in the material design and wanted to give the pixel a living retro feel by slightly modifying the effect.
It seemed to be able to give a similar feeling by spreading several small layers on a grid, making a gradually growing layer from the touch point, and playing the animation effect sequentially on the overlapped grid.
Though the ripple effects were implemented similarly, the effects were not uniformly applied, they did not spread out in a circle, and the more layers that make up the grid, the more the performance was affected.
Unexpected mathematical formulas
I have been struggling for a while to realize the retro-style ripple effect I had in my head, but I could not find a pointed way. As time went by and the troubles were forgotten, I saw the “triangle” shaped wood block while arranging my daughter ‘s toys.
Triangles recall the Pythagorean theorem. ‘I can solve the problem with this!’ It seemed to be able to calculate the distance (inclined plane) with x (horizontal), y (vertical) value of each layer of the grid with a touch point as origin.
If I could calculate distances, it was assumed that we could add delays to the animation as much as the calculated distances, and apply the same effect to the layers that are the same distance away from the touch point.
After a few searches in order to code Pythagorean theorem, I was able to get pretty good results.
Korean(mother tongue), English, and Mathematics. Once again.
It seems to be good for my mental health to use English to ask Google God about coding because the language understands by the computer is English-oriented.
And I thought I need to look into the books of mathematics occasionally to get the desired interactions more precisely, effectively, and efficiently.
“Then what is Korean(mother tongue)?”
Mother tongue seems to be at the beginning and end of all of this. Because I have to think in the frame of language, I have to be friendly with my mother tongue for logical thinking, and mother tongue is always with me when I understand all these things made with 0 and 1 by myself and explain to other people.
So like this.
I look back at Korean(mother tongue), English, and mathematics. Once again.
Here is the origin article that was written in Korean.
