Knock Knock
“Knock Knock” is an interactive game that contains various rooms, displaying forms and visuals that are “physically impossible”. The goal is to explore around, and find a way to exit the building. While some “rooms” have an obvious exit, others require completing a task or a bit of puzzle-solving to find the way out.
Link to project: http://alpha.editor.p5js.org/full/r1IlNLgwZ
Project Type: Personal project, Game Interface Design, Interaction Design, Front-end Prototyping
Skills: Research, Concept Development Tools: JavaScript (p5.js), Illustrator, Photoshop
An Introduction
For my senior project in high school, I got to work on a math & art project about tessellation of flat surfaces, which are also known as wallpaper groups or plane symmetry groups (in math.) I find M.C. Escher's tessellation art to be very beautiful and fascinating, which inspired me to delve deeper into his creation process. This eventually developed into a four-week research project on wallpaper groups.
My little game/ visual interface project "Knock Knock" is a continuation of this research project. It combines my interest in the intersection of math and art, as well as some fun explorations with user interaction design and front end prototyping.
Introduction
We see symmetrical objects and patterns everywhere in our daily lives. Because symmetry is pleasing to the eye, it is widely used in creating art. I looked into John Conway’s signature for plane symmetry groups in addition to the conventional symmetry operations, which provides a methodical way to create repeating patterns in the plane.
Four Fundamental Symmetry Operations
In order to identify all of the plane symmetry groups, we first need to describe four fundamental symmetry operations.
I. Reflection: This type of transformation is obtained by taking the mirror image of a shape across its reflection line.
II. Rotation: This is when one rotates a shape around a point (aka. the rotational point.)
III. Translation: This refers to moving a shape without changing its size or rotating it.
IV. Glide reflection: This is a combination of translation and reflection, which involves sliding a shape and reflecting it along a reflection line.
17 Plane Symmetry Groups
The plane symmetry groups were first discovered in 19th century. In 1981, German mathematician and crystallographer Evgraf Fedorov proved that there are only 17 distinct tilings of the plane. Following Fedorov's proof, Hungarian mathematician George Pólya derived the classification of 17 planar tilings again in 1924. In this brief research report, we’ll use John Conway’s signatures for symmetry groups, and the conventional vocabulary for describing symmetry operations.
John Conway's Signature for Symmetry Groups
The reflection signature is denoted by *. The numerals (n) denote the number of symmetry lines intersecting at a point (which I'll refer to as a reflection center.) And the angles obtained from the reflection operation are 360/(2n) degrees.
A few of my own experimentations with tessellation
Basic Shapes for tessellation
Project Ideation for "Knock Knock"
I was introduced to the game "Monument Valley" in my Interactivity class. The graphics of the game reminded me a lot of Escher's art, but at the same time the game expanded on Escher's work in so many directions. Not only in terms of visuals and interactions, but also in terms of narrative and storytelling. I felt really inspired and wanted to try expanding on my wallpaper research project, and see how I could push my idea further.
Brainstorming
Since I've decided to focus on topics related to mathematics & art, I started looking for math puzzles that are visually and conceptually intriguing. I was particularly interested in concepts/topics such as applications of number-based systems in different fields, general number puzzles, repeating patterns, perspective (applications in art such as the vanishing point,) and visual illusions. I came up with a list of small math-related puzzles: Rubik's cube, Connect Four (or a similar Chinese version of the game, literally translated as "Connect 5". The Chinese version is usually played with black and white Go tokens,) Tangram, Sudoku, folding/unfolding cubes, etc.
I eventually decided to go with simple geometry puzzles because they're more visually dynamic. The visual design was also one of my main focuses. So I decided to include one Tangram puzzle, one unfolded cube, and a puzzle about wallpaper groups (which was what I initially started with.)
Concept Development
One common theme among the small math puzzles I chose revolves around the abstract concept of space (be it 2D or 3D) and the transformation of shapes within that given space. Since Monument Valley was still in the back of my mind, I thought it could be an engine to tie all the smaller puzzles together. So I decided to construct a "physically impossible" architecture that contains all the puzzles and allow the user to be (visually) transported from 3D to 2D space. The ambiguity about space created with digital media is also at the core of my concept development.
Game Structure
The game is strictly linear. One could only access a room once they've passed the previous room. This kind of makes sense in that I intended to slowly shift from 3D to 2D visuals.
A basic map/overview of the game:
"knock knock" -> open door -> Chapter I. Twinkle Twinkle Little Start -> Chapter II. Unfolded Cube -> Chapter III. Repeating Pattern -> Chapter IV. Discovering Tangram -> End Scene
Sketches and Visual Assets
I started with sketching on paper and moved to Illustrator to test out some color combinations.
Implementation
1. Navigation:
-Buttons are used as the major navigation system for the game. When the player hovers their mouse over a button, the button changes color and signals the user to click on it.
2. Transitions:
-Small animations for transitioning from one chapter to the next
-Hue/saturation/color changes when entering a new scene.
3. Clues
-Object/image changes size as when the player hovers their mouse over. This is another indication that the object is clickable.
-Object/image changes color when mouse hovers over.
-Some other objects pops up when the correct action is taken. Conversely, nothing happens if the action is incorrect.
Limitations and User Feedbacks
I've gathered feedback from my instructor, professors, and friends. There are quite a few improvements need to be made:
1. Lack of instructions in the game makes it confusing as to what the player is supposed to do. There are very little written instructions throughout the game. The only information given are the chapter names. In fact, I did not include any text in the first version, and a lot of people commented on the lack of guidance. After I added the chapter names, there were less confusions, but some players still find it unclear and would like more instructions.
2. Sound not consistent throughout (the music stops at the end of chapter 1.)
I actually debated about whether to add sound to the game. I didn't want to play the same soundtrack throughout the game, but I also was not confident to edit and combine a soundtrack by myself. While good sound effects could be really effective in engaging the user and conveying the mood of the game, ineffective and poorly designed sound could be harmful. I eventually decided to add a bit of music at the beginning, and transition out from sound effect in chapter 1. But this really isn't a better approach either.
I think this is when collaborating with a sound designer could make this project so much more interesting. I certainly feel limited by what I could achieve by myself.
3. The clue in Chapter I. Twinkle Twinkle Little Star is confusing. Originally I had it set up so that the player would click on a button, which would play a note. From there they would try to play the notes for "twinkle twinkle little star." However, I didn't take into consideration that some players are not as familiar with music notes and had trouble figuring out the correct notes. This is a big problem because the player could get very frustrated after a few tries. Especially since there are no other clues, they don't really know how to proceed.
In order to solve this problem, I added colored dots above the buttons that the player is supposed to click on. As long as the player pays attention and look for what is different in the row of buttons, they'll see that only one button has a dot above it each time. As it turns out, this was certainly helpful to some people. However, I did notice that it took them maybe two to three tries to find the clue. Even when they've found it for the first time, sometimes it is not intuitive that they should look for the same pattern. And for those who didn't find the clue, they commented that the dot was too subtle to be noticed.
4. The game structure is certainly something I would like to explore more about. At the moment, the game is strictly linear. One has to go through the puzzles in order. I suppose this kind of makes sense since I intended to slowly shift from 3D to 2D platform. However, I think there is still potential in exploring game structure and seeing how the elements in this game could be combined differently.
Final Game Prototype
