Created
September 15, 2024 23:25
-
-
Save justinledwards/7461f7d75ebc19969d7b988c6eb2ad86 to your computer and use it in GitHub Desktop.
prime fireworks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { writable } from 'svelte/store'; | |
| import { onMount } from 'svelte'; | |
| // Declare reactive stores | |
| const primesStore = writable([]); | |
| const progressStore = writable(0); | |
| const timeStore = writable(0); | |
| let isRunning = false; | |
| let startTime = 0; | |
| let algorithm = 'brute'; // Default algorithm | |
| // Local variables to store the values from subscriptions | |
| let primes = []; | |
| let progress = 0; | |
| let time = 0; | |
| // Subscribe to stores and update local variables | |
| primesStore.subscribe(value => primes = value); | |
| progressStore.subscribe(value => progress = value); | |
| timeStore.subscribe(value => time = value); | |
| // Function to check if a number is prime | |
| function isPrime(num) { | |
| if (num <= 1) return false; | |
| if (num === 2 || num === 3) return true; | |
| if (num % 2 === 0 || num % 3 === 0) return false; | |
| let sqrt = Math.sqrt(num); | |
| for (let i = 5; i <= sqrt; i += 6) { | |
| if (num % i === 0 || num % (i + 2) === 0) return false; | |
| } | |
| return true; | |
| } | |
| // Function to check primes using a sieve method | |
| function isPrimeSieve(num, primes) { | |
| if (num < 2) return false; | |
| for (let prime of primes) { | |
| if (prime * prime > num) break; | |
| if (num % prime === 0) return false; | |
| } | |
| return true; | |
| } | |
| // Function to generate primes | |
| function generatePrimes(algorithm, max = 100) { | |
| isRunning = true; | |
| startTime = performance.now(); | |
| let localPrimes = [2, 3]; // Start with known primes | |
| let delay = 0; | |
| for (let i = 5; i <= max; i += 2) { | |
| setTimeout(() => { | |
| if (algorithm === 'brute') { | |
| if (isPrime(i)) localPrimes.push(i); | |
| } else if (algorithm === 'sieve') { | |
| if (isPrimeSieve(i, localPrimes)) localPrimes.push(i); | |
| } | |
| // Update progress and time stores | |
| let progressValue = Math.round((i / max) * 100); | |
| progressStore.set(progressValue); // Set progress | |
| let elapsedTime = performance.now() - startTime; | |
| timeStore.set(elapsedTime.toFixed(2)); // Set elapsed time | |
| primesStore.set([...localPrimes]); // Update primes store | |
| }, delay); | |
| delay += 500; // Add 1 second delay between each prime animation | |
| } | |
| isRunning = false; | |
| } | |
| // Generate primes on component mount using the 'brute' algorithm | |
| onMount(() => { | |
| generatePrimes('brute'); | |
| }); | |
| // Generate random positions for each prime animation | |
| function randomDirection() { | |
| const angle = Math.random() * 360; | |
| const distance = Math.random() * 400 + 100; // Fly off a large distance | |
| const x = Math.cos(angle) * distance; | |
| const y = Math.sin(angle) * distance; | |
| return `translate(${x}px, ${y}px)`; | |
| } | |
| </script> | |
| <style> | |
| .prime-button { | |
| display: inline-block; | |
| margin: 5px; | |
| padding: 15px; | |
| background-color: var(--color, black); | |
| color: white; | |
| font-size: 2rem; | |
| border-radius: 50%; | |
| transition: transform 1s ease, opacity 1s ease; | |
| animation: grow-and-fly 1s ease-out forwards; | |
| position: absolute; | |
| } | |
| /* Obnoxious growth and fly-off animation */ | |
| @keyframes grow-and-fly { | |
| 0% { | |
| transform: scale(3) rotate(0deg) translate(0, 0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(20) rotate(180deg) var(--randomDirection); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| <h1>Prime Number Fireworks Show</h1> | |
| <p>Progress: {progress}%</p> | |
| <p>Time elapsed: {time} ms</p> | |
| <div class="fireworks"> | |
| {#each primes as prime, index (prime)} | |
| <div | |
| class="prime-button" | |
| style="--color: hsl({index * 30}, 100%, 50%); --randomDirection: {randomDirection()}" | |
| > | |
| {prime} | |
| </div> | |
| {/each} | |
| </div> | |
| <button on:click={() => { algorithm = 'sieve'; generatePrimes('sieve'); }}> | |
| Generate with Sieve Algorithm | |
| </button> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment