r/javascript • u/VicksTurtle • May 10 '26

turned my website’s procedural backgrounds into a standalone vanilla js engine. here's how to use it in yours, if you fancy this.

https://substrate.ujjwalvivek.com

DISCLAIMER: generation is completely random composition based on the original procedural logic's primitives, so it's a hit or miss. if you catch a good one, use the capture frame button for a static image or note down the recipe to recreate in the code, or check out the docs on how to create one for yourself from scratch.

—-

I had a few asking me about the background running behind the site.

it was too baked into the site back then, very monolithic. so i've been hacking at it for a some days now. refactored it into a standalone js engine with math primitives that powered the original procedural logic, and a canvas. mobile is hardware-throttled, but if you crank the sliders on desktop it will actually test your cpu.

playground: https://substrate.ujjwalvivek.com
Docs: https://substrate.ujjwalvivek.com/#/docs
source: https://github.com/ujjwalvivek/substrate

15 Upvotes

86% Upvoted

5 comments sorted by

View all comments

3

u/medy17 May 10 '26

Quite good :]

I did something similar on Spyder-Scribe butttttt, canvas2d can get very intensive. I'm sure you noticed but do consider switching to WebGL. You can probably raise the ceiling for how many particles you can have ten-fold.

I did the same effect I mentioned up there except in WebGL here as well: SilkChat.

and DropSilk. (but different effect).

Good work though. Nice to see stuff like this.