Interactive City: Magic Ball


For my second project, I created a magic ball that is a spin off of a “magic 8 ball.” Instead of shaking the ball and getting an answer to their yes/no question, the user will click the ball and it will generate a random answer to their question. Some of the phrases I used range from “signs pointing to yes” to “definitely not” to “cannot predict.” I chose several simple answers because they are applicable to any yes/no question.


I wanted to design something that people of all ages could interact with. I feel like this project did a good job of achieving that because it creates a low barrier of entry for the user. They don’t have to say their question out loud, but can keep it to themselves. Even though this interactive is very easy to use, it still generates a fun outcome for the user. They won’t always get the same answer to their question, so it creates the element of surprise. I think that this enhances the playfulness of the project because its’ outcome is unexpected.

Something that went right was the rough build. I had originally developed a rough prototype very fast. The random text selector was the main function of the project, so coding this aspect was simple. After I had developed the foundation of my project, I had trouble finding the right ways to capture the user into mystifying mood.


Along the way, I made many improvements to the design of the project. First, I started with a ball that generated colors randomly. I changed the palette of the colors to be more concentrated towards blues and purples. I think that this improved the overall look because all of the different colors changing at a high frame rate were overwhelming to the user. This makes the overall feel seem more relaxed. In addition, I played a lot with different fonts. It took me a while before I found the right one that would capture and transport the user to a mystifying mood. The font I chose resembles an old fashioned, traditional type face, that kind of reminds me of the time period of the Salem Witch Trials. I thought that this was perfect for the design of the project because it definitely helped create a magical atmosphere. Furthermore, I made the stationary stars move across the ball. I think that this improved the bewitching effect I was going for because it made the interaction more interesting. Finally, another change I made was that I added a border around the magic ball. I wanted to stick to the blue and purple color palette that I had created, but enhance it even more. So, I decided to create this border in photoshop. I drew ying yang signs, stars, and moons to add to the mystifying, cosmic theme. I think that this makes the project look more unique and interesting because it creates a lot of detail for the user to look at, without feeling overwhelmed. In addition, it helps clarify the interaction. It implies that there will be a “magical” interaction, like a crystal ball predicting the future, without explicitly saying what is going to happen.

I think that this project creates a magic circle because people can chose to use it in groups or individually. If used in a group, the users can ask questions together and see if it was what they had expected. If used individually, users can compare their answers with their friends or even people they don’t know. This forms more interactions between people and therefore, creates a magic circle.

I think that my project fits into de Waal’s ideology because it falls under the category of a “sensible city.” The design of this project is to provide people with answers to their yes/no questions. While it can be seen as something very straightforward, it can also be thought in a different way. I see this project also being able to fit into de Waal’s ideology of a “flaneur city.” This project has an element of mystery in it because the whole idea is based on the unknown. This aspect allows the users to see it as a fun experience that can be new every time.


I’m happy with the way that it turned out because I think that it looks playful and interesting to the user. I’m really glad that I was able to achieve a design that accurately portrays the interaction because it makes it more enjoyable to use.