p5.js draw sketch in which the drawings made by previous users are also still visible

nielsvanhaaften

Hi, In p5.js I am trying to create drawing canvas in which the drawings stay on the canvas. So when the page is reloaded all of the drawings made by previous users are still visible in the canvas. So basically all the users are creating one big drawing.

The problem I am having is to keep the drawings on the canvas. I have programed the websockets using Daniel Shiffman's tutorial about websockets. But I haven't found a way to store the var data and reupload it when the page is reloaded.

here is my userside code

var socket

function setup() { 
  createCanvas(displayWidth, displayHeight);
  background(220);

  socket = io.connect('http://localhost:3000');
  socket.on('mouse',newDrawing);
} 

function newDrawing(data){
    ellipse(data.x,data.y,100,100);

}

function mouseDragged(){
    console.log('Sending:' + mouseX + ',' + mouseY);

    var data = {
        x: mouseX,
        y: mouseY
    }

    socket.emit('mouse',data);
    if (mouseIsPressed)
  ellipse(mouseX,mouseY,100,100);

}

and this is my serverside code

var express = require('express');

var app = express();
var server = app.listen(3000);

app.use(express.static('public'));

console.log("lala doe die het of doet die het niet");

var socket = require('socket.io');

var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket) {
    console.log('new connection: ' + socket.id);


    socket.on('mouse', mouseMsg);

    function mouseMsg(data){
        socket.broadcast.emit('mouse',data);
        console.log(data);
    }
}

kfrajer

If I understand correctly, does your server save all the data? Then when your page again, the client will connect to the server and load any previous session if it exists?

Are you familiar with the preLoad() function?

Kf

nielsvanhaaften

Hi kfrajer,

Thanks for your response

Yes, that's the general idea. But I am also still looking for a way for the server to store the data. And the more I am digging into the problem I am realizing that it has more to do with javascript and serverside programming than it has to do with p5.js. Hoever the preload() function is a good suggestion I hadn't thought of for the client side!

Do you maybe of a good javascript forum where I could find the answer?