Interactive Design: The Power of Modular Parts, Standardization, and Good Organization
In the world of interactive design, there are certain practices that aren’t just useful—they’re essential. When building physical interactives, exhibits, or installations, using modular parts, standardized components, and keeping everything well-organized is not an afterthought. These are foundational principles that ensure the longevity and reliability of your interactive experience, especially given how often electronics can break down.
Modularity: Design with Maintenance in Mind
Modular design allows you to break down your project into individual, replaceable parts. Whether it’s a sensor, display, or control system, building with modularity means that each part of the interactive can be maintained, replaced, or upgraded without having to dismantle everything. This flexibility is crucial when electronics, which are prone to failure, need maintenance or repairs.
Key benefits of modularity include:
Easier Repairs: If one component fails, it can be swapped out quickly, keeping downtime to a minimum.
Flexibility for Expansion: If you need to add new features or update the interactive, modular components make it much simpler to scale without overhauling the whole system.
Prototyping and Experimentation: Modular systems allow for faster iterations and testing as you can mix and match parts to find what works best.
An example of this might be using a modular LED lighting system where each section can be disconnected and replaced individually. If a section of LEDs burns out, replacing that part takes minutes rather than requiring a full overhaul.
Standardized Parts: Consistency is Key
Using standardized parts in your interactive projects is another fundamental best practice. Electronics, by nature, can be unreliable, and having parts that are easy to replace and widely available ensures that you aren’t stuck searching for obscure or custom components when something goes wrong.
Standardizing parts means using components like:
Common Connectors: Standard connectors like JST, Molex, or screw terminals make swapping wires or replacing damaged connections easy. Screw terminals are especially useful for quickly securing or replacing wires in more permanent installations. They allow for solid, reliable connections without the need for soldering, making maintenance fast and straightforward.
Widely Supported Boards: Choosing hardware like Arduino or Raspberry Pi, which have broad community support, means you can quickly find replacements or troubleshooting resources when needed.
Universal Power Systems: Sticking to common power voltages (5V, 12V, etc.) ensures that you won’t be searching for rare power supplies in the middle of a malfunction.
Standardization isn’t just a convenience—it’s a long-term investment in your interactive’s reliability. If a part fails (and in electronics, they inevitably will), having standardized components ensures that replacements are easy to source and install.
Organizing for Success: Wires, Components, and Documentation
The final piece of the puzzle is organization—which is more important than many people realize. Poor organization of wires, components, and cables not only makes an interactive difficult to maintain but can also lead to performance issues or even shortened lifespans for your electronics.
Here’s how to get it right:
Cable Management: Keep wires tidy with cable ties, sleeves, or clips. Neatly routed and secured cables reduce wear and tear and make it easier to spot issues quickly. Tangled wires can lead to accidental damage and make troubleshooting a nightmare.
Labeling: Label your wires, connectors, and components. Color-coded wires for power, ground, and signal lines can save hours of guesswork when troubleshooting or maintaining a project.
Clear Documentation: Create diagrams of your wiring and connections, and store them in an easily accessible place. Good documentation ensures that anyone can pick up where you left off, or troubleshoot without needing to reverse-engineer your work.
When you maintain clean, organized wiring and clear documentation, your interactive isn’t just more robust—it’s much easier to repair, making it more cost-effective in the long run.
Building for Longevity
Combining modular parts, standardized components, and organized wiring creates an interactive experience that performs better and lasts longer. Electronics, as we know, are prone to breakdowns. By following these best practices, you’re not just creating something that works—you’re building something that can be easily maintained, repaired, or upgraded when the inevitable happens.
At That Indie Studio, we believe in designing interactives that not only engage users but are built to last. Using modular and standardized components isn’t just a technical choice—it’s a design philosophy that ensures longevity and high performance. From small-scale projects to large installations, these principles allow us to deliver reliable, lasting solutions.
Enhancing Creativity and Relaxation through DIY Wall Art
Engaging in DIY projects can significantly enhance creativity, provide relaxation, and rejuvenate mental clarity during demanding tasks. While the spontaneous creation of such projects can be enjoyable, the completion of these endeavors is equally important for a sense of accomplishment. To exemplify this, I embarked on a project to create a piece of wall art for my office.
Project Overview: DIY Wall Art
This project involved constructing a 4’x2′ wall art piece with a meticulously crafted wooden frame, featuring a distinctive 2-inch gap surrounding the artwork. Following extensive sanding and painting, I proceeded to 3D print a low-poly map of the Earth, which I then adhered to the board—a process that required approximately 18 hours.
Incorporating LED Lighting
Once the map was securely affixed and aesthetically pleasing, the next step was to integrate LED lighting. I strategically placed LED strips within the top and bottom recesses of the frame. These LEDs are programmed to synchronize with the sun’s movement, illuminating the areas corresponding to where the sun is currently shining. Utilizing an Arduino Nano and an RTC module, I developed the code necessary to control the LEDs, ensuring precise synchronization.
Final Assembly
The final phase of the project involved creating a compact housing for the electronic components and installing the necessary hardware on the back of the frame for wall mounting. This project, completed over a weekend, was not only enjoyable but also revitalized my creative energy and provided a tangible sense of accomplishment.
Key Insights
Creativity and Relaxation: DIY projects can significantly enhance both creativity and relaxation.
Project Completion: Finishing projects is crucial for achieving a sense of fulfillment.
Innovative Elements: Incorporating elements such as 3D printing and LED lighting can elevate the uniqueness of DIY wall art.
Technological Integration: Utilizing an Arduino Nano and RTC module for real-time LED synchronization adds a professional touch.
Embark on your own DIY journey to create a distinctive and personalized piece of art for your space. This project demonstrates how creativity, technology, and craftsmanship can converge to produce a truly unique and professional result.
Post – ACM InterActivity 2024 – Reflections
My first ACM InterActivity has wrapped up, and I’ve returned to Rochester, NY, with a wealth of experiences to reflect on from my time in Madison, WI. The conference was a unique opportunity to connect with a diverse group of professionals in the museum field—from large institutions and design firms to independents and aspiring museum founders. I was inspired by the innovative projects people are working on, their past achievements, and their ambitious plans for the future. The panels were particularly enlightening, featuring insights from experts across a wide range of museums. Additionally, exploring Madison’s local attractions and vibrant community added an extra layer of enjoyment to the trip.
Now that I’ve had some time to process everything, I find myself asking: What are the key lessons I’ve learned? How can I apply these insights to my work? As an independent interactive designer and developer, what should I keep in mind moving forward in this industry?
TLDR:
Museums are nothing without staff
Network, network, network
Play is what we strive for; education will follow
Strive for sustainability
Work in-house before shopping out to a trusted third party
Iterate, iterate, iterate
Museums are Nothing Without Staff
My number one takeaway from InterActivity was the fundamental importance of staff. The conference brought together over 1,000 people from around the world, representing museums of all sizes and stages. This gathering highlighted how crucial, dedicated and passionate staff are to the success of any museum. InterActivity was filled with individuals eager to share their successes and learn from their failures, underscoring the value of a supportive and knowledgeable team.
The public’s interaction with museum staff is more significant than one might realize. Staff members are the face of the museum—they ensure visitors are happy, maintain exhibits, assist with issues, and oversee the overall experience. They work behind the scenes to create safe and engaging environments, set up educational activities, and manage finances, grants, donors, and events.
In essence, museums are nothing without their staff. While exhibits and interactives are important, the interactions visitors have with staff can make the difference between a good visit and a memorable one. A well-supported and trained staff can transform a museum into a welcoming, safe, and enjoyable space for all visitors.
Network, Network, Network
One of the most valuable aspects of InterActivity was the opportunity to network. I met hundreds of individuals from various areas of the industry, all passionate and knowledgeable about their work. Networking went beyond exchanging business cards; it was about building meaningful connections. These interactions allowed me to share experiences, gain new insights, and discuss different approaches to common challenges.
I had the chance to talk with fabricators, which is outside my area of expertise but directly related to my work in bringing exhibits to life. These conversations were incredibly valuable, providing new perspectives and ideas on how to improve and innovate in my projects.
What struck me most was the culture of knowledge sharing. Everyone I met was open to answering questions, sharing their expertise, and offering advice. This openness created a collaborative environment where learning was mutual and continuous. It wasn’t just about what I could gain but also about how I could contribute to the community.
Networking at InterActivity was not limited to those within my specialty. Engaging with people from diverse backgrounds and areas of expertise broadened my understanding of the museum industry as a whole. These connections can lead to future collaborations, provide support, and keep me informed about the latest trends and developments in the field.
Building and maintaining a strong professional network is essential. It helps us stay connected, inspired, and informed, ensuring that we continue to grow and improve in our work. Networking is more than just a professional necessity; it’s a way to build a community that supports and elevates each other.
Play is What We Strive For, Education Will Follow
One of the recurring themes throughout the panels and discussions was the importance of play in museums. Play isn’t just about fun; it’s a powerful educational tool that engages visitors of all ages. Through play, children naturally learn about the world around them, develop critical thinking skills, and foster a lifelong love of learning. As an interactive designer, it’s crucial to create exhibits that are not only educational but also playful. This means designing experiences that are hands-on, engaging, and open-ended, allowing visitors to explore and discover at their own pace.
Inclusivity in play is essential. Museums should strive to create environments where all visitors, regardless of their abilities or backgrounds, can participate fully. This includes designing exhibits that are accessible to individuals with disabilities, providing multi-lingual support, and ensuring that content is culturally diverse and relevant. Inclusivity in play ensures that every visitor feels welcome and valued, creating a more enriching experience for everyone.
Moreover, play should not be limited to children. Family and caregivers play a crucial role in the learning process. By designing exhibits that encourage intergenerational play, museums can create opportunities for families to learn together. Interactive experiences that engage both children and adults can strengthen family bonds and foster a shared love of learning.
The goal is to create a holistic learning environment where education is a natural outcome of engaging, playful experiences. When families and caregivers are involved in the learning process, they can reinforce and expand upon what children learn during their museum visit. This collaborative approach to learning benefits everyone involved and helps to create a community of lifelong learners.
In summary, play is not just a means to an end; it is an essential part of the educational journey. By focusing on inclusivity and involving families and caregivers, museums can create enriching experiences that promote learning for all visitors.
Strive for Sustainability
Sustainability was another significant takeaway from the conference. Museums are increasingly focusing on sustainable practices, not just in terms of environmental impact but also in creating long-lasting and adaptable exhibits. This involves using materials and resources wisely, considering the lifecycle of exhibits, and designing with flexibility in mind to accommodate future updates or changes.
As a designer and developer, incorporating sustainability into your work means thinking about the longevity and adaptability of your creations. Use durable materials, design for easy maintenance, and consider how exhibits can evolve over time without requiring complete overhauls. Sustainable design not only benefits the environment but also ensures that museums can continue to offer high-quality experiences without constant reinvestment.
Work In-House Before Shopping Out to a Trusted Third Party
A key takeaway from the conference emphasized the importance of utilizing in-house resources before seeking external help. Museums often boast talented staff with unique insights and expertise that are deeply aligned with the institution’s mission and values. By leveraging these internal capabilities, projects can maintain a strong connection to the museum’s vision and benefit from direct collaboration and iterative development.
However, it was also acknowledged that there are instances where in-house capabilities may be limited or specialized skills are required. In such cases, seeking assistance from trusted third parties can provide fresh perspectives and additional expertise. As an independent exhibit creator, I understand the value of external support. My aim is to complement your team’s efforts and contribute to bringing your ideas and designs to life, should external assistance be necessary.
Collaboration is at the heart of successful partnerships. Working closely with your in-house team allows for a seamless integration of external expertise with internal knowledge, resulting in exhibits that are innovative, engaging, and true to the museum’s mission.
In summary, while maximizing in-house resources is ideal, there may be situations where external partnerships can enhance your projects. As an independent exhibit creator, I am committed to supporting your in-house efforts and ensuring that your ideas are realized in the most effective and inspiring way possible.
Iterate, Iterate, Iterate
The process of designing and developing interactive exhibits is rarely linear. Iteration is vital. Testing, receiving feedback, and making adjustments are all part of creating successful interactive experiences. The panels emphasized the importance of prototyping and user testing throughout the development process. This allows for refining ideas, identifying potential issues, and ensuring the final product meets the needs and expectations of visitors.
Even when an exhibit is built and available for visitors, the iterative process doesn’t end. It should continue through regular updates and improvements. Visitor feedback, observation, and evolving educational needs should inform ongoing iterations. By continuously refining and updating exhibits, museums can ensure they remain relevant, engaging, and effective learning environments.
This iterative approach goes beyond just exhibits; it extends to museum operations and staff training. Just as exhibits need to evolve to meet the changing needs of visitors, museum operations should also be regularly reviewed and refined. Processes should be evaluated, and improvements should be made to enhance efficiency and visitor experience. Additionally, staff training should be an ongoing process, with opportunities for professional development and skill-building provided regularly.
As you navigate this industry, embrace the iterative process as a continuous cycle of improvement. Don’t be afraid to revisit and refine not only your exhibits but also your operations and training practices. Each iteration brings you closer to a museum experience that is responsive, engaging, and impactful for visitors and staff alike.
Final Thoughts
Reflecting on my time at InterActivity, I am filled with inspiration and new ideas. The passion and dedication of everyone I met are truly motivating. As I move forward in my career as an interactive designer and developer, I will carry these lessons with me.
InterActivity was more than just a conference; it was a gathering of like-minded individuals committed to the future of museums. I look forward to seeing you all in 2025!
Quick idea prototyping helps productivity
I had been wrestling with an idea that was weighing on my mind, causing a bit of a productivity slump. So, I decided to invest a couple of hours in prototyping it, and the relief is palpable! Now, with the prototype in hand, I’m feeling much more energized. However, I’ve also acquired a new project to tackle. And then I thought I can’t be the only one who has this issue, so I decided to do a write up of my process.
Ideas are invaluable and serve as the foundation for virtually everything we create. However, they can also be productivity killers at times. Spending excessive time pondering them, regardless of what else you’re doing, can prove to be a significant distraction. I’ve found myself in this situation numerous times, where I become so absorbed in an idea that I make mistakes while working on other tasks, or find myself ruminating on it even during moments of relaxation or throughout my daily activities. It can be paralyzing; I’ve caught myself just sitting there, lost in thought, only to realize twenty minutes later that I’ve accomplished nothing.
To address this, I’ve adopted a practice of simply prototyping my ideas. As a developer at heart, I personally dive into coding without concern for proper structure, semantics, or standards. Everything ends up messy and uncommented, with no intention of reusability. These prototypes serve solely as a means for me to flesh out the idea. I’ve found that not worrying about the finer details facilitates a more productive process of bringing ideas to fruition while remaining mindful of the time and effort invested.
This approach isn’t exclusive to coding; it can be applied to any medium. Whether you’re writing without regard for structure or rules, drawing with abandon, or engaging in any other creative pursuit, the key is to dive in swiftly and unapologetically embrace the messiness.
The ultimate objective is to materialize your idea in a tangible form of your choosing. By dedicating focused time and energy to it, rather than allowing it to sporadically occupy your thoughts throughout the day, you’re more likely to gain clarity and closure. While the idea may not always materialize as expected, the process of bringing it to life can offer valuable insights. Sometimes, you’ll realize the idea isn’t viable or timely, and that’s perfectly fine. Keep generating new ideas.
However, if an idea continues to occupy your thoughts persistently, despite your attempts to move on, it may signify genuine passion and merit further exploration. While juggling numerous projects and commitments, it’s essential to prioritize accordingly. If an idea consistently captivates your attention, it’s worth allocating additional time and resources to it.
The emotions experienced during rapid prototyping may vary, but each iteration contributes to your growth as a creator. Whether an idea flourishes or is ultimately abandoned, the act of materializing it offers valuable lessons and insights. Embrace the journey, and continue with your day, armed with newfound clarity and perhaps a few less distractions, but always ready to revisit and refine your ideas.
Draw your own platformer – Tech overview
In a previous post, I talked about the concept of Draw Your Own Platformer and who it was built for. Now, let’s delve into the technology behind the game, I will talk about both its hardware and software components. While I will provide a high-level overview, feel free to reach out for more detailed insights.
Draw Your Own Platformer is an game that empowers users to create their very own platformer levels through a unique blend of physical creativity and technology. By utilizing specific colors to represent distinct elements, players can draw their very own levels, and then proceed to play them!
Color-Coded Creativity:
Black: Designate platforms, shaping the ground work of your level.
Green: Mark the starting location, where your adventure begins.
Red: Mark the goal, guiding players towards completion.
Orange: Scatter collectibles throughout your level, collect them all to open the exit.
Hardware Components:
Flatbed Scanner: Utilized for capturing hand-drawn level designs.
Computer (Laptop/Desktop): Powers the game environment and image processing.
Input Devices (Keyboard/Controller/Joystick): Enables user interaction with the game.
Paper and Markers: Used for drawing level elements.
Software Components:
Unity (C#): Serves as the game engine, managing gameplay and graphics.
PyCharm (Python): Facilitates image processing and hardware control.
High Level Workflow Overview:
Startup: Upon launching the program, users select their input method and scanner.
Pre-Scan: The program checks a JSON file controlled by Unity to confirm if scanning is permitted, ensuring it aligns with the game state.
Scanning: Users initiate the scan, which captures the hand-drawn level design. Python, through OpenCV and PIL, processes the scanned image.
Image Processing: Python analyzes the scanned image, identifying specific colors (black, green, red, orange) to represent different level elements. These elements are then extracted and saved as individual images.
Interpretation in Unity: Unity receives the processed images and interprets them to construct the game environment.
Level Construction: Unity identifies boundaries, start, goal, and collectible positions based on the processed images. It creates corresponding game objects and assigns appropriate colliders for interaction detection.
Gameplay: Players can now play the custom-designed level, with Unity managing player movements, collisions, and goal completion.
Data Management: Upon completion, level data is saved to a JSON file, and associated images are organized for future use.
Additional Features: Time limits, moderation options, and random level generation enhance gameplay variety and user experience.
In-depth Overview for Python and Unity
Python handles a significant portion of image processing and hardware control. Here are the key components:
wia_scan: Controls scanners and manages the scanning process.
numpy: Assists in handling arrays of pixel data used for image processing.
PIL (Python Imaging Library): Used for basic image manipulation tasks such as opening and converting images.
cv2 (OpenCV): Responsible for reading and manipulating image data, extracting color information, and manipulating images.
pygame/Keyboard: Manages input controls for keyboard, controller, and joystick.
json: Facilitates communication between Unity and the Python executable to manage game states and control locking mechanisms.
Time: Used for timing purposes.
OS: Handles file paths and file saving operations.
Upon executing the program, the user selects their input method and scanner. The program then listens for the specified input. Before scanning, it verifies if scanning is allowed by checking a boolean value stored in a JSON file controlled by Unity. This ensures scanning only occurs when the game is in the appropriate state.
The scanning and image processing phase involves using OpenCV to read pixel data, identify specific colors, and create individual images for each color category. These images undergo rotation, resizing, and conversion to PNG format with transparent backgrounds before being saved.
Below is a quick look at one of the functions that parses image data.
# Run the image through the filter function
black_result = get_gray_to_black_regions(os.path.join(script_dir, 'main_transparent.png'))
# Rotate the image
rotated_black_image = cv2.rotate(black_result, cv2.ROTATE_90_CLOCKWISE)
# Resize the image
resized_black_image = cv2.resize(rotated_black_image, (792, 612))
# Save out the image
cv2.imwrite(os.path.join(script_dir, 'black_image.png'), resized_black_image)
def get_gray_to_black_regions(this_image):
# Step 1: Read the image using OpenCV
img = cv2.imread(this_image, cv2.IMREAD_UNCHANGED)
# Step 2: Extract the alpha channel
alpha_channel = img[:, :, 3]
# Step 3: Define the threshold range for gray to black
lower_gray_to_black = np.array([0, 0, 0])
upper_gray_to_black = np.array([150, 150, 150])
# Step 4: Create a mask where gray to black pixels are white and everything else is black
mask_gray_to_black = cv2.inRange(img[:, :, :3], lower_gray_to_black, upper_gray_to_black)
# Step 5: Set non-gray to black pixels as transparent
mask_non_gray_to_black = np.where(mask_gray_to_black == 0, 255, 0).astype(np.uint8)
alpha_channel[mask_non_gray_to_black == 255] = 0
# Step 6: Set all non-transparent pixels to black
img[alpha_channel > 0] = [0, 0, 0, 255]
return img
Unity
Unity handles game-related aspects, including GUI, character control, and additional image processing to build the level. Upon initiating a scan, Unity enters a scanning mode, awaiting completion. After the scan, it retrieves the created images and interprets them:
The black image defines the level boundaries, with Unity creating a corresponding mesh for player movement. It does this by creating an array of pixels and once it is done looping through everything creates a Texture 2D and then applies a mesh over that shape.
The green image marks the starting position, the red image denotes the goal, and orange images represent collectibles. Unity processes these images to determine their respective positions in the game world by getting the center vector 2 point of the visible pixels. instantiating objects accordingly. Colliders are added to collectibles and the goal for interaction detection.
Upon parsing all data, the player can start playing the created level. After completion, the level data is saved to a JSON file, and specific images are moved to a separate directory for later use. This data allows for the creation of random maps for users to play.
Additional functionalities include time limits, timeout mechanisms, and a moderation screen for managing user-generated content.
While there’s much more to explore, I hope this overview provides a helpful starting point for those interested in creating similar interactive experiences. Feel free to reach out with any questions!
If you’re interested in trying it out or providing feedback, feel free to contact [email protected]. I’m working on polishing the game and plan to release it for download with full documentation in the next month or so.
Draw your own platformer – Concept Post
As part of my new adventure as a full time interactive designer and developer, I have decided to start on a new series of interactive games designed for educators, libraries, museums, communities, and families to engage with anyone who has an interest in tech and games. This series is meant to be physical interactives that combine some physical aspect (drawing, cameras, blocks, scanners) that can be used to create a digital experience. The first release is a draw-your-own platformer game that promises fun and creativity for all. All while using easily accessible components, a computer and a scanner! And of course, this is all free!
The current status is that this is a demo of the entire process to make sure it all works, the next steps are to make it look better, create documentation and make sure everything works as expected.
In this activity, players can unleash their imagination by drawing their own platformer levels. Using different colors, such as black for platforms, green for the starting position, red for the goal, and orange for collectibles, you can design your own unique challenges. Once you are done you can then scan in your level and play it!
Players must race against the clock, with only 45 seconds to collect all the items before reaching the goal. If drawing isn’t your thing, you can still enjoy the game by playing on another players map that they had drawn and scanned in.
I’ve made sure the game is easy to play with keyboard controls, controllers, and joysticks. Plus, our moderation tool lets you manage maps before they’re added to the rotation.
Perfect for schools, libraries, museums, and homes, our game requires minimal equipment and teaches basic game design principles in a fun and interactive way.
Above is a picture of some levels created at an event at one of my local libraries, we had close to 50 levels drawn at the event!
If you’re interested in trying it out or have any feedback, feel free to reach out to [email protected]. I am working hard to polish the game and plan to release it for download with full documentation in the next month or so.