I’m trying a big project, at least for my skills.
I’ll reduce the question in a moment, but let me give a little context first.
I have a server, in node, getting data from api and serving my client.
Client side I’m building some basic html. A header, a simple html navbar, and a footer. between those two, a canvas.
I’m not sure how to handle dependencies, it’s being a headache.
But i got everything working (until now) by this setup:
P5js is imported from CDN via a script tag in index.html
I got a entry.js, linked from index.html via ascript tag that has a type="module" property. This is the only way I found to make import CoolClass from ./uorModules/‘CoolClass.mjs’` work.
It does work.
Cool.
So now how to access p5, globalMode? Well I got code for talking to the server, and data to be passed to my sketch. A little trial and error, i figured out that I should use instance mode. I don’t remember anymore, but in Global mode I got some error (but then again, I might have chosen poorly, and my erro could be some where else.).
Anyway that how I was working.
// som e talking to the server.
// await answer
//runP5()
import Deputado from './ourModules/Deputado.mjs';
import CsDeputado from './ourModules/CsDeputado.mjs';
import { colors } from './ourModules/colors.mjs'
import { p5Singleton } from './ourModules/p5Singleton.mjs';
import Grid from './ourModules/Grid.mjs'
let deputados = [];
let lastUpdate = '';
let initialData = []
//The singleton instance
let grid;
// == == == == ==
function getInitialData() {
axios.get('/api/start')
.then(response => {
// Handle success
console.log('Data received from server:');
initialData = response.data.deputados
console.log("Hereby", initialData);
const lastUpdate = new Date(response.data.lastUpdate);
const formattedDate = lastUpdate.toLocaleDateString(undefined, {
day: '2-digit',
month: '2-digit',
year: '2-digit'
});
const formattedTime = lastUpdate.toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
hour12: false
});
const formattedDateTime = `${formattedDate} as ${formattedTime}`;
document.getElementById('ultima').textContent = `dados atualizados em: ${formattedDateTime}`
runP5();
})
.catch(error => {
// Handle error
console.error('There was a problem with the fetch operation:', error);
});
}
//call it
getInitialData();
function runP5() {
const s = (p) => {
p.preload = function() {
}
p.setup = function() {}; // === === === --- -> eof setup
//draw
p.draw = function() {
}; // === === === --- -> eof draw
p.windowResized = function() {
resetCnv();
};
// EOF P5 default functions
// === === == === === == === === ==
// === === == === === == === === ==
// other functions and objects using p5
// vvvv ====== ==== vvvv ==== ====== vvvv
function calcCnvHeight() {
}
function resetCnv() {
}
function displaySorted(field) {
}
}; // === === === === === === === ---- -> end of 's' (instance of p5)
let myp5 = new p5(s);
}
// === === == === === == === === ==
//some classes using p5
// vvvv ====== ==== vvvv ==== ====== vvvv
But them things grown and I start needing a lot of classes to have things organized, and making all this code inside this function in just one file is… well… not ideal at least.
Passing ref to p5 in every object or a static reference, was my next choice, but then I’m writing code like SomeCoolClass.p5.createVector(x, y).
I tried a Singleton.
// p5Singleton.mjs
const p5Singleton = {
p5Instance: null,
setInstance: function(p) {
this.p5Instance = p;
},
getInstance: function() {
return this.p5Instance;
}
};
export { p5Singleton };
than in entry.mjs
import { p5Singleton } from './ourModules/p5Singleton.mjs';
unction runP5() {
console.log("Im in!")
const s = (p) => {
//asap set the p5 Singleton
p5Singleton.setInstance(p);
// more code... blah
and in classes, now in their own file .mjs
export default class CsomeClass {
constructor(obj) {
// the Singleton instance
this.p = p5Singleton.getInstance();
this.id = obj.id;
this.nome = obj.nomeEleitoral;
//blah...
// and code in the class using p5 goes like
this.p.rect() /// not really better anyway
and then … well I got some code I’ve wrote before, using a different setup that do extends p5.Vector.
In thatproject I got 4 files for my classes all imported as script tags in index.html without 'module', my sketch as well was a tag and in Global mode. and that worked also. Nothing imports or exports nothing. The class that extends p5 was like this:
class Gpoint extends p5.Vector {
constructor(x, y) {
//lets base it in p5Vector
super(x, y);
//several.. this is the original fixed point, not used yet
this.fixed_point = createVector(x, y)
//the adjusting point coordinates
this.gpoint = createVector(x, y);
// anchor point of the window at creation time - to calc proportions
this.origin = createVector(0, 0);
//the size of window. passin 1 as I'm going to divide by it: https://github.com/processing/p5.js/issues/5821
// WINDOW SIZING !!
this.size = createVector(windowWidth, windowHeight, 1);
//the ratio of the point to window size
this.ratio = Gpoint.sub(this.gpoint, this.origin).div(this.size);
//those so we can use it just as p5Vector, but maybe they just should replace gpoint
this.x = this.gpoint.x;
this.y = this.gpoint.y;
//work arround fo rthe same bug https://github.com/processing/p5.js/issues/5821
this.z = 1;
return this;
} // constructor
// make from p5Vector
static make_from_vector(v) {
return new Gpoint(v.x, v.y);
}
well I managed to use imports and exports so in my new setup entry.js sees evertyhing. (there are more classes involved. But when I run everything GPoint complains **createVector is not defined**. If I `console.log(p5) from the line above the one throwing the error, i get the p5 obj…
So …
GRRRRRRR
sorry…
Than I said. ok I/m going global mode! But for that i must take thetype="module" from script tag and then all my imports stop working again. omg should i go for having all classes linked from a specific script` tag in html and use Global.
well I’m lost.
any insight will help me
ps: perhaps a singleton instance Gpoint?
