https://github.com/jasterv/shared-drawing-nodejs

Client-Server p5.js sketch using Node.Js as backend
https://github.com/jasterv/shared-drawing-nodejs

Last synced: about 1 year ago
JSON representation

Client-Server p5.js sketch using Node.Js as backend

• Host: GitHub
• URL: https://github.com/jasterv/shared-drawing-nodejs
• Owner: JasterV
• Created: 2020-04-05T00:45:02.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-04-25T20:42:29.000Z (about 6 years ago)
• Last Synced: 2025-03-07T21:32:58.039Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 2.02 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# NODE JS Integration for a simple p5.js sketch

THE ORIGINAL IDEA OF THE PROJECT IS FROM [THE CODING TRAIN](https://www.youtube.com/user/shiffman)

I wanted to start learning javascript so I thought the best way to do it could be by building stuff with p5.js, a great graphics development tool for the Web!

So I did a simple sketch that paints the canvas when you press the mouse, and then the X,Y coords are send to a Node.js server implemented easily with Express.

The sketch represents a client that sends the data through a socket, getting help of the [socket.io](https://socket.io/) library while the server waits for connections and prepares to resend the data it receives.

  Here you can see an example:

  

  The server starts listening to the port 3000 on localhost and there are 3 browsers open working as clients.

  

   + Running the server:

  

        ![Server running](https://github.com/JasterV/Shared-Drawing-NodeJS/blob/master/nodejs_example.png)

  

   + Running clients on port 3000:

  

        ![The clients running](https://media.giphy.com/media/jRwGOND98wTvRZayIB/giphy.gif)