Re-do- 90’s quiz game

90’s Quiz Game

Kiana Romeo -3159835

Concept/ Context

In today’s modern age, mobile games are everywhere on everyone’s handheld device. Platform games, puzzles are among some of the most popular but its quiz games that are beginning to take the world by storm. One popular game called HQ is growing increasingly popular. hq-triviaThe game works by connecting millions of players worldwide into one huge quiz game where 12 questions are asked and a process of elimination takes place where players get booted from the game once answering a question incorrectly. Although the biggest incentive to play is the huge cash prize that can be won if reaching the final question successfully, the extreme randomness of the game is incredibly entertaining as well. The questions begin with simple knowledge tests like “what colour does red and blue make?” but ends with extremely complicated ones that no one with an average knowledge of the world would know. The thrill of racing against a clock to win a prize is an addictive experience and I therefore wanted to create a game that would provide that, but also follow a theme.

The original project featured non timed questions about the 80s which was fun, but didn’t have the competitive edge that great quiz games do. The era I resonate with most is the 90s- the style, the shows and the toys and games are all so intriguing to me. As well most of my classmates were either born in the 90s, or grew up in them so the nostalgia factor would be enticing as well.


Answer button, buzzer, name input

The players log onto the game server by opening one of the four buzzer html pages. Each has a different button design to create a more personalized experience. Once there, the players can enter their name into a box and claim their spot in the game.

button1 button-5 button-4 button-3

Their points will automatically be set to 0 and will only be able to increase if the host sees it fit to award them with any. When the game begins, the first question will pop up. If the player knows the answer, they “smash” their buzzer. A sound will play and the player will be able to answer the question verbally.


Timer, points, changing question slides, resetting the game

The host controls almost everything in the game. When a player answers a question correctly, they award a point. They also control the timer when a player buzzes in and controls the slides as well.

Question slides


The question slides simply had the questions on them, and when the host is ready to move on, they simply press “Next” on their side and the slide changes.


While the code worked perfectly separately, it was when I tried to tie it all together with PubNub that things started to go awry. I faced many challenges, most of them still unfixed. Some challenges I experienced with the code for the player controls included being able to control the game based on who voted first. It was difficult to make it so that the first button hit locked the others so I fixed it by making it so that the when a button is hit by a player it sends a message to the console of the host telling them who hit it first.

Another challenge I had was being able to control the timer from the player’s side. I wanted it to be so that when the player buzzed in, the 30 second timer would start counting down but I found that to be a difficult task. I instead opted to add it to the host controls and while I still don’t have it working properly, I believe it would be better for the host of the game to have control over that instead.

The last issue I had was getting the slides to work. This issue also took place in the original project where pressing next did not change the slide and in fact the slides did not even show. The “loading” message stayed on the screen the entire time without changing and the question slides would never appear. I therefore had to resort to using PowerPoint to present the slides as I wouldn’t be able to use P5 and PubNub to control them.


Illustrator and Photoshop

The first thing I did was create the slides and button jpegs. When I work, I often like to have my visual components done first, and then worry about the technical side as the aesthetics and theme inspire me. At first, I wanted to create the jpegs on illustrator but soon realized it would be harder than I thought to create good images and that it would be much easier to stick with Photoshop. For the buttons I was inspired by the ones used in game shows to buzz in answers. Large buttons on square stands and slamming them down to activate them. I drew one button and came up with as many 90’s like colour schemes as possible switching them up for each button. this was a huge upgrade from the controllers of the old game as it wasn’t as aesthetically pleasing and did not so much go with the theme. As well, as these buttons were created based on feedback I got from the other project, I believe they are as well made and user friendly as they can be.screen-shot-2019-04-11-at-1-18-53-pm screen-shot-2019-04-11-at-1-22-06-pm

For the slides, I basically copied the format I used for the first version of the game. The feedback I received on that game was that my colour schemes and aesthetic choices were mostly 90’s centric instead of 80’s. I was therefore able to just use my old slides and change the questions.

Research/ PubNub/ P5

I didn’t have to do much research on the theme of the project as I am pretty well versed in 90s culture whether it be fashion, pop culture or toys but extensive research and thorough investigation had to take place in order to get PubNub to work and even then it still did not do exactly what I wanted. On the other hand, JavaScript is something I am pretty good at and I was able to successfully get each component of the project to work separately. As most of the project consisted of jpegs, it was mostly “mouseClicked” functions that made the project work.

 Critique/ Conclusion

Unfortunately on the day of presentations I came down with a stomach sickness and could not attend. Based on the critique I got from the first project though, I changed a lot of things to improve it. For the most part I am proud of how it turned out in the end and hope to somewhat get it working during the summer.

Code for the game







The Outrageous L.A. Quiz Game!- Book++ Project


Ermar Tanglao

Joseph Eiles

Kiana Romeo



Our project “The Outrageous LA Quiz Game” is a quiz game based upon the book we chose titled Outrageous LA in which three players compete against each other in order to gain the most points through answering eight different questions. Each outlandish question presents the player with four different answers. Once the player selects an answer, they are locked into it and cannot change their answer; if the player answers correctly then they are immediately rewarded with a point that is tracked through a number on the player controller. Once every player has answered, the game host then proceeds to the next slide or question through their host controller.

On a technical level the quiz is comprised of sixteen different slides, eight for each question and another eight for the answer to the corresponding question. The quiz show is comprised of five different controllers with each controller having its own independent code. Three controllers are designated for each player, one controller is designated to the host so that he/she can select the next slide or reset the game, while the last part of the code controls the question and answer slides.

screen-shot-2019-01-28-at-3-45-55-pm question2


The programming language we used for the project was P5.js. We used this language because we were the most comfortable writing code with it and learning another programming language or using another software could possibly be difficult to learn. For the way we presented our work we decided to have it be projected from a projector because it would act like a screen for the players to look at in a manner akin to Jeopardy and Who Wants to be a Millionaire.

Image result for who wants to be a millionaire

Image result for jeopardy


img_6917    img_6918

The book our group chose was Outrageous LA, a book highlighting all the weird and quirky aspects of Los Angeles in the 1980’s. It was full of fun facts and interesting images that one would not only not normally associate with LA culture, but also facts that are definitely not widely known. The ridiculousness and randomness of the book really gave us a lot of wiggle room in terms of coming up with a concept. This made us want to create a way to test people on these random facts, but to make it interesting instead of just making a simple test or an informational program.

We aimed to make our project as fun as possible and so we came up with the idea of a game show. We examined many older game show themes to come up with a way to format our quiz game and decided on a Who Wants to be a Millionaire type concept in which all the questions appeared on the screen and the player would have to choose the right one. We also paid great attention to the aesthetics of the project and tried to make them as 80’s themed as possible. The only issue with that was it turned out quite unattractive and so we decided to use a more late 80s/ 90s theme for the question slides and buttons. In all, we aimed to make a colourful, nostalgic and fun experience for our players.

answer3 answer1


Within our project we had a few problems. The first had been getting the slides to communicate with both the game host’s controls as well as the players’. For a while, when the host’s controls were clicked it either affected the player or the question slides when it was meant to change both. This was easily fixed by changing the channel name to the same thing on each page of code.

As well as that, we had issues with getting the buttons to revert back to their original colour when the question was reset and getting the points to change only when the correct answer was selected.


An issue that was never solved was that the buttons did not work on iOS devices. This would ultimately cause issues if a large group were to try to open the controllers on their iOS devices and would therefore be our next steps in making the project more cohesive. Furthermore,  we would add more to the game like music, make the question slides themselves interactive and also make it so that points accumulated based on speed of choice and not only if anyone got it right. A stretch goal would be to make it on Unity so that the game show would be immersive as if you were actually on set of a game show!

The Light


Kiana Romeo3159835 || Dimitra Grovestine3165616



When it came to our project, everything we did in it was based on our original inspiration and our vision never wavered from it.There was a very specific message we wanted to get across in our project and the concept of the product trumped the need for the actual execution in the end. We were overall inspired by the idea of dying and “going into the light”; something grim and undesirable becoming something beautiful and inviting. Our project aimed to allow people the experience of dying and going into the afterlife without it actually happening. We also aimed to more or less allow people to interpret the afterlife as they saw fit as to not make any assumptions. Using visuals and audio associated with this type of scenario, we immersed people into a heavenly world in which they could briefly escape life on earth and ascend into something higher.


Contextual material’t go into the White light philosophical video

This video goes over philosophical and religious reasons why one should not go into the light when they die. It was an interesting video to watch as for the most part, people believe that the white light is a good thing, meaning you are going up into heaven and towards God. But for this happy light to be a trap, going towards it would be a bad thing. This is why, when during the presentation of the project we decided to push people towards the light and then pull them out quickly in order to give them a chance to decide what they felt about the light. – choir of angels singing (audio used in project)

Church choirs can have some of the most beautiful sounds and music coming from them, and after researching our concept, this music was incredibly inspiring. It expanded our concept as we wanted to create a fully immersive experience and while strong visuals and lighting could definitely help create this environment, sounds are very important too which is why we found it necessary to find just the right sounds to use in our project. Man details what it was like going to heaven after death

although the credibility of this video was questionable, the idea of heaven in a religious and philosophical sense is all guesses of what its really like. Therefore, having this individual’s take on it was important as it covered some of the beliefs we wanted to be in the video.


Features of the project

Overall, we had set out to create a heavenly atmosphere. we believe that we achieved steps towards creating this however, we feel that our installation required more elements to bring the piece together. Obviously, we would have loved for all of our elements to work together cohesively, but after receiving feedback we think we would have added additional elements to the piece. I think that we would have considered an alternate shape of projection, verses the classic rectangular projection. We believe that this is necessary to add a unique element that feels like it belongs more in the piece. Where, the rectangular projection, looks plain and slightly out of place. We also would consider adding smoke and mirrors to create an ambiguous and more interesting space. Not being able to see and not necessarily knowing what you’re looking at would help create and add interest to the piece.


Proximity sensors:


The proximity/ distance sensors were meant to control all the elements of the installation. We were to use two sensors in the exhibit where one would control the led light strips that would illuminate as one got closer and control the whisper sound effect in the room while the other would control the brightness of the cloud visuals at the front of the room and the volume of the angelic singing as well. Unfortunately for us, the quality of the sensors wasn’t the best and their effectiveness did not work as well as I had wanted.

The room:


Upon finalizing our concept, we had decided we wanted to construct our installation in a critique room where it would be dark enough to have a great effect. Unfortunately, though we could only book a meeting room where it was not as dark and was very large. We made it work but having a smaller space may have been a better option.

The lights:

picture1 img_4156








It was  a real challenge getting the lights to work even without the sensors. we ultimately fixed it by using a battery pack after realizing the lights needed a 12V power source instead of 5. This was a crucial part of our process and took a whole class to figure out but when we did it was more or less smooth sailing.




atelierfinal (Clouds and visuals code)

atelierfinal (Lights and sound code)


Untitled (for now)


Dimitra Grovestine 3165616 | Kiana Romeo 3159835


screen-shot-2018-11-27-at-12-04-21-pmThe concept of the afterlife has always been a controversial and highly debated topic. Many cultures and individuals disagree on what happens after death. Some believe in reincarnation while others think the human soul leaves its shell and ascends into a higher place. Some even believe nothing happens at all. In our project we aim to encompass all these concepts in which one will go through many stages of life after death. First, they will walk into darkness, then a walkway will slowly light up once they advance a bit farther until they reach the end of the path where a beautiful display of clouds will appear signalling they have reached the end.



We were inspired by the idea of dying and “going into the light”; something grim and undesirable becoming something beautiful and inviting. But of course, no one wants to die in order to experience this. Our project aims to fabricate the concept of “Heaven” and the afterlife by recreating it in many ways. We want to give people a near death experience without them actually having to die, complete with visuals and sounds we believe would be present when in this scenario.


Concepts/ how it will work

In order to create this effect, we will be using proximity sensors to trigger img_3993events. The space will be dark or inactive when no person has entered the room/ space. Whispers will be heard around the room as the other “souls” acknowledge your presence. The first proximity sensor will be connected to one laptop and will trigger the LED strips. These strips will gradually light up as you walk lighting up a path representing you being welcomed into the afterlife. Upon reaching a certain point, the next proximity sensor, connected to a second device will be activated where the heavenly clouds will gradually appear and angels will sing marking the moment you reach your final destination. A concept we are taking from a previous experiment is the idea of using sensors to trigger different events. Although we did not create these sensors, we plan on formatting and designing a space that will make the sensors completely unnoticeable and use materials to make our space as aesthetically pleasing as possible.

Contextual articles and videos:


Experiment 1: Clap Powered Fireworks – Kiana Romeo

Kiana Romeo 3159835

Clap Powered Fireworks!


For this project, I wanted to create something that would interact with sound, but I did not want to create the same generic DJ type sound reactive system that has been seen so many times before. Instead, I wanted to make it so that whatever was going on on the screen would be controlled by the user, and the sound made by the user would directly correlate to the resulting animation. I wanted the project to focus on loud sounds so I started brainstorming things that a clap would be able to imitate. Instead of the action causing the sound, I wanted the sound to cause the action!

At first, I had debated on whether making lightning would be a better option. With this I would make an environment in which random lightning strikes would be created when the user clapped their hands, thus mimicking the sound of lightning. But as it was a simulation of nature, it would have been too predictable so I instead chose to make fireworks instead. This way, I could change colour, size, velocity and shape as they are manmade and the way they look does not need to be a certain way in order to recognize what it is.

Github link: Clap-powered-fireworks

fireworks 1screen-shot-2018-09-29-at-12-12-58-am

Although I could have successfully programmed the sketch in either program, I chose to work with p5.js instead of Processing because connecting and using the microphone to control the sketch was much more straightforward and I still got the same desired effect. As well, linking multiple javascript files to one html file felt much easier than linking multiple files in Processing. I created the sketch in both programs (with help from Dan Shiffman tutorials of course!) and preferred the output of the p5 version much more. 


References: (Coding Challenge #27: fireworks) (Coding Challenge #41: Clappy Bird) (17.8: Microphone Input – p5.js Sound Tutorial)

I relied heavily on these three videos to create my project. Many hours were spent simply watching the videos until the code made sense, and then typing out any code that was given to help with my project. Through watching these videos I learned a lot about particle systems, arrays and functions as well as using the p5 sound library to make interesting, interactive artwork.