GSoC 2015: Tool/Framework for multiscreen sketches


I'm Kevin Martin Jose, a final year Computer science student from college of engineering, Trivandrum. I was accepted into GSoC 2014 with Swathantra Malayalam Computing as a mentoring organization. You can read about my previous GSoC project here.

The idea

What if your sketches were not limited by the four walls of your screen? What if your sketch could span across multiple screens, and render that gigantic interactive demo screen by screen? I propose a framework that can automatically scale a sketch in p5.js to multiple screens.

Will this really work?

I've been experimenting with this idea since a few months, and that resulted in Openmosaic.

I've uploaded screencast of a working but minimal version of the framework on youtube.

When I found out that doing what I had set out to do is going to be very difficult without any drawing libraries, I was quick to jump to p5.js. I modified the library to suit my needs. See this branch.

That looks complicated and buggy

Yes, the project is in its initial phase now and I've been experimenting with different ways to move forward. Loading and scaling sketches is not as simple as it should be. The dream is to be able to write a normal sketch using p5.js, press a few buttons, and suddenly put together your and all your friends' phone screens to view the entire sketch.

The primary challenge

I do not know how this project will fit in with p5.js. I'm not sure if what I'm writing can eventually evolve as a library. It can end up as a tool, hopefully. I'm using a nodejs server to facilitate communication and synchronization between the clients. My changes to p5.js are more or less a hack. I added some openmosaic specific code to core.js, environment.js and plans on calling a scaling function from inside most functions in the /src/shapes folder. Surely, that sounds bad :-S . Regardless of whether the project is relevant to GSoC or not, I'd really like some help as how to better integrate my changes with p5.js

About me

You can read about my interests and my projects on my blog and here is a link to my github profile. I used c for my previous GSoC project. I'm comfortable with c, javascript, java and python.

I fell in love with programming because of processing, way back in 2011. I owe this community big time. Keep up the awesome work =D>


  • I love the idea for this proposal and think it would make a great add-on for p5.js. Have you see this Processing library: This might be a good reference as well and I would love to align these projects if possible.

    Do you think the work you've done with openmosaic could be broken out into its own library so that it would not require the modifications to be made directly into p5.js?

  • Hi,

    It's very unfortunate that I did not come across the MPE library earlier! After reading the 'How it works' page, I think both openmosaic and MPE works on the same principles - a server for message passing and syncing the sketches across clients, with the clients rendering the sketches independently. Also, does MPE scale the shapes? That is, if a circle that is meant to be drawn in a 400x400 canvas is put in a master display of 800 x 1600, will the circle elongate and become an ellipse?

    If I put the p5.js specific changes into another js file and load that file after p5.js, then the new functions will overwrite the p5.js specific ones. This way the original p5.js library can stay intact. Let me see if this works.

    I would love to align these projects, and create an 'MPE p5.js' if possible.

  • Great! Also feel free to take a look at the issues list as this may be helpful in crafting a proposal.

  • I was successfully able to break my changes into another file and it worked well.

    I am trying to see the work that is already done with MPE. But I cannot find instructions to compile it. Installing MPE from processing's library manager failed with the message 'the downloaded files do not contain a library'. I cloned the git repo and I did not see a build script and 'javac' on Most-Pixels-Ever-Processing/src/mpe/client/ gave me errors.

  • I was just able to successfully install the MPE library using Processing 3.0a5 on Mac OS X. What version of Processing and what OS are you using? Here is the direct link to download the library:

  • edited March 2015

    I was using processing 2.2.1 on linux mint 17.1. I was able to use MPE after extracting it from the .zip file. However, my small MPE sketch failed to run.

    I tried again using processing 3.0a5 and everything worked fine. Also, I've made some edits to the tutorial wiki. Changed resetEvent(Client c) to resetEvent(TCPClient c).

  • Hi, I have some ideas for MPE-p5.js :

    Instead of storing the offset positions in an xml file, it would be easier for the end user if he/she can see all the connected screens in a control panel and click-drag the screens to set their local positions.

    A more hands-free approach. For example, MPE-Processing requires the user to write the drawing functions inside the frameEvent() function. Also, the user has to manually pass a message on each mouse click to indicate that the mouse is shared. This is what I've been able to do with openmosaic so far:

    1. call a `mosaicInit()` function in `setup()`. This function initializes all the event handlers and translates the canvas to its local position.
    2. Automatically shares the mouse between canvases. Each time the user clicks, a signal is passed on to all other clients. But this is hidden from the user. It is possible to have a `setSharedMouse()` function to turn this feature on or off.

    The idea is to minimise MPE specific functions that the developers will have to use, so that a sketch written for a single screen can easily be modified to work across multiple screens.

    What do you think? Should deviations like above from the original MPE be included in my proposal or is the community more interested in a more direct port of MPE?

  • I don't think there's any reason to do a direct port of MPE where it doesn't make sense for the web. So I think we can reimagine MPE for p5.js as we see fit, thanks!

  • I've submitted an initial draft of the proposal. I was not aware of any organization specific templates. It would be great if someone could do a quick review to see if there is anything staggeringly wrong with it. Thanks a lot!

  • Thanks, we do not have an official proposal template. If there is anything missing you'll receive a comment in Melange. Thanks!

Sign In or Register to comment.