A very rough, sketched-out storyboard to help us clarify our vision for the final documentation video:

It has been a whirlwind of a week! We have come a long way, and our doing our best to operate as well as we can in light of all the chaos involved with campus closures due to COVID-19. For our blog post this week we have a few guiding questions:

1. Where is your project at now / what have you accomplished since the 90%?
2. Have you had to make adjustments to your project due to the campus building closings? If so, what alternatives / adjustments are you making for your project?
3. What is left to get you to 100% to share a “live demo” with the class after Spring Break?
4. What concerns do you have or feel stuck on?

Where is your project at now?

Our project is functionally at 100%. Since 90%, we finished building out the walls of the room, got the projector installed, finalized the code, equalized the sound, had a few users interact with it, and took documentation photos & videos.

What alternatives / adjustments are you making for your project?

Since the closure of the Atlas building prevents us from working any more on our project, we had to dramatically adjust our timeline. We were unable to remove our project from the Atlas building, so we had to get everything done before our access to the building stopped. So our alternative is that we can’t spend as long on finite detail work of Flow Room, but we were able to accomplish all major goals of our project!

What is left to get to 100%? Ready for live demo?

The only thing we need to do to be ready for the live demo is to edit our documentation footage! We want to deliver as realistic a video as we can showing people our project, and get viewers to get as much of the Flow Room experience that we created as possible.

What concerns do you have or feel stuck on?

We’re a little concerned that we didn’t get enough documentation (even though we spent over 2 hours taking photos and videos of the final project), but that concern may just be coming from the finality of us not being able to access our project any more. From here on out it is just working with the footage we have to make great a final presentation and video!

Pictures from the process:

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Goals for Week 9:

1. Have main room transformations made: test which fabric we want to project on, fabric hung, room shape custom to how we want it
2. Fix bug in code: when phone is removed, the p5 sketch stops and is ready to be actuated again
3. Refine enclosures: embed circuits inside, add drywall mud, repaint
4. Make 90% slide deck

What We Accomplished & Learned:

Refining Enclosures

Now that we know what space we are building for, we were able to take measurements of our room and build longer wiring systems for all of our components. We worked in the BTU Lab to solder 5 sets of extended wires for the Neopixels and the power supply.

Meanwhile, Elsa refined the paint jobs on our enclosures, using drywall mud to make the phone slot and control panel unified forms. We still have to re-paint the phone outline onto the phone slot, but you can see the improvements in the pictures below!

We used drywall mud to smooth out any irregularities on the surface of our wood. Then, we sanded off any excess drywall. We also sliced off any hot glue that was sticking out from when we constructed our laser cut wood pieces. Lastly, we added a few coats of white paint!

• 

• 

• 

The next step was to map out our circuitry onto a solderable protoboard that we could use to make our control panel enclosure more permanent. This took significantly more time than we expected, but after quite a few hours in the BTU lab, we got our circuitry all done!

p5 Sketch Improvements

Here is a link to our final p5 visualization! Now we just have to replace the visualization that we currently have running in our room with this one. It is 5 minutes long, that has the capability to stop and restart when the phone is inserted / deleted. We may play around with color values still as we finish off setting up the room and the projector, but otherwise it is good to go!

We are happy with how the color transitions work when users switch out RFID pebbles, and the textured walls look very nice with the animations.

Room Setup

We were so excited to move into our new room and start building everything out! First, we moved all of our components into the room and started putting up our LED strips.

Next, it was time to start changing the shape of the room by building wire structures to bevel the corners of the room and allow for a dome-shaped roof. We wanted to alter the shape and feel of the room to help the user feel that they are entering a different sort of space, and not just another meeting room in the ATLAS building. We used the wire grids to form curved structures in the corners of the room, planning to hang paper off of the wire to form new “walls” of the room.

Then, we started actually attaching the paper to the walls. We crumpled the paper to give it a more interesting texture and make the room feel more organic.

We didn’t completely finish creating our paper walls for this week, but we made it far enough to prove the concept and test out our projection on the surface. We are really excited to finish completion in the coming weeks, and refine all of the small details of the room to perfect the user experience!

90% Slide Deck

Here are some screenshots of our completed slide deck for our 90% progress presentation!

1. Finish p5 progression (5 minutes, colors incorporated)
2. Refine Neopixel colors for environments and try to make more dynamic
3. Finish pedestal
4. Finish integrating all audio, visual and serial components
5. Timeline and blueprints for making everything modular

Finish p5 Progression

This week, we extended our p5 visualization to be a full 5 minutes with the 5 color schemes! Also, once the animation finishes its 5 minute sequence, it fades to the background color and starts again. This indicates to the user that it is over, but if they want to stay in the room they can continue to enjoy visuals. Here is the link to the most recent iteration. One thing we want to refine a little bit as we move forward is the transition from the 4th to 5th minute because it is a little abrupt. We also need to get the flow field to run again after the first loop, which will just mean we have to declare instances of our Particle objects in a more dynamic way. Another interesting thing, as the animation loops through, we think a translate() statement is unintentionally affecting our canvas somewhere, because the visuals look slightly different the second and third times around than they did the first time. Still neat visuals, but something to perhaps debug in the future.

Refine Neopixels & Add Dynamic Components

One of the biggest goals for this week was making the Neopixels more dynamic by adding in more interesting visual effects. We wanted to add in a “twinkling effect” to one of our Neopixel strips that would hold a different color palette for each of the “environments”.

We used a lot of logic from this code example by Mark Kriegsman that featured the ability to choose from different color palettes and transition between them. It took some time to adapt his helper functions into our code, but his documentation was great so the process was relatively painless.

Once we got the twinkle effect working with the rest of our code, we experimented with different palettes for each of the environments and tweaked things until we were happy with the final effect. We may still refine the transitions in the coming weeks, but for now we can move on. Check out the effect in our demo video at the end of this post!

Finish Pedestal

This week, we finished up the pedestal up that will hold the phone slot! It will sit near the entrance to the room, and will be the first thing the user interacts with. Our classmate and close friend Sara is a woodworking expert and was very helpful in this process!

First we cut four large pieces of scrap wood for the sides of the pedestal using a table saw. Then, we used a nail gun to attach these little right angle blocks to the wood pieces to help us be more precise when nailing the pedestal walls to each other.

This is what the inside of the structure looked like when all four walls were attached!

Then we used a palm sander to smooth out some unevenness along the corners.

To make it even smoother and more precise, we filled in any other cracks, holes, or irregularities with drywall mud.

This helped the pedestal transform from looking like several pieces of wood put together into a unified form. Which is good since we are prioritizing aesthetics in our final Flow Room.

After that we sanded off any excess drywall.

The last step was painting!

We still may do a few touch ups, but overall are very satisfied with our pedestal.

Finish Integrating all Audio, Visual and Serial Components

After Elsa worked hard on developing the p5 sketches into a continuous 5-minute visual progression, it was time to integrate those with the p5 sketch that handles the serial events and audio triggers.

Since the last p5 visualization and the new one both use “color modes” to easily change the colors of the visualization in real-time, this process mostly included adding some helper functions for the more complex visualizations and updating the integers for each color mode. One way to take this further in future weeks is to add in a smoother transition between the color modes, and to figure out a way to restart the visualization when a new user has come into the room.

Check out the video below to see the twinkling Neopixels and more complex visualizations at work!

Timeline and Blueprints for Modularity

This week, we thought we would have to come up with a robust plan for making our project modular, in case we had to move it between rooms for our final documentation and expo. But – on Tuesday, we got huge news! We had officially been approved for building our project in a room in the ATLAS building. This means that going forward, we can focus on the effects and aesthetics of the user experience instead of packaging everything up for portability and modularity. We are so excited! Thank you to our instructor Sheiva and ATLAS’s Chief of Operations Stephanie!

Goals for Week 6:

1. enclosures complete and installed
2. large-scale neo-pixel installed
3. projection screen installed and working
4. setting up speakers to be connected to computer

What We Accomplished & Learned:

Enclosure Fabrication

Fabricating our enclosures comprised the bulk of the work for this week. While we had gotten our materials last week, this week we had to create plans for laser cutting, laser cut all of the parts, paint them, construct everything and begin installing our electrical components. We also painted our clay enclosures for the RFID tags.

Installing Neopixels, Speakers and Projector

As our final step in getting to 50% progress, we got our Neopixels, projector, and speakers all working in our temporary space. We used a projector from Arielle to start projecting our fractal visualizations. Later on, we might try using a more advanced projection software to map everything to our space. Below, you can see a video of everything working.

50% Progress Presentation

For our 50% Progress presentation, we created this Google Slides document. Check out some images from our presentation below!

Our second feedback session for this week was with Zack Weaver. Zack is very active in a local makerspace, as well as curating the Maker Made Exhibition here at the Boulder Public Library. We met Zack this semester as he is teaching the Object class while our other mentor Arielle is on maternity leave, and we are both LAs for him. Zack has very creative ideas regarding interactions and immersion, and had some great input for us! We started out by giving him a little demo about what we have so far:

Zack immediately had a very positive reaction to the tactile experience of our RFID rocks, and very helpfully talked through his stream of consciousness as he tried our experience. He realized that he had to “sacrifice” his phone to activate the rest of it, and when the audio & visuals started he was interested to see where else the project was going.

At first he gave us some ideas on how the user could personalize the experience further. For instance, we’re already having the user involve their phone by putting it in the slot, but how else could we use the phone. Bluetooth connection? A demo app? If we have the time and resources to push the phone beyond being dead weight for the project, Zack recommends we do so. Something we could look into is bluetooth connections available through Processing.

Also, Zack urged us to think about why people would want to be in the room. Will it make them feel special? Important? Calm? Secure? Beyond that, he connected those questions to why people want to be on their phones and how that can make them feel a sense of control and being special. This leads us into the last element of feedback Zack gave us regarding aesthetics.

Aesthetics are becoming an increasingly important part of our focus as we begin to design our enclosures and details of the room. This will be crucial in creating our immersive experience and really delivering users with an impactful time in Flow Room. Zack recommended we sketch and vision board, and decide how we want to build a sense of “magic” in our room. (Hiding electronics, beautiful enclosure & ambience design, etc). One important result of this process is it will allow us to refine our design choices and give us process backing to justify them. It will give us clarity and direction! A few good things for us to look into are Disney imagineers, sci-fi movies, reflect on our own priorities and transform those into sketches.

Once we get confirmation on what space we can build out in, the aesthetic design and fabrication will really be put into motion!

Goals for Week 5:

1. Make and paint enclosures for RFID tags out of self-drying clay
2. Get materials for control panel enclosure
3. Mentor feedback sessions (Arielle and Zack)
4. Poke Sheiva about space

What We Accomplished & Learned:

Make and paint enclosures for RFID tags out of self-drying clay

Our classmate Sara pointed us towards self-drying clay, which we realized would work great for our RFID tag enclosures because we wouldn’t have to fire it. We ordered a 5lb box from Amazon, and built our RFID enclosures on Monday of this week!

After splitting the block into even pieces (one “stone” was about one tenth of the full block) we began to form it into shapes. We knew we wanted the form of the blocks to feel natural in the user’s hand, and after trying a few different things we settled on oval shaped stone-like pieces.

This process involved forming the round shape, then elongating some regions of it to form the oval. We also used some water on our fingers to smooth out the irregularities on the surface. Although we could not get it perfectly smooth, the slight bumpiness emulates a natural stone even more!

Above is a photo of how we arranged the RFID tag on the bottom along with a magnet, just to give the user a little bit of tactile feedback when they know they place the tag in the right spot to activate the RFID reader. Our enclosure will have a receiving magnet also embedded in it.

Lastly, we left our little RFID stones out to dry overnight! Next steps involve sanding off any rough spots, painting them white, and adding a design on top to indicate which reader triggers which setting in the room.

Get materials for control panel enclosure

We decided to make our enclosure primarily out of wood, with a few other things for detail work. On Tuesday of this week we went to Home Depot to get a piece of thin birch wood. We also went to Michael’s to get decorative paper to diffuse the neopixel light through holes in the wood, along with paint for the enclosure and our RFID pieces. We already had some clear acrylic on hand!

Mentor feedback sessions

This week, we met up with our real mentor for Capstone (the amazing Arielle Hein) and a creative technologist from BLDG 61 (a makerspace at the Boulder Public Library), Zack Weaver. These feedback sessions were very helpful in directing us where to go from here with our project! To document what we discussed and learned in these feedback sessions, we wrote up separate blog posts for them, which can be found here and here.

Poke Sheiva about space

We are getting the the point in our progress where we are ready to start installing our hardware in the space! So we reached out to our instructor Sheiva about getting that confirmed.

For our first mentor review, we met with our actual mentor for our Capstone project, Arielle Hein. Arielle was our original teacher when we took the Object physical computing class in ATLAS, and we’ve worked with her for a couple of years now. She was in California at the time of our meeting, so we did a video chat with her. This made it a little more difficult to show her our demo, but we were able to catch her up to speed and she had some great thoughts for us!

Arielle helped us to reflect on the overall user experience and come up with some exciting ideas about how we can be intentional about the room’s flow. Ideally, we want the users of our room to leave feeling really relaxed and wanting more of the experience.

Arielle told us a few thoughts to help us think about the user experience, including the importance of doing a lot of testing with our visuals to see what works for people. First of all, she thought the flow fields could be a little slower for a more relaxing experience. She also told us it could work great to try and combine calming nature footage or other imagery with our computer-generated visuals.

To implement our visuals, we can try using a software called MadMapper in combination with our projector to blend video components with p5 or kaleidoscope visualizations. MadMapper also allows you to customize your projection to the space available within a room, so once we know what space we are designing for, we can get started with our projector and mapping our visuals onto different materials. Arielle also had a small projector available that we can start experimenting with, and she suggested that we test out the experience for the intended amount of time (10 minutes?) to see if the visuals hold our attention.

Arielle also pointed out that the visualizations didn’t necessarily have to be interesting and unpredictable for 10 minutes if the goal for them was something else, such as putting the user into a “trance” or meditative state where they could just be alone with their thoughts. We just have to get clear on the purpose of each component in the room and design from there!

Arielle also encouraged us to really lean into the changing-environment feature of the room, and build out everything in the room (imagery, sound, color, lighting, etc.) to create big changes in the user’s experience depending on which environment was chosen.

In terms of the overall user experience, we discussed some possibilities for how the user would come into the room, what position they might be in, and how we can adapt for different preferences. Arielle suggested that we should make sure users cannot see their phone screen at all when it is in the slot, in case they see it light up and want to check it partway through the experience. She also mentioned making the phone slot seem special (like an “altar”), so that the choice of giving your phone up for a few minutes feels like an intentional and mindful choice. We really liked this idea and want to be sure to frame the entire experience as something intentional.

This conversation with Arielle gave us more ideas about how to set everything up in the room. For instance, we want to separate out the phone slot from the environment controls, and also place it somewhere (on a pedestal?) near the entrance of the room, so that the user can put their phone in when they first enter and get it when they leave. Overall, speaking with Arielle was really helpful and inspired us to make our vision a little bit clearer for the room, make some changes to the layout, and do a lot of user testing and experimentation.

Goals for Week 4:

1. Integrate fractals into RFID/lights/sound code so that different RFID tags change the colors of the fractal
2. Getting power supply working with lots of Neopixels
3. Advanced fractal visualization with rectangular format
4. Equalize audio tracks
5. Consult pottery expert (Nate’s aunt) on logistics and details for crafting ceramic tag holders
6. Consider interaction within the space

What We Accomplished & Learned:

1. Connect the fractal animations with RFID interaction

Since last week we got the sound and lights working with the RFID tags, and we separately got our fractal samples working, we wanted to integrate the two components this week. The goal was to get our RFID tags to change the sound and lights (which we had last week), but also the color of the fractal visualization. Luckily, our web server was already using p5.js to play the sounds (the same programming language that our fractal visualizations were written in), so it wasn’t too hard to integrate the two! After a few trial and error sessions, we had the tags triggering everything correctly. Check out a video of it working below!

2. Get power supply working

We were both a little nervous for this part, because hooking up our 5V 20A power supply was something that we had never done before and we didn’t want to cause an explosion or anything (or fry any of our electrical components!). We got a little bit of guidance from Libi in the BTU Lab, because we were a little worried that our wires would be too small for the 20A current. Libi said it should be fine, so we carefully hooked everything up and gave things a run with our test strip of Neopixels.

Relieved, we adjusted our code and moved on to the next step. We hooked up a much larger strand of 150 leds and tested that with the power supply, which worked just fine.

Now we were really in business. Things were looking good! As a final step, we hooked up an additional 150-led strand of Neopixels and tested with sending different colors to different strands to make sure everything was working properly.

3. Advanced p5 fractal animations using rectangular canvas

We also continued to develop our visualizations! As we looked more into applications of math, motion, and p5, we discovered flow field visualizations. Flow fields use vectors to guide particles with their own speed, velocity, and acceleration. If the p5 canvas is not redrawn every frame, the paths of the particles can be tracked to show their pattern. (The coding train tutorial was very helpful to us figuring out how to do this successfully). These are very mesmerizing to watch the patterns generate, and sort of remind us of water flowing or topographical maps. So, sort of a shift away from fractal spiral imagery, but still on the same vein of natural influence. And, we maintained the color customization since that was received very well last week during user testing. Our most current iteration for our project can be seen here. (An important thing to note is that you must change colorMode in both the sketch.js files and the particle.js file to ensure the color palettes match). We are excited to get more user feedback on this style of visualization, and perhaps combine more aspects of our spiral p5 sketches with the flow fields.

4. Equalize audio tracks

In our user tests last week, we realized that a few of the audio tracks for the environment soundscapes (beach, thunderstorm, campfire, underwater, and forest stream) were louder than others and some were quieter than others. Since we want them to smoothly transition from one soundscape to another, having jarring volume differences wasn’t ideal. So this week, we pulled all the audio files back into Audacity and adjusted the volumes until they all sounded relatively consistent, then re-exported them as mp3 files.

One thing we discovered during this process was that the audio files sounded very different when played on external speakers vs. the laptop speakers. For this reason, we may have to do some additional equalizing later on, after we finalize the set of speakers that will be used in the final installation. Depending on how different frequencies sound on the final speaker set, we may have to do some additional adjustments on the audio tracks.

5. Consider material

We also did some more thinking about what materials we might use for our enclosures, since we will probably be starting to fabricate enclosures soon. For the RFID tags, we are strongly considering using ceramic to form little housing containers in the form of organic, handheld objects. Ceramic would be more flexible to work with than the other options we’ve considered, like acrylic, wood, or stone, and it would allow us to create more organic shapes more easily.

To figure out what our options might be for using ceramic, Nate called his aunt, who regularly creates pottery and does her work in a studio in Boulder. We learned that there is a pottery place in Arvada called Stone Leaf pottery that will fire pottery items for you, which could be a great option. We also learned that there are differences between high-heat and low-heat firings, which each have their pros and cons depending on what we want our final result to be. Right now, we are leaning towards crafting our RFID enclosures out of pottery, firing them, inserting the RFID tags into each one, and then sealing the enclosures shut. For the rest of our materials, we are still considering a few different options. Wood might give more of a rustic feel, but be rougher on the hands, whereas acrylic would be sleeker and smoother to the touch but might give off too much of a tech-y vibe to our users. In user testing, the most popular material was glazed ceramic, with stone and acrylic next. People seemed to like wood less than the other materials, perhaps because of a fear of getting splinters when handing the wooden objects.

6. Consider the interaction within the space / space needs

One important aspect of our project we started approaching this week was considering the components of our project within the context of our space. A big part of this will of course be more tangible once we have a room locked down for us to build out, but it is important to think about interactions within the space as we develop our hardware and visualizations. We want everything to be cohesive towards achieving a meditative space, rather than seeming like a jarring combination of components next to each other in a room.

For example, we need to think about configuration of seating & placement of RFID enclosures (will the user be at a chair and small desk? on the floor with a cushion? something else?) as well as the projection. Paying attention to experience design in this way will help our entire Flow Room be much more impactful.

However, since we still do not have a specific space, at this point we are being as intentional as we can with our decisions and communication, so once we do begin to install our components we can do so effectively as a team.