Sketch behaves differently on macbook and raspi

p5.js Coding Questions
1

Hi, this sketch was created on a macbook and works fine there - decwar / galaxy · GitLab
There’s a grid of white dots, and then some white squares superimposed, as shown in the pic below.

On raspi, the grid of white dots appears but then vanishes when the white squares appear… Any ideas why it behaves differently on raspi?

Cheers, Noah

PXL_20250914_072640955
PXL_20250914_0726409551920×1446 283 KB

2

Given that grid is always the same (static drawing), you could draw it once on a p5.Graphics using createGraphics() inside setup():

Then in draw(), use image() to display it before drawing the square() ships.

1 Like
3

Thanks @GoToLoop - this is a good idea in all cases, to have the background ‘static’. Will try to get that working. Meanwhile, while trying that, discovered something else that does work. Can see it in the repo now. Just need to do the loadData(), not ‘re display’ ships. Commenting out that second display() made things look as expected on raspi.

if (frameCount % 10 === 0) { // every 60 frames (\~once per second at 60fps)
    loadData();
    // for (let i = 0; i < ships.length; i++) {
    //     ships\[i\].display();
    // }
}

Will keep trying with the static background and update here soon - Thanks! Noah

4

The whole frameCount block doesn’t make much sense.

Also, loadData() is a misnomer, given it doesn’t load anything, but populates the Ship array w/ the already loaded JSON.

I’d rename it to something like populateShipArray() and call it once from preload():

const ships = [];
var data;

function preload() {
    data = loadJSON('galaxy.json', populateShipArray);
}

function populateShipArray(data) {
    ships.length = 0;

    for (const ship of data.ships) {
        const { position: { v, h }, name } = ship;
        ships.push( new Ship(v, h, name) );
    }
}

If you feel the need to create some reset() function in order to bring the sketch to its initial state, you’d re-invoke populateShipArray() passing the original data JSON object within reset():

function reset() {
    populateShipArray(data);
}
1 Like
5

Hmmm, it’s key that the loadData() in the frameCount block does read the json file each time. The json file is changing, it’s being written/rewritten periodically by another process (a python robot-player connected to the PDP-10). So the frameCount block is refreshing / updating / redisplaying the ‘state of the ships’. Core idea:) The ships aren’t static, only the background grid is static :+1:

6

Having the background grid displayed ‘statically’ should help in other ways - the refresh / redisplay causes a noticeable ‘wipe / flicker’ on both mac and raspi - hopefully the background grid is main cause of that. And cpu usage is up by 40% on raspi, hopefully reduces that as well :grinning_face:

7

You could include a setInterval() in setup(), so it keeps re-invoking preload() after each INTERVAL:

const ships = [], INTERVAL = 2000; // 2 seconds

function populateShipArray(data) {
    ships.length = 0;

    for (const ship of data.ships) {
        const { position: { v, h }, name } = ship;
        ships.push( new Ship(v, h, name) );
    }
}

function preload() {
    loadJSON('galaxy.json', populateShipArray);
}

function setup() {
    // ...

    setInterval(preload, INTERVAL);
}
2 Likes
8

Rather than re-populating & re-instantiating ships after each JSON loading, we could instead just update each existing ship w/ the newly-arrived coordinates:

"use strict";

// ...

const ships = [], INTERVAL = 1000; // 1 second

function populateShipArray(data) {
    ships.length = 0;

    for (const ship of data.ships) {
        const { position: { v, h }, name } = ship;
        ships.push( new Ship(v, h, name) );
    }
}

function updateShipArray(data) {
    const shipData = data.ships;
    if (shipData.length > ships.length) return populateShipArray(data);

    const len = ships.length = shipData.length;

    for (var i = 0; i < len; ++i) {
        const { position: { v, h } } = shipData[i];
        ships[i].x = v; ships[i].y = h;
    }
}

function preload() {
    loadJSON('galaxy.json', populateShipArray);
}

function setup() {
    // ...

    setInterval(() => loadJSON('galaxy.json', updateShipArray), INTERVAL);
}
2 Likes
9

Huge thanks these are great ideas! Some are over my head but have a rough idea what they’re for :grinning_face: Went ahead and put as much as possible in and have it running. Can see it in the repo. Hmmm, ships do get destroyed and/or change so looking at updateShipArray(), something like shipData.length != ships.length. Experimenting with that now!:slightly_smiling_face:

10

Wow, it’s doing really good now - raspi is not struggling :grinning_face: Will continue building on these ideas and experimenting - learning tons here - huge thanks @GoToLoop. Will make a short video soon and let you know when it’s up so you can have a look :slightly_smiling_face:

1 Like