help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
star-pattern-maker
/
js
RSK World
star-pattern-maker
Star Pattern Maker - HTML5 Canvas + 3D Rendering + Physics Simulation + AI Patterns + Generative Audio + Modern UI + Glassmorphism Design
js
  • 3d-engine.js3.8 KB
  • ai-patterns.js5.6 KB
  • animations.js1.4 KB
  • audio.js1.3 KB
  • controls.js12.2 KB
  • export.js3.9 KB
  • filters.js3.5 KB
  • fractals.js3.5 KB
  • gallery.js2.5 KB
  • main.js1.9 KB
  • particles.js1.4 KB
  • physics.js1.7 KB
  • presets.js2.8 KB
  • randomizer.js1.4 KB
  • renderer.js7 KB
  • shaders.js6.5 KB
  • shapes.js1.7 KB
  • sound-gen.js4.4 KB
  • state.js1.9 KB
  • symmetry.js3.9 KB
  • themes.js1.4 KB
  • timeline.js4.2 KB
  • utils.js546 B
integration_test.goanimations.js
js/animations.js
Raw Download
Find: Go to:
/* V13 Animations Module - Complex Animation Sequences */
import { state } from './state.js';

// Animation state
let morphProgress = 0;
let morphDirection = 1;
let colorShiftHue = 0;

/**
 * Update all active animations
 */
export function updateAnimations(deltaTime = 16) {
    if (state.morphEnabled) {
        updateMorph();
    }

    if (state.colorShiftEnabled) {
        updateColorShift();
    }
}

/**
 * Morph Animation - Smooth spike count transitions
 */
function updateMorph() {
    morphProgress += morphDirection * 0.02;

    if (morphProgress >= 1) {
        morphProgress = 1;
        morphDirection = -1;
    } else if (morphProgress <= 0) {
        morphProgress = 0;
        morphDirection = 1;
    }

    // Interpolate between min and max spikes
    const minSpikes = 4;
    const maxSpikes = 12;
    state.spikes = Math.floor(minSpikes + (maxSpikes - minSpikes) * morphProgress);
}

/**
 * Color Shift - Smooth color transitions
 */
function updateColorShift() {
    colorShiftHue = (colorShiftHue + 1) % 360;

    // Update fill colors based on hue
    state.fillColor = `hsl(${colorShiftHue}, 70%, 50%)`;
    state.fillColor2 = `hsl(${(colorShiftHue + 120) % 360}, 70%, 50%)`;
}

/**
 * Reset all animation states
 */
export function resetAnimations() {
    morphProgress = 0;
    morphDirection = 1;
    colorShiftHue = 0;
}
61 lines•1.4 KB
javascript

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer