Overview
Mobile application development allows access to specific sensors and modes of operation – detecting motion, acceleration, rotation, heading and location. The setup of this can often be complex in workflow and dependant on mobile operating system. However, the introduction of P5.js within context of the browser opens new, accessible paths for experimentation and implementation of these sensory inputs. During this project you will be shown how you can employ p5.js to easily have your work online and demonstrable on phones, tablets and more.
This week-long project encourages students to explore simple yet considered approaches to sensors such as movement, touch and orientation. Consider going beyond just what the technical elements are and try to combine your research ideas in tandem with the technical elements.
Assignment
Deliverables
A final P5 sketch, your process and exploration contained in your Learning Journal. Prior to presentations please put your URL into a QR code generator and export as a png to be displayed at final presentations. We will all display QR codes so everyone can access your work on their own mobile device.
Monday 23rd September
This morning we began using the ‘event’ section in the P5.js reference page https://p5js.org/reference/ . These are to do with coding for mobile devices including functions such as deviceMoved, deviceTurned and deviceShaken. The deviceShaken event instantly reminded me of a magic 8 ball and how the action of physically shaking a magic 8 ball was so much more fun than a click generator like for example: http://www.ask8ball.net . This ties into themes of nostalgia as well as portraying the expansion of coding tools and technology allows for more ambitious ideas to be created as phone applications rather than the production of a physical toy which obviously uses extreme masses of plastic and man-made material and is then thrown away, whereas a phone application can easily be uninstalled. The magic 8 ball also ties into themes of fortune telling and horoscopes which I based my Advanced Higher art unit on expanding into how we form dual identities which is also a clear link to a magic 8 ball as the whole idea is that you ask your most important questions revealing your worries, stress or even hope. The questions that are asked when addressing an 8 ball vary for every individual but there are only a certain amount of answers shown to all, below I will include some findings from basic research about magic 8 balls:
https://en.wikipedia.org/wiki/Magic_8-Ball#Possible_answers
This wiki page shows the 20 possible anwsers shown on a magic 8 ball as well as a colour coded key of yes-maybe-no answers.
The magic 8 ball had a few failed attempts in design which didn’t market well until they ran a campaign and used the pool ball design we know as the magic 8 ball today and ever since 2012, every year, the magic 8 ball sells over 1 million units according to https://toytales.ca/magic-8-ball-alabe-crafts/
The magic 8 Ball costs around £10 on the internet – https://www.amazon.co.uk/Mattel-30188-Magic-8-Ball/dp/B00001ZWV7
This youtube video tells the story of how the 8 ball came around and how an idea of a fortune teller was turned into a million making toy.
This fun family video shows a father opening up a magic 8 ball with tools so his kids can see what’s inside. The video is actually very interesting as it shows the 20 sided hollow die that the magic 8 ball is dependant on.
Since I’ve researched a little about the origin of the magic 8 ball and its contents I will try a little bit of code and I’ll come back with some results.
Coding
This code shows how I created and preloaded a test file, the final will hopefully have the 20 original answers that the magic 8 ball uses, however for test purposes I used an array of 4 answers.
I then incorporated the deviceShake function to start testing on my phone, at the moment this code isn’t right as shown below a screenshot from my phone displays all the answers on top of each other. I would like for the code to randomly select an answer from the array and display one at a time once the mobile device has been shaken. I will also be looking to change the aesthetics playing with colour, rotation and shape but I will focus on this once my code works.
I changed the code a little and created a few new .txt files, I’m currently trying to use code from this morning but it was based on images and I’m obviously using text and the diffrence is proving to be quite difficult for me to work out since I’m not used to P5.js.
This is my first working prototype, each time I shake my phone a new answer shows up on the screen. The number currently is just the index it’s a way for me to test that all answers appear it will be removed later. I am very happy with what I managed to make today and I will be able to focus on graphics and formatting for the rest of the week maybe I will experiment with other ideas if I have time.
randomSeed:
Thursday 26th Sep
Since Monday I have been working on formatting the code. I have added rotation on the Y axis to portray how the real dice in the toy floats in water. I really enjoy the movement because it encourages the viewer to move their phone. I resized the text and added \n separating the text on to the next line if it was too long. I also preloaded an image of a triangle I created in photoshop and mapped it to the centre along with the text meaning it also rotates. Here are some screenshots portraying what the interface looks like right now:
I am considering adding some instructions so the viewer knows to shake the phone once they have asked their question. I also want to add some kind of hue or saturation to the interface portraying the blue liquid.
Along with themes of nostalgia I have also considered how this app could have a purpose of privacy invasion. If an AI could map the facial reactions of the user determining if the answer was what they hoped for, this would provide a clear portrayal of the viewers hopes. For example; the user asks ‘Will I pass my English test on Friday?’ receiving the answer ‘Outlook not so good.’ the AI would map an absence of a smile therefore gathering the information that the user hopes to pass an English test on Friday. This information could be passed on further for the purpose of adverts where the search engine would present the user with contact information of tutors, English books ect manipulating the user of a simple nostalgic app. The user demographic would also be wide as the nostalgia aspect would gather the older generations who played with the toy a long time ago, teenagers and young adults who are now fascinated with the likes of vinyls, vintage gaming and other older generation devices are making a comeback, and younger kids would be drawn into the fact it acts as a toy which is interactive. This would therefore gather a large database of what people commonly think about, worry about and hope for. In relation to my prototype of this I could incoorprate code which detects the voice of the user, gathering the question asked.
Screenshots of the annotated code:
Screenshots of the interface:
I realised my triangle wasn’t showing the correct way so I scaled it to rotate 180 degrees and I’m much happier with it now, I have also added timed instructions at the beginning when the link is first opened as seen in the first image above.
Evaluation
Overall, for this project only lasting 4 and a half days along with working 4 nights I think I done a pretty good job with coming up with this concept and creating the code the way I had envisioned it. I can definitely see this could be taken further and I would love to put a twist on this final In the future and changing some of the traditional answers to another concept I have previously explored backed with more research. I think this is a great starting point for a creative solution and I will make sure to keep this project in mind as I move forward. I enjoyed this project as it allowed us to explore a little more of the events provided in P5.js and allowed us to finally created something for our mobile devices, the only other time was in Mixed Reality when working with unity which for me is a very different platform. I can definitely see myself coming back and experimenting to further this project.
Demonstration Video
Re-visiting Mobile Sensors
Sketchbook pages presenting my new concept exploration and planning.
I would like to re-visit this project by developing my final submission and exploring a new theme and concept supported by books shown below. My aim is to create new content for my original ‘magic 8 ball’ app idea and furthering my research into self-help books and advice from varying sources like books and meditation applications like ‘Headspace’ by finalising a humorous outcome supported by a staged video documentation. This work would be a light-hearted insight and commentary into serious subjects like social medias impact on mental health and general ideas of ‘how to be happy’ which are often extremely unrealistic and cause further problems for people who are vulnerable and would benefit from real professional help. I am not aiming to redo this project from the very beginning, but instead to build on the code I have already produced.
I would love to create a video documentation different to my previous outcomes, which is well considered and polished. I aim to create a storyboard and spend a good amount of time filming and editing this video. I believe it will be beneficial for me to do this for this project, even though it is not required, as the lack of pressure will allow me to really get creative and experiment with filming, editing and producing a short video that is unlike my previous documentation work with a lighthearted approach. I am also certain this will be a great help when moving forward into the second semester of 3rd year and into my 4th year work.
Marta Zofia Palacz 