Web application design and development
Fortune Teller
Transforming a Childhood Memory
I had recently finished up the Software Engineering Immersive at General Assembly and was on the lookout for an interesting project to use my new coding skills. When I was a little girl I loved making these oragami fortune tellers and playing with them with my friends. I started thinking about how I might create a virtual one. I got out a piece of paper and made an oragami fortune teller! It was the first time I made one in about a gazillion years and I had forgotten how to do it, but eventually it did come back to me.
I spent some time playing around with the paper oragami, wondering how I might create a similar experience with a virtual one. As I opened and closed the oragami the light was hitting it in such a way that I realized a darker shadowed center could easily represent the fortune teller when it is open.
Moving a Vector Point
The challenge would be creating some sort of animation to simulate the experience of the oragami opening and closing. I had no idea what solution may or may not come to light. I had heard about this javascript library called GSAP (Greensock Animation Platform) that was great for custom animations. I took a couple of tutorials and practiced. I was in this section of a tutorial where they were demonstrating how to move a point on a vector path doing SVG animation. Vwalla! The lucky aha moment!
My shadow triangles which created the open state of the fortune teller had only three vector points each. if I moved one of those points to meet one of the other two points the triangle disappers! This is how I created the illusion of the oragami opening and closing.
There is one animation opening and closing the shadow triangles on the x-axis (horizontal), and one animation opening and closing the shadow triangles on the y-axis (vertical). The amount of times the sequence loops is determined by how many letters are in the word. (example: red = 3).
Entirely Front End
There is no back end for the Fortune Teller. I have a JavaScript array containing 91 fortunes. I collected them from various sources at different times. Some of the sources, such as fortune cookies, did not credit the author. I do regret that only a portion of the fortunes I’m using credit the author. The icons are vector stock images which I modified in Adobe Illustrator so they would look visually symmetrical.
