Project Title – CityBLOCK
Team Member – Rajat Kumar
Kate Hartman & Nick Puckett
CityBLOCK is a modular city builder experience where the user controls the city building blocks with designed cubes to build their desirable dream city by rearranging the cubes.
What makes Toronto so unique? Being the largest city, most diverse, It’s home to a dynamic mix of tourist attractions, from museums and galleries to the world-famous CN Tower and, just offshore, Toronto Islands. And just a short drive away is Niagara Falls.
This project will let you build your version of Toronto city.
Everyone has their own imagination of their city. Since I came to Toronto city for the first time and i really surprised to see the fusion of old and new architecture of the city. I always wanted to show what I think about this city and I almost everyday go to the harbourfront and admire CN Tower, thinking about how it became the “ICON” of the city. The 0ther historical architecture of the city like Flatiron building, St Lawrence Market makes the city more unique and identifiable.
This is my take on to represent Toronto city from my perspective and of course, this city builder is modular so anything can be added later.
GITHUB LINK – here
The Reactable is an electronic musical instrument with a tabletop tangible user interface that was developed within the Music Technology Group at the Universitat Pompeu Fabra in Barcelona, Spain by Sergi Jordà, Marcos Alonso, Martin Kaltenbrunner, and Günter Geiger.
What I like about the retractable is any physical object can be smart and can interact, alter, do some modification with digital content.
The only input device is used here is only camera and it looks very clean in terms of setup for an open show.
This set up is for the table to interaction and requires a lot of effort to make a table and configure the camera with a projector.
- reacTIVision 1.5.1
- TUIO Client – Processing
- OV2710 – Camera
- Projector – Which supports the short-throw lens with a throw ratio of 0.6 and below.
- Infrared LED -850nm IlluminatorMaterial
- Wooden/Paper blocks.
- Table 4.5ft*3.5ft
- Projector Mount
These were the minimum requirement that I collected from several posts from reacTIVISION forum and
First of all, I wanted to try the reacTIVISION software and break it down to understand its working and constraints. Also, there is nothing much on the internet about it so I just started with documentation.
22nd – 23rd -ideation finalizing the concept
24th – 27th -Coding, configurating reacTIVision with processing.
27th – 30th-Testing and making ready for exhibition.
1st – 2nd-Installation/ setup
3rd – 4th-Exhibitions
After the first meeting, my whole project got flipped. Initially, I was thinking to make a tabletop interactive city builder and it became more awesome which was tracking fiducial markers from the front and projecting on the vertical plane. It was a smart move to hide the markers and making the aesthetics of the project more cooler.
I removed IR LEDS, Camera and started with webcam in order to look clean.
Initial graphics and their coupled fiducial markers
In this test1 I tested the recognition ability of reacTIVISION to detect the fiducial marker. I captured the image of the test marker and tested with reacTIVISION with different sets of the brightness of my smartphone and it recognized in almost every test run.
This time I was testing USB camera by Logitech and at this point, I don’t know how to configure the camera with reacTIVISION(it was .xml file) so without autofocus, it detects all the marker and it provides very low depth and with autofocus, it detects max 4 markers and it provides the larger range of depth but the marker that I have placed earlier in near to the camera gets out of focus when I try to put another marker far to the camera and hence limiting me tho the very low depth range interaction area.
After so many testing with a web camera, I found the minimal distance between camera and marker should 40-50 cm and its max distance should be 75-80 cm thus giving me a nice interactive region for interaction.
In test3 I tested the lag between the user’s input and the feedback on the screen. Text tracking was pretty good and constantly stick together with the marker.
In test 4 I tested with the graphic. initially, it was not rendering on the screen because there was another line of code to render a white background over the top of the image. After fixing that new challenges arises which was aligning images in one horizontal plane. The anchor point of the image is set in the center by default and it was fixed by offset with one common reference image. The distance between the two images is also affected by the camera distance so this created a need for a fixed platform.
I selected some historical buildings from Toronto city and made their digital vector for laser cutting. Nick gave me a suggestion to have multiple buildings for one building like 4 CN Tower. For CN Tower I have assigned one marker so I have to make 4 identical markers for each CN Tower. So in this way, I have multiple replicas of the same building and to keep the track of buildings and assigned markers I created an excel sheet. Then I attached markers to their respective buildings.
Some valuable inputs from peers and mentors
1. A staircase like a platform will help the user to interact with the BLOCK pieces in an intended way.
2. Add some animation or triggers to move images so that the project will be more interactive.
3. A bigger TV will be more impactful for the project rather than the projector.
For 1 a quick fix would be making region on the table with a marker but there was some user holds the building from the base and in this process, they unknowingly hinder the marker from the camera. So the staircase (did the laser cut on the same day after critique thanks to Jignesh for helping me out staircase ) was the perfect solution as it turns out to be after the OPEN SHOW.
For 2 I did make the background animation.
While playing it was too laggy and too slow to process the video although it is 5 MB and still I was getting too much lag. So disabled the video.
For 3 I used a TV screen as the graphics were much brighter and sharper and the most important thing was that the set got cleaner and minimal.
Take-Aways from the Exhibition
Some people were so surprised and looking for the sensor from where I am tracking the buildings. Some people touched on the table to check is there any Magnetic field or not. Some people thought that I am using some algorithm that detects the shape of the buildings ( kept me thinking for a while) and replicating them on the screen.
After explaining to them how cityBLOCK works, they complimented the project smart and clean in terms of set up.
There was an old couple and the man was too happy to play with the blocks and his wife told him to we have to see other’s work as well and I think this was a success for my project about being a simple interactive project.
Challenges & Learnings:
The biggest hurdle for me was that I had no idea where to start. There is no proper resources but I did know that this can be done all I need was just one project to understand the communication between the camera and processing.
Getting image graphics on the screen when I show a marker to the camera was the most time-consuming phase of the project. This was just a code issue that draws another white background on the top of images.
Once I got the images then it was just completing the task which was necessary for the project.