By Kylie Caraway and Emma Brito
Written in the Stars operates like a digital puzzle that requires teamwork between 20 participants and their phone screens in order to view the entire night sky. It begins with a physical printed map of the sky with the constellations’ names, but is void of their images. To see a constellation, participants must go online on their phone, click on a link for a specific constellation, and then raise and tilt their phones slightly, as though they are viewing the sky through their phone. Once the phone is tilted to a specific degree, the image of the constellation will appear. In order to see all 20 constellations at once, there must be 20 people participating in order to piece the map and its proper constellations together.
The fact that each screen only displays one constellation at a time is an important feature. When used alone, the screen only offers a small fragment of the night sky that is visible. This means that the screens, and the people holding them, are reliant on the interaction with others in order to complete the puzzle and entire image of the night sky.
Github Code https://github.com/kyliedcaraway/Written_in_the_Stars
- Ursa Major
- Ursa Minor
Initially we liked the idea of having all of the constellations in a single 3-dimensional space, so as a device turned the sky-scape would change as well. We liked the idea of people having their own experience and perspective within the same space. (We later realized that this would rule out interaction between participants, therefore eliminating the need for 20 phones in a particular space.)
Beginnings/Trial and Error:
We found a P5.JS code called “orbit” that created a 3-dimensional space and would allow us to hang shapes within in it. When used on a laptop, the canvas would orient to the mouse as it was dragged, yet it would snap back to the original view when the mouse button was released. This created a problem of creating a realistic night atmosphere. We decided we would instead use phones and devices with an internal compass feature so that the change in position was registered based on the rotation of the device. Laptops were ruled out as a result.
Unfortunately, we also quickly found it difficult to manipulate the orbit code. We couldn’t randomize the spheres within the code in order to mimic a starry sky, and it was difficult to pinpoint new shapes where we wanted them to go. 2D planes were also very difficult to place in the 3D view. The 3-dimensional space itself was limiting in size on our phones, which would make all of our 20 constellations impossible to include.
The New Plan:
We scrapped 3D orbit after we realized it wasn’t going to work well for us, and instead decided on a 2D iteration of the night sky, as Kate suggested. We decided to give each user one constellation, as a piece of the larger puzzle of the universe surrounding us. Using p5.js, we would create a 2D landscape, a constellation, and an interaction comprised of tilting the phone to create an interactive experience that relies on the participation and interaction of 20 users.
Atmosphere / Arrays:
Kylie incorporated a gyroscope measurement code into our project so that the motion of tilting the phone would result in the appearance of a constellation, in order to mimic the act of looking up to stargaze. The video of the constellation would then play on loop until the phone was lowered and no longer tilted. We only focused on the variable “beta” in our phone, which measured how much the phone was tilted on the X-axis. At first, we told the program to only draw the constellation when it was greater than 120. While this angle is more aligned to how users actually look up into the sky, we realized this would create problems with our map on a flat wall. We changed the code to draw the constellation when it is greater than 80, so people could view the constellations as they hold their phones against the map on the wall.
Once we got a grasp on the new kind of code we would be pursuing, we started making the constellations themselves. We chose to include the 12 astrology signs, as well as 8 of the more well known constellations. Astrology signs were important to us, because they are commonly a subject that implements conversation and interaction between users. We decided to create the constellations as simple animations in After Effects, and then place the video to play over the array. Each constellation would follow the same basic format with a few different variations (colour, effect, shapes) in order to keep them stylistically aligned without becoming repetitive. We also toyed with the idea of animating the myths behind the constellations, which would only be seen if users pressed the constellation, but we decided against this for 3 reasons: 1) users pressing an image this is tilted above their head would result in an uncomfortable, non-intuitive experience 2) this feat of ultimately 40 animations was beyond our scope and could not be accomplished in our timeframe 3) getting one video to work was proving impossible; two videos that rely on multiple, sequential interactions was asking for disaster. Although we tried numerous ways to get the video/GIFs to work, our code did not want to embed the frames within the canvas. In the end, we used 1920 x 1080 JPEG photos, so we could keep the quality of the design without large file sizes.
Challenges and Issues:
Our biggest challenges in this project revolved around code issues. We had slight issues at first with WEBGL and 3D scapes. Pieces were difficult to move around, the code was very sensitive to any changes, the orbit control did not move the way we visualized it would on a phone, and the 3D space it constructed felt too confined for our project. Through these issues, we opted for a 2D space instead.
We also had issues with star arrays and background visuals (as mentioned before). After trial and error, we researched different arrays that depicted constellations, and ultimately found one that was easy to understand, implement and edit, and fit nicely within our project.
Our largest obstacles were displaying video files and GIFs of our animated constellations. Our first signs of trouble began when we ran into problems when we rendered the constellations. We wanted to keep their alpha channel so users could view the stars behind them, but the video files were huge (200 MB or more,) and both Atom and Sublime crashed when we used them as assets in the code. We then tried to take the video and create PNG sequences out of them. Atom and Sublime didn’t like this either, because our animations were anywhere from 5 seconds to 10 seconds long (looking back on it now, I believe this could be why we were unable to play the videos or sequences). We downloaded the P5 Play library, and attempted to run the PNG sequence, but the animation would never load. We finally decided that we had to scrap the Alpha channel, and plan to have a background color behind the constellations. This realization forced us to change the location of the code, so a black box would not appear on top of our array. Ultimately, we had to draw the star array after the constellation, so that the canvas background and constellation background would blend seamlessly.
We also tried GIFs, with no optimal results. The GIFS would not load as videos. They would either hold the first frame (creating a still image), they would draw on a weird spot on the screen that was not within the canvas whatsoever, or they would not draw at all (the most common scenario).We attempted to download a GIF p5.js library, but there were issues with the library, and the GIF would never play. We also attempted to use the P5 DOM library and elements code to run the GIFs. By using “create image” rather than “load image”, the GIFS would finally appear… Except they were writing over the array, regardless the location of the code, and their location would change based on the device. In the end, the GIFs never operated how we wanted them to.
Going back to video, we attempted to make smaller videos that would load more easily onto the phones. Unfortunately, the videos would either crash the site, never load, would only load the first frame, or would load outside of the canvas and ask you to press play on the video, which would open a new tab with the video. After multiple attempts to implement the code, from the p5.js book and website, to other tutorials online, we could never get the video to load in our code. After meeting with Kate and Nick on Wednesday, we attempted to take apart the pieces of the code. After separating the various portions, we could not get our videos to load within a canvas on both the iPhone and Android phones. In the end, we ultimately decided to use images rather than video. These images were able to load quickly, they were placed in the right location, and they were reliable, as they worked on both types of phones.
Code Issue Examples:
In this example, we attempted to load an MP4 file. While this code would respond to the Gyroscope and place the video in the proper location, it would only show the first frame of the video.
In this example, we used the P5 GIF library in attempts to load a GIF. The GIF would not display in the proper location, it would not play, and it would not respond to the Gyroscope code. This attempt was the most failed, as nothing was working properly.
In this example, we used p5 Element code. This was our closest success story. The GIF would respond to the gyroscope code, it would play the GIF, and it was centered for iOS. Unfortunately, it also drew over our array, creating a black box around the GIF, even though the code was beneath the array. Additionally, when we attempted this on an Android phone, the GIF would not center and created issues with the canvas fitting to the phone screen size.
Our attempts to deconstruct code. Removing all other code, we tried to load a MP4 video by itself. No success. I assume this is the result of our video file sizes or the video length.
In our first iteration, our map consisted of both the constellations’ names and diagrams. We were relying on the map to help users place their constellation in the larger image, but we realized that the devices would be obsolete if the information was already on the map, so we removed the constellation graphics to create a game element. Removing the constellations allows the user to have an incomplete visual without the assistance of their devices.
Regardless of the iterations this project went through, we are very happy with the final incarnation of Written in the Stars. It differs from our original plan since it is an image presented rather than a video, but the other features are present. The gyroscope prompts the image to appear, while the array is a constant. We incorporated the physical map in order to encourage interaction between people and devices, after all stargazing has been a social activity, with stories and mythologies associated with each constellation. We also provided information on zodiac signs for participants unfamiliar with astrology to learn their sign, as well as horoscopes for a fun read and conversation piece to connect with our interactive installation. As each participant has their own constellation, they can participate with others to create a full atmosphere of the night sky.
Vimeo link here : https://vimeo.com/240378307
Sketches, Designs, and Photographs
Sketch of our initial brainstorming ideas. While we scrapped the 3D atmosphere and 2D game, we implemented our original user experience, complete with animation, gyroscope, and our revised sky map.
We considered incorporating written information, such as a constellation’s history, science, or mythology, but we decided it clogged up the screen and detracted from the overall image of the night sky.
This depicts our colour palette, as well as the aesthetic style we implemented in our project. We strove for clean and simple lines, ellipses and stars, with limited colour options, in order to remain cohesive, yet have enough variety to be visually appealing.
This is a process image of the creation of the Cancer constellation in After Effects. This is one of the smaller of the 20 constellations included in Written in the Stars.
Gemini was our test constellation within the code. This is an image of the visual that appears after the gyroscope is activated. It was with this image that we first realized the video wasn’t playing and launched a series of trial and errors in order to attempt to make the animation play.
Graphic of all of our constellations
First design of our map. Kylie made the mistake of making it in Photoshop at 72 by 48 inches with a resolution of 300 pixels per square inch. The file was huge, wouldn’t save, and kept crashing. She finally was able to save it as a PDF. It was 1.64 GB and the print shop she sent it to would not accept a file that large. She then recreated it in Illustrator. While she couldn’t get the faint nebulae texture she had used in Photoshop, Illustrator was overall the preferable tool: the map could be resized to any desired amount, the print shop preferred illustrator files, and the file size was less than 1 MB. Lesson learned: use illustrator for large prints. Another lesson learned: don’t wait 2 days before project is due to get your map printed. Print shops love to charge you somewhere around 500% markup of the original price for a rush order…
Our poster rolled out for the first time!
Final Presentation Day!
Written in the Stars in action:
The presentation was successful. The coding and images worked properly and we got the desired reaction from the class. We also turned out the lights for added effect.
Our project can be contextualized through a couple of different avenues. As was touched on previously, it was important to us to include the astrological constellations because of the personal connection and sense of ownership people feel for their sign. We don’t need to look further than the fact horoscopes are a staple in nearly every newspaper. A stir was even caused because of this in 2011. Astronomers said the moon’s gravitational pull on the Earth had changed the axis of the Earth, resulting in different astrology signs for each month. After public commotion, NASA had to put out a statement reminding the community that astrology is, in fact, not science.
Stars, and the night sky in general, have been a popular subject throughout history in various forms of art, and later in media. From its initial introduction by the Babylonians as a storytelling technique, to its representation in artwork, such as Salvador Dali’s illustrations of the signs and Vincent Van Gogh’s iconic “The Starry Night,” to astronomy’s current popularity as both a marketing and social tool, there is no question regarding human affinity for the stars. Due to the ubiquity of astrology and the love of stargazing, this project is relatable to a wide audience. We wanted to capitalize on the social aspect of this activity as well, and the 20 screen requirement allowed up to do this.
While currently Written in the Stars currently serves as an installation which encourages communication and interaction, Written in the Stars could be further developed as an educational tool to teach astronomy. This project could additionally be used as a data visualization tool. Both NASA’s Kepler Space Telescope that monitors astronomical phenomena and the European Space Agency’s Gaia telescope that has produced a revolutionary catalog of the structure of stars in the Milky Way Galaxy serve as a model for this project.
In the end, Written in the Stars has the potential to be used for discussions about physical sciences as well as social sciences, as a digital puzzle that can be used for entertainment, group participation, and to illustrate “the unique cognitive-emotional link that makes us the intelligent creatures we are” as we sort through pieces of “randomness” and “information” in order to create a full, comprehensive picture of our surroundings (Mutalik).
References and Influences
It’s impossible to talk about our Written in the Stars project without mentioning the Sky Map (https://play.google.com/store/apps/details?id=com.google.android.stardroid&hl=en) app. It serves as both inspiration and aspiration for this project. While our project differs from Sky Map because of our focus on the interaction of people working together versus an individual experience, Sky Map is thorough and places all the constellations within one space. We would like to move this project forward to include Geolocation of the constellations, as Sky Map has effectively implemented throughout their app.
When we searched online for images of constellations and maps, we noticed that there were extreme variations of constellation forms, number of stars, and location of constellations. We decided to use a reputable source, National Geographic, (https://www.nationalgeographic-maps.com/media/catalog/product/cache/7/image/8ecabcfb697832bc77ac7e2547ded39f/x/n/xng195712a_90.jpg) as our resource for constellation formations, locations, and our map iteration.
Kelsey Oseid’s book, What We See in the Stars: An Illustrated Tour of the Night Sky (https://www.penguinrandomhouse.com/books/553191/what-we-see-in-the-stars-by-kelsey-oseid/9780399579530/) provided inspiration for visual aesthetic, as well as information about constellations. Although we were unable to get animations to run in this prototype, Oseid’s book will continue to be a great reference through the development of this project into an interactive storytelling tool about constellations, astrology, and the science behind our universe.
Astrology.com (www.astrology.com) provided us with the horoscopes and dates for each of the zodiac signs. During the installation, we handed out slips of paper with the constellation, dates of the zodiac, our website link, and their horoscope. This provided an extra entertaining detail to get participants engaged with their constellations before the installation began.
This was the initial code for the array we used. We altered both the size of the ellipses and the colour of the background to better suit our phone screens. Other code was gradually simplified, altered and added, from changes in frame rates, to position and flow of the orbit, to the number of stars.
This is where we received the code for the Gyroscope/ Accelerometer. We used this code to measure the phone’s position as we moved and tilted the phone. We realized we would only be using the Beta variable, so we removed the Alpha and Gamma. We then deleted the rectangle and code that showed the values of each axis. In the end, we ran a simple “if” statement, so that when the Beta variable was above 80, the code would draw the constellation.
We also referenced p5js.org (http://p5js.org) and Make: Getting Started with p5.js for multiple portions of our code.
Alessio, Devin. “The Cocktail You Should Be Drinking Based on Your Zodiac Sign.” Elle Decor, 21 Dec.
the-cocktail-you-should-be-drinking-based-on-your-zodiac-sign/. Accessed 25 Oct. 2017.
“Daily Horoscopes.” Astrology.com, www.astrology.com. Accessed 26 Oct. 2017.
Darley, James. “A Map of the Heavens.” National Geographic, Dec. 1957,
x/n/xng195712a_90.jpg. Accessed 25 Oct. 2017. Map.
Garreau, Vincent. Particles.js. www.vincentgarreau.com/particles.js/. Accessed 20 Oct. 2017.
Guarino, Ben. “Chaos in the Zodiac: Some Virgos Are Leos Now (But NASA Couldn’t Care Less).” The
Washington Post, 26 Sept. 2016, www.washingtonpost.com/news/morning-mix/wp/2016/09/26/
Accessed 25 Oct. 2017.
Johnson, Michele, editor. “What Does Kepler Have Its Eye On?” NASA, 31 Aug. 2017, www.nasa.gov/
image-feature/what-does-kepler-have-its-eye-on. Accessed 25 Oct. 2017.
Kuiphoff, John. “Gyroscope with P5js.” Coursescript, edited by John Kuiphoff, 2017, www.coursescript.com/
notes/interactivecomputing/mobile/gyroscope/. Accessed 25 Oct. 2017.
Max. “[p5.js] Starfield.” Codepen, 9 Oct. 2016, www.codepen.io/maxpowa/pen/VKXmrW. Accessed 25 Oct.
McCarthy, Lauren, editor. P5.js. p5js.org/. Accessed 25 Oct. 2017.
McCarthy, Lauren, et al. Make: Getting Started with P5.js. San Francisco, Maker Media, 2016.
Mutalik, Pradeep. “Can Information Rise from Randomness?” Quanta Magazine, 7 July 2015,
www.quantamagazine.org/information-from-randomness-puzzle-20150707/. Accessed 25 Oct. 2017.
Oseid, Kelsey. What We See in the Stars: An Illustrated Tour of the Night Sky. Ten Speed Press,
Popova, Maria. “Salvador Dali Illustrates the Twelve Signs of the Zodiac.” Brain Pickings, 19 Aug.
2013, www.brainpickings.org/2013/08/19/salvador-dali-signs-of-the-zodiac-1967/. Accessed 25
Sky Map. Android and iPhone app, Mobius Entertainment, 2016.
Wolchover, Natalie. “From Gaia, a Twinkling Treasure Trove.” Quanta Magazine, 14 Sept. 2016,
www.quantamagazine.org/gaia-telescopes-first-data-set-released-20160914/. Accessed 25 Oct.