📝 Stage 14 Development Log

let config = {
    previewText: "JavaScript",
    fontFamily: "Bebas Neue",
    initialSize: 160,
    minSize: 20,
    maxTilt: 30,
    strokeEnabled: true,
    strokeWidth: 2,
    strokeColor: "white",
    fillEnabled: true,
    blurTrigger: 60,
    blurStrength: 10,
    blurSpread: 8,
    shrinkRate: 0.6,
    fadeSpeed: 0.4,
    tiltDecay: 0.98,
    creditDelay: 5000
};

✅ Fix Applied

• Added background-clip: text; alongside webkit version
• Changed <h5> to <h4> with adjusted font-size

✅ Fix Applied

.control-group select option {
    background-color: #2a2a2a;
    color: white;
}

✅ Solution: Add Delay State Machine

Added two new variables to track waiting state:

let isWaiting = false;
let waitStartTime = 0;

Modified draw loop to check delay:

if (isWaiting) {
    let elapsedWait = millis() - waitStartTime;
    if (elapsedWait >= config.creditDelay) {
        isWaiting = false;
        resetTextObject();
    }
}

Updated text deactivation to start waiting:

if (textObj.size < config.minSize || textObj.opacity <= 0) {
    textObj.active = false;
    isWaiting = true;
    waitStartTime = millis();
}

✅ Fix: Synchronize All Defaults

Updated config object and resetToDefaults() function to match:

creditDelay: 1500  // All three locations

✅ Implementation

Modified getStrokeColor() to accept opacity parameter:

function getStrokeColor(opacity) {
    switch(config.strokeColor) {
        case "white": return color(0, 0, 100, opacity);
        case "black": return color(0, 0, 0, opacity);
        case "gray": return color(0, 0, 50, opacity);
        case "gold": return color(45, 70, 85, opacity);
        case "silver": return color(0, 0, 75, opacity);
        default: return color(0, 0, 100, opacity);
    }
}

Updated both drawing functions to pass opacity:

// Normal text
stroke(getStrokeColor(textObj.opacity));

// Blurred layers
stroke(getStrokeColor(layerOpacity));

// OLD CODE (BROKEN):
if (credit.size > CREDIT_MIN_SIZE) {
    credit.size -= CREDIT_SHRINK_RATE;
    credit.size = max(credit.size, CREDIT_MIN_SIZE); // CLAMPED
}
// ...later...
if (credit.opacity <= 0) {  // ONLY CHECK
    credit.active = false;
}

✅ Solution: Dual-Condition Deactivation

// NEW CODE (FIXED):
credit.size -= CREDIT_SHRINK_RATE;  // Always shrink
// ... fade and move ...
if (credit.size < CREDIT_MIN_SIZE || credit.opacity <= 0) {
    credit.active = false;
    credit.opacity = 0;  // Ensure transparent
}

Why This Works: Credits deactivate when EITHER too small OR fully faded, not just one condition.

if (!credit.active && timeSinceStart > credit.startTime) {
    credit.active = true;
}

✅ Solution: hasPlayed Flag

Added flag to each credit object:

credits.push({
    name: studentNames[i],
    // ... other properties ...
    active: false,
    hasPlayed: false  // NEW FLAG
});

Updated activation logic:

if (!credit.active && !credit.hasPlayed && timeSinceStart > credit.startTime) {
    credit.active = true;
    credit.hasPlayed = true;  // Mark as played
    // Reset properties
    credit.size = INITIAL_FONT_SIZE;
    credit.opacity = 100;
    credit.y = height / 2 - 30;
}

Result: Credits only activate once, preventing reactivation loop.

// OLD SYSTEM:
let startTime = introSequenceTime + (i * CREDIT_DELAY_MS);
credits.push({
    name: studentNames[i],
    startTime: startTime,  // Fixed time
    // ...
});

✅ Complete System Redesign: Sequential State Machine

New Architecture: Completion-based activation

1. New Tracking Variables:

let currentCreditIndex = 0;      // Which credit to show next
let creditDelayTimer = 0;        // When delay started
let waitingForDelay = false;     // In delay period?
let creditsStartTime = 0;        // When credits begin

2. Removed startTime from Credits:

credits.push({
    name: studentNames[i],
    // NO startTime property
    active: false,
    hasPlayed: false
    // ...
});

3. New Activation Function:

function activateCredit(index) {
    if (index >= 0 && index < credits.length && !credits[index].hasPlayed) {
        let credit = credits[index];
        credit.active = true;
        credit.hasPlayed = true;
        // Reset to fresh state
        credit.size = INITIAL_FONT_SIZE;
        credit.opacity = 100;
        credit.y = height / 2 - 30;
        credit.tiltAngle = random(-MAX_TILT, MAX_TILT);
        console.log(`🎬 Activating credit ${index}: ${credit.name}`);
    }
}

4. Sequential Check Function:

function checkNextCredit() {
    let timeSinceStart = millis() - animationStartTime - totalPausedDuration;
    
    // Wait for intro sequence to complete
    if (currentCreditIndex === 0 && timeSinceStart < creditsStartTime) {
        return;
    }
    
    // All credits shown?
    if (currentCreditIndex >= credits.length) {
        return;
    }
    
    // If waiting for delay after previous credit
    if (waitingForDelay) {
        let delayElapsed = millis() - creditDelayTimer;
        if (delayElapsed >= CREDIT_DELAY_MS) {
            waitingForDelay = false;
            activateCredit(currentCreditIndex);
            currentCreditIndex++;
        }
    } else {
        // No active credits and not waiting? Show next one
        let anyActive = credits.some(c => c.active);
        if (!anyActive) {
            activateCredit(currentCreditIndex);
            currentCreditIndex++;
        }
    }
}

5. Updated Credit Deactivation:

if (credit.size < CREDIT_MIN_SIZE || credit.opacity <= 0) {
    credit.active = false;
    credit.opacity = 0;
    
    // Start delay timer before next credit
    if (!waitingForDelay) {
        waitingForDelay = true;
        creditDelayTimer = millis();
    }
}

6. Added to Draw Loop:

// *** STAGE 14b: Check if next credit should activate ***
checkNextCredit();

// Draw and update each credit
for (let i = 0; i < credits.length; i++) {
    updateCredit(credits[i]);
    displayCredit(credits[i]);
}