setup()
setup() runs once when the page loads. In p5.js apps that use DOM elements instead of canvas, setup() becomes a factory function that creates and configures all interactive elements. Notice how many element creation lines are the same pattern: create → assign ID → position/size → assign class. This is the standard workflow for building interactive web UIs with p5.js.
function setup() {
createCanvas(windowWidth, windowHeight);
noCanvas(); // Using DOM elements for UI
loadUsers(); // Load users from localStorage at startup
// Create Cover Screen Elements (initially visible)
coverContainer = createDiv('');
coverContainer.id('cover-container');
coverContainer.position(0, 0); // Full screen
coverContainer.size(width, height);
coverContainer.class('cover-screen'); // Apply cover screen styling
coverTitle = createElement('h1', 'Civilization');
coverTitle.parent(coverContainer);
coverTitle.class('cover-title');
coverStartButton = createButton('Enter Civilization');
coverStartButton.parent(coverContainer);
coverStartButton.class('cover-start-button');
coverStartButton.mousePressed(() => {
currentScreen = "login";
displayContent();
});
// ... [truncated: creates 50+ more DOM elements for login, signup, marketplace, etc.] ...
displayContent();
}Line-by-line explanation (8 lines)
🔧 Subcomponents:
initialization
Canvas and DOM Initialization
createCanvas(windowWidth, windowHeight);
noCanvas();
Creates a p5.js canvas matching the window size, then disables it since this app uses DOM elements (buttons, inputs, divs) instead of canvas drawing
function-call
Load Persistent User Data
loadUsers();
Retrieves saved user accounts from browser localStorage so players' accounts persist across page refreshes
dom-creation
Cover Screen Creation
coverContainer = createDiv('');
coverContainer.id('cover-container');
coverContainer.position(0, 0);
coverContainer.size(width, height);
Builds the initial welcome screen that greets all visitors with a title and start button before login
createCanvas(windowWidth, windowHeight);- Creates a p5.js canvas that fills the entire window—needed for p5.js to initialize, even though we won't draw to it
noCanvas();- Disables the default canvas since this app uses DOM elements (HTML inputs, buttons, divs) for the UI, not p5.js drawing commands
loadUsers();- Calls loadUsers() to retrieve any previously saved player accounts from localStorage—if this is the player's first visit, this does nothing and the default Admin account remains
coverContainer = createDiv('');- Creates an empty div element using p5.js's createDiv() function; this will be the container for the cover screen
coverContainer.id('cover-container');- Assigns a unique CSS ID to this div so styling rules in style.css can target it
coverContainer.position(0, 0);- Positions the cover screen at the top-left corner of the window (pixel coordinates 0, 0)
coverContainer.size(width, height);- Makes the cover screen as large as the entire window so it fills the viewport completely
coverStartButton.mousePressed(() => { currentScreen = "login"; displayContent(); });- When the player clicks the start button, change currentScreen to 'login' and call displayContent() to refresh the UI and show the login form
