Collabcreature – collaborative mural

Project Title:  Collabcreature

Team: Alicia & Jingpo

Website URL; (Links to an external site.)

Smartphone: (Links to an external site.)



Project Description:

Collabcreature is an interactive screen-based digital painting game,  letting people use their images and creativity to produce a collective art. This is a collaborative interaction that can be played with as little as 3 people at minimum or 30 people maximum at a time.


Collaboration is all about teamwork, we wanted to experiment with an interaction that not only brings people together but initiates cognitive sharing. We were very interested in the amalgamation of the way people draw and think differently.  Even though we all conceptualize in our own individual way the whole of our differences can create something truly unique and beautiful.

Our research was conducted around collaborative murals and the role they play in bringing communities closer together; for instance when a neighborhood shares a wall mural and paints together. Other scenarios included designers having a preview of how other people work in their group and sharing an experience.  The potential benefit could be that it instills initial cohesion before starting an important project. We were very interested in creating something that effortlessly brought people working together in a positive scenario.


Using your smartphone or comupter, open the URL in Google Chrome.

  1. Read the homepage instructions.
  2. Get your canvas.
  3. Fill the canvas with certain constraints you are given
  4. Wait until the other players finish their drawings.
  5. Put 3 – 20 phones side by side to see the big picture
  6. If playing remotely with other collaborators upload your image and check the mural online.

Input: Touch screen drawing tool with different brushes for texture and creativity.

Output: Digital collective mural, an ability to see a singular entity transformed Into a bigger piece of art.




Stage 1 Brainstorming:

•Drawing improvisation game

•Broken telephone voice mobile game

•Make an animated mural together

Game maze


Stage 2  Concept Development

As a group the exploration of animation in a collaborative mural was the decided thought process we carried through with. We also hypothesized about how that interaction would work and what would be the best streamlined process of creating a visual that people engaging in would understand more effortlessly. The idea of making it a light show with animation after the individual canvases were completed was something we were also very interested in.   Due to time constraints, we knew we would not be able to create an animation to cohesively operate across all screens and came to the conclusion that was out of the scope of the project. For the broken telephone concept we discussed getting an automated voice message through text, then instructions to play the game through text message. The next idea was to delve into a motion-sensing maze that could move with the user. To conclude this stage in the process we made an executive decision to prototype a collaborative mural that could turn into any creature to facilitate sharing and understanding through an application. We also felt after initial exploration this was the project we could build within the given time constraints.

Process journal Day1: Research & Preparation

Goal: to create an interactive experience for multi screens.
Inspiration: We got the idea of creating murals using digital screens. Above is the following example of one of our references. People are drawing digital painting with the LambdaVision tiled display at EVL.

Inspiration regarding the line up multi smartphones on a desk.
Pinch is wonderful Multi-screen Interactive Application. People need to place the screens next to each other (in any alignment), ‘pinch’ the screens together and it will link them to work as a single large display. Please refer to the above reference.
(Japan Expo 2014 • Multi-screen Interactive Application)

collabcreature process day 2


Process journal Day 2: 

Day 2: Sharing findings & Brainstorm Ideation. Exploration of canvas size and developing constraints. Planning canvas that can easily be matched up for collaborative mural across 2 phones or more. Challenges thus far making drawing board and tools, p5.js, uploading individual drawings and merging into one big screen,PHP.

Process journal Day 3:
Sketching multiple configurations to further plan canvas. Storyboarding and conceptualizing interaction .


Process journal Day 4:
Wire-framing and Coding: Designing prototyping and coding. During this process we were considering how to bring the canvases together. At this point considering the various ways we could possibly push separate pages to each individual user. Researching sorting code for random files to be pushed through to our web page. We were also trying to work through the details of how many users we could use. How many canvasses we have to individually make and how we were going to make it responsive for mobile and web.


Process Journal Day 5, 6, 7

Putting images into the canvas and continuing to build draw functions.Trouble shooting through the sorting script and further research into php. At this point we were trying to prioritize if we should continue with the sorting script and php. With the canvases, we tried to backtrack and resize for mobile.While testing we were having a hard time using on the phone. During the final phase before presentation we could not get the gallery page to work with  php and sorting script but still had the ability to create collab art without saving the final canvas and uploading.

Process journal Dy 5,6,7

Stage 3  Game Testing and Critique


  • During exhibit classmates were looking around they were very curious about others progress
  • Interesting use of canvas some people drew in the lines
  • others wanted to expand
  • Interesting to see how the players used the guidelines on the canvas.
  • Element of surprise as people stepped away to see how the whole mural looked from everyone’s collaboration.

Takeaways for future iterations

  • Improve functionality of canvas
  • Add animations for further interaction
  • Investigate ways to expand library of canvases from different creatures to no guidelines at all.
  • A better function for sorting pages to incorporate further collaboration for more interesting possibilities.



Drawing Tool:

Upload Image:

(Collective painting session on a giant touchscreen)

(Japan Expo 2014 • Multi-screen Interactive Application)