Three iterations to perfect the "flying through space" effect
Stage 8 β 8a β 8b
The Stage 8 series represents an iterative design process where we refined the starfield animation through three versions, each addressing specific visual and motion concerns raised during testing.
Evolution Summary:
Request: "In version 8, based on the 7a version, let's address the fact that the stars should be moving toward the edges of the canvas as if we were flying through space into the canvas. Therefore they should be getting bigger as they approach the edge and moving faster. Can we create that effect? Obviously they will need to be 'replenished' as they are removed from the array once they leave the canvas."
Key Requirements Identified:
Design Goal: Simulate the visual experience of traveling through a starfield at high speed, like the classic space flight sequences in science fiction films.
Core Approach: Stars spawn at center and move outward in all directions, accelerating and growing as they travel.
// *** STAGE 8: STARFIELD MOTION CONFIGURATION ***
// Initial star speed (pixels per frame)
const STAR_INITIAL_SPEED = 0.5;
// Star acceleration factor
// Higher values = more dramatic speed increase
const STAR_ACCELERATION = 1.02;
// Star size growth factor
const STAR_SIZE_GROWTH = 1.5;
const STAR_MIN_SIZE = 0.5;
const STAR_MAX_SIZE = 4;
/**
* STAGE 8: Creates a single star at center with random direction
*/
function createStar() {
// Calculate center of canvas
let centerX = width / 2;
let centerY = height / 2;
// Start near center with slight random offset
let x = centerX + random(-10, 10);
let y = centerY + random(-10, 10);
// Calculate direction from center
let angle = random(TWO_PI);
// Initial velocity (slow, will accelerate)
let speed = STAR_INITIAL_SPEED;
let vx = cos(angle) * speed;
let vy = sin(angle) * speed;
return {
x: x,
y: y,
vx: vx,
vy: vy,
size: STAR_MIN_SIZE,
brightness: random(50, 100)
};
}
/**
* STAGE 8: Updates stars with acceleration and size growth
*/
function updateAndDrawStars() {
for (let i = starfield.length - 1; i >= 0; i--) {
let star = starfield[i];
// Calculate distance from center
let centerX = width / 2;
let centerY = height / 2;
let distFromCenter = dist(star.x, star.y, centerX, centerY);
// Accelerate based on distance from center
star.vx *= STAR_ACCELERATION;
star.vy *= STAR_ACCELERATION;
// Update position
star.x += star.vx;
star.y += star.vy;
// Grow size based on distance from center
let maxDist = dist(0, 0, centerX, centerY);
let sizeProgress = distFromCenter / maxDist;
star.size = STAR_MIN_SIZE + (sizeProgress * STAR_SIZE_GROWTH);
star.size = constrain(star.size, STAR_MIN_SIZE, STAR_MAX_SIZE);
// Check if star is off screen
if (star.x < -10 || star.x > width + 10 ||
star.y < -10 || star.y > height + 10) {
// Remove this star and add new one at center
starfield.splice(i, 1);
starfield.push(createStar());
}
// Draw star...
}
}
1. Vector Mathematics:
2. Non-Linear Motion:
3. Perspective Scaling:
4. Array Management:
Problem Observed: "It looks like the stars are coming from more of the center of the screen and are moving faster than they should."
Requested Solution: "What if they were repopulated randomly throughout the whole canvas as smaller values and then more toward the edges growing bigger?"
Design Intent: Natural starfield where you're already "in" the star system, drifting through it, rather than having stars explode from a single point.
Core Changes: Stars spawn randomly across entire canvas and move away from center at reduced speed.
| Variable | Stage 8 | Stage 8a | Impact |
|---|---|---|---|
| STAR_INITIAL_SPEED | 0.5 | 0.2 | 60% slower start |
| STAR_ACCELERATION | 1.02 | 1.01 | Gentler acceleration |
| STAR_SIZE_GROWTH | 1.5 | 2.0 | More size variation |
/**
* STAGE 8a: Creates star at random position across entire canvas
* Stars spawn anywhere and move AWAY from center
*/
function createStar() {
let centerX = width / 2;
let centerY = height / 2;
// *** KEY CHANGE: Spawn at random position across canvas ***
let x = random(width);
let y = random(height);
// Calculate direction AWAY from center based on spawn position
let dx = x - centerX;
let dy = y - centerY;
let angle = atan2(dy, dx); // Angle from center to star
// Initial velocity (slower for smoother effect)
let speed = STAR_INITIAL_SPEED;
let vx = cos(angle) * speed;
let vy = sin(angle) * speed;
// *** Calculate initial size based on spawn position ***
// Stars closer to center start smaller
let distFromCenter = dist(x, y, centerX, centerY);
let maxDist = dist(0, 0, centerX, centerY);
let sizeProgress = distFromCenter / maxDist;
let initialSize = STAR_MIN_SIZE + (sizeProgress * STAR_SIZE_GROWTH * 0.5);
initialSize = constrain(initialSize, STAR_MIN_SIZE, STAR_MAX_SIZE);
return {
x: x,
y: y,
vx: vx,
vy: vy,
size: initialSize, // Pre-sized based on position
brightness: random(50, 100)
};
}
1. Distributed Spawning:
2. Direction Calculation:
3. Position-Based Sizing:
4. Slower Motion:
Feedback: "Yes, I wanted a more 'drifting through a natural star field look'. In version 8b, can we reduce the trail on the stars? If we can do that it will look more natural."
Challenge: We want text to keep its dramatic motion trails (Superman effect) while stars appear clean and sharp.
Design Goal: Crisp, clean stars that look like points of light in space, not blurry smears.
Solution: Apply TWO fade layers with different strengths before drawing stars.
// *** STAGE 8b: NEW CONFIGURATION ***
// Star trail reduction setting
// Higher values = less ghosting/trails on stars
const STAR_CLEAR_AMOUNT = 60; // 0-100 percentage
/**
* STAGE 8b: Enhanced drawBackgroundWithTrails()
* Applies dual fade layers for different effects on text vs stars
*/
function drawBackgroundWithTrails() {
if (TRAIL_ENABLED && TRAIL_FADE_METHOD === "overlay") {
// *** LAYER 1: Light fade for text trails ***
push();
noStroke();
let fadeAlpha = map(TRAIL_FADE_AMOUNT, 0, 255, 0, 100);
fill(0, 0, 0, fadeAlpha);
rect(0, 0, width, height);
pop();
// *** LAYER 2: Stronger fade for crisp stars ***
push();
noStroke();
fill(0, 0, 0, STAR_CLEAR_AMOUNT); // 60% opacity
rect(0, 0, width, height);
pop();
// Draw stars on top of both clearing layers
updateAndDrawStars();
} else {
background(0, 0, 0);
updateAndDrawStars();
}
}
How It Works:
Math Behind It:
Why This Works:
Configuration Tuning:
| Feature | Stage 8 | Stage 8a | Stage 8b |
|---|---|---|---|
| Star Spawn Location | Center Β± 10px | Random across canvas | Random across canvas |
| Initial Speed | 0.5 px/frame | 0.2 px/frame | 0.2 px/frame |
| Acceleration | 1.02x per frame | 1.01x per frame | 1.01x per frame |
| Size Growth | 1.5 factor | 2.0 factor | 2.0 factor |
| Star Trails | Heavy ghosting | Heavy ghosting | Minimal (crisp!) |
| Fade Layers | 1 layer | 1 layer | 2 layers (dual fade) |
| Visual Feel | Explosive | Natural drift | Natural + crisp |
| Best For | Dramatic effect | Smooth motion | Professional polish |
| Recommended? | β Too intense | β Good | β β Best! |
1. Iterative Design Process:
2. User-Centered Development:
3. Performance Optimization:
4. Code Organization:
1. Motion and Perception:
2. Selective Persistence:
3. Vector Mathematics:
4. Visual Tuning:
Task: Compare all three versions side-by-side
Task: Explore the configuration space
Task: Calculate star motion mathematically
Task: Experiment with different spawn strategies
Task: Understand the layering technique
// Experiment: Make layers visible
// Layer 1 in red, Layer 2 in blue
// Layer 1
fill(0, 100, 50, fadeAlpha); // Red tint
rect(0, 0, width, height);
// Layer 2
fill(240, 100, 50, STAR_CLEAR_AMOUNT); // Blue tint
rect(0, 0, width, height);
Observe how the layers stack and combine!
Technical Accomplishments:
Design Evolution:
Configuration Variables Added:
Files Created:
Key Learnings:
π The Stage 8 series demonstrates how professional software development works: build, test, gather feedback, refine, polish. Each iteration brought us closer to the ideal "flying through space" experience. The result is a visually stunning, technically sound, educationally rich feature! ββ¨
Stage 8 Series Status: β Complete and polished
Current Feature Set:
What's Next?
The foundation is solid! We're ready to explore new features in Stage 9. What would you like to add next? Sound effects? Color themes? Interactive controls? The possibilities are endless! π¬β¨