One day we got a message saying:
"@everyone I hereby challenge everyone using your own strategy
to program a lavalamp, deadline is next Sunday. you can use anything, programming language,
frameworks, programs"
And so everyone set off doing exactly that.
Discord message saying "@everyone I hereby challenge everyone using your own
strategy to program a lavalamp, deadline is next Sunday. you can use anything, programming language,
frameworks, programs"
Original idea sketch
Since my preffered language is JavaScript, I set off trying to make this using JavaScript and HTML5
Canvas.
I started off by making a simple lavalamp, moving simple circles up and down. But I wanted to make
it more interesting, so I added a metaball effect.
The idea came from a video from Default Cube, where he made a
2D metaball system using Blenders shader nodes.
| Step 1: | Make a circle. |
| Step 2: | Fill circle with RadialGradient. Lava color from center to transparent on the outside. |
| Step 3: | Scan each pixel and check if the transparency is above or below the threshold. |
| Step 4: | Set transparency to 100 when bellow threshold, set transparency to 0 when above threshold. |
Here you can see an example of the unprocessed circle, and how they collide.