setup()
setup() runs exactly once when the sketch loads. Use it to initialize your canvas, load data, and prepare graphics. The localStorage pattern here is powerful: it lets you save small pieces of data (strings) that survive even after closing the browser—perfect for persistent games, preferences, or counting events like this romantic timer.
🔬 This else block runs only once—the first time the sketch loads. What happens if you change 128 to 0? Or to 365? The timer will show a different starting point when you first refresh.
} else {
// Si no está almacenada (primera vez que se carga), la calculamos y la guardamos
let now = new Date(); // Obtiene la fecha y hora actuales
startDate = new Date(now.getTime() - (128 * 24 * 60 * 60 * 1000));
localStorage.setItem('teAmoDesdeHaceStartDate', startDate.getTime().toString());
}function setup() {
createCanvas(windowWidth, windowHeight); // Crea un canvas que ocupa toda la ventana
// --- Lógica para la fecha de inicio persistente ---
let storedStartDate = localStorage.getItem('teAmoDesdeHaceStartDate');
if (storedStartDate) {
// Si la fecha de inicio ya está almacenada, la recuperamos
startDate = new Date(parseInt(storedStartDate));
} else {
// Si no está almacenada (primera vez que se carga), la calculamos y la guardamos
let now = new Date(); // Obtiene la fecha y hora actuales
startDate = new Date(now.getTime() - (128 * 24 * 60 * 60 * 1000));
localStorage.setItem('teAmoDesdeHaceStartDate', startDate.getTime().toString());
}
// --- Fin de la lógica persistente ---
textAlign(CENTER, CENTER); // Centra el texto horizontal y verticalmente
fill(0); // Establece el color del texto a negro
// Crea el objeto createGraphics para el fondo y dibuja los girasoles una vez
backgroundGraphics = createGraphics(width, height);
drawSunflowersBackground();
}Line-by-line explanation (10 lines)
🔧 Subcomponents:
createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire browser window, allowing the sketch to be responsive and full-screen
if (storedStartDate) {
Checks if a start date was previously saved; if yes, loads it; if no, creates and saves a new one so the countdown always references the same date
backgroundGraphics = createGraphics(width, height);
Creates an invisible canvas object that will hold the predrawn sunflower background, improving performance by drawing flowers once instead of every frame
createCanvas(windowWidth, windowHeight);- Creates a p5.js canvas with dimensions matching the full browser window, enabling a full-screen responsive display
let storedStartDate = localStorage.getItem('teAmoDesdeHaceStartDate');- Retrieves a previously saved start date from the browser's localStorage; returns null if nothing was ever saved
if (storedStartDate) {- Checks if a start date exists in storage; if truthy (not null), enters the block to load the saved date
startDate = new Date(parseInt(storedStartDate));- Converts the stored string back into a number, then creates a new Date object from that timestamp, restoring the exact previous start date
let now = new Date();- Gets the current date and time from the system
startDate = new Date(now.getTime() - (128 * 24 * 60 * 60 * 1000));- Calculates a start date 128 days in the past by subtracting milliseconds (128 days × 24 hours × 60 minutes × 60 seconds × 1000 milliseconds) from the current time
localStorage.setItem('teAmoDesdeHaceStartDate', startDate.getTime().toString());- Saves the calculated start date as a string in localStorage so it persists across page reloads and browser sessions
textAlign(CENTER, CENTER);- Sets text alignment to center both horizontally and vertically, making it easier to position text precisely
backgroundGraphics = createGraphics(width, height);- Creates an offscreen canvas (graphics object) that has the same dimensions as the main canvas, used for drawing the background once
drawSunflowersBackground();- Calls the function that fills the backgroundGraphics object with a sky blue background and scattered sunflowers
