# Setting socket data over draw background || scope problem?

**URL:** <https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780>\
**Category:** Libraries\
**Created:** [December 20, 2018, 1:43pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780 "2018-12-20T13:43:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Honkitonkie](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Honkitonkie](https://discourse.processing.org/u/Honkitonkie)\
**Post date:** [December 20, 2018, 1:43pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/1 "2018-12-20T13:43:27Z")

</div>

Hi,

I just created this account because i spent two entire afternoons trying to debug the following code: (As of now it doesn’t work (but i feel like it should))

With the risk of asking a question with an obvious answer, her goes:

1 Description of problem  
I recreated the link to [sockets.io](http://sockets.io) made by Daniel Shifman in his introduction to sockets. With this I made a send data to a server concerning the postion of every `ship` in play.

This data is communicated well enough and i receive the x position from other browsers. With this I want to draw the `other` )from another browser’ in the client window.

When iI console.log the data it displays fine. However when I attempt draw something with this x-value it does not display over my background. (it works if i cancel out the background).

Any suggestions as to how i can visualise my data?

Things i’ve tried:

- Setting a referencing function in draw()
- attempting to data to another variable
- Moving the function as to where the data is called around throughout my project.
- sending the data over to draw as a parameter
- changing the parameters ( name and function calls --\> seems silly but one does what one can)
- I tried moving the background call but it is essential that it remains in draw for the rest of my project to display correctly.

As i receive data form sockets, the data from the other browser is received correctly but the data from the “own” is set to undefined.  
I have no clue as to why but since it is the other ship i wanted to display i went along and filtered the undefined data out.

I’ve uploaded a screenshot of my project running with the console open. As you can see here the x-data from the other browser is displayed.

How do I manipulate it so that the background does not override this data?

 ![screenshot-raingame](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/071a36faa22a4e1ecadd76c09813861bea50e2a8.png)

Below you can see a screenshot of newDrawing function (which is displaying the x in the console but is not showing the rectangle)

Only p5.js and [socket.io](http://socket.io) are used in this project.

I would sincerely like to know how i can make my dreams happen and as to why this problem is tearing my brain into pieces.

Any advice would be much appreciated!

---

<div class="post-metadata">

**Author:** ![Honkitonkie](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Honkitonkie](https://discourse.processing.org/u/Honkitonkie)\
**Post date:** [December 20, 2018, 1:48pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/2 "2018-12-20T13:48:05Z")

</div>

Since I could only upload one image. See the newDrawing function here ![newdrawing](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e89ce8dad251b360e1b9e1498faa0c947565d55b.png)

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 20, 2018, 10:18pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/3 "2018-12-20T22:18:45Z")

</div>

Would you mind posting you sketch code and your server code? If you don’t know how to do that use ```` ```` and then paste your code within the back ticks.

---

<div class="post-metadata">

**Author:** ![Honkitonkie](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Honkitonkie](https://discourse.processing.org/u/Honkitonkie)\
**Post date:** [December 20, 2018, 11:45pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/4 "2018-12-20T23:45:18Z")

</div>

Not at all, Although I must apologize. I can make a wonderous mess of things.  
I also added the ship.js file just in case.

```auto
--- Server code: --- 
var express = require('express');
var app = express();
var server = app.listen(3000);
app.use(express.static('public'));
console.log("my server is running");
var socket = require('socket.io');
var io = socket(server);
io.sockets.on('connection', newConnection);

function newConnection(socket) {
    console.log('new connection' + socket.id);
    console.log(socket.id);
    socket.on('ship', mouseMsg); //FUNCTIE VOOR ONTVANGEN VAN DATA --> mouseMsg 
    function mouseMsg(data) {
        //io.sockets.on('ship', data);
        console.log(data.x);
        var moreData = data.x;
        socket.broadcast.emit('ship', moreData); //DATA TERUG NAAR CLIENT
        // if (socket.id == socket.id){
        // socket.broadcast.emit('ship', data);
        // }
        //io.sockets.emit('ship', data); //DEZE STUURT NAAR IEDEREEN INCL. ZELF
        console.log(data.x);
    }
}

--- Sketch ---
var socket;
var drops = [];
var lifes = [];
var ship;
var score = 0;
var highscore = 0;
var lifelost = false;
var spliceIt = false;
var myVar;

function setup() {
    createCanvas(innerWidth, innerHeight);
    for (var i = 0; i < 10; i++) {
        drops[i] = new Drop();
    };
    socket = io.connect('http://localhost:3000'); // maakt connectie met de server vanaf de client
    //socket.on('mouse', newDrawing);
    resetSketch();
    socket.on('ship', newDrawing);
}

function newDrawing(moreData) {
    if (moreData !== undefined) {
        console.log(moreData);
        noStroke();
        fill(255, 0, 100);
        rect(moreData, height - 60, 20, 60);
    }
}

function mouseDragged(Ship) {
    //console.log(ship);
    var data = {
        x: ship.x
        , y: ship.y
        , w: ship.w
        , h: ship.h
    };
    //console.log(data.x);
    socket.emit('ship', data); // Emit is de brug naar de server
} //EINDE mouseDragged
function scoreIt() {
    this.score++;
    textSize(32);
    text(score, 10, 30);
    text(this.highscore, 10, 60);
} //EINDE scoreIt
function loseLife() {
    lifelost = true;
    if (lifelost === true) {
        clearTimeout(myVar)
    }
} //EINDE loseLife            
function eindSpel() {
    if (lifes.length === 0) {
        alert("You got wet");
        resetSketch();
    } //EINDE IF
} //EINDE EINDSPEL
//HIER BEGINT DE DRAW FUNCTIE
function resetSketch() {
    ship = new Ship();
    this.highscore = 0;
    // var data = {
    // x: ship.x, 
    // y: ship.y,
    // w: ship.w,
    // h: ship.h,
    // score: highscore
    // }
    for (var i = 0; i < 3; i++) {
        lifes[i] = new Life();
    };
    //socket.emit('ship', data) // Emit is de brug naar de server
} //EINDE RESETSKETCH
function draw(moreData) {
    background(228, 246, 255);
    //BEGIN DROP HITS SHIP
    for (var i = 0; i < drops.length; i++) {
        if (frameCount % 40 == 0) {
            drops[i].push = new Drop();
        }
        if (drops[i].hits(ship)) {
            drops[i].highlight();
            if (this.score > this.highscore) {
                this.highscore = this.score;
            }
            this.score = 0;
            myVar = setTimeout(loseLife, 250);
            eindSpel();
        } //EINDE IF DROPS HIT SHIP
        drops[i].show();
        drops[i].fall();
    } //EINDE FOR DROPS
    for (var j = lifes.length - 1; j >= 0; j--) {
        stroke(51);
        if (lifelost === true) {
            lifelost = false;
            lifes.splice(j, 1);
            console.log("happened");
        } //Einde if spliceIT
        line(innerWidth - 15 * j, 30, innerWidth - 15, 60);
    } //EINDE FOR LIFES ARRAY
    ship.show();
    ship.move();
    ship.limit();
    scoreIt();
    mouseDragged();
    newDrawing();
} //EINDE DRAW
function keyReleased() {
    if (key != ' ') {
        ship.setDir(0);
    }
}

function keyPressed() {
    if (keyCode === RIGHT_ARROW) {
        ship.setDir(1);
    }
    else if (keyCode === LEFT_ARROW) {
        ship.setDir(-1);
    }
}

--- ship ---
function Ship() {
    this.x = width / 2;
    this.xdir = 0;
    this.y = height - 60;
    this.w = 20;
    this.h = 60;
    this.show = function () {
        fill(51);
        rect(this.x, this.y, this.w, this.h);
    }
    this.setDir = function (dir) {
        this.xdir = dir;
    }
    this.move = function (dir) {
        this.x += this.xdir * 8;
        // this.x = mouseX;
        //this.y = mouseY;
    }
    this.limit = function () {
            if (this.x < 0) {
                this.x = innerWidth;
            } //IF
            else if (this.x > innerWidth) {
                this.x = 0;
            } //ELSE IF
        } //LIMIT
} //:CONSTRUCTOR

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 21, 2018, 5:26pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/5 "2018-12-21T17:26:40Z")

</div>

> [@Honkitonkie](#):
>
> How do I manipulate it so that the **background()** does not override this data?

As you know, **draw()** is called back at about 60 **frameRate()** by default: 🖌

1. [reference | p5.js](http://p5js.org/reference/#/p5/draw)
2. [reference | p5.js](http://p5js.org/reference/#/p5/frameRate)

It also means your **background()** clears the canvas at that same FPS: 🛸

> **[reference | p5.js](https://p5js.org/reference/#/p5/background)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

So it’s pretty much moot to draw inside a callback. It’d last 1 blink frame only after all: 🙄

> [@Honkitonkie](#):
>
> ```javascript
> function newDrawing(moreData) {
> if (moreData !== undefined) {
> console.log(moreData);
> noStroke();
> fill(255, 0, 100);
> rect(moreData, height - 60, 20, 60);
> }
> }
> 
> ```

Either store the data received inside your callback in some global variable in order to display it later under **draw()** or… do the drawing in a separate p5.Graphics via **createGraphics()**: 💡

1. [reference | p5.js](http://p5js.org/reference/#/p5/createGraphics)
2. [reference | p5.js](http://p5js.org/reference/#/p5.Graphics)

---

<div class="post-metadata">

**Author:** ![Honkitonkie](https://avatars.discourse-cdn.com/v4/letter/h/dec6dc/32.png) [@Honkitonkie](https://discourse.processing.org/u/Honkitonkie)\
**Post date:** [December 23, 2018, 6:36pm UTC](https://discourse.processing.org/t/setting-socket-data-over-draw-background-scope-problem/6780/6 "2018-12-23T18:36:51Z")

</div>

Thanks a bunch for the advice and steering me in the right direction.