In this article I will describe the basic setup to create a multiplayer interactive website/game using p5js, socket.io and express.

Screenshot of the video on my interactive website, reacting to the positions of participants interacting on my website.

The goal of the article is to setup a basic system from which you can expand to create your own multiplayer interactivity / game. We will go over how to use socket.io on the client and the server to continually update positions of each client in p5js which can represent a player playing the game or someone interacting with the website.

Server

This tutorial assumes you have some basic knowledge of node.js and npm. If not try to follow this tutorial first to install and get the basic knowledge of npm.

We only need two dependencies on the server:npm install express…


For a recent project I created, I had to upload images to Firebase storage. When these images are uploaded I also wanted to create a very small thumbnail image that I use as a marker in a custom google maps icon. You can view the project here.

Places project icon

For this tutorial, I assume you already have some knowledge of firebase and react and know how to initialize a firebase project and enable firebase storage.

When I first started to search how I could achieve this, most solutions involve using Firebase functions, to create the thumbnail on the server side triggered by…

Casper Leerink

I am an artist / creator / web developer, I like to create web applications and designs for art projects and artists.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store