Animated Constellation Effect

Hi everyone!

I’m trying to figure out how to use some copied and pasted js code inside a PlayCanvas project. I’ve looked around on the forums to try and find a solution, but am still lost on how to do this.

The code I am trying to get working in PlayCanvas is here:

It doesn’t seem as easy as just copying and pasting the js code, and I suspected as much, but I thought that since PlayCanvas used js that it might be possible with some minor modifications. Is there an easy way to get something like this working with minimal effort in PlayCanvas?

Thanks!!

1 Like

You can put pretty much any JS in a PlayCanvas app, there’s no magic. But there are a couple of issues with just doing what you tried.

First is that the canvas in the PlayCanvas web page is called “application-canvas” not “particle-canvas” but the second thing is that there’s a whole camera system overwriting that canvas every frame.

So if you were wanting that effect behind a game, then you could add a “particle-canvas” to the web page and then have the PlayCanvas background be transparent. Won’t look great if you move your camera though, because the background won’t move with it. So I guess you could use that thing and then render it on a 3d plane in the game.

What effect are you after?

1 Like

Hey whydoidoit, thanks for the quick response!

Interesting, I see. That’s exactly what I’m trying to do, have the effect in the background. But the camera is static so there is no movement in that regard.

So having the effect on a plane makes sense. I’m just not sure how to structure that code so it runs error free and renders on a plane.

Yeah let me think about that. I’d guess the easiest thing to do will be to have a transparent canvas in PlayCanvas and add another canvas to the HTML.

Do you have a project you can share. Might be easier if I looked at it

I have a project set up but it is literally just the js code in a script that is attached to the root. I was testing this in a new project to see if I could get it working on its own. It didn’t occur to me that this would need to be drawn onto a different canvas, I just assumed it would be able to render on the usual canvas inside the project. I’ve still got a bit to learn in that regard. :slight_smile:

https://playcanvas.com/project/504510/overview/constellation-test