Assignment 4: Collaborative Drawing with p5.js

For this project, I took my garden project from assignment 3, and expanded it into a multiuser experience.

To begin, I took my original code from the singular portion of the assignment (posted here). I then added socket.io capability. In order to manipulate my code and actually see it update, I ran it on a local server.

Screen Shot 2017-02-20 at 6.09.42 AM.png

From there, I adjusted my server.js code so that it contained websocket events, and could receive data from both a client and a server at the same time – allowing for two people to create a collaborative drawing together. In my case, this is the planting of a garden, where both users can make additional flowers appear together, from different sides, as you can see below.

In the end, my project is pretty simplistic, but this is actually the first time I’ve felt semi-comfortable with coding JavaScript. I don’t want to go so far as to say it was a breakthrough, but this felt like a definite move in the right direction.

Watch the garden at work:

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s