Jump to content

Pixi.js Homepage: How did they do that?


Recommended Posts

Hello!  I'm new to the forum and new to Pixi.js as well.  I was working on learning about some of the features of the RPG Maker MV software and before I knew it I was going down the rabbit hole of plugins and the technology therein. I understand that the software makes use of pixi.js, and in doing my research I came across, of course, the PixiJS website: https://www.pixijs.com/.  On the homepage is a wonderful demo of clouds and what appears to be a nebular inkblot strewn across the screen and following the mouse arrow.  

I am desperately trying to understand the code for only the cloud feature.  I managed to get the JavaScript code and beautify it, but since it's minimized there are no real names for any of the variables or objects.  It's damn near impossible to read...  Code was too large to include as a snippet, so I attached it to the post.

I was wondering if anyone out there could help me interpret this code so that I can sort out just the cloud functionality. 

If anyone out there is worried about me "stealing" code my only aim is to play with the code and use it for a game that will probably never be released.  I want to extract the knowledge to come up with my own design.  That is all.  I tried to contact Pixijs.com directly, but haven't received any response...

Is there anyone out there who can help me identify where that code is and perhaps point out some of the more important aspects of that code? 
Or perhaps there is a tutorial out there that can describe the steps on implementing the same cloud effect? 
Or maybe point out where I can find a more readable version of the code?

I'm listening the Interstellar soundtrack right now, and it's making me feel that this post is much foreboding than it actually is...

Thanks for reading


Link to comment
Share on other sites

Yes, it's beautiful, smart, effortless digital design ... it looks so cool because the designer has an eye for awesome and a talent for visual story-telling.

15 hours ago, PoseidonKross said:

I was wondering if anyone out there could help me interpret this code so that I can sort out just the cloud functionality.

You might do better coming at it from the other direction?  For example first describe what you see on screen (e.g. cloud textures, scaled by distance, rotated and offset by sine wave, alpha by distance, masked with meta balls revealing nebulae textures underneath, using similar scaling technique to clouds, combined with filter to add distortion effect to edge of mask) ... then go about building it upwards piece by piece, bringing more detail to each observation.  Good news is you already know it's possible!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...