You are browsing as a guest. Sign up (or log in) to start making projects!

Starsimulation

  • 5 Devlogs
  • 26 Total hours

I built an interactive 2D particle simulator using HTML5 Canvas, Vanilla JavaScript, and CSS. It features a dynamic starfield that responds to clicks, touch inputs, and mouse movements with physical shockwaves, implosions, motion trails, and parallax depth. I also integrated real-time sound effects generated via the Web Audio API and added a live control panel to tweak physics and visual settings on the fly.

Ship #1 Pending review

I built an interactive 2D particle simulator using HTML5 Canvas, Vanilla JavaScript, and CSS. It features a dynamic starfield that responds to clicks, touch inputs, and mouse movements with physical shockwaves, implosions, motion trails, and parallax depth. I also integrated real-time sound effects generated via the Web Audio API and added a live control panel to tweak physics and visual settings on the fly.

  • 5 devlogs
  • 26h
Try project → See source code →
Open comments for this post

5h 45m 47s logged

In this update, the particle simulator received several key enhancements to boost visual depth and interactivity. Motion trails were introduced by rendering the canvas background with a semi-transparent alpha channel instead of a complete clear, leaving glowing paths behind moving particles. The physics engine now features a parallax depth effect where larger stars possess greater mass, causing them to react more dynamically to shockwaves than smaller background particles. Additionally, a new implosion mechanic was implemented—accessible via right-click or mobile touch controls—which draws particles inward rather than pushing them away, complete with customized boundary bouncing to keep stars on screen. To tie everything together, the Web Audio API synthesizer was upgraded to dynamically shift frequencies based on whether an explosion or an implosion is triggered, creating a fitting audio response for both actions.

0
0
32
Open comments for this post

5h 14m logged

I’ve continued developing Star Simulation. There are now a few sliders at the bottom. The first slider lets you zoom out—showing more or fewer stars depending on the setting. You can make the stars colorful or white and add a faint Milky Way effect in the background. I ran into major issues with the zoom function; at one point, it stopped working entirely, and the stars would simply move at random without any input.

0
0
38
Open comments for this post

5h 28m logged

The development of starsimulation is moving into the next phase. I’ve got the stars in place now—all colored, but with a feature where they change color whenever the game is reloaded. You can also adjust the speed at which the sound wave propagates, as well as the force with which it pushes the stars away. However, I ran into some major issues here: initially, the sound wave didn’t respond to the slider settings, and sometimes it would simply glide right through the colored stars instead of pushing them away.

0
0
36
Open comments for this post

4h 48m 14s logged

I’ve continued developing my project; there is now a proper shockwave that can be used to blast away the stars. Creating the shockwave itself only took about three hours, but the tricky part was splitting it into different rings. Right now, I have just one ring that actually pushes the stars away, while the other fingers are there purely for visual effect. It was actually quite difficult to implement, though, because at one point I ended up with a situation where either none of them did anything or all the rings pushed the stars away.

0
0
2
Open comments for this post

4h 49m 39s logged

I am developing “starsimulation.” Once it is finished, the program will allow you to click anywhere on the screen, triggering a shockwave that pushes the stars aside. So far, I have added the stars and ensured they make a bit of room around the mouse cursor. I struggled quite a bit to get the stars to spawn in different positions each time, rather than always appearing in the same spot.

0
0
5

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…